1. Feb 3, 2011IAT 3341 IAT 334 Interface Design User Centered Design Metaphor Models Practice ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA

2. Feb 3, 2011IAT 3342 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

3. Feb 3, 2011IAT 3343 User-Centered Design  User-centered design process –Analysis of user needs –Prototype –Informal feedback –Iterate on design –Final application –Formal feedback

4. Feb 3, 2011IAT 3344 Analysis of User Needs  Techniques: –Surveys –Card-sorting tasks –Interviews –Focus groups Look at competing products –Ethnography Participant observation

5. Feb 3, 2011IAT 3345 Prototyping  Storyboards  Paper simulations of application  Wizard of Oz experiment  Prototyping tools  Cheap!

6. Feb 3, 2011IAT 3346 Informal Feedback  Present prototype to users  Do a quick questionnaire  Observe the user struggle with your lousy design

7. Feb 3, 2011IAT 3347 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!

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

9. Feb 3, 2011IAT 3349 Abandon bad ideas!

10. Feb 3, 2011IAT 33410 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

11. Feb 3, 2011IAT 33411 Design fixation  Keep an open mind  Don’t get wedded to an idea  Don’t let design review become about whose idea wins  Honor the truth. People come first.

12. Feb 3, 2011IAT 33412 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!!

13. Feb 3, 2011IAT 33413 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

14. Design Feb 3, 2011IAT 33414

15. Feb 3, 2011IAT 33415 Design  How do we come up with new (good) designs for interactive systems?  Why is it so difficult?

16. Feb 3, 2011IAT 33416 Why is Design Difficult?  1. Increasing complexity/pressure –Number of things to control has risen dramatically –Errors are increasingly serious/costly

17. Feb 3, 2011IAT 33417 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

18. Feb 3, 2011IAT 33418 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

19. Feb 3, 2011IAT 33419 Good & Bad Designs  Examples?

20. Feb 3, 2011IAT 33420 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

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

22. Feb 3, 2011IAT 33422 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

23. Feb 3, 2011IAT 33423 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

24. Feb 3, 2011IAT 33424 Metaphor Creation  Evaluate  Evolve Leads to user’s mental models..

25. Feb 3, 2011IAT 33425 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?

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

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

28. Feb 3, 2011IAT 33428 Idea Creation  Methods for creating and developing interface ideas –Turn off your natural critique mechanism! –?

29. Feb 3, 2011IAT 33429 Idea Creation Methods  1. Consider new use for object  2. Adapt object to be like something else  3. Modify object for a new purpose

30. Feb 3, 2011IAT 33430 Idea Creation Methods  4. Magnify - add to object  5. Minimize - subtract from object  6. Substitute something similar

31. Feb 3, 2011IAT 33431 Idea Creation Methods  7. Rearrange aspects of object  8. Change the point of view  9. Combine data into an ensemble

32. Feb 3, 2011IAT 33432 Design Guidelines/Principles  General guidelines (rules of thumb) to help create more usable systems  Can be subtle, even contradictory

33. Feb 3, 2011IAT 33433 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

34. Feb 3, 2011IAT 33434 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!

35. Feb 3, 2011IAT 33435 Design Principles  Here are 10 more detailed principles to follow about what to design and why

36. Feb 3, 2011IAT 33436 Design Principles  2. Strive for consistency –Sequences, actions, commands, layout, terminology –Makes more predictable –Dialog boxes all having same “closure” options

37. Feb 3, 2011IAT 33437 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

38. Feb 3, 2011IAT 33438 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

39. Feb 3, 2011IAT 33439 Design Principles  5. Permit easy reversal of actions –Undo! –Reduces anxiety, encourages experimentation

40. Feb 3, 2011IAT 33440 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

41. Feb 3, 2011IAT 33441 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

42. Feb 3, 2011IAT 33442 Design Principles  8. Support internal locus of control –Put user in charge, not computer –Can be major source of anxiety

43. Feb 3, 2011IAT 33443 Design Principles  9. Handle errors smoothly and positively –“That Filename already exists” vs. –“Rename failed”  10. Provide useful help and documentation