Eran Toch http://www.technion.ac.il/~erant A Crush Course in Usability and User Centered Design Spring 2007

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

Introduction

User Interface Design

GUI building blocks

GUI structures

Usability

Good design / bad design

Usability levels

User-centered design

Principles and ideals

The process

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

ISO 9241 usability definition

Why is Usability Important? The fate of the world 2. The Apple iPhone Intro | UI Design | Usability | User-centered

The fate of

the world

1. The Fate of the World Bush won Florida by a 537-vote margin in official results The 2001 Florida Ballot Incident Intro | UI Design | Usability | User-centered

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

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

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 .

2. The Apple iPhone Intro | UI Design | Usability | User-centered

Focus on Usability and Design Intro | UI Design | Usability | User-centered

The implications of usability Intro | UI Design | Usability | User-centered

Usability vs. Specification Initiation Requirement Design Specification Implementation Testing Is it too late? Intro | UI Design | Usability | User-centered We design the user interface here We test them here

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! UI Design + Testing Initiation Requirement Intro | UI Design | Usability | User-centered 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!

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

Introduction

User interface design

GUI building blocks

GUI structures

Usability

Good design / bad design

Usability levels

User-centered design

Principles and ideals

The process

Basic Model of HCI Computer input Computation output Intro | UI Design | Usability | User-centered

Types of User Interfaces Graphical User Interface (GUI) Command Line Voice activated interfaces Intro | UI Design | Usability | User-centered

GUI Model Computer input Computation output Mouse : {x  0..1024, y  0..768} Keyboard : {I  {A..Z, 1..0,...}} Screen : {(x,y)  Z 2 } Intro | UI Design | Usability | User-centered

GUI Components: Simple Input What is the type of information received by each input field? What’s the effect? Intro | UI Design | Usability | User-centered Text field Button Text area Link

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

What’s the effect?

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? Intro | UI Design | Usability | User-centered Combo box Slider Radio button Checkbox

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

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

Larger Constructs Pages (in Web-based systems) Windows (in Desktop-based systems) Intro | UI Design | Usability | User-centered

Composing components Tabs Areas of reference List Intro | UI Design | Usability | User-centered

Actions Context Task Consequences Intro | UI Design | Usability | User-centered

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

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

The use case model Intro | UI Design | Usability | User-centered

User flow Integrate use-case scenarios from the user perspective Intro | UI Design | Usability | User-centered

Integrate use-case scenarios from the user perspective

Storyboard Intro | UI Design | Usability | User-centered

Detailed View Intro | UI Design | Usability | User-centered

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

Introduction

User interface design

GUI building blocks

GUI structures

Usability

Good design / bad design

Usability levels

User-centered design

Principles and ideals

The process

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

What makes a good design different from a bad design?

In order to answer this question we will define the concept of usability.

Which of these apps is easy to use? Intro | UI Design | Usability | User-centered

Good design Recognizable Simple Clear purpose Learnable Safe Flexible Robust Good Metaphors ... Intro | UI Design | Usability | User-centered

Recognizable

Simple

Clear purpose

Learnable

Safe

Flexible

Robust

Good Metaphors

...

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

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

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)

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

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.

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

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.

Computers can be SCARY Sometimes an innocent user gets into a state she don’t want to be in… And then, the terror!!! Intro | UI Design | Usability | User-centered

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

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

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

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

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

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.

Usability levels Component Application Project Intro | UI Design | Usability | User-centered

Component Level Familiar to use Gives feedback Reduces errors Satisfies a given task Readable Self explaining Intro | UI Design | Usability | User-centered

Familiar to use

Gives feedback

Reduces errors

Satisfies a given task

Readable

Self explaining

Application Level Accessible Gives sense of place Easy to navigate in Handles errors Realistic Scenarios Personalized Intro | UI Design | Usability | User-centered

Accessible

Gives sense of place

Easy to navigate in

Handles errors

Realistic Scenarios

Personalized

Project Level Answers real needs Answers current needs Generates value Communicate with all organization's units Intro | UI Design | Usability | User-centered

Answers real needs

Answers current needs

Generates value

Communicate with all organization's units

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

Introduction

User interface design

GUI building blocks

GUI structures

Usability

Good design / bad design

Usability levels

User-centered design

Principles and ideals

The process

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 Testing Classic : User is involved here UCD : User is involved here Intro | UI Design | Usability | User-centered

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

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

Requirements gathering stage:

Talk / view users

Identifying personas

Specification stage:

Interface prototyping

Usability expert analysis

Heuristic Evaluation

Design / Implementation

Usability Lab

Log Analysis

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 Intro | UI Design | Usability | User-centered

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

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 ... Intro | UI Design | Usability | User-centered Taken from http :// www . w3 . org / WAI / redesign / 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

...

Evaluation at the requirements stage Intro | UI Design | Usability | User-centered Cognitive Walkthrough The user “imagines” the system, by going with the interviewer through its stages and actions Focus Group The ideas of the new system are presented to a group of potential users.

Prototyping Brainstorm Rough interface design Application walkthrough Specification Low fidelity paper prototypes Intro | UI Design | Usability | User-centered

Brainstorm

Rough interface design

Application walkthrough

Prototyping – Intermediate Stages Fine tune interface design Screen design Heuristic evaluation and redesign Design Medium fidelity prototypes Intro | UI Design | Usability | User-centered

Fine tune interface design

Screen design

Heuristic evaluation and redesign

Evaluation at the specification / design Intro | UI Design | Usability | User-centered Guided Walkthrough Guiding and questioning the users while they perform specific tasks. Usability Lab Testing the prototypes by actual users. Good for: finding unexpected problems and process refinement.

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 Intro | UI Design | Usability | User-centered Taken from http :// www . clickdensity . com

Log analysis may be used to:

Identifying actual usage patterns

Effectiveness of processes, and components

Benefits:

Real statistical information

Real-time information

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

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

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/

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/