1. Professor John Canny Fall 2004
CS 160 Introduction
Professor John Canny
Fall 2004
11/16/2018

2. Outline Who am I? HCI introduction Course overview
Project description & handout
Administrivia
11/16/2018

3. Who am I? Professor in EECS Ph.D. in CS from MIT 1987
Robot motion planning, computer algebra
Research interests:
Educational Technology
Context-aware and mobile computing
Privacy and cryptography
Rapid prototyping technology
Accent is from South Australia
11/16/2018

4. Human-Computer Interaction (HCI)
Humans
A person trying to accomplish something
Other innocent bystanders
Computers
Run application programs
Often remote (client-server)
So far you have probably studied lots about Computers, but
little about Humans and Interaction.
This course will concentrate on how these three areas come together.
Interaction
Human expresses their wishes to the machine
The machine responds
11/16/2018

5. HCI Challenges Understanding people
People are not all the same - values very different
Identity (traits) are both individual and collective
Tension between designing too narrowly and too broadly
Diversity in the design team helps
So far you have probably studied lots about Computers, but
little about Humans and Interaction.
This course will concentrate on how these three areas come together.
11/16/2018

6. HCI Challenges Ill-posed problems
You don’t get to start with a “clean” problem - problem solving is only part of design
Defining the problem is much of the work
The problem spec may change during design, e.g. in “extreme programming”
So far you have probably studied lots about Computers, but
little about Humans and Interaction.
This course will concentrate on how these three areas come together.
11/16/2018

7. Benefits of HCI Skills CS160 projects are like companies MIT ME survey
Deal with users: understand and involve them
Communication
Subjective judgments
Flexibility and time constraints!
MIT ME survey
So far you have probably studied lots about Computers, but
little about Humans and Interaction.
This course will concentrate on how these three areas come together.
11/16/2018

8. UI design Organizational & Social Issues Task Design
Medium (technology)
People
Give Examples of Tasks:
high level:
- writing a paper
- drawing a picture
low level:
- copying a word from one paragraph to another
- coloring a line
11/16/2018

9. User Interfaces (UIs) Part of application that allows users
to express their intentions to the machine
to interpret results of machine actions
11/16/2018

10. User Interfaces (UIs) HCD = Human-Centered Design
Understanding user needs
Design
Prototyping
Evaluation
Final implementation of UIs
11/16/2018

11. Iterative vs. top-down design
Human-Centered Design is an iterative process, rather than top-down. Why?
Hard to predict user performance with the product
Users have very different intuition/conceptual models
Hard to model (mathematically)
Users can help with design
11/16/2018

12. Why Study User Interfaces?
Major part of work for “real” programs
approximately 50%
Many application programs are mostly UI
word proc., spreadsheet, PDAs, , calendars etc.
You will work on consumer software
intended for users other than yourself
Studies have shown that the design, programming, and evaluation of the UI can take up to 50% of the project time and cost for a wide range of commercial and in-house software
11/16/2018

13. Why Study User Interfaces?
Bad user interfaces cost
money (5%  satisfaction -> up to 85%  profits)
lives (Therac-25)
User interfaces hard to get right
people and tasks are complex
Studies have shown that the design, programming, and evaluation of the UI can take up to 50% of the project time and cost for a wide range of commercial and in-house software
11/16/2018

14. Who builds UIs? A multi-disciplinary team (ideally) Why?
graphic designers
interaction / interface designers
technical writers
marketers
test engineers
software engineers
Users
Why?
In this course you will wear the hats of many of these specialists.
11/16/2018

15. How to Design and Build UIs
Identify and understand users’ needs
Task analysis & contextual inquiry
Rapid prototyping
Evaluation
Programming
Iteration
11/16/2018

16. Hand in petition forms to
My office 529 Soda
11/16/2018

17. Administrivia Registration Class size target is 50 students
Please fill out petition form if you are not yet registered.
You must also be on the wait list to sign up.
11/16/2018

18. Administrivia John’s office hours Teaching assistants
Tu 1-2, W 2-3 noon (529 Soda)
for appointments at other times
Teaching assistants
Scott Lederer
11/16/2018

19. Administrivia (cont.) Discussion sections No sections this week
Tuesday 9-10, in 320 Soda
new material covered in section -you should attend
No sections this week
Class ombudsman appointed next class (need volunteer). Relay student concerns to staff.
11/16/2018

20. 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
11/16/2018

21. Assignments Individual Group 2 written 5 written assignments
2 presentation/demos with write-ups
11/16/2018

22. Grading A combination of No curve Midterm (15%) Final (15%)
Individual assignments (15%)
Group project (40%)
demos/presentation (group component)
project write-ups and exercises
ratings given by other team members & class
In-class quizzes (10%)
In-class participation (5%)
No curve
11/16/2018

