SIMS 213: User Interface Design &

Development

Marti Hearst

Tues, Jan 23, 2001

Announcements

Talk today– Paul Pangaro: Who's Wants To Be Prototyper? The

End-User Does - A Subversive Perspective for HCI– 4:00-5:30, 202 South Hall

The reader is ready

Assignment

Class Project Proposal– It’s on the webpage now.It’s on the webpage now.

ReadingsReadings– Cooper (chapters 9-11) (Reader)Cooper (chapters 9-11) (Reader)– Nielsen Ch. 3, 4, & 7Nielsen Ch. 3, 4, & 7– Johnson, Ch. 1Johnson, Ch. 1– Gomoll, Ims (Reader)Gomoll, Ims (Reader)

Usability in the News

Front page of today’s NYTimes Science Times Don Norman (first in the reader!)

– Talking about problems with doors– Simple usability tests show this ballot is

flawed,others aren’t– http://www.nytimes.com/2001/01/23/science/23USEA.html?pagewanted=all

Web Design in the News

Politics meets web design: www.whitehouse.gov– The Unnoticed Presidential Transition: Whither Whitehouse.gov? By

Richard Wiggins

– http://www.firstmonday.org/issues/issue6_1/wiggins/index.html

Don’t make this mistake:

Slide by James Landay

Why User-Centered Design?

System will fail if it– does not do what the user needs– is inappropriate for the user

Why don’t we just define what a “good interface” is?– Infinite variety of users and tasks– guidelines are usually too vague

e.g. “Provide feedback”, “Be intuitive”

Slide adapted from Ben Shneiderman

Participatory Design

A subset of user-centered design User actively participates in design of the system Pros

– potentially more accurate information about the tasks– more opportunity for users to influence the design decisions– buy-in from sense of participation– potential greater acceptance of final system

Slide adapted from Ben Shneiderman

Participatory Design

Cons (potential)– more costly– lengthier implementation period– antagonism from those whose suggestion are not

incorporated– force designers to compromise design– exacerbate personality conflicts between designers

and users– highlight organizational politics

User-Centered Design Overview

Needs assessment– Find out

who users are what their goals are what tasks they need to perform

– Task Analysis Characterize what steps users need to take Create scenarios of actual use Decide which users and tasks to support

Design based on this Evaluation

– Test interface by “walking through” tasks– Do this before implementation

Slide by James Landay

Caveats

Politics– advocating change can cause controversy– get a sense of the organization– important to get buy-in from all those involved

Don’t design forever without prototyping– rapid prototyping, evaluation, & iteration is key to

technique

Systems level apps are poor candidates– networking, etc.

Student Course Enrollment:Helping the University HelpStudents Achieve their Goals

enroll in sims 213

learn to build useful systems

become successful IT manager

achieve lifetime of success

Help Users Achieve Goals

Example: Course Enrollment Software– What matters from the programmers’ point of view?– What matters from users’ point of view?– What about the course administrators?

User-Centered Design Example

You have been hired by Pizzas R Us (PRU) Design a system to

– make online orders from the web Also considering special features

– online discount coupons– allowing party orders in advance– customer recommendations, linking to reviews– comparing local pizza parlors

User-centered Design Example

Your job: figure out– how people do their pizza ordering now– how they would like to do it online– what features would make sense when– must also take into account the needs of the pizza parlor

owners and workers. This is the needs assessment. Techniques:

– Observation– Interview– Study existing successful designs

User-Centered Design Example

Observation– Visit one or more pizza parlors. Observe how

people achieve their pizza ordering goals.– Observe what the counter people need to do.

Optionally: interview these people

User-Centered Design Example

Interview– Prepare a list of questions about how people do their pizza ordering and

what they would like in an automated ordering system. – Interview at least three people about what they would like in an automated

ordering system and how they would like it to work. Try to identify people with different needs and preferences, with respect to their attitudes about using online ordering systems.

– Ask them what, if anything, must be in the system in order for them to prefer it over a phone ordering system or an in-person ordering system.

(E.g., no busy signals, cheaper prices, comparison shopping, faster service, or would they prefer anything over current methods.)

– Go look at at least one existing on-line food ordering web site and see how they handle these tasks.

User-Centered Design Example

Consider existing designs– Look at least one existing on-line food ordering web

site and see how they handle these tasks.

User-Centered Design Example

Procedure– Answer the needs assessment questions– Try to understand the basic tasks that are currently supported

within pizza parlors and via phone orders– Make a table showing

user types tasks (guesses about) relative frequencies of tasks

– Decide which of the new tasks customers may perform using the new interface.

Make note of which ideas you decided to drop based on your interviews.

Slide adapted from James Landay

Needs Assessment Questions

Who is going to use the system? What tasks do they now perform? What tasks are desired? How are the tasks learned? Where are the tasks performed? What is the relationship between the user and

