1 / 42

The Importance of Prototypes and User Testing in Design

Learn why it is crucial to specify design objectives, the different types of prototypes, and how prototypes vary in fidelity and interactivity. Discover how to implement paper prototypes and conduct usability testing.

meyerm
Download Presentation

The Importance of Prototypes and User Testing in 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. Day 5 Specifying designs

  2. Objectives • Learn about the need for prototypes and user testing with these • Learn about different ways in which prototypes vary

  3. Why specify the design? • It helps you think through important issues • brings up many issues that cannot be adequately anticipated • helps ensure your design can accommodate all features you have planned for it • It communicates the design to clients, team members, and users • serves as focal point for discussion, illustrating the design’s accommodation of its intended features • can be used to perform early usability testing of the design on the target audience

  4. Prototypes • prototypes are simplified versions of something being designed • they provide a good idea of the look and feel of a product • prototypes can range from • very low-fidelity, such as pen and paper sketches - • very high-fidelity, such as functional software

  5. Some terminology - types of prototypes • The term “wireframes” • comes from the term for simple representations of 3D drawings that look like wire bent into different shapes • in UID, wireframes show the basic composition of elements on screens, without suggesting the finished graphic look • They range from quick pencil and paper sketches to software created more polished looking representations

  6. A pencil wireframe

  7. A software produced wireframe

  8. another

  9. and another

  10. Still another

  11. yet another

  12. The last one

  13. More terminology – types of prototypes • The term “storyboards” • comes from the animation and movie industries • they show the sequences of screens • but, then again, so can wireframes – whether pencil or software generated • In fact, some people would say they are the same • Marc Silver (the author of “Exploring Interface Design”) uses storyboard to mean “a set of sketches or images that illustrate use cases” – thus they illustrate the series of screens that a user must access to perform a particular task

  14. A “storyboard”

  15. A final word on terminology • Many people, when referring to what Silver calls storyboards, simply use the word “prototype” • They will just make a distinction between different levels of fidelity – low or high fidelity prototypes • Don’t get too caught up in terminology • I’m going to use the word prototype!

  16. paper prototypes • people do use paper prototypes in usability tests to see how users interact with the proposed system • paper prototypes may be more than sketches

  17. Some links on prototyping • http://www.sapdesignguild.org/resources/prototypes.asp

  18. On a whiteboard

  19. Starting at tables in teams

  20. One page of a paper prototype

  21. And another, more detailed

  22. Implementing a paper prototype • They can be implemented in a number of ways depending on personal experience or preferences • Typical materials used for paper prototypes are: • cardboard – for the screen • post-it notes in different sizes - for menus, dialog boxes drop-down menus, or other screen elements • erasable markers – for user input • write on transparencies - for user input • pencils – for user input, either to write with or use as a mouse to “click” • clips – to keep the paper screens organised • water – to erase erasable marker ink • removable tape – so parts can be moved or removed

  23. An interactive prototype • Each tab is on a separate piece of paper so it can be moved to the front if the user selects it • The drop-down list for paper size is written on a separate piece of paper and is shown if the user touches the drop-down arrow • The radio button is simulated using removable tape • The preview components (shown in red) are tacked on with restickable glue so they can be changed if the user selects Landscape

  24. Example Usability Test with a Paper Prototype • http://vimeo.com/2273993 • http://www.youtube.com/watch?v=9wQkLthhHKA

  25. Prototypes vary along 3 dimensions • fidelity • medium • interactivity

  26. Mary and John talk …

  27. Don’t get carried away in the early stages • The prototype only needs to be good enough for you to get answers to the questions you’re most concerned about • paper prototypes don't need: • typed text • images • colour • “You can put earrings on a pig, but it's still a pig.” • Colour can't save an inherently flawed design. • Colour can be added later once you’re sure you aren’t creating a pig • consistent sizing of components

  28. Don’t assume high-fidelity is always best

  29. Quote 1 • “One thing I can say from experience is that most times [level of visual design] really depends of who you are going to be showing this prototype to. I would never show a client, a marketing person, or a designer a fully (heck anything that looks “done” at all – even halfway) rendered prototype – you’re just asking for a world of hurt”

  30. Quote 2 • “In eight years of usability testing, I've collected a number of “war stories” where technical glitches caused tests to be postponed or cancelled. This was disruptive to the development teams, which were relying on the tests to answer important questions about the interface. But I've never had to abort a usability test due to a problem with a paper prototype. I've even done paper prototyping during a power failure!”

  31. Quote 3 • A polished-looking design can actually encourage the wrong kind of feedback. If you're trying to make sure you've got the right content and functionality, you may not want to hear comments like, “Hey, those fields don't line up,” or “I don't like that shade of green.” Paper prototypes avoid that kind of feedback because it's obvious to users that you haven't specified the look yet. This encourages users to focus on the concepts and functionality.

  32. Quote 4 • Developers are less committed to paper prototypes

  33. Carolyn Snyder on paper prototyping • You don't have to struggle with computers • It's faster to do changes • It takes less time • It requires zero coding effort • You avoid nit-picky feedback • You encourage creativity

  34. Moving on … • Debates about paper vs software prototypes are perhaps looking at things the wrong way • You could start out with • low-fidelity • paper based • no to moderate interactivity • And move to • high-fidelity • software based • moderate to full interactivety

  35. Remember • The prototype only needs to be good enough for you to get answers to the questions you’re most concerned about • Decide at each stage what questions you are most concerned about and create appropriate tasks for your user testing

  36. For examples tasks • Look at section 7 of this paper (also referred to in the day 8 slides) • http://www.cit.gu.edu.au/~mf/uidweek10/ergosoft.pdf • Look at page 26 of this paper (also referred to in the day 8 slides) • http://www.cit.gu.edu.au/~mf/uidweek10/Tower_Test_Report.pdf

  37. Tasks – and the prototype

  38. Today’s lab • prototypes and user tasks • make sure to read the suggestions on the website regarding things you could do by next week

More Related