1. Introduction & Course Overview CSE440: Introductory HCI
3 minutes over (cut some of the old examples that are bad)
September 25, 2008

2. UI Interface Design, Prototyping, & Implementation
Hall of Fame or Shame?
Page setup for printing in IE5
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

3. UI Interface Design, Prototyping, & Implementation
Hall of Shame!
Page setup for printing in IE5
Page preview nice, but
Problems
codes for header & footer information
requires recall!
want recognition
no equivalent GUI
help is the way to find out, but not obvious
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

4. UI Interface Design, Prototyping, & Implementation
Hall of Fame or Shame?
Asiana Airlines interface for sending or SMS from plane
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

5. UI Interface Design, Prototyping, & Implementation
Hall of Shame!
Asiana Airlines interface for sending or SMS from plane
Cool, but
text entry using this this input device is VERY tedious
crashes often
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

6. Introduction & Course Overview CSE440: Introductory HCI
September 25, 2008

7. UI Interface Design, Prototyping, & Implementation
Outline
Who are we?
HCI introduction
Course overview & schedule
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

8. UI Interface Design, Prototyping, & Implementation
Who are we?
James Landay
Associate Professor in CSE at the University of Washington
formerly professor in EECS at UC Berkeley
spent 3 years as Director of Intel Research Seattle (ubicomp lab)
Ph.D. in CS from Carnegie Mellon ‘96
HCI w/ focus on informal input (pens, speech, etc.), web design (tools, patterns, etc.), & Ubiquitous Computing
founded NetRaker, leader in web experience management
now subsidiary of KeyNote Systems
Co-authored The Design of Sites with D. van Duyne & J. Hong
Kate Everitt
Ph.D. student in CSE
BSc in Computing & Info Science from Queen’s University
MS in CS from UC Berkeley
HCI w/ focus on computer supported cooperative work
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

9. Human-Computer Interaction (HCI)
the end-user of a program
the others they work or communicate with
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
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.
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

10. HCI Approach to UI Design
Organizational &
Social Issues
Tasks/Activities
Design
Technology
Humans
Give Examples of Tasks/Activities:
activity:
learning history
high level taskl:
- writing a paper
- drawing a picture
low level task (operation):
- copying a word from one paragraph to another
- coloring a line
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

11. Factors Influence Each Other
“People change their knowledge as they perform, i.e., they learn”
Organizational &
Social Issues
Tasks/Activities
Design
Technology
Humans
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
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

12. UI Interface Design, Prototyping, & Implementation
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  bad!
customer – person who will use the product you build
client – the company who is paying you to build it
HCI = design, prototyping, evaluation, & implementation of UIs
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

13. UI Interface Design, Prototyping, & Implementation
Why is HCI Important?
Major part of work for “real” programs
approximately 50%
Bad user interfaces cost
money
5% satisfaction  up to 85%profits
finding problems early makes them easier to fix
reputation of organization (e.g., brand loyalty)
lives (Therac-25)
User interfaces hard to get right
people are unpredictable
intuition of designers often wrong
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
Nearly 25% of all applications projects fail. Why?
overrun budgets & management pulls plug
others complete, but are too hard to learn/use
Solution is user-centered design. Why?
easier to learn & use products sell better
can help keep a product on schedule
finding problems early makes them easier to fix!
training costs reduced
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

14. UI Interface Design, Prototyping, & Implementation
Who Creates UIs?
A team of specialists (ideally)
graphic designers
interaction / interface designers
information architects
technical writers
marketers
test engineers
usability engineers
researchers (ethnographers, etc.)
software engineers
hardware engineers
industrial designers
customers
In this course you will wear the hats of many of these specialists.
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

15. How to Design and Build Good UIs
UI Development process
Usability goals
User-centered design
Design discovery
Rapid Prototyping
Evaluation
Programming
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

16. User Interface Development Process
Customers, Products,
Business, Marketing
Customers, Products,
Business, Marketing
Design
Discovery
Design
Exploration
Evaluate
Production
Customers:
- Roles (Who)
- Tasks (What)
- Context (Stories)
Marketing:
- Business Priorities
- Messages
Technology:
- Products
- Architecture
Design:
- Leading/competing
technologies
Work together to
realize the design
in detail
Evaluate with
Customers
Storyboard
Review & Iterate
Design Definition:
- Design Problem Statement
- Targeted User Roles (Who)
- Targeted User Tasks (What)
- Design Direction Statements
Proposal:
Demos/
Lo Fi Prototypes
(How)
Specification:
Hi Fidelity, Refined Design
- Based on customer feedback
- Foundation in product reality
- Refined Design description
based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

17. UI Interface Design, Prototyping, & Implementation
Iteration
At every stage!
Design
Prototype
Evaluate
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

