Where to from here??

Chapter 11

Designing the UserDesigning the User Interface layer

Overview• User interfaces handle inputs and outputs that

involve the system user directly– Design the inputs and outputs involved for each use case

• Interactions with the user and computer (termed p (Human-Computer interactions or HCI) can be modeled with dialog designs– Use metaphors, standard guidelines, and UML diagrams

to design user interfaces

• User-interface design occurs in each iteration– We should address only a few use cases at a time y

Topic Overview This topic will:

– examine differences between user interfaces and systemyinterfaces

• to a user the user interface is the system

– Describe:• the three principles of user-centered design

h h h f HCI• the three metaphors of HCI

– Discuss how visibility and affordance affect usabilityE i th li ti f i h ld l f di l– Examine the application of eight golden rules of dialog design when designing the user interfaceList some key principles used in Web design– List some key principles used in Web design

Identifying and Classifying Inputs and OutputsInputs and Outputs

Inputs and Outputs are defined early in order to:p p y– Document key inputs/outputs in business cases– Identify actorsy– Define triggers and responses in an event table– Identify the system boundary in use case diagrams– Design use case descriptions and system sequence

diagrams D i th i t f l– Design the user-interface layer

– Define messages in a use case realisation

User Versus System Interfaces

• System interface– Involves inputs and outputs that require minimal human

intervention

• User interface– Requires user interaction to produce inputs and outputsq p p p

Most analysts separate the design of system interfaces from user interfaces as each requires differentfrom user interfaces as each requires different expertise and technologies

Understanding the User Interface

To the end user, the user interface is the systemTo the end user, the user interface is the system– Physical devices, parts, or documents

P t l t i l di i h i d– Perceptual aspects including seeing, hearing, and touching

– Conceptual details about how to use the system• Referred to as the user’s model

Perceived by user sensesuser senses

(seen, heard etc)

PhysicalyArtifacts

manipulated by Conceptual

(abstract concepts and actions)

Figure 11-1Ph i l t l d t l t f th i t f

user and actions)

Physical, perceptual, and conceptual aspects of the user interface

Poor Interface DesignPsychological Responses of UsersPsychological Responses of Users

• Confusiont h d t il– e.g., too much detail on screens

• Panic– e.g., long delays/response timesg g y p– Unless messages inform users (Loading…Please

Wait) users are unsure of what is happening or if the system is OK?y

• Boredom– e.g., too much help detail for experienced users

l h h– slow progress through screen• Frustration

– Users cannot “undo” a change or “quit” the systemg q y– no system acknowledgment for a user’s change

Poor Interface DesignPhysical Responses of UsersPhysical Responses of Users

• Abandonment– use of the old system or other sources by managersuse of the old system or other sources by managers

• Incomplete Use of the System– use the easiest or most beneficial operations only

• Indirect Use of the System

– Intended users have an intermediary perform system activities

• Misuse of the System

– “Bend” the rules of the system– Users require some knowledge & may affect system integrity

Poor Interface DesignPhysical Responses of UsersPhysical Responses of Users

• Task Modification– Fit organisation tasks to suit the system– Stems from a rigid system design

• Compensatory Activity– Add tasks to suit the system inadequacies

• e.g., manual reformatting or sorting by clerical staff

• Direct Reprogramming– directly adapt system to suit specific needs

Good vs. Bad Design

• UI design is humbling– Your attempt may work right, look great– But … users may not be able to use it– Don’t take it personally! That’s why we iterate!

• It is often easy to detect a bad design – just try itIt is often easy to detect a bad design just try it with a few users

• Interface Hall of ShameInterface Hall of Shame– http://www.baddesigns.com/examples.html– http://www.masternewmedia.org/news/2005/04/17/bad_user_int

erface design can htmerface_design_can.htm

HCI as a Field of Study• HCI (human-computer interaction) studies the

system’s end users and their interactions withsystem s end users and their interactions with computers

