SIMS 213: User Interface Design & Development

Marti HearstThurs, Jan 22, 2004

Readings

Do indicated readings before the classFor next Tuesday:– Read Nielsen Chs. 1 – 4– Read Sullivan (linked to website)

Slide by James Landay

What is HCI?

A discipline concerned with– design– evaluation– implementationof interactive computing systems for human use

The study of major phenomena surrounding the interaction of humans with computers.

What is HCI?

HumansTechnology

Task

Design

Organizational & Social Issues

What is an Interface?

Difficult to defineThe 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.

Slide by James Landay

An Iterative Process

Design

Prototype

Evaluate

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

Who builds UIs?

A team of specialists (ideally)– graphic designers– interaction / interface designers– technical writers– marketers– test engineers– software engineers

User-centered Design

Standard Approach:– Needs assessment– Task analysis– Initial design

More modern 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 movieAvoid “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 doGoals seldom changeTasks 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.

Slide by James Landay

Rapid Prototyping

Build a mock-up of designLow fidelity techniques– paper sketches– cut, copy, paste– video segments

Interactive prototyping tools– Visual Basic, HyperCard, Director, Flash, etc.

Evaluation

Test with real users (participants)– Formally or Informally

“Discount” techniques– expert evaluation (heuristic evaluation)– walkthroughs

Build models– Less common

Why is Usability Important?

Good design promotes– Effectiveness and efficiency– Feelings of satisfaction, enjoyment

Bad design threatens– Safety– Accuracy

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://digilander.libero.it/chiediloapippo/Engineering/iarchitect/shame.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

– Epicurious.com – an excellent recipe site

Amazon’s use of tabs in 2001

What are the motivations?

Amazon’s current use of tabs

Hasn’t changed much … found a good balance?

Studying Good Examples

Good design ideas can be taken too far …

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-5 people– Team structure– Students will assess amount of work being done by others in

the groupLast year’s:– http://www.sims.berkeley.edu/courses/is213/s03/projects.html

Slide adapted from James Landay

Teams vs. Managed Groups

Managed Groups– strong leader– individual accountability

– organizational purpose– individual work products– efficient meetings– measures performance

by influence on others– delegates work

Teams– shared leadership– individual & mutual

accountability– specific team purpose– collective work products– open-ended meetings– measures performance

from work products– do real work together

Slide adapted from James Landay

Teams vs. Managed Groups

Managed Groups– strong leader– individual accountability

– organizational purpose– individual work products– efficient meetings– measures performance

by influence on others– delegates work

Teams– shared leadership– individual & mutual

accountability– specific team purpose– collective work products– open-ended meetings– measures performance

from work products– do real work together

Slide adapted from James Landay

Team Action Items

Meet and get used to each otherFigure out strengths of team membersAssign each person a role– responsible for seeing work is organized & done– not responsible for doing it themselves

Roles– design (visual & interaction)– software– user testing

– group manager (coordinate big picture)

– documentation (writing)

Assignment: Project Proposal

Decide on project goals and members– Use class list to exchange ideas

Recommendations:– Find a project for which you have ready access to people who

would be real users of the system– Look at the projects from last time to get a feeling for the

scope.Due date:– Proposals due Tuesday Feb 3rd (< 2 weeks)– We’ll give feedback and might ask you to revise it.