Introduction to the Design, Prototyping,

1
Introduction to the Design, Prototyping,
Evaluation of Human-Computer Interfaces (CS 160)

• Professor James Landay
• Spring 2002
• January 23, 2002

2
UI Hall of Fame or Hall of Shame?
http//www.hro.nl/
3
Long Intros Belong in the UI Hall of Shame

• Do not help the user accomplish their task
• why did they come to the site?
• Take too long
• most visitors will just leave never come back
• May be valid for entertaninment, art, or branding
  sites

4
UI Hall of Fame or Hall of Shame?
5
UI Hall of Shame!

• How do you cancel?

6
Introduction to the Design, Prototyping,
Evaluation of Human-Computer Interfaces (CS 160)

• Professor James Landay
• Spring 2002
• January 23, 2002

7
Outline

• Who am I?
• HCI introduction
• Course overview
• Project description
• Administrivia

8
Who am I?

• Assistant professor in EECS
• Ph.D. in CS from Carnegie Mellon 1996
• sketching user interfaces electronically
• Work in the HCI area
• informal communications (pens, speech, etc.)
• ubiquitous computing
• Cal grad (BS EECS 90)

9
Human-Computer Interaction (HCI)

• Human
• the end-user of a program
• the others in the organization
• Computer
• the machine the program runs on
• often split between clients servers
• Interaction
• the user tells the computer what they want
• the computer communicates results

10
What is HCI?
11
These Factors Influence Each Other Design
Now that mice are included with most computers,
applications assume a mouse will be used as a the
pointing device
12
These Factors Influence Each Other Design
Now that mice are included with most computers,
applications assume a mouse will be used as a the
pointing device
13
Factors Influence
People change their knowledge as they perform,
i.e., they learn
14
Factors Influence
People change their knowledge as they perform,
i.e., they learn
15
User Interfaces (UIs)

• Part of application that allows people
• to interact with computer
• to carry out their task
• User vs. Customer vs. Client
• user is a term only used by 2 industries -gt bad!
• customer the person who will use the product
  you build
• client the person/company who is paying you to
  build it
• HCI design, prototyping, evaluation,
  implementation of UIs

16
Why Study User Interfaces?

• Major part of work for real programs
• approximately 50
• You will work on real software
• intended for people other than yourself
• Bad user interfaces cost
• money (5? satisfaction -gt up to 85? profits)
• lives (Therac-25)
• User interfaces hard to get right
• people are unpredictable

17
What is Usability?

• Ease of learning
• faster the second time and so on...
• Recall
• remember how from one session to the next
• Productivity
• perform tasks quickly and efficiently
• Minimal error rates
• if they occur, good feedback so user can recover
• High user satisfaction
• confident of success

18
Interface Hall of Shame or Fame?
19
Interface Hall of Shame

• Hard to tell the difference between the two icons
  names

20
Who Builds Interfaces?

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

21
Keys to Designing Building Successful Interfaces

• Design cycle
• Customer-centered design
• Task analysis contextual inquiry
• Rapid prototyping
• Evaluation
• Programming
• Iteration

22
Interface Design Cycle
Design
Prototype
Evaluate
23
Customer-centered Design

• Know thy Customer
• Cognitive abilities
• visual aural perception
• physical manipulation
• memory
• Organizational / job abilities
• Keep customers involved throughout project

24
Task Analysis Contextual Inquiry

• Observe existing work practices
• Create scenarios of actual use
• Try-out new ideas before building software

25
Rapid Prototyping

• Build a mock-up of design
• Low fidelity techniques
• paper sketches
• cut, copy, paste
• video segments
• Interactive prototyping tools
• HTML, Visual Basic, HyperCard, Director, etc.
• UI builders
• Fusion, NeXT, Visual Cafe

26
Evaluation

• Test with real customers (participants)
• Build models
• Low-cost techniques
• expert evaluation
• walkthroughs

27
Programming

• Toolkits
• UI Builders
• Event models
• Input / Output models
• etc.

28
Iteration

• At every stage!

29
Goals of the Course

• Learn to design, prototype, evaluate interfaces
• discover the tasks of prospective customers
• cognitive/perceptual constraints that affect
  design
• techniques for evaluating an interface design
• importance of iterative design for usability
• technology used to prototype implement UI code
• how to work together on a team project
• communicate your results to a group
• key to your future success

30
How CS160 Fits into CS Curriculum

• Most courses for learning technology
• compilers, operating systems, databases, etc.
• CS160 concerned w/design evaluation
• assume you can program/learn new languages
• technology as a tool to evaluate via prototyping
• skills will become very important upon graduation
• complex systems, large teams
• dont look for large immediate impact in other CS
  courses

31
Project Description

• Each of you will propose an interface idea
• fixing something you dont like or a new idea
• Groups
• 4-5 students to a group
• work with students w/ different skills/interests
• groups meet with teaching staff every two weeks
• Cumulative
• apply several HCI methods to a single interface

32
Project Process Overview

• Project proposal (individual) due Monday
• based on workshop we will hold this Saturday
• Break-up into groups next Wednesday
• Project task analysis sketches
• i.e., rough proposals that can will change
• Low fidelity prototyping testing

33
Low-fi Prototyping Testing
34
Project Process Overview

