1 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved....

1 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved.

User-Interface DesignIS301 – Software Engineering

Lecture #20 – 2004-10-15M. E. Kabay, PhD, CISSP

Dept of Computer Information SystemsNorwich University

[email protected]

mailto:[email protected]


Topics

IntroductionUser-Interface Design PrinciplesUser Interaction Information PresentationUser Support


User Interface (UI)

UI critically important aspect of software engineeringSystem users often judge system by

interface rather than its functionalityWhy?

Poorly-designed interface can cause users to make catastrophic errors

How?Poor UI design discourages use of software


Graphical UIs (GUIs)

Some old systems still use command-line or text-based UIs

Most systems today use GUIsWindows: simultaneous viewsIcons: data, functionsMenus: choice of options, memory aidsPointing: trackball, touchpad, mouse, eyeGraphics: charts, tables, diagrams

Static or dynamic


Examples of GUIs (1)The First Commercial GUI:

“Xerox’s Star workstation was the first commercial implementation of the graphical user interface. The Star was introduced in 1981 and was the inspiration for the Mac and all the other GUIs that followed.”

This and following screen shots are from the Computer Desktop Encyclopedia.

Used with permission.

http://www.computerlanguage.com


Examples of GUIs (2)

Macintosh GUI


Examples of GUIs (3)


GUI Advantages

Easy to learn and useSave time in trainingApply skills to new programs

Fast task-switchingUse different applications concurrentlyInformation can remain visible in its own

windowFast, full-screen interaction possible

Immediate access to anywhere on screenMake full use of available “real-estate”Supports multi-screen capabilities


Topics



User-Centered Design

This chapter / lecture focus:Design philosophy and issuesNot on implementation of UIs

User-centered designNeeds of user are paramountUsers involved in design process

Design UI through prototypes


UI Design Process

Executableprototype

Designprototype

Produce paper-based design

prototype

Producedynamic design

prototype

Evaluate designwith end-users

Implementfinal userinterface

Evaluate designwith end-users

Analyse andunderstand user

activities


UI Design Principles

Determinants: learn about system users’NeedsExperienceCapabilities

Constraints: physical and mental limitationsLimited short-term memory

7±2 concepts in mind at one timeMistakes are normal and expectedPeople fall into habits


Design Principles: Overview

User familiarityConsistencyMinimal surpriseRecoverabilityUser guidanceUser diversity


User Familiarity

Interface should be based on user-oriented terms and concepts

Avoid using computer conceptsE.g., office system:

Use “letters, documents, folders” etc.Don’t use “directories, file identifiers” etc.


Consistency

Display appropriate level of consistencyCommands and menus should have same

Format / appearanceCommand punctuationLayoutAbbreviations / keyboard shortcuts

Error-messagesSame styles / formats from place to placeSame location on screen when they appear


Minimal Surprise

Extend consistency to commands or actionsIf one command operates in known way,

User should be able to predict operation of comparable commands

Put the default choice in the same place or sequence on the screen

E.g.,Make either YES or NO the default for all

commandsIf keeping a previous file version is default,

then don’t make one command delete previous version by default


Recoverability

Resilience to user errorsAllow user to recover from errors

Confirmation of destructive actions‘Soft' deletes . . . .Undo / redo facility


User Guidance (1)

Help in same place(s) on all screensContext-sensitiveIndexTopicalSmart questions

On-line manualsTutorials . . . .


User Guidance (2)


User Diversity

Plan for different types of userExperience

Casual/novice vs experiencedEase-of-use vs efficiency & speed

Physical disabilitiesPoor eyesight

Configurable font sizesBlindness

Automated reading programsUS: Americans with Disabilities Act


US ADA & GUI Design

Americans with Disabilities Act of 1992Widespread implications for employment,

architectural design and servicesApplies to private employers with >15

employees, state and local governments, employment agencies & labor unions

Web designers have been grappling with requirements

