SIMS 213:
User Interface Design &
Development
Marti Hearst
Tues, Jan 16, 2001
Alternative names for this course


User Interface Design, Prototyping, and
Evaluation
Human-computer Interaction
Why is HCI Important?
It can determine who becomes president of the USA!
An Assignment from Last Semester

Evaluate the figures in a research paper
An assignment from last semester

What’s wrong with
this table?

Redesign: add
space between the
columns.
Variations on the Theme
Variations on the Theme
Palm Beach Phone Book (a joke)
Problems

The instructions are misleading
–
Use of the phrase “vote for group” is misleading

–
Instructions only on lefthand side


Implies righthand side is different
The interleaving of holes is misleading
–
–

Should say “vote for one”
Only the president page has this layout
Other offices are one per page (with appropriate instructions)
The sample ballot looks different
–
–
No holes – the source of the problem
Did not lead to complaints
Other Issues

People vote infrequently
–


Have to re-learn the system each time
Rushed, uncomfortable circumstances
Palm Beach Demographics: Elderly
How to know if it will work?

Test out the design!
–
–
–
Have real people use it!
Try to match the appropriate demographics
Even a few tries can turn up major problems
An Informal Usability Study
Barbara Jacobowitz, CHI-WEB, Nov 10, 2000



“I was able to print 10 different sample ballots from
various sources. Last night, I ran them all by my
mother (81) and a group of her friends (70-something
to 80's). All are bright, literate, and none are legally
blind.
They did reasonably well on 9 of the ballots. On one, 6
marked it incorrectly and didn't realize it, 2 did it
correctly, but very slowly, and 2 had to ask me what to
do. Guess which ballot it was?.”
Summary of a more formal study of punch-card voting:
–
http://www.osu.edu/units/research/archive/votedes.htm
Josephine Scott, CHI-Web, Nov 10, 2000



“I spent fifteen years making the voting process accessible and
usable for all. I have some very strong feelings as well as
considerable experience. …
Usability standards must be higher for voting than any other
function for the most obvious reasons. Users--in this case, voters,
share the need for the clearest of design and instruction to cast a
vote properly. Many do not speak English well, or see well, or are
able to decipher difficult design cognitively, but they may be able
to make as informed a choice for president as our snobbish
"experts" who don't see a problem. …
Bad design like this exacerbates the problem. The glib notion that
"there is no problem because you can see the arrow" or that
voters who made this mistake must be stupid shows a lack of
compassion. Let me suggest that it is simple compassion for the
user that informs usability expertise. …”
More evidence that the ballot is
misleading
(New York Times, Nov 9, 2000)





Percent of ballots thrown out in Palm Beach County for the error of
"overvoting" on Presidential candidates: 4.1% (19,120)
Percent of ballots thrown out in Palm Beach County for the error of
"overvoting" on Senatorial candidates: 0.8% (3,783)
Percent of ballots thrown out in Sacramento County (CA) for the
error of "overvoting" on Presidential candidates: 0.29% (1,147)
Percentage of (unofficial) re-count votes in Gore's favor: 70%
(2,520)
Percentage of (unofficial) re-count votes in Bush's favor: 30%
(1,063)
Blaming the User

A huge step backwards:
–



Cokie Roberts (appearing on David Letterman)
“stupidity is not an excuse”
Well-designed user interfaces do not present situations
in which it is easy to make mistakes
Alan Cooper’s mantra: software should not humiliate
the user
In this class we assume: if the user does something
“wrong,” it is the fault of the system designer
Administrivia



Course TA: Kevin Fox
Office hours: TBA
Grading:
–
–
–
Individual assignments: 20%
Midterm: 30%
Project: 50% (over several assignments)
Readings


Do indicated readings before the class
Required:
–
–

Strongly Recommended:
–
–
–
–

Course Reader (available early next week)
Jakob Nielsen’s Usability Engineering
Shneiderman’s Designing the User Interface
www.uidesign.net
world.std.com/~uieweb/
useit.com
There are many other wonderful books and websites
Course Schedule (Tentative)













Intro to HCI
UI Design Cycle, User-Centered Design
Goals, Personas, Task Analysis, Scenarios
Cognitive Issues and Human Abilities
Web Design / Search Interfaces
Heuristic Evaluation
Modes
Prototyping (Low-fidelity and Wireframe)
Midterm
Usability Testing
Graphic Design/Multimodal UIs
Personalization/Social Aspects/Agents
Ubiquitous computing interfaces
Project Schedule (Tentative)
Note: there will also be individual assignments
Dates shown are the week the item is due













Project proposals (3rd week)
Project personas and goals (4th week)
Scenarios, tasks, and initial sketches (5th week)
Individual heuristic evaluation (6th week)
Midterm (8th week)
Lo-Fi prototype and test (8th week)
First interactive prototype (10th week)
Class presentation (10th week)
Project heuristic evaluation (11th week)
Second interactive prototype (12th week)
Usability test (14th week)
Class presentation (14th week)
Third prototype and project writeup (Finals week)
Class Projects

Design, prototype, and evaluate an interface
–
–
–

Iterate four times
Emphasis on web-based interfaces
Ok to redesign an existing interface
MUST work in groups of 3-4 people
–
–
No exceptions
Students will assess amount of work being done by
others in the group
Previous Projects -- Examples

Webmarking
–

Airline Reservations
–

http://www.sims.berkeley.edu/courses/is213/s99/Projects/P8/
Names Access Project
–

http://www.sims.berkeley.edu/courses/is213/s99/Projects/P1/
http://www.sims.berkeley.edu/courses/is213/s99/Projects/P10/
Key Management (Secure email)
–
http://www.sims.berkeley.edu/courses/is213/s99/Projects/P4/
What is HCI?

A discipline concerned with
design
– evaluation
– implementation
of interactive computing systems for human use
–

The study of major phenomena surrounding
the interaction of humans with computers.
Slide by James Landay
What is HCI?
Task
Organizational &
Social Issues
Design
Technology
Humans
What is an Interface?



Difficult to define
The window through which the human interacts
with some application on the computer.
But …
–
–
really it is more complex than this
part of a larger context of interacting with other
applications, other people, and the physical world.
Who builds UIs?

A team of specialists (ideally)
–
–
–
–
–
–
graphic designers
interaction / interface designers
technical writers
marketers
test engineers
software engineers
Slide by James Landay
An Iterative Process
Design
Evaluate
Prototype
Slide by James Landay
User-centered Design

Take into account
–
–
–

Cognitive abilities
Organizational constraints
Customs and precendent
Keep users involved throughout project
Slide by James Landay
User-centered Design

Standard Approach:
–
–
–

Needs assessment
Task analysis
Initial design
New approach (from Cooper’s Inmates book):
–
–
–
–
–
Needs assessment
Persona creation
Goal creation
Scenario and task creation
Initial design
Using Personas

Focus on specific aspects of a specific user’s
characteristics, needs, and goals
–


The persona becomes as understandable as a
character in a book or movie
Avoid “elastic user”
Design for the center of the distribution
–
–
The perpetual intermediates
Don’t focus on the edge cases
Designing for Goals



Goals are what one wants to do
Goals seldom change
Tasks are steps to get to the goals
–
–
Tasks change with the technology
Sometimes tasks are the opposite of goals



To get agreement, the lawyer argues
To achieve peace, the country sends in troops
Focusing on technology results in designing for tasks
rather than goals.
Rapid Prototyping


Build a mock-up of design
Low fidelity techniques
–
–
–

paper sketches
cut, copy, paste
video segments
Interactive prototyping tools
–
Visual Basic, HyperCard, Director, etc.
Slide by James Landay
Evaluation

Test with real users (participants)
–

“Discount” techniques
–
–

Formally or Informally
expert evaluation (heuristic evaluation)
walkthroughs
Build models
–
Less common
Good vs. Bad Design

It is important to avoid bad design
–
–
It is often easy to detect a bad design – just try it with a few
users
It can be fun to spot the flows



UI Hall of Shame http://www.iarchitect.com/mshame.htm
UI’s Greatest Bloopers
It is much harder to teach / learn good design
–
–
–
–
Look at & appreciate good examples
Follow best practices
Be willing to redesign
Get lots of practice!
Good vs. Bad Design

UI design is humbling
–
–
–
Your attempt may work right, look great
But … users may not be able to use it
Don’t take it personally! That’s why we iterate!
Studying Good Examples

Some sites just do things well
–
Amazon has pioneered many excellent interaction designs for
the web





–
–
Suggesting related products in an effective way
Useful and timely content
Tabs to organize main kinds of content
1-click purchasing
Good checkout mechanism
Yahoo also (although the structure of the hierarchy is now
broken)
Epicurious.com – an excellent recipe site
Studying Good Examples
Good design ideas can be taken too far …
Assignment

Start thinking about projects and team
members