1 / 43

IAT 334 Interface Design

IAT 334 Interface Design. User Centered Design Metaphor Models Practice. ______________________________________________________________________________________ SCHOOL OF INTERACTIVE ARTS + TECHNOLOGY [SIAT] | WWW.SIAT.SFU.CA. Agenda. User Centered Design -- Overall Process Design

nona
Download Presentation

IAT 334 Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related