• HCI evolved from human factor engineering• HCI evolved from human factor engineering (ergonomics)HCI i d d t l di i li• HCI is dependent on several disciplines– Art, Psychology, Sociology, Design, IT, ….etc…

• HIC is important, as we need to understand the behavior of the end users

Figure 11-2The fields contributing to the study of HCIThe fields contributing to the study of HCI

Cognitive Considerations

• From Don Norman’s book, The Psychology (Design) of Everyday Things– Affordances, Constraints, and MappingsAffordances, Constraints, and Mappings– Mental Models

Affordances• … are the perceived properties of an object that

determine how it can be used.b f i d b f hi– Knobs are for turning and buttons are for pushing etc.

• Some affordances are obvious, some are learned.,– Glass can be seen through.– Glass breaks easily.

• Sometimes visual plus physical feedback– e g a Floppy diske.g., a Floppy disk

• Is Rectangular – so we can’t insert it sideways• Has Tabs on the disk to prevent the drive from letting it be

f ll i d b k dfully inserted backwards

Affordances of a Teapot?

S h h ?Something wrong here?

Real vs. Perceived Affordances

“In product design, where one deals with real physical objects there canwith real, physical objects, there can

be both real and perceived ff d d th t d t baffordances, and the two need not be

the same”

Affordances in Screen-Based I t fInterfaces

• In graphical, screen-based interfaces, all that the designer g p ghas available is control over perceived affordances– Display screen, pointing device, selection buttons, keyboard

These afford touching pointing looking clicking on every pixel of– These afford touching, pointing, looking, clicking on every pixel of the display.

• There might be a gap between the real affordance and the• There might be a gap between the real affordance and the user perceived affordances– does the user perceive this affordance? does the user recognise that p g

clicking on the icon is a meaningful, useful action?

Transfer Effects• People transfer their expectations from

f ili bj t t i ilfamiliar objects to similar new ones– positive transfer: previous experience applies to

new situation– negative transfer: previous experience conflicts g p p

with new situation

Cultural Associations

red = danger, green = go

But these differ in different places, for example:C– Cars

• America: drive on the left• Britain: drive on the right• Britain: drive on the right

– FaucetsAmerica: co nter clock ise is on• America: counter-clockwise is on

• Britain: counter-clockwise is off

Mental Models

• People have mental models of how things work:– how does an ATM work?how does an ATM work?– how does your computer boot?

• This allows people to make predictionsabout how things will workg

Mental Models

Mental models are built from– affordances– constraints– mappings– positive transfer – cultural associations/standards– instructions– interactions

Mental models are often wrong!Mental models are often wrong!

We have mental models of how bicycles workWe can “simulate” this to know it won’t workWe can simulate this to know it won t work

A user feels comfortable when the mental model matches the real model!model matches the real model!

Metaphors for HCI• Desktop (Direct Manipulation)

– Interaction with a display screen that includes objects p y jcommonly found on a desk (trash, folders, calculator…)

• DocumentDocument– Involves browsing and entering data on electronic

documents using hypertext and hypermediaNote: the WWW is based on this metaphor– Note: the WWW is based on this metaphor

• DialogC i i i h h b– Carrying on a conversation with the computer by sending and receiving messages

Figure 11-3The desktop metaphor is based on direct manipulationThe desktop metaphor is based on direct manipulation,

shown on a display screen

Figure 11-4The document metaphor example with

h di i W b bhypermedia in a Web browser

Figure 11-5: The dialog metaphor expresses the concept that the user and the computer system interact by sending messages

Figure 11-6The user’s language g gand the computer’s language used to

i l t ilimplement an e-mail application based on the natural dialog between g

a manager and an assistant

The Desktop Metaphor ofDirect ManipulationDirect Manipulation

• Direct Engagementthe feeling of working directly on the task– the feeling of working directly on the task

• Direct ManipulationAn interface that behaves as though the interaction was with a real– An interface that behaves as though the interaction was with a real-world object rather than with an abstract system

• Central ideas– visibility of the objects of interest– rapid, reversible, incremental actions