the data?

Slide adapted from James Landay

Needs assessment Questions

What other tools does the user have? How do users communicate with each other? How often are the tasks performed? What are the (time) constraints on the task? What happens when things go wrong?What happens when things go wrong?

Slide adapted from Ben Shneiderman

Task Analysis

Characterize what happens when users perform typical tasks

Tools:– table of user communities vs tasks– table of task sequences– flowchart or transition diagram– videotape depicting scenario

Make a Table: Who by What(adapted from Shneiderman 98)

J ob Title Query by Patient Update Data Query across Patients

Add Attributes

Nurse

Physician

Superviser

Appointment administrator

Clinical researcher

Database programmer

Slide adapted from James Landay's

How Often Do Users Perform the Tasks?

Frequent users remember more details Infrequent users may need more prompting Which function is performed

– most frequently?– by which users?– optimize system for tasks that will improve

perception of its performance

Augment Table with Percentages(What percentage of the is this task done by this person)(Numbers are only suggestive, adapted from Shneiderman 98)

J ob Title Query by Patient Update Data Query acrossPatients

Add Attributes

Nurse 14% 11%

Physician 6% 4%

Supervisor 1% 1% 4%

Appointmentadministrator

26%

Clinical researcher 8%

Databaseprogrammer

2% 2%

User-Centered Design Example

Scenarios– Create three scenarios that will exercise these tasks

in the proposed interface– Create a description in which you outline

A person’s background Their goal(s) How they achieve these goals using the steps in the

system

– Note: this will change a bit when we use personas

User-Centered Design Example

Sketch an initial design– Explain how the pizza ordering system will work.

Either a textual description or a flow chart (or both) showing the sequences of steps that will be allowed in the system.

Provide rough sketches showing at least three of the important screens.

– Walk through at least one of the scenarios you developed and show how it can be handled by the interface.

User-Centered Design Example

Pizza ordering system: Two examples– http://www.sims.berkeley.edu/~shom/is213/task_analysis.html– http://www.cs.berkeley.edu/~ivory/sims213/task-analysis/interview.html

Online Pizza Ordering Example

By Masako Sho Overview

– Based on the task analysis of pizza ordering and the study of existing food ordering web sites, it is found that users prefer quick and easy access, as well as additional online features when ordering pizza.

– The new online pizza ordering system supports user registration, order modification, online help, and features such as a preview image and calorie calculation.

Online Pizza Ordering Example

Interviewed three people Each has different pizza ordering and Web experience.

A. Order pizza often by phone. Use the Web mainly at work.

B. Order pizza sometimes by phone. Use the Web mainly from home.

C. Never order pizza by phone. Use the Web both at work and home.

Online Pizza Ordering Example

Interview questions: 1. Do you prefer to choose toppings and other options for your pizza by yourself?

Or, do you prefer to select one from the restaurant's special combinations? 2. How long do you expect to spend on the Internet in order to place an online

order? 3. Do you want to receive confirmation of your order? If so, in what way – via a

web page, e-mail message or phone call - ? 4. Do you expect the price to be cheaper for an online order than for a phone

order? 5. What if the online order system does not respond to your order submission?

Will you try the same order again , call the pizza place, or forget about the pizza?

6. What features would you like to find in an online ordering system? For example, a preview image of your pizza, total calorie calculation for your order, the top ten pizza orders of the week …?

Online Pizza Ordering Example

Summary of results: 1. Prefer to choose toppings (A)(B)(C) 2. Should not take more than five minutes. I am hungry(A). Save time by

registration (B)(C). 3. Confirmation on the web immediately after the submission of order (A)

(C). Additional confirmation by phone (B). 4. Just a little bit cheaper (A). Doesn't matter. What matters is the taste

(C). 5. Try again if the ordering process won't take time. Order by phone if it

takes too long (A). Want to get a free pizza if pizza is not delivered (A). Give up to use the online system and make a phone call (B).

6. Nice to have a preview image (A)(C). Attractive if the calorie chart of the order shows pizza is not actually high in calories as I thought (A).

Online Pizza Ordering Example

Online Pizza Ordering Example

Online Pizza Ordering Example

Online Pizza Ordering Example

Online Pizza Ordering Example

Online Pizza Ordering Example

Online Pizza Ordering Example

Online Pizza Ordering Example

Online Pizza Ordering Example

Online Pizza Ordering Example

Online Pizza Ordering Example

Another Example (Abbreviated)

By Melody Ivory

Another Example (Abbreviated)

By Melody Ivory

Online Pizza Ordering Example

Summary

User-Centered Design– Design from the user’s point of view

As opposed to the system’s, the company’s

– Participatory design involves the potential users, via Observation Interviews Testing the design iteratively

Summary

Important steps– Needs assessment– Task analysis– Sketching and assessing designs according to these