Resourceshttp://consumerlawpage.com/brochure/disab.shtmlhttp://academic.evergreen.edu/g/grovesr/acc_class/resources.html

http://consumerlawpage.com/brochure/disab.shtml

http://academic.evergreen.edu/g/grovesr/acc_class/resources.html

http://academic.evergreen.edu/g/grovesr/acc_class/resources.html


Topics



User-System Interaction

Key issues Info from user to computer system? Info from computer system to user?UI metaphor helps to make sense of functions

“Desktop” for operating system“Space invaders game” for typing tutor“3D universe” for dataspace (e.g., TRON,

Matrix, other sci-fi movies)


Interaction Styles

Direct manipulationMenu selectionForm fill-inCommand languageNatural language

Advantages & Disadvantages

Interactionstyle

Main advantages Main disadvantages Applicationexamples

Directmanipulation

Fast and intuitiveinteractionEasy to learn

May be hard toimplementOnly suitable wherethere is a visualmetaphor for tasksand objects

Video gamesCAD systems

Menuselection

Avoids user errorLittle typingrequired

Slow for experiencedusersCan become complexif many menu options

Most general-purpose systems

Form fill-in Simple data entryEasy to learn

Takes up a lot ofscreen space

Stock control,Personal loanprocessing

Commandlanguage

Powerful andflexible

Hard to learnPoor errormanagement

Operating systems,Library informationretrieval systems

Naturallanguage

Accessible tocasual usersEasily extended

Requires more typingNatural languageunderstandingsystems are unreliable

Timetable systemsWWW informationretrieval systems


Direct Manipulation: Example – PowerPoint

Open PowerPoint and study how objects can be GrownShrunkFlippedRotatedCopiedColored. . . .

Through direct manipulation using “tools”


Menu Systems

Select from lists of possibilitiesPoint and click with mouseUse cursor keysType name of selectionTouchscreens

Usually integrate automated help facilitiesHelp cursorPop-ups ?

Pop-uptext


Control Panel Interface

Title

Method

Type

Selection

NODE LINKS FONT LABEL EDIT

JSD. example

JSD

Network

Process

Units

Reduce

cm

Full

OUIT

PRINT

Grid Busy


Menu Systems: Benefits

Easy to learn – no memorizationReduced typing – faster data entryUser errors trapped by interfaceContext-dependent help


Menu Systems: Problems

Best for small # of choicesMay have to provide sub-menus for

complex situationsAND and OR relations hard to representSlower than command language or keyboard

shortcutsSo provide those as options


Form-Based Interface

Title

Author

Publisher

Edition

Classification

Date ofpurchase

ISBN

Price

Publicationdate

Number ofcopies

Loanstatus

Orderstatus

NEW BOOK


Command Interfaces

User types commands to give instructions to system e.g. UNIX

May be implemented using cheap terminals.Easy to process using compiler techniquesCommands of arbitrary complexity can be

created by command combinationConcise interfaces requiring minimal typing

can be created


Command Interfaces: Problems

Users have to learn and remember command language. Unsuitable for occasional/casual users

Need to be able to typeUsers make errors in commands

Need good error detection and recovery


Natural Language Interfaces

User types command in natural language. Vocabulary usually limitedConfined to specific application domains;

e.g.,Timetable enquiriesMedical systems

Experienced users: too much typingSee ASK JEEVES


Ask Jeeves


Multiple UIs

Operating system

GUImanager

Graphical userinterface

Commandlanguage

interpreter

Commandlanguageinterface


Topics



Information Presentation

Information tobe displayed

Presentationsoftware

Display

{numeric, textual} X {static, dynamic}Information may be


Information Display Factors

Questions to consider in designing interfaceIs user interested in precise information or

data relationships?How quickly do information values

change?Must change be indicated immediately?Must user take some action in response to

change?Is there a direct manipulation interface?Is information textual or numeric? Are relative values important?


Data VisualizationConcerned with techniques for displaying large

amounts of informationVisualization can reveal relationships between

entities and trends in dataExamples of data visualization applications:

