Design
Chris North
cs3724: HCI
Quiz
• What are the 3 steps in producing a UI?
Process
Design
Evaluate Develop
Many iterations
Homework #0: UI Analysis
• See website
• Pick a movie of your choice
• Task: find a convenient playing time and location
• Use 3 different systems:• 1-800-555-TELL
• www.moviefone.com
• www.hollywood.com/showtimes/
• Write down the time it takes you for each
• Bring your times to class on Thursday
Homework #0
• Qualitative discussion• Usability problems, errors, access, alternate tasks, …
• Quantitative discussion• Data averages, min, max
• Data visualization
• Statistics, t-tests, …
5 UI Metrics
• User performance time
• User error rates
• User learning time
• Users’ retention time
• User subjective satisfaction
Not “user friendly”, “intuitive”
Design Process
1. Understand the problem• Users
• Tasks
2. Sketch solutions• Apply design principles
• Continuously evaluate
• Be creative
Know Thy User
• Age, computer exp, education, handicaps, language, culture, hardware, access
• Frequency of use / expertise
Task Analysis
• 30% Know movie, what time,loc?
• 30% Browse: what movies are out, where, when
• Know time, what movie,loc,duration?
• Know loc, what movie,when
• 5% ratings
Task Profiles
• Tradeoffs between tasks
• Task i: • Frequency of occurance
• User performance time
• Global optimization:• Minimize: tasks freqi*timei
Design Process
1. Understand the problem• Users
• Tasks
2. Sketch solutions• Apply design principles
• Continuously evaluate
• Be creative
Over-arching Principle
Think from the user’s perspective
Shneiderman’s 8 Golden Rules
1. Consistency multi-close Word, PPT
2. Shortcuts for experts Word bold
3. Feedback Wysiwyg
4. Sequences with closure wizards
5. Prevent errors, rapid recovery undo
6. Easy reversal HomeFinder
7. User control ClipIt modal
8. Reduce memory load web nav, phone menu
Nielsen’s 10 Heuristics1. Visibility of status2. Speak user’s language error message
3. User control, freedom4. Consistency5. Error prevention6. Recognition over recall menu or
command
7. Efficient, flexible8. Aesthetic minimalist9. Error recovery10. Help
Speak the User’s Language
The Hard Part
• Balancing Tradeoffs
• Some “tradeoffs” aren’t tradeoffs• Creativity
• “Design is radically transformational”
Homework #1: UI Critique
• See website
• Due: Thursday, Jan 24
• Goal: analyze and critique a UI of your choice
• Pick a UI• Software, or real world
• Not too big
• Not a website
• 2 pages:• Good things
• Bad things, redesign suggestions
Presentations
• 2 / lecture
• 5 minutes, 2-3 slides
• UI critique
• Vote: UI Hall of Fame/Shame
• Tues: mike miller, sean king
• Thurs: brian hostetle, daniel boisson
Fast Food Drive-Thru Menus
• User Tasks:• Get food
• FAST!
• Typically: Not sure what I want
• Sometimes: Know what I want
• Passengers want food too
• Limited budget
The Good
• All in one view
• Organized by categories
• Tabular format: left alligned, prices alligned
• Combo meals (high frequency)
• Get price before proceeding
• Some: feedback on order
Need picture!
The Bad
• See menu too late
• Passengers cant see menu
• Passenger must order thru driver
• Winter: brrrrr…
• Small Redesign ideas:• More menus back in line
• Menu on both sides of car
• Microphone on both sides
• Radical: cell phone, in-car UI
The Ugly
• Can’t understand a word they say
• They cant hear me over my ’87 VW