jason i. hong january 19, 2006 overview of user interface design, prototyping, and evaluation (or,...
Post on 15-Jan-2016
214 views
TRANSCRIPT
![Page 1: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/1.jpg)
Jason I. Hong
January 19, 2006
Overview of User Interface Design, Overview of User Interface Design, Prototyping, and EvaluationPrototyping, and Evaluation
(or, All of HCI in 80 Minutes)(or, All of HCI in 80 Minutes)
![Page 2: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/2.jpg)
User Interface Hall of Fame or Shame?
• IE5 page setup for printing• Problems
– codes for header & footer information
• requires recall!• want recognition• no equivalent GUI
– help is the way to find out, but not obvious
![Page 3: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/3.jpg)
Jason I. Hong
January 19, 2006
Overview of User Interface Design, Overview of User Interface Design, Prototyping, and EvaluationPrototyping, and Evaluation
(or, All of HCI in 80 Minutes)(or, All of HCI in 80 Minutes)
![Page 4: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/4.jpg)
• Computer– the machine the program runs on– clients & servers, PDAs, cars, microwaves
• Human– the end-user of a program
– the others in the organization
• Interaction– the user tells the computer what they want (input)
– the computer communicates results (output)
Human-Computer Interaction (HCI)
![Page 5: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/5.jpg)
HCI Approach to UI Design
Design
Organizational & Social Issues
Technology Humans
Tasks
• Other considerations we won’t look at– Business models, level of fun
![Page 6: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/6.jpg)
Why is HCI Important?
• Major part of work for “real” programs (~50%)• Bad user interfaces cost:
– money (reduced profits, call centers)• WiFi Alliance: 30% of WiFi boxes returned
– reputation of organization (e.g., brand loyalty)
– time (wasted effort and energy by users, rework)
– lives (Therac-25)
![Page 7: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/7.jpg)
Why is HCI Important?
• Privacy and Security– phishing scams– accidental disclosures (ex. location info, cookies)– difficulty diagnosing the situation (intrusion detection)– intentionally circumventing security mechanisms
• User interfaces hard to get right– people are unpredictable– intuition of designers often wrong – need good design methods
![Page 8: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/8.jpg)
Four Myths about Good Design
• Myth 1: Only experts create good designs– experts faster, simple and effective techniques anyone can apply
• Myth 2: We can fix the user interface at the end– good design is more than just user interface
– having right features, building those features right
• Myth 3: Good design takes too long / costs too much– simple and effective techniques that can reduce total
development time & cost (finds problems early on)
• Myth 4: Good design is just cool graphics– graphics part of bigger picture of what to communicate & how
![Page 9: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/9.jpg)
Outline
• Overview of the Design Process– Design
– Prototyping
– Evaluation
• User Models– Affordances
– Mappings
– Metaphors
![Page 10: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/10.jpg)
Who Builds User Interfaces?
• A team of specialists (ideally)– graphic designers– interaction / interface designers– information architects– technical writers– marketers– test engineers– usability engineers– software engineers– users
![Page 11: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/11.jpg)
Design
Prototype
Evaluate
![Page 12: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/12.jpg)
Design
• Design is driven by requirements– focus on the core need– not how it is to be implemented– e.g., PDA not as important as “mobile” app.
• might be multiple ways of achieving your goals• A design is a simplified representation of the
desired artifact– for UIs these representations include
• text description of tasks• screen sketches or storyboards• flow diagrams / outline showing
task structure• executable prototypes
Write essay start word processor write outline fill out outlineStart word processor find word processor icon double click on iconWrite outline write down high-level ideas
.
.
.
![Page 13: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/13.jpg)
Web Design RepresentationsSite Maps Storyboards
Schematics Mock-ups
![Page 14: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/14.jpg)
Usability Goals?
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
![Page 15: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/15.jpg)
Usability Goals
– Learnable• faster the 2nd time & so on
– Memorable• from session to session
– Flexible• multiple ways to accomplish tasks
– Efficient• perform tasks quickly
– Robust• minimal error rates• good feedback so user can recover
– Pleasing• high user satisfaction
– Fun
• Set goals early & later use to measure progress• Goals often have tradeoffs, so prioritize• Example goals:
![Page 16: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/16.jpg)
User-centered Design
• Cognitive abilities– perception– physical manipulation– memory
• Organizational / job abilities
![Page 17: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/17.jpg)
User-centered Design
• You already know too much
![Page 18: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/18.jpg)
User-centered Design
• You already know too much– Easy to think of self as typical user
– Easy to make mistaken assumptions
• Keep users involved throughout the design– understanding work process
– getting constant feedback
• User-centered design mind-set– thinking of the world in users’ terms (empathy)
– not technology-centered / feature driven, think of benefit to users
![Page 19: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/19.jpg)
Outline
• Overview of the Design Process– Design
– Prototyping
– Evaluation
• User Models– Affordances
– Mappings
– Metaphors
![Page 20: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/20.jpg)
Example of Design Failure
• BART “Charge-a-Ticket” Machines– allow riders to buy BART tickets or add fare– takes ATM cards, credit cards, & cash
![Page 21: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/21.jpg)
![Page 22: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/22.jpg)
![Page 23: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/23.jpg)
Example of Design Failure
• BART “Charge-a-Ticket” Machines– allow riders to buy BART tickets or add fare– takes ATM cards, credit cards, & cash
• Problems (?)
– no visual flow (Where do I start? Where do I go next?)– one “path” of operation
• ticket type payment type payment ticket
– BART Plus has minimum of $28, no indication of this until after inserting >= $1
• can’t switch to regular BART ticket
– too many instructions– large dismiss transaction button does nothing
![Page 24: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/24.jpg)
Lessons from the BART machine
• Can’t we just define “good” interfaces?– “good” has to be taken in context of users
• might be acceptable for office work, not for play• infinite variety of tasks and users
– guidelines are too vague to be generative• e.g., “give adequate feedback”
• How can we avoid similar results?– “What is required to perform the user’s tasks?”
![Page 25: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/25.jpg)
• Find out:– who users are– what tasks they need to perform
• Observe existing work practices• Create scenarios of actual use
• This lets us try new ideas before building software!– Get rid of problems early in the design process
while they are still cheap to fix!
Task Analysis
![Page 26: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/26.jpg)
TaskAnalysis
• Who is going to use the system?• What tasks do they now perform?• What tasks are desired?• How are the tasks learned?• Where are the tasks performed?• What’s the relationship between user & data?
Task Analysis Questions
![Page 27: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/27.jpg)
Task Analysis Questions (cont.)
• What other tools does the user have?• How do users communicate with each other?• How often are the tasks performed? • What are the time constraints on the tasks?• What happens when things go wrong?
![Page 28: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/28.jpg)
• Identity– in-house or specific customer is easy– need several typical users for broad product
• Background• Skills• Work habits and preferences• Physical characteristics
– height?
Who?
![Page 29: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/29.jpg)
Who (BART)?
• Identity?– people who ride BART
• business people, students, disabled, elderly, tourists
• Background?– may have an ATM or credit card– have used other fare machines before
• Skills?– may know how to put cards into ATM– know how to buy BART tickets
![Page 30: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/30.jpg)
• Work habits and preferences?– Some people: use BART 5 days a week– Others: first time use
• Physical characteristics?– varying heights don’t make it too high or too low!
Who (BART cont.)?
![Page 31: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/31.jpg)
What Tasks?
• Important for both automation and new functionality• Understand relative importance of tasks
• Example: on-line billing
– small dentists office had billing automated
– assistants were unhappy with new system
– old forms contained hand-written margin notes• e.g., patient A’s insurance takes longer than most, etc.
![Page 32: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/32.jpg)
Where is the Task Performed?
• Office, laboratory, point of sale?• Effects of environment on users?• Users under stress?• Confidentiality required?• Wet, dirty, or slippery hands?• Soft drinks?• Lighting?• Noise?
![Page 33: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/33.jpg)
• Public data?– Open government records, public web sites
• Personal data?– Ex. health records, bank records
– always accessed at same machine?
– do users move between machines?
• Common data?– used concurrently?
– passed sequentially between users?
• Remote access required?• Access to data restricted?
What is the Relationship Between Users & Data?
![Page 34: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/34.jpg)
What Other Tools Does the User Have?
• More than just compatibility• How user works with collection of tools
to get things done
• Example: automating lab data collection– how is data collected now?– by what instruments and manual procedures?– how is the information analyzed?– are the results transcribed for records or publication?– what media/forms are used and how are they handled?
![Page 35: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/35.jpg)
• Frequent users remember more details• Infrequent users may need more help
– even for simple operations
– make these tasks possible to do
• Which function is performed – most frequently?
– by which users?
– optimizing system for these tasks will improve perception of good performance
How Often Do Users Perform the Tasks?
![Page 36: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/36.jpg)
What Happens When Things Go Wrong?
• How do people deal with– task-related errors?– practical difficulties?– catastrophes?
• Is there a backup strategy?
![Page 37: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/37.jpg)
Involve Users to Answer Task Analysis Questions
• Users help designers learn: – what is involved in their jobs– what tools they use– i.e., what they do and how they do it
• Developers reveal technical capabilities– builds rapport & an idea of what is possible– user’s can comment on whether ideas make sense
• How do we do this?– observe & interview prospective users in work place!
![Page 38: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/38.jpg)
• Heated arguments with others on design team– Over what tools, skills, and knowledge users have
– These tend to generate lots of heat, little light
• Go out to real users and get real data from them– find out what they really do
– how would your system fit in
• Are they too busy?– buy their time (t-shirts, coffee mugs)
– find substitutes (medical students)
![Page 39: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/39.jpg)
Can’t we just ask users what they want?
• Not familiar with what is possible with technology• Not familiar with design constraints
– Budget, legacy code, time, etc
• Not familiar with good design• Not familiar with security and privacy• Sometimes users don’t know what they want
– Ex. Remote controls
• Contextual inquiry is an important method for understanding users’ needs– Also, attitude vs actual behavior
![Page 40: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/40.jpg)
Contextual Inquiry
• Go to the workplace & see the work as it unfolds• People summarize, but we want details• Keep it concrete when people start to abstract
– “We usually get reports by email”, ask “Can I see one?”
![Page 41: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/41.jpg)
Contextual Inquiry
• Facts are only the starting point, you want a design based on correct interpretations
• Validate & rephrase– share interpretations to check your reasoning
• Ex. “So accountability means a paper trail?”
– people will be uncomfortable until the phrasing is right
![Page 42: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/42.jpg)
• Use recording technologies– notebooks, tape recorders, still & video cameras
• Structure– conventional interview (15 minutes)
• introduce focus & deal with ethical issues• get used to each other by getting summary data
– transition (30 seconds)• state new rules – they work while you watch & interrupt
– contextual interview (1-2 hours)• take notes, draw, be nosy! (“who was on the phone?”)
– wrap-up (15 minutes)• summarize your notes & confirm what is important
Conducting a Contextual Inquiry
![Page 43: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/43.jpg)
Using the Data You Learn
• Say who the users are (use personas or profiles)
![Page 44: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/44.jpg)
Example PersonaName: Patricia
Age: 31
Occupation: Sales Manager, IKEA Store
Hobbies: Painting
Fitness/biking
Taking son Devon to the park
Likes: Emailing friends & family
Surprises for her husband
Talking on cell phone with friends
Top 40 radio stations
Eating Thai food
Going to sleep late
Dislikes: Slow service at checkout linesSmokers
![Page 45: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/45.jpg)
Using the Data You Learn
• Say who the users are (use personas or profiles)– personas do not have to be a real person, but should be
based on real facts and details
– design can really differ depending on who the target is
– provide names (easier to reference)
– characteristics of the users (job, expertise, etc.)
• Might have one persona for each class of users– helps the design team think in terms of the users
• Keep in mind we already use personas– “I wouldn’t like that”
– “My mom wouldn’t be able to use that”
![Page 46: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/46.jpg)
Selecting Tasks
• Choose real tasks users face• Have a mixture of simple & complex tasks
– easy tasks (common or introductory)
– moderate tasks
– difficult tasks (infrequent or for power users)
• Good tasks are fundamental to good usability– does your system support key tasks desired by users?
– how well does your system support these?
– we’ll see more of tasks in evaluation
![Page 47: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/47.jpg)
Manny is in the city at a club and would like to call his girlfriend, Sherry, to see when she will be arriving at the club. She called from a friend’s house while he was driving, so he couldn’t answer the phone. He would like to check his missed calls and find the number so that he can call her back.
Using Tasks in Design
• Write up a description of tasks– formally or informally– run by users and rest of the design team
• do they make sense? realistic?– get more information where needed
![Page 48: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/48.jpg)
Using Tasks in Design (contd.)
• Okay to have some freeform tasks– Ex: “purchase tickets for a movie you want to see”
• navigation, reviews, shopping cart, etc
– specific tasks good for understanding usability, freeform tasks good for understanding usefulness
![Page 49: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/49.jpg)
Outline
• Overview of the Design Process– Design
– Prototyping
– Evaluation
• User Models– Affordances
– Mappings
– Metaphors
![Page 50: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/50.jpg)
Why Do We Prototype?
• Quickly experiment with alternative designs• Get feedback on our design faster
– fix problems before code is written
– saves time and money
• Keep the design centered on the user– must test & observe ideas with users
![Page 51: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/51.jpg)
Fidelity in Prototyping
• Fidelity refers to level of detail• High fidelity
– prototype looks like the final product
• Low fidelity– artist’s rendition with many
details missing
![Page 52: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/52.jpg)
Low-fi Sketches & Storyboards
![Page 53: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/53.jpg)
Low-fi Sketches & Storyboards
![Page 54: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/54.jpg)
Ink Chat
![Page 55: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/55.jpg)
Why Use Low-fi Prototypes?
• Traditional methods take too long– sketches build prototype evaluate iterate
– don’t want to program for weeks or months before feedback
• Simulate the prototype– sketches evaluate iterate
– sketches act as prototypes• designer “plays computer”• other design team members observe & record
• Kindergarten implementation skills– allows non-programmers to participate
– helps make sure everyone on the team is together
![Page 56: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/56.jpg)
Qualities of Lo-Fi Prototypes
• Advice: avoid high-fidelity tools until necessary
• Informal visual representation– communicates “unfinished”– encourages creativity– faster to create– higher-level feedback
• Formal visual representation– communicates “finished”– inhibits creativity (detailing)– slower to create
![Page 57: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/57.jpg)
The Basic Materials
• Large, heavy, white paper (11 x 17)• 5x8 in. index cards• Post-its• Tape, stick glue, correction tape• Pens & markers (many colors & sizes)• Overhead transparencies• Scissors, X-acto knives, etc.
![Page 58: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/58.jpg)
ESP
![Page 59: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/59.jpg)
Constructing the Model
![Page 60: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/60.jpg)
Constructing the Paper Prototype
• Set a deadline– a few hours or 1-2 days– don’t think for too long - build it!
• Draw a window frame on large paper• Put different screen regions on cards
– anything that moves, changes, appears/disappears
• Ready response for any user action– e.g., have those pull-down menus already made
• Use photocopier to make many versions
![Page 61: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/61.jpg)
• Takes only a few hours– no expensive equipment needed
• Can test multiple alternatives – fast iterations
• number of iterations is tied to final quality
• Almost all interaction can be faked
Advantages of Low-fi Prototyping
![Page 62: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/62.jpg)
1 Minute Break• Good design matters in all
areas of our lives
• The little things really do matter
• A designer’s proposed changes to airport screenings
![Page 63: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/63.jpg)
Outline
• Overview of the Design Process– Design
– Prototyping
– Evaluation• A lot here applies to evaluating both
paper prototypes and real systems
• User Models– Affordances
– Mappings
– Metaphors
![Page 64: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/64.jpg)
Preparing for a Test
• Select people representative of target users– minimize use friends or family
– job-specific vocab / knowledge
– approximate if needed• medical students, engineering students
– use incentives to get participants
• Prepare scenarios that are– typical of the product during actual use
– ideally, your defined tasks from beforehand
• Practice to avoid “bugs”
![Page 65: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/65.jpg)
Conducting a Test
• Roles:– greeter – puts users at ease & gets demographic data– facilitator – only team member who speaks
• gives instructions & encourages thoughts, opinions– computer – simulates response, w/o explanation– observers – take notes & recommendations
• Typical session is 1 hour– preparation, the test, debriefing
• Make a recording or take good notes
![Page 66: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/66.jpg)
Instructions to Participants
• Describe the purpose of the evaluation– “I’m testing the product; I’m not testing you”
• Tell them they can quit at any time• Demonstrate any equipment• Explain how to think aloud
– tell us what they are trying to do– tell us questions that arise as they work– tell us things they read
• Explain that you will not provide help• Explain the basic concept of the UI, but not too much• Describe the task
– give written instructions, one task at a time
![Page 67: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/67.jpg)
Conducting a Test
• Do a debriefing at the end– Were tasks realistic?
– What parts made sense? Confusing?
– Any features missing?
![Page 68: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/68.jpg)
Ethical Considerations
• Sometimes tests can be distressing– users have left in tears
• You have a responsibility to alleviate– make voluntary with informed consent
– avoid pressure to participate
– let them know they can stop at any time
– stress that you are testing the system, not them
– make collected data as anonymous as possible
• Often must get human subjects approval (IRB)
![Page 69: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/69.jpg)
Deciding on Data to Collect
• Two types of data– process data
• observations of what users are doing & thinking
– bottom-line data• summary of what happened (time, errors, success)• independent and dependent variables
![Page 70: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/70.jpg)
Which Type of Data to Collect?
• Always focus on process data first– gives good overview of where problems are
• Bottom-line doesn’t tell you where to fix– just says: “too slow”, “too many errors”, etc.
• Hard to get reliable bottom-line results– need many users for statistical significance
![Page 71: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/71.jpg)
Using the Test Results
• Sort & prioritize observations– what was important?
– lots of problems in the same area?
• Summarize the data– make a list of all critical incidents, positive & negative
– try to judge why each difficulty occurred
• What does data tell you?– UI work the way you thought it would?
– missing features?
![Page 72: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/72.jpg)
Using the Results (cont.)
• Update task analysis & rethink design – rate severity & ease of fixing critical incidents
– fix both severe problems & make the easy fixes
• Will thinking aloud give the right answers?– not always
– if you ask a question, people will always give an answer, even it is has nothing to do with facts
• panty hose example
– try to avoid specific questions
![Page 73: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/73.jpg)
• Situations in which numbers are useful– time on task– # tasks successfully completed– # errors
• define in advance what these mean
• Do not combine with thinking-aloud. Why?– talking can affect speed & accuracy
Measuring Bottom-Line Usability
![Page 74: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/74.jpg)
Measuring Subjective User Preference
• Can rate system on a Likert scale– Example: The user interface was easy to use
• Strongly disagree • Disagree • Neither agree nor disagree • Agree • Strongly agree
– Can be hard to be sure what data means• novelty of UI, not realistic setting …
• Can also get some useful data by asking– what they liked, disliked, where they had trouble, best part,
worst part, etc. (redundant questions are OK)
![Page 75: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/75.jpg)
Comparing Two Alternatives
BA
• Between groups experiment– two groups of test users– each group uses only 1 of the systems
• Within groups experiment– one group of test users
• each person uses both systems• can’t use the same tasks or order (learning)
– best for low-level interaction techniques• Between groups requires many more participants
than within groups• See if differences are statistically significant
– assumes normal distribution & same std. dev.
![Page 76: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/76.jpg)
Reporting the Results
• Report what you did & what happened• Images & graphs help people get it!• Video clips can be quite convincing
– Especially for convincing other engineers
![Page 77: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/77.jpg)
Discount Usability Engineering
• Reaction to excuses for not doing user testing– “too expensive”, “takes too long”, …
• Cheap– no special labs or equipment needed
– the more careful you are, the better it gets
• Fast– on order of 1 day to apply
– standard usability testing may take a week or more
• Easy to use– some techniques can be taught in 2-4 hours
![Page 78: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/78.jpg)
Examples of Discount Usability
• Walkthroughs– put yourself in the shoes of a user
– like a code walkthrough
• Low-fi prototyping• Action analysis (GOMS) • On-line, remote usability tests• Heuristic evaluation
![Page 79: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/79.jpg)
Example Heuristic
• H2-8: Aesthetic and minimalist design– no irrelevant information in dialogues
![Page 80: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/80.jpg)
Example Heuristic
• H2-9: Help users recognize, diagnose, and recover from errors– error messages in plain language– precisely indicate the problem– constructively suggest a solution
![Page 81: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/81.jpg)
Outline
• Overview of the Design Process– Design
– Prototyping
– Evaluation
• User Models– Affordances
– Mappings
– Metaphors
![Page 82: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/82.jpg)
Design of Everyday Things
• By Don Norman (UCSD, Apple, HP, NN Group)• Design of everyday objects illustrates problems
faced by designers of systems
• Explains conceptual models– doors, washing machines,
digital watches, telephones, ...
• Resulting design guides
Highly recommend this book
![Page 83: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/83.jpg)
Conceptual Models
• Mental representation of how object works & how interface controls affect it
• People may have preconceived models that are hard to change– (4 + 5) vs. (4 5 +)– dragging to trash?
• delete file but eject disk
• Interface must communicate model– visually– online help and documentation can help,
but shouldn’t be necessary
![Page 84: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/84.jpg)
Affordances as Perceptual Clues
• Well-designed objects have affordances– clues to their operation– often visual, but not always (e.g., speech)
![Page 85: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/85.jpg)
Siemens Pocket PC PhonePen input, no keypad
Handspring TreoPen input/keypad input
Affordances as Perceptual Clues
![Page 86: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/86.jpg)
French artist Jacques Carelman
Crazy design for a screw punch!
Affordances as Perceptual Clues
• Poorly-designed objects– no clues or misleading clues
![Page 87: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/87.jpg)
Refrigerator
Problem: freezer too cold, but fresh food just right
freezer
fresh food
![Page 88: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/88.jpg)
Refrigerator Controls
What is your conceptual model?
Normal Settings C and 5Colder Fresh Food C and 6-7Coldest Fresh Food B and 8-9Colder Freezer D and 7-8Warmer Fresh Food C and 4-1OFF (both) 0
A B C D E
7 6 5 4 3
![Page 89: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/89.jpg)
7 6 5 4 3
A B C D E
independent controls
coolingunit
coolingunit
A Common Conceptual Model
![Page 90: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/90.jpg)
• Now can you fix the problem?• Possible solutions
– make controls map to user’s model– make controls map to actual system
7 6 5 4 3
A B C D E
coolingunit
Actual Conceptual Model
![Page 91: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/91.jpg)
• Users get model from experience & usage– through system image
• What if the two models don’t match?
Design Model User Model
System Image
Design Model & User Model
![Page 92: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/92.jpg)
Conceptual Model Mismatch
• Mismatch between designer’s & user’s conceptual model leads to…– Slow performance– Errors
• And inability to recover– Frustration– ...
![Page 93: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/93.jpg)
Notorious Example
![Page 94: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/94.jpg)
A Personal Example
![Page 95: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/95.jpg)
• Refrigerator (?)
– make the A..E dial something about percentage of cooling between the two compartments?
• Controls available on watch w/ 3 buttons?– too many and they are not visible!
• Compare to controls on simple car radio– #controls = #functions– controls are labeled (?) and grouped together
Make Things Visible
![Page 96: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/96.jpg)
Dashboard
Map Interface Controls
• Control should mirror real-world• Which is better for dashboard speaker
front / back control?
![Page 97: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/97.jpg)
Map Interface Controls
![Page 98: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/98.jpg)
Map Interface Controls
![Page 99: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/99.jpg)
• Definition ?
– “The transference of the relation between one set of objects to another set for the purpose of brief explanation.”
• Lakoff & Johnson, Metaphors We Live By– “...the way we think, what we experience, and
what we do every day is very much a matter of metaphor.”
– in our language & thinking - “argument is war”• he attacked every weak point
... criticisms right on target
... if you use that strategy • We can use metaphors to leverage existing
conceptual models
Metaphor
![Page 100: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/100.jpg)
• Suggests a conceptual model
– Not really an attempt to simulate a real desktop
– Leverages existing knowledge about files, folders, trash
– A way to explain why some windows seemed blocked
• The “user illusion”
Desktop Metaphor
![Page 101: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/101.jpg)
Example Metaphors
• Global metaphors – personal assistant, e-wallet, e-mail, digital library
• Data & function– rolodex, to-do list, calendar, documents
• Collections– drawers, files, books, newspapers, photo albums
![Page 102: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/102.jpg)
Four Key Ideas
![Page 103: Jason I. Hong January 19, 2006 Overview of User Interface Design, Prototyping, and Evaluation (or, All of HCI in 80 Minutes)](https://reader036.vdocuments.us/reader036/viewer/2022062804/56649d5f5503460f94a401c7/html5/thumbnails/103.jpg)
Summary
• Overview of the Design Process– Design (Task Analysis, Contextual Inquiry,
Tasks)
– Prototyping (Paper prototyping)
– Evaluation (Lab tests, Heuristic evaluation)
• User Models– Affordances
– Mappings
– Metaphors