• Project proposal (individual) due Monday
• based on workshop we will hold this Saturday
• Break-up into groups next Wednesday
• Project task analysis sketches
• i.e., rough proposals that can will change
• Low fidelity prototyping testing
• Build 1st interactive prototype
• In class presentations critiques
• Heuristic evaluations (individual)

35
Project Process Overview (cont.)

• Heuristic evaluation summary
• Build 2nd interactive prototype
• In lab demo critiques
• Customer testing of 2nd prototype
• In class presentation critiques
• Build 3rd prototype
• real interface, but not necessarily real app.
• In class presentations critiques

36
Project Timeline
37
Project Examples

• Online Telebears
• Research notebook
• threads of ideas
• multiple views
• secure time stamps

38
Research Notebook
39
Project Examples (cont.)

• SiteSketch
• web page design
• sketch-based

40
SiteSketch
41
Project Examples (cont.)

• CD Jukebox

42
CD JukeBox
43
Project Examples (cont.)

• Clothes Shopper
• online shopping
• knows your prefs sizes

44
Clothes Shopper
45
Project Examples (cont.)

• Interactive TV Guide
• find shows, program VCR to record, etc.

46
Interactive TV Guide
47
Project Examples (cont.)

• Electronic book reader
• take advantage of all the online texts on the net

48
Electronic Book Reader
49
Project Examples (cont.)

• Nutrition tracker

50
Nutrition Tracker
51
Project Examples (cont.)

• cUIzine
• recipe tool for the home

52
cUIzine
53
Project Examples (cont.)

• Tech support help desk
• avoid using the phone for getting help

54
Tech-Support Help Desk
55
Project Examples (cont.)

• Regular expression builder
• visual tool
• lets beginners build regular expression

56
Regular Expression Builder
57
Project Examples (cont.)

• Apartment finder
• kinda obvious!!! )

58
Apartment Finder
59
Project Examples (cont.)

• Read WWW over phone
• find structure in pages build voice menus
• navigation problem
• cache common paths reorder?
• PDA brainstorming tool
• small portable computers in a group meeting (say
  Palm Pilots)

60
PDA Brainstorming
61
Project Examples (cont.)

• Runners training log
• input daily workouts
• reports
• reminders
• PDA for shopping
• scan in UPC tells you whether a good price
• Home entertainment control -no more remotes

62
Total Entertainment Control
63
Project Examples (cont.)

• Football play design program
• sketch players show how they will move
• simulate plays
• Customized web newspaper

64
Web Newspaper
65
Project Examples (cont.)

• PDA Baseball score keeper
• have stats of the players on your PDA
• keep track of what happens during the game
• upload stats after the game

66
PDA Baseball Scorekeeper
67
PalmStock
68
InkChat
69
Rendezvous
Ed
Josh
Brian
Back- end
Cliff
70
Nutrition/Exercise Tracker
71
Trippin
72
Project Themes

• Ubiquitous Computing
• small devices everywhere phones, PDAs, etc.
• wireless connectivity
• voice user interfaces (smart spaces)
• Web-based Interfaces
• Products w/ disabled women in mind
• designing for the disabled produces products for
  all of us
• screen readers for blind -gt voice-based email
  readers
• workshop this Saturday in Woz for enrolled
  students (attendance mandatory)

73
Administrivia

• Registration
• limited by room and project constraints to 40
• fill-out appeal form if werent admitted (due
  today at 5 PM)
• tell us why you should be in the course
• background, interests, what you can contribute
• will post list of admits on course web page by
  Friday at 5 PM
• Roll
• James office hours
• Mon. 4-5 PM (683 Soda)
• Thur. 10-11 AM online (send us your Yahoo id)
• email landay_at_cs for appointments at other times

74
Administrivia (cont.)

• Teaching assistants
• Head TA
• Wai-ling Ho-Ching (wai-ling_at_cs.berkeley.edu) -
  Head TA
• O.H. TBA in 527 Soda
• Assistant TA
• Corey Chandler (coreyc_at_uclink4.berkeley.edu)
• O.H. TBA
• Discussion sections
• Monday 1-2 (310 Soda) and Tuesday 2-3 (320 Soda)
• new material will be covered in discussion -gt
  attend

75
Books

• We will mainly hand out papers, give you web
  links, refer to lecture slides
• Two recommended textbooks
• Human-Computer Interaction by Alan Dix, et. al.,
  2nd edition, 1998.
• Developing User Interfaces by Dan Olsen, 1998.
• order from Amazon.com (link off class web page)
• Other recommended books on web page

76
Assignments (tentative)

• Individual
• 4-5 written one talk each
• Group
• 3-4 written assignments
• 4 presentation/demos with write-ups
• all group work handed in on Web (group web site)

77
Grading

• A combination of
• midterm (15)
• final (20)
• individual assignments (20)
• group project (40)
• demos/presentation (group component)
• project write-ups and exercises
• ratings given by other team members class
• in class participation (5)
• No curve

78
Tidbits

• Late Policy
• no lates on group assignments
• individual assignments lose one letter grade/day
• Cheating policy (official)
• will get you an F in the course
• more than once can get you dismissed from Cal
• More information (syllabus/schedule/slides)
• http//guir.berkeley.edu/courses/cs160/spring2002

79
Summary

• Check web site for admit list by Friday at 5 PM
• All admitted students must attend Saturday
  workshop in Woz (950 AM)
• If you are not on the list, please do not come
• Do on-line registration on Friday
• Project proposal due at start of lecture on
  Monday
• Next lecture on customer-centered design