design guidelines cont n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Design Guidelines (cont.) PowerPoint Presentation
Download Presentation
Design Guidelines (cont.)

Loading in 2 Seconds...

play fullscreen
1 / 37

Design Guidelines (cont.) - PowerPoint PPT Presentation


  • 126 Views
  • Uploaded on

Design Guidelines (cont.). Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development February 18, 1999. Usability Goals. Chignell. Dix et al. Usefulness Effectiveness Learnability Likability. Learnability Flexibility Robustness. Shneiderman. Learnability Efficiency Low error rate

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Design Guidelines (cont.)' - zenia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
design guidelines cont

Design Guidelines (cont.)

Marti Hearst (UCB SIMS)

SIMS 213, UI Design & Development

February 18, 1999

usability goals
Usability Goals

Chignell

Dix et al.

  • Usefulness
  • Effectiveness
  • Learnability
  • Likability
  • Learnability
  • Flexibility
  • Robustness

Shneiderman

  • Learnability
  • Efficiency
  • Low error rate
  • Memorability
  • Satisfaction

These are not at entirely

comparable levels of granularity.

design guidelines in more detail
Design Guidelinesin more detail

Dix et al.

Shneiderman (8 design rules)

  • Consistency
  • Shortcuts (for experts)
  • Feedback
  • Closure
  • Error prevention
  • Easy reversal of actions
  • User control
  • Low memory burden
  • Learnability
    • predictability
    • visibility
    • familiarity
    • generalizability
    • consistency
  • Flexibility
    • customibility
  • Robustness
    • recoverability
    • responsiveness
    • task conformance
guideline mania
Guideline Mania
  • Lots of things to worry about
  • Which are most critical depend on the application
  • Some are easier to evaluate
today
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
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 cycle1
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
Action Cycle

Goals

Execution

Evaluation

The World

action cycle1
Action Cycle

Goals

Evaluation

Evaluation of interpretations

Interpreting the perception

Perceiving the state of the world

Execution

Intention to act

Sequence of actions

Execution of seq uence of actions

The World

gulf of evaluation
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
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
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 model1
Four-level model
  • Conceptual level
    • The user’s mental model of the interactive system.
    • Example
      • line editors vs. screen editors
four level model2
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 model3
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 model4
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
  • Consistency: be systematic
    • lexical
    • syntactic
    • semantic levels
  • Makes things easier to remember
  • Aids in generalizability
  • Helps reduce potential for error
lexical consistency
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
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
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
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

inconsistency1
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
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
Lexical Feedback
  • Feedback on lexical level:
    • Cursor movement
    • Keyboard echo
    • Selection highlighting

Adapted from slide by James Landay

syntactic feedback
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
semantic feedback
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
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?

Adapted from slide by James Landay

audio feedback
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
Errors
  • Need to design for human capabilities and traits
    • Human speech is riddled with “errors”
  • Reduce Gulfs of Execution and Evaluation!
designing for error
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 imperfectapproximations; actions are approximations to what is actually desired.
error types
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 types1
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
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
error correction
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)

Adapted from slide by James Landay

error correction1
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
why are guidelines insufficient
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
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

Adapted from slide by James Landay