Transcript

User-Centered Interface Design

2

What is user-centered design?

• First, let’s see some everyday examples of design that is NOT user-centered

3

Classic Stove Example

4

Classic Stove Example

Do the controls work this way?

5

Classical Stove Example

Or this way?

6

Infamous “butterfly” ballot

To vote for the democrats do I punch the second hole or the third hole?

7

“ Helpful” color coding

Are you sure you want to delete all records from the data base?

Yes No

“ Yes” in instance is NOT a good thing

www.iarchitect.com/mshame.htm

8

Many more interesting examples

http://www.iarchitect.com/mshame.htm

http://www.baddesigns.com

9

What is the problem with these designs?

• No designer purposes sets out to confuse or irritate( 刺激 ) users

• Fallacy( 谬论 ): the most usable design is OBVIOUS by thinking through interior thinking about the problem

10

Reference Information for Java

What frame controls what window?

11

But… the target audience loved this approach

• The organization was highly meaningful and powerful– It reflects how users think about the information

Classes

Packages

12

The lesson

• Relying solely on interior thinking is a risky approach to design

• It risks making incorrect assumptions about the people who will use a system

!

13

User-Centered Design

A. Focuses on who will use a system from the very beginning

B. Checks in with users each step along the way

User Research

Analysis

Design

Prototyping & Testing

Development

Iterative Design

A

B

User ResearchFocusing on users from the beginning

15

User Research

User Research

Analysis

Design

Prototyping & Testing

Development

Iterative Design

16

Discovering User Needs Through Direct Research

ObservationalStudies

User Needs

User Interviews

User Surveys

17

Observational Studies

• Observing how people currently perform work within their “live” context

ObservationalStudies

User Needs

User Interviews

User Surveys

18

Observational Studies

• People aren’t able to fully articulate (清晰明白地说) what they do – Behavior is often automatic– Important factors in the social and physical

context are taken for granted

19

Example: Observational Study

• Kitchen entertainment/information center• Physical context of use is very important

– Frequent interruptions

– Work occurs in a variety of locations

– Cleanliness highly important

20

Example findings (user needs)Context of Use

User interface for system must be visible and controllable from a distance

Touch screen has limitations for use– Hands are frequently wet and/or dirty– Stylus (铁笔) must be attached to unit

21

User Interviews

• Asking users to describe how they perform work and what they think about it

ObservationalStudies

User Needs

UserInterviews

User Surveys

22

User Interviews

• Less open-ended (自由回答) than observational studies– Questions usually focus on getting information

about particular user goals and tasks

• Best conducted in the environment where users perform work

23

Example: User Interviews

• Web Site targeted at software developers– How can we improve the information we provide

to developers?– Questions about how they seek information

24

Example findings (user needs)

Concentrate information on fewer pages– To leverage using browser search function to

find information

Provide fresh technology news daily– Very consistent pattern of proactive information

seeking

25

User Surveys

• Asking people specific questions on use and satisfaction

ObservationalStudies

User Needs

UserInterviews

UserSurveys

26

User Surveys

• The Internet makes these easy and inexpensive to deploy

• Good for getting specific data on existing features

27

Example: User Survey

• Developer Web site– Used to get more data on specific issues

identified in open-ended interviews

28

Example findings (user needs)

Optimize PDFs for on-screen use– PDF Printouts used less frequently

Replacing search engine is not a high priority– Satisfaction level with current search

technology is relatively high

29

User Research: Potential Pitfalls(缺陷)

• Methods misapplied or executed poorly• Results may point the wrong direction

30

Potential Pitfall: Just Asking People What They Want

• Here’s what Homer Simpson says he wants in a car:– “I want a horn here, here, and here. You can

never find a horn when you‘re mad. And they should all play ‘La Cucaracha (一种墨西哥歌舞)’ .”

31

Pitfall: Asking People What They Want

• Think of the doctor analogy– People are expert in understanding what the

symptoms are, but not the underlying disease or how to treat it

– The user researcher must be skilled at diagnosis

Prototyping & TestingChecking in with users each step along the way

33

Prototyping & Testing

User Research

Analysis

Design

Prototyping & Testing

Development

Iterative Design

34

Early prototypes are low fidelity(逼真度)

• They may be very exploratory designs• Mostly, paper prototypes are used

– Pages may be hand-drawn or computer-drawn

• Goal: Get user feedback early when changes are easy to make 11/13/02

Address:

Go

Quick search

Advanced Search

blink interactive architectswww.blinkIA.com206.447.9551

28

Solutions Resources& Support

Products &Services

Company

Become a Partner | International | Advertising | Real.com

Partner Login | Glossary | Site map | Contact Us

http://www. realnetworks.com

PrivacyLegal Notices/Terms of Use

Home

Version 12

Q ui ckTi m e™ and a G r aphi cs decom pr essor ar e needed t o see t hi s pi ct ur e.

RealServer Plus

RealSystem Server Plus

Features & Benefits

RealSystem Server Plus is the economical way to

start delivering digital media.

RealSystem Server Plus is an easy, affordable way

to get started right away with streaming media on the

Internet and Intranet. This RealSystem Server gives

you the capacity to reach thousands of people daily

and an easy entry point to take advantage of the

rapidly growing demand for digital media content.

More …

What ’ s New

This RealSystem Server gives you the capacity to

reach thousands of people daily and an easy entry

point to take advantage of the rapidly growing

demand for digital media content. More …

Products &

Services

Buy & Download Now

Not sure what

product meets your

needs? We can help

you find the right

product .

RealSystem Server Plus $1,995

30-day money-back guarantee

RealSystem

Server Resources

• Documentation &

How-To Guides

• Downloads, Tools

& Templates

• Software

Development Kits

Home