18. UI Interface Design, Prototyping, & Implementation
Design is driven by requirements
what the artifact is for
not how it is to be implemented
e.g., phone not as important as mobile app.
A design represents the artifact
for UIs these representations include (?)
screen sketches or storyboards
flow diagrams/outline showing task structure
executable prototypes
representations simplify
Write essay
start word processor
write outline
fill out outline
Start word processor
find word processor icon
double click on icon
Write outline
write down high-level ideas .
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

19. Web Design Representations
Site Maps
Storyboards
Designers create representations of sites at multiple levels of detail
Web designs are iteratively refined at all levels of detail
Schematics
Mock-ups
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

20. UI Interface Design, Prototyping, & Implementation
Usability
According to the ISO: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments
This does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

21. Usability/User Experience Goals
Set goals early & later use to measure progress
Goals often have tradeoffs, so prioritize
Example goals
Learnable
faster the 2nd time & so on
Memorable
from session to session
Flexible
multiple ways to do tasks
Efficient
perform tasks quickly
Robust
minimal error rates
good feedback so user can recover
Discoverable
learn new features over time
Pleasing
high user satisfaction
Fun
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

22. UI Interface Design, Prototyping, & Implementation
User-centered Design
“Know thy User”
Cognitive abilities
perception
physical manipulation
memory
Organizational / educational job abilities & skills
Keep users involved throughout
developers working with target customers
think of the world in users terms
not technology-centered/feature driven `
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

23. Design Discovery Task Analysis & Contextual Inquiry
Observe existing work practices
augment with self-report tools (e.g., ESM)
Create examples & scenarios of actual use
Discover tasks to design for
Answer key questions about tasks & users
“Try-out”new ideas before building software ?
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

24. UI Interface Design, Prototyping, & Implementation
Rapid Prototyping
Fantasy Basketball
Build a mock-up of design so you can test
Low fidelity techniques
paper sketches
cut, copy, paste
Interactive prototyping tools
HTML, Visual Basic, Flash, DENIM, etc.
UI builders
Visual Studio .NET, JBuilder…
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

25. UI Interface Design, Prototyping, & Implementation
Evaluation
Test with real customers (participants)
w/ interactive prototype
low-fi with paper “computer”
Build models
GOMS
Low-cost techniques
expert evaluation
walkthroughs
online testing
ESP
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

26. UI Interface Design, Prototyping, & Implementation
Goals of the Course
Learn to design, prototype, & evaluate UIs
the needs & tasks of prospective customers
cognitive/perceptual constraints that affect design
technology & techniques used to prototype UIs
techniques for evaluating a user interface design
importance of iterative design for usability
how to work together on a team project
communicate your results to a group
key to your future success
Understand where technology is going & what UIs of the future might be like
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

27. UI Interface Design, Prototyping, & Implementation
Course Format
Interactive lectures
Quarter long project & homeworks
Readings
All material is online
slides, exercises, readings, schedule
Have fun & participate!
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

28. How CSE440 Fits into CS Curriculum
Most courses for learning technology
compilers, operating systems, databases, etc.
CSE440 concerned w/ design & evaluation
technology as a tool to evaluate via prototyping
skills will become very important upon graduation
complex systems, large teams
don’t look for large immediate impact in other CS courses
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

29. UI Interface Design, Prototyping, & Implementation
What is CSE441?
Takes up where this course stops
Focus on
executable prototypes
UI toolkits & implementation
advanced user testing
design principles & studio exercises/crits
even more project focused
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

30. Project Description (due Tue)
Each of you will propose an interface idea
fixing something you don’t like or a new idea
Groups
4 students to a group
work with students w/ different skills/interests
groups meet with teaching staff every 2 weeks
industrial mentors will meet with teams 3-4 times
Cumulative
apply several HCI methods to a single interface
many projects will continue into CSE441 (optional)
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

31. Project Process Overview
Project proposal (individual) due Tuesday
Break-up into groups next Thursday
Project contextual inquiry
Project task analysis
based on CI & field work with ESM tool on phone
In class presentations & critiques
Design sketching & video prototyping
i.e., rough proposals that can & will change
Low fidelity prototyping & user testing
Rapid prototype using tools
Final presentations & project fair with industry guests
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

32. UI Interface Design, Prototyping, & Implementation
Project Examples
SiteSketch
web page design
sketch-based
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

33. UI Interface Design, Prototyping, & Implementation
SiteSketch
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

34. Project Examples (cont.)
Clothes Shopper
online shopping
knows your prefs & sizes
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

35. UI Interface Design, Prototyping, & Implementation
Clothes Shopper
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

36. Project Examples (cont.)
Electronic book reader
take advantage of all the online texts on the net
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

37. Electronic Book Reader
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

38. Project Examples (cont.)
Nutrition tracker
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

39. UI Interface Design, Prototyping, & Implementation
Nutrition Tracker
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

40. Project Examples (cont.)
cUIzine
recipe tool for the home
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

41. UI Interface Design, Prototyping, & Implementation
cUIzine
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

42. 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)
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

43. Project Examples (cont.)
Runner’s training log
input daily workouts
reports
reminders
Mobile shopping
scan in UPC & tells you whether a good price? environmentally friendly?
Home entertainment control -“no more remotes”
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

44. Total Entertainment Control
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

45. 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
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

46. PDA Baseball Scorekeeper
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

47. UI Interface Design, Prototyping, & Implementation
PalmStock
PalmStock
brings up a FOCUS screen
entire line is selectable
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

48. UI Interface Design, Prototyping, & Implementation
InkChat
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

49. Nutrition/Exercise Tracker
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

50. UI Interface Design, Prototyping, & Implementation
Trippin’
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

51. UI Interface Design, Prototyping, & Implementation
Traffic Monitor
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

52. UI Interface Design, Prototyping, & Implementation
Traffic Monitor
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

53. UI Interface Design, Prototyping, & Implementation
Traffic Monitor
Congestion Information
(traffic light metaphor)
Alert icons
Volume
Pan
Audible reports about alerts
Zoom
ZOOMED IN IMAGES
Center on
driver
Driver’s location
Map view presets
(radio buttton metaphor)
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

54. Otto: Location-based Photos
Navigation breadcrumbs buggy and use confused evaluators
Colored in current breadcrumb
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

55. UI Interface Design, Prototyping, & Implementation
Bus Buddy
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

56. UI Interface Design, Prototyping, & Implementation
Bus Buddy
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

57. UI Interface Design, Prototyping, & Implementation
iWorkout
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

58. UI Interface Design, Prototyping, & Implementation
TaskKaster
1. Idea generation, Pick 3 or 4… and show in depth
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

59. UI Interface Design, Prototyping, & Implementation
Radr
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

60. UI Interface Design, Prototyping, & Implementation
Swickr
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

61. UI Interface Design, Prototyping, & Implementation
Bargain Hunter
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

62. UI Interface Design, Prototyping, & Implementation
Cluster
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

63. UI Interface Design, Prototyping, & Implementation
Cluster
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

64. Mobile Computing Project Themes
Location-enhanced computing
devices that are aware of their location
past examples include car navigation, Trippin’, finding nearby restaurants, etc
Activity-based computing
applications that use inference of human physical activity to enhance our lives
past examples helping care for an elder, helping people stay fit
Target domain
decreasing environmental impact
submit best to CHI 2009 Design Competition
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

65. UI Interface Design, Prototyping, & Implementation
Books
The Design of Sites by van Duyne, Landay, & Hong
online copies of the 4-5 chapters we will use
We will also hand out other papers, give you web links, & refer to lecture slides
Recommended textbooks
Human-Computer Interaction by Alan Dix, et. al., 3rd edition, 2003
order from Amazon.com (link off class web page)
Other recommended books on web page
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

66. UI Interface Design, Prototyping, & Implementation
Assignments
Individual
3 written + one talk each
Group
5 written assignments
4 presentation/demos with the write-ups + poster
all group work handed in on Web (group web site)
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

67. UI Interface Design, Prototyping, & Implementation
Grading
A combination of
midterm (25%)
individual assignments (15%)
group project (55%)
demos/presentations/poster (group component)
project write-ups and exercises
ratings given by other team members & class
in class participation (5%)
No curve
No final (though late midterm)
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

68. UI Interface Design, Prototyping, & Implementation
Tidbits
Late Policy
no lates on group assignments
individual assignments lose one letter grade/day
Cheating policy
will get you an F in the course
more than once can get you dismissed
More information (syllabus/schedule/slides)
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

69. UI Interface Design, Prototyping, & Implementation
Administrivia
Registration
limited by room and project constraints to 40
appeal to me if not enrolled (due today at 5 PM)
tell us why you should be in the course
background, interests, what you can contribute
will admits by Monday at 5 PM
Roll
James’ office hours
Wed. 11AM-12 noon(642 Allen Center)
Mon. 3-4 PM online (send Kate Yahoo/MS/Google ID)
for appointments at other times
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

70. UI Interface Design, Prototyping, & Implementation
Administrivia (cont.)
Discussion sections
new material will be covered in discussion  attend
also a time to get at least some of your team together
do people have Monday conflict?
Kate would like to cancel Wed.
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

71. UI Interface Design, Prototyping, & Implementation
Administrivia
Fill out course survey at:
Project proposal due start of lecture Tue.
Next lecture on History of HCI
Read
As We May Think by Vannevar Bush
Tools For Thought Ch 9 (Engelbart Demo) (optional)
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation

72. UI Interface Design, Prototyping, & Implementation
Summary
HCI an important part of most software produced today
Getting the interface right is hard, but…
Solution in Iterative Design including repeated cycles of
Design
Prototyping
Evaluation
CSE Autumn 2008
UI Interface Design, Prototyping, & Implementation