Design Chris North cs3724: HCI

Quiz What are the 3 steps in producing a UI?

Process Design EvaluateDevelop 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: TELL 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 freq i *time i

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 Heuristics 1.Visibility of status 2.Speak user’s language error message 3.User control, freedom 4.Consistency 5.Error prevention 6.Recognition over recall menu or command 7.Efficient, flexible 8.Aesthetic minimalist 9.Error recovery 10.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