Lecture 23: Usability Engineering

1
Lecture 23 Usability Engineering

• Readings see URLs on Web version of this
  lecture, http//www.upassoc.org
• www.useit.com.

2
Goals

• Review iterative design process for user
  interface development
• Show examples of rapid prototyping
• Introduce usability testing

3
Overview of User-Centred Design

• 1. User/Task Analysis
• 2. Set Usability Goals
• 3. Design User Interface
• 4. Evaluate Design Models
• 5. Build Prototypes
• 6. Test Prototypes
• 7. Evaluate Results of Test

If goals not met.
?
If goals met.
4
Rapid Design Tools

• Storyboarding
• Written Descriptions
• Video Envisionment
• Wizard of OZ techniques

5
Storyboarding

• Sequence of screen displays that represent
  sequence of user actions followed by screen
  update
• Storyboards often videotaped or animated to
  represent operation of a running user interface.

6
Example Storyboard Scenario for a Homebanking
System
7
Example Storyboard Scenario for a Homebanking
System

• Possible User Actions
• User selects telephone with double click on mouse
• User selects checkbook with double click on
  mouse..

8
Example Storyboard Scenario for a Homebanking
System
9
Written Descriptions

• Natural language descriptions of the interface
  design, e.g.,
• The first screen will have a five menu options
  which will allow the user to select five
  different categories of restaurants. The
  categories will be French, Italian, Indian,
  Chinese and Ethiopian.
• These can be interspersed with pictures showing
  drawings of the interface

10
Example Language Description of a User Interface

• The application will have one menu, called FILE.
  The FILE menu will have three menu items called
  OPEN, CLOSE and QUIT, as indicated in the
  following diagram.

11
Demo Programs

• Programs which allow the designer to create
  screen mockups
• They are like Prototyping Systems but with the
  following exceptions
• Users are not allowed to type real input into the
  program - any key they type will typically bring
  on the next screen display
• The interfaces are rigid simulations of ONE case
  of possible user input not the many cases that
  might occur
• Director/Visual Basic used in this way

12
Video Envisionments

• Static representations of user interaction
  created
• on computer screen
• on paper
• Sequence of these representations videotaped to
  simulate a working system
• technique shown to elicit more accurate user
  attitudes toward completely new designs
• hard parts of prototyping task can be simulated

13
Wizard of OZ techniques

• Very rudimentary mockup of design created
• Very fast human sits in next room observing user
  actions
• brings up screen display that represents users
  request
• or types envisioned computer response to request
• Example the automatic secretary
• fast typist generates words, corrections, etc.,
  as user dictates memorandum

14
Paper Prototyping Example Real Estate Application
15
(No Transcript)
16
Usability for Web Sites

• Site Level Usability
• Page Level Usability

17
Site Level Usability

• home page
• information architecture,
• navigation, and search
• linking strategy
• overall writing style page templates, layout,
• site-wide design standards graphical language
  and commonly used icons

18
Page Level Usability

• specific issues related to the individual pages
• understandability of headlines, links, and
  explanations
• intuitiveness of forms and error messages
• inclusion or exclusion of specific information
• individual graphics and icons

19
Testing Internal Consistency

• Can all nodes and screens in the Website be
  reached from each other?
• Is there a reasonable entry point?
• Is information design reasonably consistent
  across the different screens and nodes?
• What actions can be performed on the nodes?
• Are the interactions and dialogs necessary to
  perform equivalent actions consistent?

20
Web Design Guidelines

• Apple http//www.applenet.apple.com/hi/web/intro.h
  tml
• Sun http//www.sun.com/styleguide/
• IBM http//www.ibm.com/IBM/HCI/guidelines
• See upassoc.org for more citations...

21
Make Text Work

• Text should be
• Concise
• Objective
• Scannable
• See following example.

22
Making Text Work Before

• Nebraska is filled with internationally
  recognized attractions that draw large crowds of
  people every year, without fail. In 1996, some of
  the most popular places were Fort Robinson State
  Park (355,000 visitors), Scotts Bluff National
  Monument (132,166), Arbor Lodge State Historical
  Park Museum (100,000), Carhenge (86,598), Stuhr
  Museum of the Prairie Pioneer (60,002), and
  Buffalo Bill Ranch State Historical Park (28,446).

23
Making Text Work After

• In 1996, six of the most-visited places in
  Nebraska were
• Fort Robinson State Park
• Scotts Bluff National Monument
• Arbor Lodge State Historical Park Museum
• Carhenge
• Stuhr Museum of the Prairie Pioneer
• Buffalo Bill Ranch State Historical Park

24
Usability Testing

• Choose scenarios and detailed tasks
• Select Representative Users
• Perform tasks with think aloud
• Identify Usability problems
• Recommend Design changes

25
A Few Testers Find Most Problems
26
Fewer Testers -gt Save for More Cycles
27
Heuristic Usability Evaluation

• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help users recognize, diagnose, and recover from
  errors
• Help and documentation

28
Conclusions

• Use the guidelines
• Know your task and user
• Know the properties of your medium/OS/environment
• Prototype cheaply, early, and often
• Test cheaply, early, and often
• Functionality comes first, but only if it can be
  used