Lecture 3: User Centered Design - UMD Computer … 2010 CMSC 434 Introduction to Human Computer...
60
CMSC 434 Introduction to Human Computer Interaction Spring 2010 1 Lecture 3: User Centered Design February 1
Transcript of Lecture 3: User Centered Design - UMD Computer … 2010 CMSC 434 Introduction to Human Computer...
CMSC 434 Introduction to Human Computer Interaction Spring 2010 1
Lecture 3: User Centered Design
February 1
CMSC 434 Introduction to Human Computer Interaction Spring 2010 2
Recap
• Five Usability Attributes
CMSC 434 Introduction to Human Computer Interaction Spring 2010 3
Recap
• Five Usability Attributes – Learnability – Efficiency – Memory – Few errors – Satisfaction
CMSC 434 Introduction to Human Computer Interaction Spring 2010 4
Wiki vs. Forum
• Users? • Tasks? • Usability comparison?
CMSC 434 Introduction to Human Computer Interaction Spring 2010 5
Homework: Evaluation 1
Due next Monday (Feb. 8) beginning of the class
• Evaluate the website you visit the most often, as you said in Homework 0
• Focus on the five usability attributes (about 100 words each)
• Add a H1 section for this homework and an H2 section for each usability attribute
• Make sure the link on the People page is working
CMSC 434 Introduction to Human Computer Interaction Spring 2010 6
Project: Team Assignment
Due next Monday (Feb. 8) beginning of the class
• Choose the project themes you are interested
• Add your name to the list • Team assignment will be randomly
determined unless you already have a team
CMSC 434 Introduction to Human Computer Interaction Spring 2010 7
Micro Homework 1
Due next Monday (Feb. 8) beginning of the class
• 10 Micro Homework Assignments • 0.5% each • Easy
CMSC 434 Introduction to Human Computer Interaction Spring 2010 8
Lecture 3: User Centered Design
February 1
CMSC 434 Introduction to Human Computer Interaction Spring 2010 9
Three principles of UCD
1. Early focus on users and tasks 2. Iterative design with prototypes 3. Empirical measurement on prototypes
CMSC 434 Introduction to Human Computer Interaction Spring 2010 10
Why build an UI?
• Computerize a logistical process – E.g., inventory control, restaurant
• Upgrade an outdated UI – E.g., Terminal to Web1.0 to Web 2.0
• Expect some people will use it – E.g., dot.com, iPhone app
• Apply a novel technology – Software: sentiment analysis – Hardware: gyroscope
CMSC 434 Introduction to Human Computer Interaction Spring 2010 11
1984 Summer Olympics
CMSC 434 Introduction to Human Computer Interaction Spring 2010 12
Needs
• Athletes want to receive support from families and friends who are far away
• Athletes want to talk to other athletes in other villages
CMSC 434 Introduction to Human Computer Interaction Spring 2010 13
Solution: Olympic Message System
CMSC 434 Introduction to Human Computer Interaction Spring 2010 14
Challenges
• 10,000 Olympic athletes • Many family members and friends • 50 different languages • No cell phones • Many with no experience with computers • Some with no experience with push
button phone
CMSC 434 Introduction to Human Computer Interaction Spring 2010 15
Things at stake
• Everyone is watching • No delay • No second chance • Subject to sabotage and abuse
CMSC 434 Introduction to Human Computer Interaction Spring 2010 16
Hard to train
• Hard to run training classes since the campus is large
• Impossible to train non-Olympian callers
CMSC 434 Introduction to Human Computer Interaction Spring 2010 17
Design process
• Ran scenarios with the Olympic committee • Wrote user guides • Lab live simulations • Consulted with ex-Olympian • Tested on friends and families • Tested on users oversea • Hallway Prototype • Crash test • Pre-Olympic field test
CMSC 434 Introduction to Human Computer Interaction Spring 2010 18
Benefits of UCD they found
• Prevented well-intended but counter-productive changes from bosses
• Pruned wrong directions early • Sped up the development process
CMSC 434 Introduction to Human Computer Interaction Spring 2010 19
Farm to Folk
CMSC 434 Introduction to Human Computer Interaction Spring 2010 20
Identified three user groups
• Organizers • Members • Producers
CMSC 434 Introduction to Human Computer Interaction Spring 2010 21
Identified problems
• Accounting is manual and prone to errors
• Information update is manual and tedious
• Direct communication between producers and members is not possible
CMSC 434 Introduction to Human Computer Interaction Spring 2010 22
Identify requirements
• Web-based • Accept member a la carte orders • Accept addition of new members • Maintain member and producer
information
CMSC 434 Introduction to Human Computer Interaction Spring 2010 23
Build a prototype
CMSC 434 Introduction to Human Computer Interaction Spring 2010 24
Let’s build an iPhone App
• TV Remote control
CMSC 434 Introduction to Human Computer Interaction Spring 2010 25
In a perfect world …
Develop
Deliver $$$$$$$
Users
CMSC 434 Introduction to Human Computer Interaction Spring 2010 26
In reality …
Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug, Code, Debug,
Deliver $
Users
CMSC 434 Introduction to Human Computer Interaction Spring 2010 27
Design first
CMSC 434 Introduction to Human Computer Interaction Spring 2010 28
Waterfall model
Develop
Deliver $$$
Design
Users
CMSC 434 Introduction to Human Computer Interaction Spring 2010 29
Waterfall model Requirement
Design
Code
Integration
Acceptance
Release $$$ Users
CMSC 434 Introduction to Human Computer Interaction Spring 2010 30
Waterfall model
• Proposed in the 70s • Linear process • Get 100% done before advancing to the
next stage • Each stage has a concrete deliverable • Put emphasis on documentation
CMSC 434 Introduction to Human Computer Interaction Spring 2010 31
What if people don’t want it? Requirement
Design
Code
Integration
Acceptance
Release $$$ Users
CMSC 434 Introduction to Human Computer Interaction Spring 2010 32
Get users involved early
CMSC 434 Introduction to Human Computer Interaction Spring 2010 33
Winter Olympics 2010
• People need to know when and where a particular event is taking place
CMSC 434 Introduction to Human Computer Interaction Spring 2010 34
UCD in Waterfall model Requirement
Design
Code
Integration
Acceptance
Release $$$
CMSC 434 Introduction to Human Computer Interaction Spring 2010 35
Users are not always right the first time
Requirement
Design
Code
Integration
Acceptance
Release $$$
CMSC 434 Introduction to Human Computer Interaction Spring 2010 36
More iterations
CMSC 434 Introduction to Human Computer Interaction Spring 2010 37
Release $$$
Spiral model
Requirement
Design
Build
Acceptance
Start
CMSC 434 Introduction to Human Computer Interaction Spring 2010 38
Release $$$
Spiral model
Requirement
Design
Build
Acceptance
Start
Build
Requirement
Design
Acceptance
CMSC 434 Introduction to Human Computer Interaction Spring 2010 39
Release $$$
Build
Spiral model
Requirement
Design
Build
Acceptance
Requirement
Design
Acceptance
Requirement
Design
Build
Acceptance
Start
CMSC 434 Introduction to Human Computer Interaction Spring 2010 40
Design iterations: Rochester Digital Library
Iteration 1 Iteration 3
CMSC 434 Introduction to Human Computer Interaction Spring 2010 41
Iteration 37 Iteration 116
Design iterations: Rochester Digital Library
CMSC 434 Introduction to Human Computer Interaction Spring 2010 42
Design iterations: Rochester Digital Library
Iteration 126 Iteration 188
CMSC 434 Introduction to Human Computer Interaction Spring 2010 43
Build
UCD in Spiral model
Requirement
Design
Build
Acceptance
Release $$$
Requirement
Design
Acceptance
Requirement
Design
Build
Acceptance
Start
???
CMSC 434 Introduction to Human Computer Interaction Spring 2010 44
Build
Early focus on users
Requirement
Design
Build
Acceptance
Requirement
Design
Acceptance
Requirement
Design
Build
Acceptance
Start
Release $$$
CMSC 434 Introduction to Human Computer Interaction Spring 2010 45
prototype
Prototyping
Requirement
Design
prototype
Acceptance
Release $$$
Requirement
Design
Acceptance
Requirement
Design
Final product
Acceptance
Start
CMSC 434 Introduction to Human Computer Interaction Spring 2010 46
Build
Keep users in the loop
Requirement
Design
Build
Acceptance
Release $$$
Requirement
Design
Acceptance
Requirement
Design
Build
Acceptance
Start
CMSC 434 Introduction to Human Computer Interaction Spring 2010 47
Meeting user’s expectation
• Not about adding features • Support users’ goals • People will not form unreasonable
expectations • Adequate and timely training • Ownership
CMSC 434 Introduction to Human Computer Interaction Spring 2010 48
Build
Participatory design
Requirement Build
Acceptance
Release $$$
Requirement
Acceptance
Requirement
Build
Acceptance
Start
Design
Design
Design
CMSC 434 Introduction to Human Computer Interaction Spring 2010 49
Three principles of UCD
1. Early focus on users and tasks 2. Iterative design with prototypes 3. Empirical measurement on prototypes
CMSC 434 Introduction to Human Computer Interaction Spring 2010 50
Build
Term project
Requirement
Design
Build
Acceptance
Release $$$
Requirement
Design
Acceptance
Requirement
Design
Build
Acceptance
Start
CMSC 434 Introduction to Human Computer Interaction Spring 2010 51
Build
Proposal
Requirement
Design
Build
Acceptance
Release $$$
Requirement
Design
Acceptance
Requirement
Design
Build
Acceptance
Start
CMSC 434 Introduction to Human Computer Interaction Spring 2010 52
Build
User and task analysis
Design
Build
Acceptance
Release $$$
Requirement
Design
Acceptance
Requirement
Design
Build
Acceptance
Start Requirement
CMSC 434 Introduction to Human Computer Interaction Spring 2010 53
Build
Design sketches
Build
Acceptance
Release $$$
Requirement
Design
Acceptance
Requirement
Design
Build
Acceptance
Start
Design
Requirement
CMSC 434 Introduction to Human Computer Interaction Spring 2010 54
Build
Paper prototype
Release $$$
Design
Acceptance
Requirement
Design
Build
Acceptance
Start
Design
Requirement Build
Acceptance
Requirement
CMSC 434 Introduction to Human Computer Interaction Spring 2010 55
Computer prototype
Release $$$
Design
Build
Acceptance
Start
Design
Requirement Build
Acceptance
Requirement
Build
Design
Acceptance
Requirement
CMSC 434 Introduction to Human Computer Interaction Spring 2010 56
Final implementation
Release $$$
Acceptance
Start
Design
Requirement Build
Acceptance
Requirement
Build
Design
Acceptance
Requirement
Design
Build
CMSC 434 Introduction to Human Computer Interaction Spring 2010 57
User testing
Release $$$
Start
Design
Requirement Build
Acceptance
Requirement
Build
Design
Acceptance
Requirement
Design
Build
Acceptance
CMSC 434 Introduction to Human Computer Interaction Spring 2010 58
Final presentation
Start
Design
Requirement Build
Acceptance
Requirement
Build
Design
Acceptance
Requirement
Design
Build
Acceptance Release
$$$
CMSC 434 Introduction to Human Computer Interaction Spring 2010 59
Activity: UMD Shuttle
Part 1: Planning Bus Routes
1. Early focus on users and tasks 2. Iterative design with prototypes 3. Empirical measurement on prototypes
CMSC 434 Introduction to Human Computer Interaction Spring 2010 60
Activity: UMD Shuttle
Part 2: When is the next bus coming?
1. Early focus on users and tasks 2. Iterative design with prototypes 3. Empirical measurement on prototypes
