3.1 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Week 4

Usability: User Needs Usability: User Needs Analysis Analysis

Usability: User Needs Usability: User Needs Analysis Analysis

Thossaporn Thossansin. Thossaporn Thossansin. BS.c, MS.cBS.c, MS.c

e-mail: thossaporn.piu@gmail.come-mail: thossaporn.piu@gmail.com

3.2 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.3 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

What is Usability?

ISO 9241 usability definition

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

3.4 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Why is Usability Important?

1. The fate of the world

2. The Apple iPhone

3.5 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

The Fate of the World

The 2001 Florida Ballot Incident

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

3.6 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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.

3.7 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

The Apple iPhone

3.8 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Focus on Usability and Design

3.9 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

The implications of usability

3.10 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Usability vs. Specification

Initiation

Requirement

Design

Specification

Implementation

Testing

We design the user interface here

We test them here

Is it too late?

3.11 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.12 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.13 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Basic Model of HCI

Computer

input

Computation

output

3.14 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Types of User Interfaces

Graphical User Interface (GUI)

Command Line Voice activated interfaces

3.15 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

GUI Model

Computer

inputComputation

output

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

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

Screen : {(x,y)Z2}

3.16 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.17 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.18 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Larger Constructs

Pages(in Web-based systems)

Windows(in Desktop-based systems)

3.19 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Composing components

Tabs

Areas of reference

List

3.20 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Actions

Context

Task

Consequences

3.21 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.22 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.23 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.24 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

StoryboardLogin 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

3.25 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.26 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.27 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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.

3.28 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Which of these apps is easy to use?

3.29 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Good design

RecognizableSimpleClear purposeLearnableSafeFlexibleRobustGood Metaphors ...

3.30 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Recognizable interfaces

Pretty, or smart, is not necessarily Usable

3.31 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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)

3.32 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.33 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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.

3.34 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Computers can be SCARY

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

3.35 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.36 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.37 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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.

3.38 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Usability levels

Component

Application

Project

3.39 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Component Level

• Familiar to use

• Gives feedback

• Reduces errors

• Satisfies a given task

• Readable

• Self explaining

3.40 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Application Level

• Accessible

• Gives sense of place

• Easy to navigate in

• Handles errors

• Realistic Scenarios

• Personalized

3.41 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Project Level

• Answers real needs

• Answers current needs

• Generates value

• Communicate with all organization's units

3.42 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.43 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.44 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.45 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.46 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.47 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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

3.48 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Prototyping

• Brainstorm

• Rough interface design

• Application walkthrough

Specification

Low fidelity paper prototypes

3.49 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

Prototyping – Intermediate Stages

• Fine tune interface design

• Screen design

• Heuristic evaluation and redesign

Design

Medium fidelity prototypes

3.50 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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.

3.51 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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 informationTaken from http://www.clickdensity.com

3.52 Copyright © 2011 Pearson Education, Inc. publishing as Prentice Hall

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