Eran Toch

1
Spring 2007
A Crush Course in Usability and User Centered
Design

• Eran Toch
• http//www.technion.ac.il/erant

2
Agenda

• Introduction
• User Interface Design
• GUI building blocks
• GUI structures
• Usability
• Good design / bad design
• Usability levels
• User-centered design
• Principles and ideals
• The process

Intro UI Design Usability User-centered
3
What is Usability?
The effectiveness, efficiency, and satisfaction
with which specified users can achieve specified
goals in particular environments.

• ISO 9241 usability definition

Intro UI Design Usability User-centered
4
Why is Usability Important?

• The fate of
• the world

2. The Apple iPhone
Intro UI Design Usability User-centered
5
1. The Fate of the World
The 2001 Florida Ballot Incident

• Bush won Florida by a 537-vote margin in official
  results

Intro UI Design Usability User-centered
6
The Florida Ballot

• 5,330 Palm Beach County residents invalidated
  their ballots by punching for Gore and Reform
  Party candidate Pat Buchanan.
• Almost half of them were 65 or older and
  Democrats.

Intro UI Design Usability User-centered
7
2. The Apple iPhone
Intro UI Design Usability User-centered
8
Focus on Usability and Design
Intro UI Design Usability User-centered
9
The implications of usability
Intro UI Design Usability User-centered
10
Usability vs. Specification
Initiation
Requirement
Specification
Design
Implementation
Is it too late?
Testing
Intro UI Design Usability User-centered
11
User Centered Design

• Therefore, we need a crush course in
• UI Design
• Usability principles
• User-centered design
• Note, these issues will be discussed in a very
  shallow manner.
• Each of these issues deserve a course (actually,
  in our faculty, there are two courses on these
  issues). Take them!

Initiation
Requirement
UI Design Testing
Intro UI Design Usability User-centered
12
Agenda

• Introduction
• User interface design
• GUI building blocks
• GUI structures
• Usability
• Good design / bad design
• Usability levels
• User-centered design
• Principles and ideals
• The process

13
Basic Model of HCI
Computation
input
Computer
output
Intro UI Design Usability User-centered
14
Types of User Interfaces
Graphical User Interface (GUI)
Command Line
Voice activated interfaces
Intro UI Design Usability User-centered
15
GUI Model
input
Computation
Keyboard I?A..Z, 1..0,...
Mouse x?0..1024, y?0..768
Computer
output
Screen (x,y)?Z2
Intro UI Design Usability User-centered
16
GUI Components Simple Input
Text field
Button
Text area
Link

• What is the type of information received by each
  input field?
• Whats the effect?

Intro UI Design Usability User-centered
17
Simple GUI components Choosers
Combo box
Slider
Checkbox
Radio button

• What is the difference between a radio button and
  a check box?
• What is the choice domain and the choice range of
  each component?

Intro UI Design Usability User-centered
18
Larger Constructs
Pages (in Web-based systems) Windows (in
Desktop-based systems)
Intro UI Design Usability User-centered
19
Composing components
Tabs
Areas of reference
List
Intro UI Design Usability User-centered
20
Actions
Task
Context
Consequences
Intro UI Design Usability User-centered
21
Designing Interface Elements (top-down)

• User flow take the user aspect with the use-case
  model
• Storyboard
• Find compositions of actions / information
• Find relations between compositions
• Detailed view
• Refine each composition to the component level
• Check and integrate

Use Case
Intro UI Design Usability User-centered
22
The use case model
Intro UI Design Usability User-centered
23
User flow

• Integrate use-case scenarios from the user
  perspective

Intro UI Design Usability User-centered
24
Storyboard
Intro UI Design Usability User-centered
25
Detailed View
Intro UI Design Usability User-centered
26
Agenda

• Introduction
• User interface design
• GUI building blocks
• GUI structures
• Usability
• Good design / bad design
• Usability levels
• User-centered design
• Principles and ideals
• The process

27
Good UI design vs. bad design

• What makes a good design different from a bad
  design?
• In order to answer this question we will define
  the concept of usability.

Intro UI Design Usability User-centered
28
Which of these apps is easy to use?
Intro UI Design Usability User-centered
29
Good design

• Recognizable
• Simple
• Clear purpose
• Learnable
• Safe
• Flexible
• Robust
• Good Metaphors
• ...

Intro UI Design Usability User-centered
30
Recognizable interfaces
Pretty, or smart, is not necessarily Usable
Intro UI Design Usability User-centered
31
Patterns

• Design patterns in HCI are a good way to explore
  suggestions for good design
• We would look at some patterns
• Wizard (for simplicity)
• Contextual help (for learnable interface)
• Go back to a safe place
• Shortcuts (for flexible)
• Undo (for robustness)

Intro UI Design Usability User-centered
32
Wizard

