Design Guidelines (cont.)

Marti Hearst (UCB SIMS)SIMS 213, UI Design &

DevelopmentFebruary 18, 1999

Usability Goals

Usefulness Effectiveness Learnability Likability

Learnability Flexibility Robustness

Dix et al.Chignell

Shneiderman

Learnability Efficiency Low error rate Memorability Satisfaction These are not at entirely

comparable levels of granularity.

Design Guidelinesin more detail

Learnability– predictability– visibility– familiarity – generalizability– consistency

Flexibility– customibility

Robustness– recoverability– responsiveness– task conformance

Consistency Shortcuts (for experts) Feedback Closure Error prevention Easy reversal of actions User control Low memory burden

Dix et al.

Shneiderman (8 design rules)

Guideline Mania

Lots of things to worry about Which are most critical depend on

the application Some are easier to evaluate

Today

More on design guidelines– Revisit screen layout later– In order to discuss

»Consistency, Feedback, Error reduction

– we will back up and discuss ... High-level interaction models

– Norman’s action model– Foley and van Dam’s four-level model

Norman’s Action Cycle

Human action has two aspects– execution and evaluation

Execution: doing something Evaluation: comparison of what

happened to what was desired

Norman’s Action Cycle Execution has three stages:

– Start with a goal– Translate into an intention– Translate into a sequence of actions

Now execute the actions Evaluation has three stages:

– Perceive world– Interpret what was perceived– Compare with respect to original

intentions

Action Cycle

Goals

EvaluationExecution

The World

Action Cycle

Goals

EvaluationEvaluation of interpretations

Interpreting the perception

Perceiving the state of the world

ExecutionIntention to act

Sequence of actions

Execution of seq uence of actions

The World

Gulf of Evaluation

The amount of effort a person must exert to interpret – the physical state of the system– how well the expectations and

intentions have been met Want a small gulf!

Gulf of Execution

The difference between the intentions of the users and what the system allows them to do– How directly can the actions be

accomplished?»threading movie projector vs. VCR»with computer interfaces?

Want a small gulf!

Four-level model

A way of thinking of different aspects of the interface

Designers are to work from top to bottom– Conceptual level– Semantic level– Syntactic level– Lexical level

Four-level model

Conceptual level– The user’s mental model of the

interactive system.– Example

» line editors vs. screen editors

Four-level model

Semantic level– The meanings conveyed by the user’s

input and by the computer’s output– Example

»the meaning of the delete paragraph command

»the meanings of the copy and paste commands

Four-level model Syntactic level

– How the units that convey the semantics are assembled in order to instruct the computer to perform a task

– Example» the command format: first keyword type, then

actual keyword find pa einstein and tw relativity

»first the user selects the paragraph to copy, then issues the copy command, then selects the location for the paste operation, then issues the paste command

Four-level model

Lexical level– The precise mechanisms with which

the user specifies the syntactic level.– Example

»Control-D means backspace»clicking within the form places the curser

in the form»select an object by placing the cursor

over the object and dragging across the object.

Consistency

Consistency: be systematic – lexical– syntactic– semantic levels

Makes things easier to remember Aids in generalizability Helps reduce potential for error

Adapted from slide by James Landay

Lexical Consistency

Coding consistent with common usage– red = bad, green = good (*)– left = less, right = more

Consistent abbreviation rules– equal length or first set of unambiguous

chars. Mnemonic names rather than codes Devices used same way in all phases

– character delete key is always the same

Adapted from slide by James Landay

Syntactic Consistency

Error messages placed at same (logical) place

Always give command first -- or last

Menu items always at same place in menu (muscle memory)

Adapted from slide by James Landay

Semantic Consistency

Global commands always available– Help– Abort (command underway)– Undo (completed command)

Operations valid on all reasonable objects– if object of class “X” can be deleted,

so can object of class “Y”

Adapted from slide by James Landay

Inconsistency CMS - XEDIT Editor

