1. SIMS 213: User Interface Design & Development
Marti Hearst
Tues, Jan 23, 2001

2. Announcements Talk today The reader is ready
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

3. Assignment Class Project Proposal Readings It’s on the webpage now.
Cooper (chapters 9-11) (Reader)
Nielsen Ch. 3, 4, & 7
Johnson, Ch. 1
Gomoll, Ims (Reader)

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

5. Web Design in the News Politics meets web design: www.whitehouse.gov
The Unnoticed Presidential Transition: Whither Whitehouse.gov? By Richard Wiggins
Don’t make this mistake:

7. 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 by James Landay

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

9. 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
Slide adapted from Ben Shneiderman

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

11. Caveats Politics Don’t design forever without prototyping
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.
Slide by James Landay

12. Student Course Enrollment: Helping the University Help Students Achieve their Goals
achieve lifetime of success
become successful IT manager
learn to build useful systems
enroll in sims 213

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

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

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

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

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

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

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

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

21. 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?
Slide adapted from James Landay

22. 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
Slide adapted from Ben Shneiderman

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

24. 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
Slide adapted from James Landay's

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

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

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

28. User-Centered Design Example
Pizza ordering system: Two examples

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

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

31. 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, 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 …?

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

33. Online Pizza Ordering Example

34. Online Pizza Ordering Example

35. Online Pizza Ordering Example

36. Online Pizza Ordering Example

37. Online Pizza Ordering Example

38. Online Pizza Ordering Example

39. Online Pizza Ordering Example

40. Online Pizza Ordering Example

41. Online Pizza Ordering Example

42. Online Pizza Ordering Example

43. Online Pizza Ordering Example

44. Another Example (Abbreviated)
By Melody Ivory

46. Another Example (Abbreviated)
By Melody Ivory

47. Online Pizza Ordering Example

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

49. Summary Important steps Needs assessment Task analysis
Sketching and assessing designs according to these