IAT 334 Interface Design

1. IAT 334Interface Design User Centered Design Metaphor Models Practice ______________________________________________________________________________________SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA IAT 334

2. Agenda • User Centered Design -- Overall Process • Design • Metaphors • Mental Models • Idea generation • Design principles • Displaying your designs • Storyboards • Lo-Fi • Wizard of Oz • Visual Basic, Flash, etc IAT 334

3. User-Centered Design • User-centered design process • Analysis of user needs • Prototype • Informal feedback • Iterate on design • Final application • Formal feedback IAT 334

4. Analysis of User Needs • Techniques: • Surveys • Card-sorting tasks • Interviews • Focus groups • Look at competing products • Ethnography • Participant observation IAT 334

5. Prototyping • Storyboards • Paper simulations of application • Wizard of Oz experiment • Prototyping tools • Cheap! IAT 334

6. Informal Feedback • Present prototype to users • Do a quick questionnaire • Observe the user struggle with your lousy design IAT 334

7. Iterate on Design • Redesign system • in light of initial user impressions • pay attention to common complaints • Be prepared to abandon bad ideas!! • It’s just an idea, not a measure of your worth! IAT 334

8. Iterate on Design • Let me reiterate… • Be prepared to... Abandon bad ideas!! • It’s just an idea, not a measure of your worth! IAT 334

9. Abandon bad ideas! IAT 334

10. Final Stages • Implement the product • Get formal feedback • You now have something concrete to show • Performance analysis • Testing • Look for bugs • Attention to detail • Good UI work is really picky IAT 334

11. Design fixation • Keep an open mind • Don’t get wedded to an idea • Don’t let design review become about whose idea wins • Honor thetruth. People come first. IAT 334

12. Quotable Quotes: Practice • “The secret to having good ideas is to have many ideas” -- Bill Buxton • “You’ve got 100,000 bad drawings inside you. You’re here at art school to get them out.” -- Chuck Jones • Design takes practice!! IAT 334

13. Quotable Quotes • “Where principle is put to work, not as a recipe or as a formula, there will always be style”-- Le Corbusier • “Every curve and line has to have real meaning; it can’t be arbitrary.” -- Frank Lloyd Wright • Just because you can, doesn’t mean you should • Chris Shaw IAT 334

14. Design IAT 334

15. Design • How do we come up with new (good) designs for interactive systems? • Why is it so difficult? IAT 334

16. Why is Design Difficult? • 1. Increasing complexity/pressure • Number of things to control has risen dramatically • Errors are increasingly serious/costly IAT 334

17. Why Difficult? • 2. Marketplace pressures • Time is money • Adding functionality (complexity) is now easy and cheap • Adding controls/feedback is expensive • Design usually requires several iterations before success IAT 334

18. Why Difficult? 3. People often consider cost and appearance over human factors design 4. Creativity is challenging 5. The social expectations of design are getting more well-informed IAT 334

19. Good & Bad Designs • Examples? IAT 334

20. Good Design • Invites person to use it properly • Ball -- throwable • Doorknob -- graspable • Visual affordance • The perceived and actual fundamental properties of an object that help convey how it should be used -- (Don Norman) • Complex things need explaining • Simple things should not IAT 334

21. Ideas come from Imagination Analogy Observation of current practice Observation of current systems Borrow from other fields Animation Theatre Information displays Architecture ... Idea Creation How do we create and develop new interface ideas and designs? IAT 334

22. Interface Metaphors • Metaphor - Application of name or descriptive term to another object which is not literally applicable • Use: Natural transfer - apply existing knowledge to new, abstract tasks • Problem: May introduce incorrect mental model IAT 334

23. Metaphor Creation • Prepare • What functions are needed • What are users’ problems? • Generate • Use metaphor that matches users’ conceptual tasks • Given choice, choose metaphor closest to way system really works • Ensure emotional tone is appropriate to users IAT 334

24. Metaphor Creation • Evaluate • Evolve Leads to user’s mental models.. IAT 334

25. Mental Models • What models of the world are the users using? • Two Classes: • Functional model • “Press the accelerator once, then turn the key” • Structural model • OK, why do we do that? IAT 334

26. Another example... • Functional model • “Go north on King George, Cross the Pattullo, Turn left at 10th Ave, Turn right at Kingsway, go 4.5km” • Structural model • What location?? IAT 334

27. Another example... • Functional model • “Go north on King George, Cross the Pattullo, Turn left at 10th Ave, Turn right at Kingsway, go 4.5km” • Structural model • What location?? IAT 334

28. Idea Creation • Methods for creating and developing interface ideas • Turn off your natural critique mechanism! • ? IAT 334

29. Idea Creation Methods • 1. Consider new use for object • 2. Adapt object to be like something else • 3. Modify object for a new purpose IAT 334

30. Idea Creation Methods • 4. Magnify - add to object • 5. Minimize - subtract from object • 6. Substitute something similar IAT 334

31. Idea Creation Methods • 7. Rearrange aspects of object • 8. Change the point of view • 9. Combine data into an ensemble IAT 334

32. Design Guidelines/Principles • General guidelines (rules of thumb) to help create more usable systems • Can be subtle, even contradictory IAT 334

33. Guidelines for Design • 1. Provide a good conceptual model • User has mental model of how things work • Build design that allows user to predict effects of actions • 2. Make things visible • Visible affordances, mappings, constraints • Remind person of what can be done and how to do it IAT 334

34. Design Principles • 1. Use simple and natural dialog in user’s language • Match user’s task in a natural way • Avoid jargon, techno-speak • Present exactly info that user needs • Less is more! IAT 334

35. Design Principles • Here are 10 more detailed principles to follow about what to design and why IAT 334

36. Design Principles • 2. Strive for consistency • Sequences, actions, commands, layout, terminology • Makes more predictable • Dialog boxes all having same “closure” options IAT 334

37. Design Principles • 3. Provide informative feedback • Continuously inform user about what is occurring • Most important on frequent, substantive actions • % in file • How to deal with delays? • Special cursors • % Done graphs IAT 334

38. Design Principles • 4. Minimize user’s memory load • Recognition is better than recall • Make visible! • Describe required input format, include example and default • Date: _ _ - _ _ - _ _ (DD-MM-YY) • Use small # of generally applicable cmds IAT 334

39. Design Principles • 5. Permit easy reversal of actions • Undo! • Reduces anxiety, encourages experimentation IAT 334

40. Design Principles • 6. Provide clearly marked exits • Don’t want the user to feel trapped • Examples • Cancel button on dialogs • Quit any time • Interrupt/resume on lengthy operations IAT 334

41. Design Principles • 7. Provide shortcuts • Enable frequent users to perform often-used operations quickly • Keyboard & mouse • Abbreviations • Menu shortcuts • Function keys • Command completion • Double click vs. menu selection • Navigation between windows/forms • Reuse • Provide a history system IAT 334

42. Design Principles • 8. Support internal locus of control • Put user in charge, not computer • Can be major source of anxiety IAT 334

43. Design Principles • 9. Handle errors smoothly and positively • “That Filename already exists” vs. • “Rename failed” • 10. Provide useful help and documentation IAT 334