1. Design Chris North cs3724: HCI

2. Quiz What are the 3 steps in producing a UI?

3. Process Design EvaluateDevelop Many iterations

4. 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

5. Homework #0 Qualitative discussion Usability problems, errors, access, alternate tasks, … Quantitative discussion Data averages, min, max Data visualization Statistics, t-tests, …

6. 5 UI Metrics User performance time User error rates User learning time Users’ retention time User subjective satisfaction Not “user friendly”, “intuitive”

7. Design Process 1.Understand the problem Users Tasks 2.Sketch solutions Apply design principles Continuously evaluate Be creative

8. Know Thy User Age, computer exp, education, handicaps, language, culture, hardware, access Frequency of use / expertise

9. 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

10. Task Profiles Tradeoffs between tasks Task i: Frequency of occurance User performance time Global optimization: Minimize:  tasks freq i *time i

11. Design Process 1.Understand the problem Users Tasks 2.Sketch solutions Apply design principles Continuously evaluate Be creative

12. Over-arching Principle Think from the user’s perspective

13. 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

14. 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

15. Speak the User’s Language

16. The Hard Part Balancing Tradeoffs Some “tradeoffs” aren’t tradeoffs Creativity “Design is radically transformational”

17. 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

18. 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

19. 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

20. 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!

21. 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

22. The Ugly Can’t understand a word they say They cant hear me over my ’87 VW