CS 160 Introduction

1
CS 160 Introduction

• Professor John Canny
• Fall 2001
• August 28, 2001

2
UI Hall of Fame or Hall of Shame?
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 entertainment, art, or branding
  sites

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

• How do you find the information????
• click on the icons on left
• not obvious
• icons are moving, making it harder
• imagine someone with motor impairment
• May be valid for their audience

6
UI Hall of Fame or Hall of Shame?
7
UI Hall of Shame!

• How do you cancel?

8
CS 160 Introduction

• Professor John Canny
• Fall 2001
• August 28, 2001

9
Outline

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

10
Who am I?

• Professor in EECS
• Ph.D. in CS from MIT 1987
• Robot motion planning, computer algebra
• Research interests
• Robotics, graphics, simulation, active polymers
• Work in HCI
• Telepresence (esp. telerobots), avatars
• Collaborative filtering privacy

11
Human-Computer Interaction (HCI)

• Humans
• A person trying to accomplish something
• Other innocent bystanders

• Computers
• Run application programs
• Often remote (client-server)

• Interaction
• Human expresses their wishes to the machine
• The machine responds

12
UI design
13
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
Organizational Social Issues
Humans
14
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
Organizational Social Issues
Humans
Medium(technology)
15
Factor Influences
People change their knowledge as they perform,
i.e., they learn
Organizational Social Issues
Humans
Medium(technology)
16
Factor Influences
People change their knowledge as they perform,
i.e., they learn
Organizational Social Issues
Humans
Medium(technology)
17
Factor Influences
People and their tasks change slowly compared to
technology a well-designed UI should last for a
while (like mice, desktops etc.)
Organizational Social Issues
Humans
Medium(technology)
18
User Interfaces (UIs)

• Part of application that allows users
• to express their intentions to the machine
• to interpret results of machineactions
• HCD Human-Centered Design
• Understanding user needs
• Design
• Prototyping
• Evaluation
• Final implementation of UIs

19
Why Study User Interfaces?

• Major part of work for real programs
• approximately 50
• Many application programs are mostly UI
• word proc., spreadsheet, PDAs, email, calendars
  etc.
• You will work on real software
• intended for users 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 and tasks are complex

20
Who builds UIs?

• A multi-disciplinary team (ideally)
• graphic designers
• interaction / interface designers
• technical writers
• marketers
• test engineers
• software engineers
• users

21
How to Design and Build UIs

• Identify and understand users needs
• Task analysis contextual inquiry
• Rapid prototyping
• Evaluation
• Programming
• Iteration

22
UI Design Cycle
23
Human-Centered Design

• Understanding people
• Get inside the users head
• Keep users involved throughout design
• Psychology
• Cognitive perception, movement, memory
• Social motives, personalities, group dynamics
• Organizations and knowledge work

24
Task Analysis Contextual Inquiry

• Observe existing work practices
• Create examples and 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 users (participants)
• Build models
• Low-cost techniques
• expert evaluation
• walkthroughs

27
Programming

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

28
Iteration

• At every stage!

29
Goals of the Course

• Learn to design, prototype, evaluate UIs
• the tasks of prospective users
• psychological issues that affect design
• techniques for evaluating a user interface design
• importance of iterative design for usability
• technology used to prototype implement UI code
• how to work together on a team project
• communicate ideas
• 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
• skills are relevant for other design courses
• Are there purely technical systems?
• Yes! Theyre the ones nobody uses.
• The rest have usability issues, even indirect ones

31
Project Description

• Each of you will propose a UI or app.
• 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 due two weeks from Thursday.
• Project task analysis sketches
• i.e., rough proposals that can will change
• Low fidelity prototyping user testing

33
Low-fi Prototyping Testing
34
Project Process Overview

• Form groups by next week
• User interviews (tentative)
• Project task analysis sketches
• i.e., rough proposals that can will change
• Low fidelity prototyping user testing
• Build interactive (hi-fi) prototype
• In-class presentations and critiques
• Heuristic evaluations (individual)

35
Project Process Overview (cont.)

• Heuristic evaluation summary
• Build 2nd interactive prototype
• In lab demo and critiques
• User testing of 2nd prototype (observation)
• In class presentation and critiques
• Build final design
• In class presentations and critiques

36
Project Timeline
Low-fi User Test
HE Summary
Project Idea
User Testing
Dec. 1
Sept. 8
Nov. 1
Oct. 1
Hi-fi Prototype 1
Project Sketches
Hi-fi Prototypes
Final Prototype
37
Project Examples

• CD Jukebox

38
CD JukeBox
39
Project Examples (cont.)

• Clothes Shopper
• online shopping
• knows your prefs sizes

40
Clothes Shopper
41
Project Examples (cont.)

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

42
Interactive TV Guide
43
Project Examples (cont.)

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

44
Electronic Book Reader
45
Project Examples (cont.)

• Nutrition tracker

46
Nutrition Tracker
47
Project Examples (cont.)

• cUIzine
• recipe tool for the home

48
cUIzine
49
InkChat
50
Rendezvous
Ed
Josh
Brian
Back- end
Cliff
51
Nutrition/Exercise Tracker
52
Project Suggestions

• Home info kiosks (cooking, cleaning)
• P2P tools
• bargain hunter
• recommender
• Meeting note-taker
• share notes live
• work with whiteboard
• Memory assistant
• Use a camera speech

53
Project Suggestions (cont.)

• Location/context-aware applications
• What restaurants/sights/public transport is
  nearby?
• Designs for specific lifestyles
• People with physical disabilities
• Elder citizens
• People with limited English language skills
• Project design tools
• Learning tools

54
Administrivia

• Registration
• limited by HW and resource constraints to 40
• fill-out appeal form if werent admitted
• tell us why you should be in the course
• background, interests, what you can contribute to
  class
• Hand in forms ASAP (well process them Thursday).

55
Administrivia

• Johns office hours
• Tues. 2-3 PM (529 Soda)
• Thur. 3-4 PM
• email jfc_at_cs for appointments at other times
• Teaching assistant
• Miriam Walker (mwalker_at_cs.berkeley.edu)
• Office hours Mon 11-12, Fri 230-330, 511 Soda
  Hall

56
Administrivia (cont.)

• Discussion sections
• Weds 1030-1130 and 1130-1230 in 405 Soda
• new material will be covered in discussion -gt you
  should attend
• Sections start this week (tomorrow)!

57
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.
• Designing the User Interface by Ben Shneiderman,
  3rd edition, 1998.
• Other recommended books on web page

58
Assignments (tentative)

• Individual
• 4-5 written
• Group
• 3-4 written assignments
• 3 presentation/demos with write-ups

59
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

60
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
• www.cs.berkeley.edu/jfc/cs160/fall01

61
Summary

• Start thinking about projects
• Go to section tomorrow
• Next lecture on history of HCI
• One reading handed out, two others online