23. Assessment Guidelines will be given in each assignment
You should read readings and prepare for class, participation is graded
Good communication expected in oral and written presentations
Midterm and final
Groups self-assess participation - should monitor it throughout the projects
Meet with us as soon as problems emerge
11/16/2018

24. Tidbits Late Policy Cheating policy (official) More information
no lates on group assignments
individual assignments lose 20% per day
Cheating policy (official)
will get you an F in the course
more than once can get you dismissed from Cal
More information
11/16/2018

25. UI Design Cycle
Design
Prototype
Evaluate
11/16/2018

26. Human-Centered Design
Understanding people
“Get inside the user’s head”
Keep users involved throughout design
Psychology
Cognitive: learning, perception, memory
Social: motives, personalities, group dynamics
Technologies
UI toolkits, design principles
Collaborative technologies
11/16/2018

27. Users: Communities and Personae
Remember that individuals belong to multiple communities - not just trait groups
Communities are a unifying influence, and allow new products to diffuse (be adopted by new users) in society.
11/16/2018

28. Users: Personae A portrait of a character (with a name) Name: Jack
Occupation: Professor
Values: liberal politics
Likes: water (swimming, sailing, lying on a beach), Asian food, French food, Italian food, seafood,…
Dislikes: traffic, bad comedians, bureaucracy,
Goals: start family, get good education for kids (probably private), build a leading research group in area,…
11/16/2018

29. Users: Personae Name: Alice Occupation: Just graduated MBA, looking,…
Values: Family, friends, work in a humane workplace
Likes: Dinner parties, Working out, One quiet night per week, Paris, Lemon drops (drink), foot massages.
Dislikes: Chauvinism, aggressive drivers, people who drink more than they should, working after 9pm.
Goals: management role in a mid-size company – making it a better place
11/16/2018

30. Personae
More like a story character than a description of a community or group
Q: Why the “unnecessary” detail?
11/16/2018

31. Personae Q: Why the “unnecessary” detail?
A: Narrative detail is generative
It helps you generate design ideas
helps you visualize the character, and anticipate their needs and wants based on all your life experience.
It helps avoid stereotypes and incorrect assumptions
Avoids specifying users in terms of your product e.g “dislikes waiting for music downloads”
11/16/2018

32. Multiple Personae
With multiple characters, you can explicitly cover a range of user traits: age, education, wealth, culture.
Personnae describe the union of user traits, an abstract category of users is an intersection.
Several personae (e.g. 5-10) will allow you to summarize the scope of the user community.
11/16/2018

33. What a Persona is not A description of a real person
but it can be based on real people, just like a story character
A description of common traits of a group of people
A stereotype
11/16/2018

34. Creating personas Is hard to do – like creating a good story character
Exercise – pick someone you know, and try listing their values, likes, dislikes etc. then ask them as a reality check
Helps separate fact from assumption
11/16/2018

35. Task Analysis & Contextual Inquiry
Observe existing work practices (real users)
Create examples and scenarios of actual use
Try-out new ideas before building software ?
11/16/2018

36. 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
Fantasy Basketball
11/16/2018

37. Evaluation Test with real users (participants) Build models
Low-cost techniques
expert evaluation
walkthroughs
11/16/2018

38. Programming Toolkits UI Builders Event models Input / Ouput models
etc.
11/16/2018

39. Iteration
At every stage!
Design
Prototype
Evaluate
11/16/2018

40. 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
11/16/2018

41. 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
All systems have usability issues (unless no-one uses them), even if they are indirect
11/16/2018

42. Project Description Each of you will propose a UI or app. Groups
fixing something you don’t 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
11/16/2018

43. Project Examples Biosk - support for biology lab work The environment:
11/16/2018

44. Project Examples
Biosk - the solution
11/16/2018

45. Project Examples
iCurator: Intelligent museum guide
11/16/2018

46. Project Examples
iCurator: lo-fi and hi-fi prototypes
11/16/2018

47. Project Examples
SLnotes: Live in-class note-taking
11/16/2018

48. Project Examples
PHAT: Personal Healthcare and Tracking
11/16/2018

49. Project Examples
SmartFridge
11/16/2018

50. Project Examples
Newsalert: Context-aware notification for smart phones
Based on Qualcomm’s BREW API
Related: Stock Alert and Context-awareness
11/16/2018

51. Project Suggestions
This semester we will focus on human learning, for its own sake and as a model of technology adoption and creative work.
11/16/2018

52. Project Suggestions Learning/Tutoring systems: Educational games
Tutorial systems
Creative work portal
Mini-course
Smart HELP system (for an existing product)
11/16/2018

53. Summary
Projects – think about your individual project. Those will be due next week.
No section tomorrow
Next lecture on history of HCI:
Three readings are online
11/16/2018