user centered design

1Spring 2005Specification and Analysis of Information Systems

A Crush Course in Usability and User Centered Design

Eran Toch

http://www.technion.ac.il/~erant

Spring 2007

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?

ISO 9241 usability definition

The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in particular environments.


4

Why is Usability Important?

1. The fate of the world

2. The Apple iPhone


5

1. The Fate of the World

The 2001 Florida Ballot Incident

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


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.


7

2. The Apple iPhone


8

Focus on Usability and Design


9

The implications of usability


10

Usability vs. Specification

Initiation

Requirement

Design

Specification

Implementation

Testing

We design the user interface here

We test them here

Is it too late?


11

User Centered Design

UI Design + Testing

Initiation

Requirement

Design

Specification

Implementation

Testing

• 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!


12

Agenda

• Introduction

• User interface design– GUI building blocks– GUI structures



13

Basic Model of HCI

Computer

input

Computation

output


14

Types of User Interfaces

Graphical User Interface (GUI)

Command Line Voice activated interfaces


15

GUI Model

Computer

inputComputation

output

Mouse : {x0..1024, y0..768}

Keyboard : {I{A..Z, 1..0,...}}

Screen : {(x,y)Z2}


16

GUI Components: Simple Input

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

• What’s the effect?


Text field Button

Text area Link

Enter Text Click to Submit

Enter Lots of text Link 1, link 2, link 3

17

Simple GUI components: Choosers

• What is the difference between a radio button and a check box?

• What is the choice domain and the choice range of each component?


Combo box Slider

Option 2

Option 1 Option 1

Option 2

Choose one

Radio button Checkbox

18

Larger Constructs

Pages(in Web-based systems)

Windows(in Desktop-based systems)


19

Composing components

Tabs

Areas of reference

List


20

Actions

Context

Task

Consequences


21

Conversations pageConversations page

Designing Interface Elements (top-down)

1. User flow: take the user aspect with the use-case model

2. Storyboard: • Find compositions of

actions / information• Find relations between

compositions

3. Detailed view:• Refine each composition to

the component level

4. Check and integrate

Use Case

Login PageLogin Page

Welcome Text Login Fields

Registration Links

email

password

Submit

Sign in

Marketing Text

Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah


22

The use case model

Gmail*

User

External Email Server

»« »«

Compose message

»« »«

Manage messages

»«

»«

archive

»« »«

label

»«

»«

reply

<<extend>>

<<extend>>

<<extend>>

After selection

»« »«

Send / Receive Messages

»« »«

Manage Preferences

* It’s not exactly Gmail...

»« »«

Sign in

<<include>>

<<include>>

<<include>>

»« »«

Register

<<extend>>


23

User flow

LoginPage

register

Message ManagingPage

Marketing Page

Message ViewingPage

Reply Page

Compose page

Manage accounts page

Manage filters page

Manage labels page

• Integrate use-case scenarios from the user perspective


24

Storyboard

Login PageLogin Page

Welcome Text Login Fields

Registration Links

email

password

Submit

Sign in

Marketing Text

Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah

Conversations PageConversations Page

Folders

Label Filters

LOGOMessages Pane

Sign-out

Message Info: from, when, subject, has attachment?Actions: read, reply, replay, archive, delete

Message

Message

Show folder

showlabeled

Message Managing pageMessage Managing page


25

Detailed View

Conversations PageConversations Page

Folders

Label Filters

LOGOMessages Pane

Sign-out

Show folder

showlabeled

All mailNew mailDeleted

PersonalWork

From Subject When

Archive Delete More actions...


26

Agenda

• Introduction




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.


28

Which of these apps is easy to use?


29

Good design

• Recognizable

• Simple

• Clear purpose• Learnable

• Safe• Flexible

• Robust

• Good Metaphors

• ...


30

Recognizable interfaces

Pretty, or smart, is not necessarily Usable


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)


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.

< Back Next > Cancel

Stuff to do here

Complicated ProcessComplicated Process


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.


34

Computers can be SCARY

Sometimes an innocent user gets into a state she don’t want to be in…And then, the terror!!!


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 inWeb sites


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...


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.


38

Usability levels

Component

Application

Project


39

Component Level

• Familiar to use

• Gives feedback

• Reduces errors

• Satisfies a given task

• Readable

• Self explaining


40

Application Level

• Accessible

• Gives sense of place

• Easy to navigate in

• Handles errors

• Realistic Scenarios

• Personalized


41

Project Level

• Answers real needs

• Answers current needs

• Generates value

• Communicate with all organization's units


42

Agenda

• Introduction




43

User Centered Design

• The objective is to create a design process that would increase the usability of the product

• Three principles:– Finding the user’s context of

the product– Iterative process, including

ongoing tests and revisions– Participatory Design - Users

become members of the design team

Initiation

Requirement

Design

Specification

Implementation

TestingClassic: User is

involved here

UCD: User is

involved here


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


45

Requirements stage

• Talk to users– Interview them in order to

discover user’s culture, requirements, expectations, etc.

• Watch the users– At work– See how they use their

existing systems– See what they do not use


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/personas

47

Evaluation at the requirements stage

Focus Group

The ideas of the new system are presented to a group of potential users.

Cognitive Walkthrough

The user “imagines” the system, by going with the interviewer through its stages and actions


48

Prototyping

• Brainstorm

• Rough interface design

• Application walkthrough

Specification

Low fidelity paper prototypes


49

Prototyping – Intermediate Stages

• Fine tune interface design

• Screen design

• Heuristic evaluation and redesignDesign

Medium fidelity prototypes


50

Evaluation at the specification / design

Usability Lab

Testing the prototypes by actual users. Good for: finding unexpected problems and process refinement.

Guided Walkthrough

Guiding and questioning the users while they perform specific tasks.


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

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_onefile.html

• Interaction Design:– User Interface Design, Prototyping, and Evaluation (

UC Berkeley Extension Summer Engineering Institute) http://guir.berkeley.edu/courses/SummerHCI02/

– http://www.interaction-design.org/– http://www.useit.com/

user centered design

Business

good ui design

user flow

user aspect

good design different

usability definition

concept of usability

usability important

patterns design patterns