i l i b i ti d i– manipulation by pointing and moving– immediate and continuous display of results

Direct ManipulationDirect ManipulationConsequences

– Items can be represented as icons– Items can be “picked up” and “moved” onItems can be picked up and moved on

a surfaceItems can be “thrown out” into a trash can– Items can be thrown out into a trash can

– Items can be “copied”

Identify the mis-matched metaphors(from the Interface Hall of Shame)

The classic (from the mac desktop)T j t di k d it t th t h– To eject a disk you drag it to the trashcan

Dialog Designs• Inputs and outputs are obtained from use cases and scenarios

M h ld fl h ll f h• Menus should reflect the overall system structure from the point of view of the user

Each subsystem might be represented as a menu with each menu option– Each subsystem might be represented as a menu, with each menu option representing a use case

– Menus should also include options that are not based on use cases (such as system controls, user help)

– Menus might employ hotkeys (such as Control and C to Copy) to reflect different user’s expertisedifferent user s expertise

– Some Menu options might also be available from controls on the form/screen, for example F1, a Help Office Assistant, etc

Figure 11-8g

One overall menu hierarchy design for the RMO customerdesign for the RMO customer support system (not all users will have all of these options

available)available)

Dialogs and Storyboards

• There are several options for documenting dialogs. S l iSome general options are:– List the key steps for each dialog, including descriptions of

h h d h d hwhat the user and the computer do at each step

– Write out a human and computer conversation • Used for complicated or uncertain requests

– Use storyboarding to show a sequence of sketches of a display screen during a dialog

• Initial design can be a general framework

Figure 11-9Example of aExample of a

Storyboard for the DownTown Videos rent videos dialog

Dialog Documentation provided by UML Diagrams

• Use case descriptions show a list of steps followed asUse case descriptions show a list of steps followed as a user and computer interact

• Activity diagrams document a user computer dialog• Activity diagrams document a user-computer dialog for each use caseSSD d ib ti l t t• SSDs describe sequential actor-computer messages

• Class diagrams add user-interface classes for forms• Detailed sequence diagrams show users interacting

with specific objects in formsp j

Figure 11-10: An example of a sequence diagram for the RMO Look up item availability dialog with the ProductQueryForm added

Figure 11-11A class diagram showing interface classes

making up the ProductQueryFormmaking up the ProductQueryForm

Figure 11-12: An example of a sequence diagram showing specific interface objects making up theFigure 11-12: An example of a sequence diagram showing specific interface objects making up the ProductQueryForm for the Look up item availability dialog (not all problem domain objects are shown)

Input Design QuestionsWill the input data be:Will the input data be:

• Accurate?– Can it be completed correctly by a novice?

• Effective?Effective?– Does the data serve an effective purpose?

• is it really information?• is it really information?

• Consistent?– Is the data grouping the same from

application to application?

Input DesignWill the input screen be:Will the input screen be:

Simple?Simple?• Are the screens uncluttered?

t h i• too many menu choices• too many control options

– Is the language clear?– Is the language clear?– Are the directions concise?

Are there clear Error Messages? Help– Are there clear Error Messages? Help Messages?

Input DesignWill the input screen be:Will the input screen be:

Easy to use?– Is there sufficient explanation or direction?

• Help, Error Messages

A h i f S i li d K l d ?– Are there any assumptions of Specialised Knowledge?• Help, Error Messages

Are there consistent controls?– Are there consistent controls?• Exit, Main Menu, Help

– Are there consistent areas?Are there consistent areas?

– Is there consistency of purpose?

Is there a focus line or flow for the user to follow?– Is there a focus line or flow for the user to follow?

Guidelines for Design

• Metaphors• use our knowledge of the familiar and concrete to represent

abstract concepts• need not be literalneed not be literal• have limitations that must be understood

• Provide a good conceptual modelov de a good co ceptua ode– allows users to predict consequences of actions– communicated through the image of the systemcommunicated through the image of the system