Weather information collected from number of sources

State of telephone network as linked set of nodes

Chemical plant visualized by showing pressures and temperatures in linked set of tanks and pipes

Model of molecule displayed in 3 dimensionsWeb pages displayed as hyperbolic tree


Color Displays

Color adds extra dimension to interface and can help user understand complex information structures

Can be used to highlight exceptional eventsCommon mistakes in use of color in

interface design include:Use of color to communicate non-obvious

specific meaningE.g., red may mean “hot” to a chemist

but “forbidden” to a driverOver-use of color in display – confusing


Guidelines for Effective Use of Color in DisplaysDon't use too many colors (max 4-5 in

window)Don’t use colors as simply as decorationChange of color must imply change of stateUse color coding to support tasksAllow users to control color codingDesign for monochrome then add colorUse color coding consistentlyAvoid color pairings which clashUse color change to show status changeBe aware that color displays usually lower

resolutionDon’t make large areas of screen BLINK

Can cause

seizures


Topics



User Support

User guidance includesOn-line helpError messagesManualsTutorials

Integrate help with interface: context-sensitive

Integrate help and error messagesEasy to get explanation, tips, suggestions

Advanced help keeps user profile


Help and Message System

Messagepresentation

system

Error messagetexts

Helpframes

Error messagesystem

Helpinterface

Application


Error MessagesBad error messages can lead users to

reject entire systemConsider background and experience of users in

designing messagesMessages should be

PoliteConciseConsistentConstructive

Avoid classic errorsNever be rudeDon’t try to be funnyDon’t condescend to your users


Design Factors in Message Wording

Context-sensitiveExperience – offer verbose / terse modesSkill level – offer beginners / expert modesStyle – positive, active (never rude, not funny)Culture – apply localization to avoid offending

people in different cultures


System and User-Oriented Error Messages

System-oriented messageUseful for technical staffDetail internal states of systemGood for diagnostics and repairUsually complete gibberish for users

User-oriented messageUseful for user to fix a problemReassuringGive instructions on whom to contact if

appropriate


A Friendly, Helpful Message System

Encourages more positive attitude towards the operating system, the computer and operations:

ENTER USER PASSWORD:vs

Please enter user password:

UNKNOWN SYNTAXvs

Pardon?

CAN'T INITIATE NEW SESSIONS NOWvs

System Alpha not yet available--try again later


A Friendly, Helpful Message System (cont'd)

If possible, show what can be done to fix problem Explain WHO can do WHAT to help user in trouble Include telephone numbers

OUT OF DISC SPACE (FSERR 46).vs

OUT OF DISC SPACE (FSERR 46).Check :FREE for free space

Verify :BUILD or :FILE commands for typing error;use 32 extents if possible; check device class;call Ramesh @ (514) 234-5678 X.216 for help


Gives operators critical information fastEspecially important when user gets system

information

DCU LOGGING IN PROGRESS (THIS IS NORMAL)

MAKE LDEV 3 ONLINE RIGHT NOW: PRESS UNLOAD/LOAD

STREAMS FACILITY NOT ENABLED

Call operations for :STREAMS 10

A Friendly, Helpful Message System (cont'd)


Help System Design

Help? means ‘Help, I want information”Help! means “HELP. I'm in trouble”Both of these requirements have to be taken

into account in help system designDifferent facilities in help system may be

required


HOMEWORK

REQUIRED:By Friday 22 Oct 2004For 24 points,

16.3, 16.6, 16.7, 16.11 (@6)OPTIONAL:

By Monday 1 Nov 2004For up to 10 extra points, answer any or all

of the following questions:16.1 (@4), 16.2 (@2), 16.5 (@4)


DISCUSSION

Date post:	26-Mar-2015
Category:	Documents
Upload:	tyler-patton
View:	213 times
Download:	0 times

1 Copyright © 2004 Ian Sommerville. NU-specific content © 2004 M. E. Kabay. All rights reserved....

Documents