Evaluation 1

Introduction & Usability Inspection

Objectives

By the end of class you will be able to… •  Describe different usability inspection

techniques and discuss the advantages and disadvantages of usability inspection methods.

•  Conduct a heuristic evaluation and cognitive walkthrough of a user interface.

Course Overview

What might you hope to learn from a usability evaluation?

•  Is the interface… –  Effective? –  Engaging? –  Efficient? –  Easy to learn? –  Equally usable by different groups?

•  What problems do users have? •  Suggestions to improve the interface •  …

The 5 E’s of usability

How could you evaluate an interface?

•  With users – User testing (after Reading Break)

•  Without users – Usability inspection (today!)

•  Cognitive walkthrough •  Heuristic evaluation

– User modeling (Later)

Usability inspection

•  A ‘discount’ method of usability evaluation where an interface is evaluated by usability experts rather than end users.

•  Usually several evaluators work independently, then debrief together later.

Heuristic evaluation

•  A type of usability inspection •  HCI experts (sometimes also domain

experts) review an interface design with respect to a set of predefined heuristics

•  Developed by Jacob Nielsen

Nielsen’s heuristics •  Visibility of system status •  Match between system and real world (Speak the user’s

language) •  User control and freedom (Clearly marked exits) •  Consistency and standards •  Help users recognize, diagnose, recover from errors •  Error prevention •  Recognition rather than recall •  Flexibility and efficiency of use •  Aesthetic and minimalist design •  Help and documentation

1. Visibility of system status

•  The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Upload button is enabled, until clicked. Then it is replaced with a progress indicator until the upload has finished

This and later examples from http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5 More examples available there.

BaseCamp by 37signals

2. Match between system and real world

•  Speak the users’ language, with words, phrases and concepts familiar to the user. Follow real-world conventions, and natural / logical order.

Uses terms and metaphors familiar to the user.

iTunes

3. User control & freedom

•  Users often choose system functions by mistake and will need a clearly marked and quick “emergency exit”. Support undo and redo, a clear way to navigate.

Clear how to navigate functions, search can be easily activated and canceled.

CollabFinder

4. Consistency & Standards •  Users should not have to wonder

whether different words, situations, or actions mean the same thing. Follow platform conventions.

MS Word, Excel, and PowerPoint all use the same style toolbar with the same primary menu options

BUT: different on Mac vs. Windows Microsoft Office

5. Error Prevention •  Even better than good error messages

is a careful design, which prevents a problem from occurring in the first place.

Google: auto recommend reduces spelling errors

Primary action is more visually prominent

6. Recognition rather than recall

•  Minimize the user’s memory load. Make objects, actions, options, and instructions visible.

Preview of fonts, not just font name

Auto complete for coding in an IDE – no need to remember exact names

7. Flexibility & Efficiency of Use •  Accelerators — unseen by the novice —

may speed up interaction for the expert. Allow users to tailor frequent actions.

Accelerator keys

Apple Numbers: Previews common function results on the left when a column is selected -- efficient

8. Aesthetic and minimalist design

•  Dialogues should not contain information that is irrelevant or rarely needed. Visual layout principles: contrast, repetition, alignment, and proximity.

Search menu exemplifies the four principles of visual design

Kon

tain

9. Help users recognize, diagnose, and recover from errors

•  Error messages should be expressed in plain language, precisely indicate the problem, and suggest a solution.

Digg

Provides immediate feedback with specific instructions

10. Help and documentation •  Even though it is better if the system

can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

Help tips are displayed on hover, answering the most likely questions about a field or instructions Ze

noss

Heuristic Evaluation: Output •  List of usability problems, with references to

the usability principles that were violated •  Does not (necessarily) provide a solution

–  But problems are often easy to correct based on the guidelines

Heuristic Evaluation Activity

•  Evaluation of Fugu

How many inspectors?

Jakob Nielsen - www.useit.com

Evaluation of a banking system:

How many inspectors?

Jakob Nielsen - www.useit.com

35%

75%

What is a cognitive walkthough (CW)?

•  A type of usability inspection where experts ‘walk’ through an interface following a specified set of tasks.

•  Step through the task. At each step, ask yourself four questions.

CW Questions

1.  Will users be trying to produce whatever effect the action has?

2.  Will users see the control (button, menu, switch, etc.) for the action?

3.  Once users find the control, will they recognize that it produces the effect they want?

4.  After the action, will users understand the feedback they get so they can go on to the next action with confidence?

CW Example - Rapid Transit Ticket Machine

•  User wishes to purchase a round-trip ticket to Dragon Plaza.

•  The ticket costs $17.50 but the user doesn’t know this yet.

•  The user has only $10, but doesn’t know this yet either.

This example taken from http://asi-www.informatik.uni-hamburg.de/informatik/SE_Evaluation/html/pages/walk.htm

•  User can do steps 1 and 2 in any order •  Or user can enter desired fare using keypad

Step 1: Enter Destination or Journey Type

•  Design Flaw no. 1: Option to indicate journey type first is not made sufficiently evident.

•  Solution:

Step 2: Enter Journey Type

Step 3: Deposit money

•  Design Flaw no. 2: No display of total money received.

•  Solution:

Step 4: Retrieve $10 from machine since it wasn’t enough

•  Design Flaw no. 3: No means of retrieving money deposited.

•  Solution:

Cognitive Walkthrough Activity

Press Start

What are the advantages & disadvantages of usability

inspection?

Key points

Usability inspection… •  Is quick and inexpensive •  May miss important problems or identify

false ones •  Complements (but does not replace)

testing with users