Guidelines for Design• Make things visible

relations between user’s intentions required– relations between user s intentions, required actions, and results should be

• sensible• sensible• consistent• meaningful (non-arbitrary)meaningful (non arbitrary)

– make use of visible affordances, mappings, and constraintsconstraints

– remind the user of what can be done and how to do itdo it

Design Guidelines• Good Representations

• capture essential elements of the event / world• deliberately leave out / mute the irrelevant• appropriate for the user, their task, and their interpretation

• There are LOTS of them– Based on common sense and experience

• Not necessarily proven

– Often conflict with one another– Often don’t say HOW to implement them

Two Key Principles

Two key principles (from HCI researcher Donald Norman)Vi ibilit– Visibility

• All controls should be visible and provide immediate feedbackto the user

• Corollary: – A control should not be visible if it is intended to be unavailable

to the user or– it should be indicated as unavailable, e.g., by greying out a data

input textbox– Affordance

• The appearance of any control should suggest its functionality

Figure 11-7The eight golden rules for designing interactive interfaces

These need to be known and appliedThese need to be known and applied

Rule 1: Be Consistent• Consistency of effects

same words commands actions will always have– same words, commands, actions will always have the same effect in equivalent situations

• Consistency of language and graphics• Consistency of language and graphics– same information/controls in same location on all

screens / dialog boxes – same visual appearance across the system

• Consistency of inputy p– consistent syntax across complete system

Rule 1: Be ConsistentThese are labels with a raised appearance.a sed appea a ce

Is it any surprise that people try and click on them?

Rule 2: Provide shortcutsExperienced users should be able to perform frequently

used operations quickly• Strategies:

– keyboard and mouse accelerators• abbreviations• command completion• menu shortcuts• function keys• double clicking vs menu selection

– type-ahead (entering input before the system is ready for it) yp ( g p y y )navigation jumps

• e.g., going to location directly, and avoiding intermediate nodes

Rule 3: Provide feedback• Continuously inform the user about

h t it i d i– what it is doing– how it is interpreting the user’s input

h ld l b f h i i– user should always be aware of what is going onTime for

coffee

> DoitWhat’s

it doing?

> DoitThis will take5 minutes...

coffee.

Rule 3: Provide feedback

• User feedback should be as specific as possible, based on user’s input

• Feedback is best when it is within the user’sFeedback is best when it is within the user s context of the action

Rule 3: Provide feedback

• Response time– Affects how users perceive delays:

• <0.1 second (max): perceived as “instantaneous”( ) p• 0.1 to 1 seconds (max): the user’s flow of thought

stays uninterrupted, but a delay is noticed• 1 to 10 seconds: approaching the limit for keeping a

user’s attention focused on the dialog• >10 seconds: user will want to perform other tasks

while waiting

Rule 4: Provide clearly marked exitsy• Users don’t like to feel trapped by the computer!

h ld ff t f it ti– should offer an easy way out of as many situations as possible

• Strategies:– Cancel button (for dialogs waiting for user input)( g g p )– Universal Undo (can get back to previous state)– Interrupt (especially for lengthy operations)– Quit (for leaving the program at any time) – Defaults (for restoring a property sheet)

Rule 8: Minimise user’s memory loadRule 8: Minimise user s memory load• Computers good at remembering things,

people aren’t!

i i ll• Promote recognition over recall– menus, icons, choice dialog boxes versus g