– in once context, D10 means “down 10 lines”– in another context it means “delete 10 lines”

Current selection in graphics editor– create a new object, it becomes CS– duplicate an object, the original remains CS

Macintosh dragging file operations?– folder on same disk vs. folder on different disk

– file to trashcan vs. disk to trashcan

Adapted from slide by James Landay

Inconsistency Don’t always be consistent (Grudin)

– inconsistency at one level may be consistent at another

– moving icon to file cabinet, mailbox, or trash causes icon to disappear (Xerox Star) »choices for when dragging file icon to printer

icon: delete the icon (and thus the file) disappears “in” the printer from where it can be

retrieved return icon to original location

Adapted from slide by James Landay

Provide Feedback Feedback: give each action an

immediate and obvious effect Feedback in terms of

– lexical

– syntactic

– semantic levels

Importance of visibility for feedback– less burden on memory

– help user monitor current state

Adapted from slide by James Landay

Lexical Feedback

Feedback on lexical level:– Cursor movement– Keyboard echo– Selection highlighting

Syntactic Feedback

Feedback on Syntactic level– help systems that indicate which

words have help available while the user is typing

– menus that gray-out operations that are not available given the current state

Adapted from slide by James Landay

Semantic Feedback Feedback on Semantic Level

– command understood

» restate command

– Command underway (intermediate FB)

»count-down or progress bars

– Command completed

»prompt for next command

All three are not always necessary

Adapted from slide by James Landay

Visibility of Feedback

Placement– Where the eyes are

» insertion point»screen cursor

Visibility instead of memory– why not display title of current song

on CD players?– why not show name of tv show when

channel is switched?

Audio Feedback On physical artifacts

– click when bolt is secured– rattle of unsecured car door– sound of a well-working zipper– vaccuum cleaner increase in pitch as the bag

fills– examples on computer systems?

What are the potential problems?– annoying

» media lab videotape discussed “peripheral” or “ambient” interfaces

– non-private

Errors

Need to design for human capabilities and traits– Human speech is riddled with “errors”

Reduce Gulfs of Execution and Evaluation!

Designing for Error

Norman on designing for error:– Understand the causes of error and design

to minimize these causes– Make it possible to reverse actions– Make it hard to do non-reversable actions– Make it easy to discover the errors that do

occur– Change attitute towards errors:

» A user is attempting to do a task, getting there by

imperfect approximations; actions are approximations to what is actually desired.

Error Types

Forgetting– lock keys in car, don’t save file

Modes– car in drive vs. reverse– digital watch in stopwatch mode

rather than normal display mode Association

– looking at room number, dial that instead of phone number

Error Types Capture errors

– (commonly done action captures the current intentions)

– Sunday, driving to store, end up at work

– Counting papers, from 1 … 9, 10, jack, queen, king

Discrimination– hang up phone on wrong receiver– read 0 instead of O

Reducing Errors

Design in constraints– Can’t activate toaster unless it is

plugged in– Can’t exit program without saving

files– Grey out inappropriate commands

»Flexibility vs. Robustness tradeoff

Reminding devices– place keys on papers, book by door

Adapted from slide by James Landay

Error Correction

Lexical– typing mistakes (automatic in MS Word)

Syntactic– re-specify just the parameter in error, or– restart at beginning of command

Semantic– abort operation underway– undo previous command(s)

Error Correction

Things not to do– Accusatory error messages– Lots of simultaneous conflicting

warning messages– Rely on a statement somewhere in

the manual of what is correct and incorrect

Adapted from slide by James Landay

Why are Guidelines Insufficient?

Too specific and/or too general– may be huge!

Standard does not address all issues– Mac standard UI could be all dialog

boxes and menus

Adapted from slide by James Landay

Summary

UIs are hard to design Guidelines can give us general

principles to follow Guidelines fail in that they can be

hard to apply – too specific or too general

»especially true for style guides