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