Products & Services

Servers

Server Plus

Features & Benefits

System Requirements

Frequently-Asked

Questions

What ’ s New

More Server

Products:

Server Professional

Server Intranet

Real Server Proxy

Real Player Intranet

Management

11/13/02

Address:

Go

Quick search

Advanced Search

blink interactive architectswww.blinkIA.com206.447.9551

28

SolutionsResources& Support

Products &Services

Company

Become a Partner | International | Advertising | Real.com

Partner Login | Glossary | Site map | Contact Us

http://www. realnetworks.com

PrivacyLegal Notices/Terms of Use

Home

Version 12

Q ui ckTi m e™ and a G r aphi cs decom pr essor ar e needed t o see t hi s pi ct ur e.

RealServer Plus

RealSystem Server Plus

Features & Benefits

RealSystem Server Plus is the economical way to

start delivering digital media.

RealSystem Server Plus is an easy, affordable way

to get started right away with streaming media on the

Internet and Intranet. This RealSystem Server gives

you the capacity to reach thousands of people daily

and an easy entry point to take advantage of the

rapidly growing demand for digital media content.

More …

What ’ s New

This RealSystem Server gives you the capacity to

reach thousands of people daily and an easy entry

point to take advantage of the rapidly growing

demand for digital media content. More …

Products &

Services

Buy & Download Now

Not sure what

product meets your

needs? We can help

you find the right

product .

RealSystem Server Plus $1,995

30-day money-back guarantee

RealSystem

Server Resources

• Documentation &

How-To Guides

• Downloads, Tools

& Templates

• Software

Development Kits

Home

Products & Services

Servers

Server Plus

Features & Benefits

System Requirements

Frequently-Asked

Questions

What ’ s New

More Server

Products:

Server Professional

Server Intranet

Real Server Proxy

Real Player Intranet

Management

11/13/02

Address:

Go

Quick search

Advanced Search

blink interactive architectswww.blinkIA.com206.447.9551

28

Solutions Resources& Support

Products &Services

Company

Become a Partner | International | Advertising | Real.com

Partner Login | Glossary | Site map | Contact Us

http://www. realnetworks.com

PrivacyLegal Notices/Terms of Use

Home

Version 12

Q ui ckTi m e™ and a G r aphi cs decom pr essor ar e needed t o see t hi s pi ct ur e.

RealServer Plus

RealSystem Server Plus

Features & Benefits

RealSystem Server Plus is the economical way to

start delivering digital media.

RealSystem Server Plus is an easy, affordable way

to get started right away with streaming media on the

Internet and Intranet. This RealSystem Server gives

you the capacity to reach thousands of people daily

and an easy entry point to take advantage of the

rapidly growing demand for digital media content.

More …

What ’ s New

This RealSystem Server gives you the capacity to

reach thousands of people daily and an easy entry

point to take advantage of the rapidly growing

demand for digital media content. More …

Products &

Services

Buy & Download Now

Not sure what

product meets your

needs? We can help

you find the right

product .

RealSystem Server Plus $1,995

30-day money-back guarantee

RealSystem

Server Resources

• Documentation &

How-To Guides

• Downloads, Tools

& Templates

• Software

Development Kits

Home

Products & Services

Servers

Server Plus

Features & Benefits

System Requirements

Frequently-Asked

Questions

What ’ s New

More Server

Products:

Server Professional

Server Intranet

Real Server Proxy

Real Player Intranet

Management

35

Low Fidelity vs. Final Design

36

Usability Testing of Prototypes

1. Create task scenarios2. Recruit participants to perform the tasks

using the prototype3. Use the results of testing to fix any

problems4. Repeat Steps 2-3

37

Conducting test sessions

• Usually involves the “Think Aloud Protocol” (TAP)– User expresses thoughts out loud as they

perform tasks– Clip shows testing a system in the final design

stages

38

Usability Testing with Paper Prototypes

• Participants “click” by pointing• They enter data by writing on the page

QuickTime™ and a decompressor

are needed to see this picture.

Picture-in-picture video captures people’s actions, what the they say, and their facial expressions

39

In the TAP the facilitator must remain neutral

• Key to the success of the method• Participants will look to the facilitator for

reassurance– May feel like they are “failing” the test– Some participants become highly stressed– Sessions can be long and unpredictable

40

How many users do you need to test?

• 6-8 users• Clients are initially skeptical• But after watching the first set of sessions

they believe– You start seeing the same problems again &

again– Conserve your participant budget for additional

rounds of testing

41

How much of the system do you test?

• Some testing is always better than none• There are always time and budget trade-

offs• Prioritize the most risky areas of a design

– Or focus on “mission-critical” areas such as the check-out flow for e-commerce sites

“ Discount” Usability Methods

43

Reality Bites…

• The time and expertise for user-centered design may be absent on many projects– Small projects– Engineering-driven company culture

• Focus on internal thinking to solve design problems• “We know what users want already”

44

Options

• Conduct a heuristic evaluation– Heuristics represent user interface design best

practices– Jakob Nielsen is a good starting point

www.useit.com/papers/heuristic/

45

Options

• Test with even one or two users– Nielsen: zero users yields zero insights

http://www.useit.com/alertbox/20000319.html

46

Options

• Test with internal people– They should have no involvement with the

design– Get folks close to the target audience as

possible• Risk of misleading information

Learning more about User-Centered Design and Usability

48

Some Books

• The Elements of User Experience: User-Centered Design for the Web– James Jesse Garrett

• User-Centered Design: An Integrated Approach – Karel Vredenburg, et al

49

A Few Web Resources

• Jakob Nielsen– www.useit.com/

• Usable Web– www.usableweb.com/

• IBM - Ease of Use– www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/570


Top Related