CS 160 Introduction
UI Hall of Fame or Hall of Shame?
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
UI Hall of Fame or Hall of Shame?
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…
UI Hall of Fame or Hall of Shame?
UI Hall of Shame!
CS 160 Introduction
Outline
- Project description & handout
Who am I?
- 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
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
UI design
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”
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”
Factor Influences
“People change their knowledge as they perform, i.e., they learn”
Factor Influences
“People change their knowledge as they perform, i.e., they learn”
Factor Influences
People and their tasks change slowly compared to technology: a well-designed UI should last for a while (like mice, desktops etc.)
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
Why Study User Interfaces?
- Major part of work for “real” programs
- 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 -> up to 85% ? profits)
- lives (Therac-25)
- User interfaces hard to get right
- people and tasks are complex
Who builds UIs?
- A multi-disciplinary team (ideally)
- graphic designers
- interaction / interface designers
- technical writers
- marketers
- test engineers
- software engineers
- users
How to Design and Build UIs
- Identify and understand users’ needs
- Task analysis & contextual inquiry
UI Design Cycle
Human-Centered Design
- Understanding people
- “Get inside the user’s head”
- Keep users involved throughout design
- Psychology
- Cognitive: perception, movement, memory
- Social: motives, personalities, group dynamics
- Organizations and knowledge work
Task Analysis & Contextual Inquiry
- Observe existing work practices
- Create examples and scenarios of actual use
- Try-out new ideas before building software
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
Evaluation
- Test with real users (participants)
- Low-cost techniques
- expert evaluation
- walkthroughs
Programming
Iteration
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
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! They’re the ones nobody uses.
- The rest have usability issues, even indirect ones
Project Description
- Each of you will propose a UI or app.
- 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
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
Low-fi Prototyping & Testing
Project Process Overview
- 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)
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
- In class presentations and critiques
Project Timeline
Project Examples
CD JukeBox
Project Examples (cont.)
- Clothes Shopper
- online shopping
- knows your prefs & sizes
Clothes Shopper
Project Examples (cont.)
- Interactive TV Guide
- find shows, program VCR to record, etc.
Interactive TV Guide
Project Examples (cont.)
- Electronic book reader
- take advantage of all the online texts on the net
Electronic Book Reader
Project Examples (cont.)
Nutrition Tracker
Project Examples (cont.)
cUIzine
InkChat
Rendezvous
Nutrition/Exercise Tracker
Project Suggestions
- Home info kiosks (cooking, cleaning)
- P2P tools:
- bargain hunter
- recommender
- Meeting note-taker
- share notes live
- work with whiteboard
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
Administrivia
- Registration
- limited by HW and resource constraints to 40
- fill-out appeal form if weren’t admitted
- tell us why you should be in the course
- background, interests, what you can contribute to class
- Hand in forms ASAP (we’ll process them Thursday).
Administrivia
- John’s office hours
- Tues. 2-3 PM (529 Soda)
- Thur. 3-4 PM
- email jfc@cs for appointments at other times
- Teaching assistant
- Miriam Walker (mwalker@cs.berkeley.edu)
- Office hours: Mon 11-12, Fri 2:30-3:30, 511 Soda Hall
Administrivia (cont.)
- Discussion sections
- Weds 10:30-11:30 and 11:30-12:30 in 405 Soda
- new material will be covered in discussion -> you should attend
- Sections start this week (tomorrow)!
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
Assignments (tentative)
- Group
- 3-4 written assignments
- 3 presentation/demos with write-ups
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%)
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
Summary
- Start thinking about projects
- Next lecture on history of HCI:
- One reading handed out, two others online