• Problem
• The user wants to achieve a single goal but
  several decisions need to be made.
• Solution
• Take the user through the entire task one step at
  the time.

Intro UI Design Usability User-centered
33
Contextual Help

• Problem
• Users may need help regarding specific tasks, but
  would spend a lot of energy searching for it.
• Solution
• Place help in the context of the given task.

Intro UI Design Usability User-centered
34
Computers can be SCARY
Sometimes an innocent user gets into a state she
dont want to be in And then, the terror!!!
Intro UI Design Usability User-centered
35
Solution

• Provide a way to go back to a checkpoint of the
  user's choice.

The "Home" button and the Back
Clicking the Logo in Web sites
Intro UI Design Usability User-centered
36
Shortcuts

• Problem
• Power users need faster ways to execute
  operations than novice users
• Solution
• Create shortcuts for power operations, using
  keyboard, combinations, icons, special menus
  etc...

Intro UI Design Usability User-centered
37
Undo

• Problem
• The user might regret executing some operation.
• Asking the user for confirmation after executing
  each operation will make the interaction
  unusable.
• Solution
• Enable the user to undo her operations, after
  they were executed.

Intro UI Design Usability User-centered
38
Usability levels
Component
Application
Project
Intro UI Design Usability User-centered
39
Component Level

• Familiar to use
• Gives feedback
• Reduces errors
• Satisfies a given task
• Readable
• Self explaining

Intro UI Design Usability User-centered
40
Application Level

• Accessible
• Gives sense of place
• Easy to navigate in
• Handles errors
• Realistic Scenarios
• Personalized

Intro UI Design Usability User-centered
41
Project Level

• Answers real needs
• Answers current needs
• Generates value
• Communicate with all organization's units

Intro UI Design Usability User-centered
42
Agenda

• Introduction
• User interface design
• GUI building blocks
• GUI structures
• Usability
• Good design / bad design
• Usability levels
• User-centered design
• Principles and ideals
• The process

43
User Centered Design

• The objective is to create a design process that
  would increase the usability of the product
• Three principles
• Finding the users context of the product
• Iterative process, including ongoing tests and
  revisions
• Participatory Design - Users become members of
  the design team

Initiation
UCD User is involved here
Requirement
Specification
Design
Implementation
Classic User is involved here
Testing
Intro UI Design Usability User-centered
44
Where are the differences

• Requirements gathering stage
• Talk / view users
• Identifying personas
• Specification stage
• Interface prototyping
• Usability expert analysis
• Heuristic Evaluation
• Design / Implementation
• Usability Lab
• Log Analysis

Intro UI Design Usability User-centered
45
Requirements stage

• Talk to users
• Interview them in order to discover users
  culture, requirements, expectations, etc.
• Watch the users
• At work
• See how they use their existing systems
• See what they do not use

Intro UI Design Usability User-centered
46
Identifying Personas

• Personas are hypothetical archetypes of actual
  users
• By identifying a small set of personas, we can
• make the users seem more real
• Judge the importance of features
• Look at the
• Usage frequency
• Competency
• ...

Taken from http//www.w3.org/WAI/redesign/persona
s
Intro UI Design Usability User-centered
47
Evaluation at the requirements stage
Intro UI Design Usability User-centered
48
Prototyping

• Brainstorm
• Rough interface design
• Application walkthrough

Specification
Low fidelity paper prototypes
Intro UI Design Usability User-centered
49
Prototyping Intermediate Stages

• Fine tune interface design
• Screen design
• Heuristic evaluation and redesign

Design
Medium fidelity prototypes
Intro UI Design Usability User-centered
50
Evaluation at the specification / design
Intro UI Design Usability User-centered
51
Evaluation with the actual system

• Log analysis may be used to
• Identifying actual usage patterns
• Effectiveness of processes, and components
• Benefits
• Real statistical information
• Real-time information

Taken from http//www.clickdensity.com
Intro UI Design Usability User-centered
52
Summary

• Usability is important
• Changing the registration interface at eBay had
  increased success rate from 16 to 68. Sales
  went up in 84M.
• User interface design
• Components, storyboard, maps
• Usability
• Familiar, rules, patterns
• User-centered design
• Involve the users
• Evaluate early and often

53
References

• Bad design
• http//homepage.mac.com/bradster/iarchitect/shame.
  htm
• Patterns
• http//www.welie.com/patterns/index.php
• COMMON GROUND A Pattern Language for
  Human-Computer Interface Design, Jenifer Tidwell,
  http//www.mit.edu/jtidwell/common_ground_onefil
  e.html
• Interaction Design
• User Interface Design, Prototyping, and
  Evaluation (UC Berkeley Extension Summer
  Engineering Institute) http//guir.berkeley.edu/co
  urses/SummerHCI02/
• http//www.interaction-design.org/
• http//www.useit.com/