command lines, field formats– relies on visibility of objects to the user (butrelies on visibility of objects to the user (but

less is more!)

Rule 8: Minimise user’s memory load

• Describe required input format, use l id d f lt lexamples, provide default values

• Small number of rules applied universally– generic commandsg

• same command can be applied to all interface objects

• copy, cut, paste, drag ’n drop, ... for characters, words paragraphs circles fileswords, paragraphs, circles, files

Rule 8: Minimize user’s memory loady

Describe required input format, use l d d f l lexamples, provide default values

User-Centered Design• Technique that places the user as the central focus

for the development process. It:p p– Focuses early on users and their work

• Understand user styles and preferences

– Uses iterative development• Continually return to the user requirements and evaluate the

system• Evaluates designs iteratively to ensure usability

Ease of learning and use is dependent on the type of user– Ease of learning and use is dependent on the type of user

User-centered Design

Standard Approaches:N d– Needs assessment

– Task analysis– Initial design

N d t t h iNeeds assessment techniques:– Observation– Interviews– Study existing successful designs

User-Centered Design Overviewg• Needs assessment

– Find out• who the users are• what their goals are• what tasks they need to performy p

• Task Analysis• Characterise what steps users need to take

C t i f t l• Create scenarios of actual use• Decide which users and tasks to support

• Then Design based on thisg• Evaluation

– Test the interface by “walking through” tasks– Obvious but do this before implementation

Needs Assessment QuestionsQ• Who is going to use the system?• What tasks do they now perform?• What tasks are desired?• What tasks are desired?• How are the tasks learned?• Where are the tasks performed?• What is the relationship between the• What is the relationship between the

user and the data?

Needs Assessment QuestionsQ• What other tools does the user have?• How do users communicate with each

other?other?• How often are the tasks performed?• What are the (time) constraints on the

task?task?•• What happens when things go wrong?What happens when things go wrong?

User-Centered Design• Interview

– Prepare a list of questions about how people do their tasksPrepare a list of questions about how people do their tasks currently and what extras they would like to have.

– Interview at least three people – Ask them what, if anything, must be in the system in order

for them to prefer it over the current systemExamine existing interfaces for their goal and see how they– Examine existing interfaces for their goal and see how they handle the necessary tasks.

Task Analysis

Characterise what happens when users f i l kperform typical tasks

• Tools:• Tools:– Prepare a table of user communities

versus user tasksversus user tasks• Who versus What

table of task sequences– table of task sequences– flowchart or transition diagram

id d i i i– videotape depicting scenario

How Often Do Users Perform the Tasks?

• Frequent users remember more details• Frequent users remember more details• Infrequent users may need more prompting• Which function is performed

– most frequently?most frequently?– by which users?

• Optimize the system for tasks that will• Optimize the system for tasks that will improve the user’s perception of its performanceperformance

Think Outside-inI idversus Inside-out

• Do not expect others to think or behaveDo not expect others to think or behave – as you do

as you would like them to– as you would like them to• Assess the meaning of the displays and

t l b d h t bcontrols based on what a user can be assumed to know, not based on what youkknow

• Prevent the designer / programmer from g p gimagining they are the user

Next Step-Rapid Prototypingp p yp g• Build a mock-up of the designp g• Use low-fidelity techniques

k t h– paper sketches– cut, copy, paste– video segments

• Use Interactive prototyping toolsUse Interactive prototyping tools– Visual Basic, HyperCard, Director, Flash, etc.

Why Do We Prototype?• To get feedback on our design faster

– saves money• To experiment with alternative designs• To experiment with alternative designs• To fix problems before code is written• To keep the design centered on the user

(user-centric)(user centric)

Why Use Prototypes?• Traditional methods take too long

k h l i– sketches -> prototype -> evaluate -> iterate

• Can simulate the prototype– sketches -> evaluate -> iterate– sketches act as prototypes

• designer “plays computer”• other design team members observe & record

i l i kill• Low implementation skills– allows non-programmers to participate

Summary

• To the user, the user interface is the system• Design the interaction between the user and

the computer (HCI)p ( )• Define an overall user-interface concept for

the system early in the projectthe system early in the project– Focus on users and their work

E bilit– Ensure usability– Apply iterative development

Summary (continued)• Metaphors are used to describe the user interface

– Dialog• Emphasizes the interaction between the user and computer

– Document– DesktopDesktop

• Interface design guidelines and standards– Norman’s visibility and affordance guidelines– Shneiderman’s eight golden rules

• Dialog designId tif di l b d– Identify dialogs based on use cases