1 / 37

Admin

Paper Prototyping IS 403 – Fall 2013 6. Admin. TODAY: Paper prototyping Thursday: HTML programming in ENGR 104A (not here) Making up participation Project ideas?. But first, scenarios. Scenarios.

shani
Download Presentation

Admin

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. Paper PrototypingIS 403 – Fall 2013 6

  2. Admin TODAY: Paper prototyping Thursday: HTML programming in ENGR 104A (not here) Making up participation Project ideas?

  3. But first, scenarios

  4. Scenarios • A descriptive story about a use of your design • Designed to capture • User’s goals • User’s steps • Environmental context

  5. How scenarios are used Create during design process, keep throughout Help balance design decisions Typical projects may have 5 to 500 scenarios

  6. Example scenarios From http://www.usability.gov/how-to-and-tools/methods/scenarios.html

  7. Elaborated Scenarios give more user story details. These details give the Web team a deeper understanding of the users and users’ characteristics that may help or hinder site interaction. Knowing this information, the team is more likely to develop content, functionality, and site behavior that users find comfortable and easy to work with.

  8. Mr. and Mrs. Macomb are retired schoolteachers who are now in their 70s. Their Social Security checks are an important part of their income. They've just sold their big house and moved to a small apartment. They know that one of the many chores they need to do now is tell the Social Security Administration that they have moved. They don't know where the nearest Social Security office is and it's getting harder for them to do a lot of walking or driving. If it is easy and safe enough, they would like to use the computer to notify the Social Security Administration of their move. However, they are somewhat nervous about doing a task like this by computer. They never used computers in their jobs. However, their son, Steve, gave them a computer last year, set it up for them, and showed them how to use email and go to websites. They have never been to the Social Security Administration's website, so they don't know how it is organized. Also, they are reluctant to give out personal information online, so they want to know how safe it is to tell the agency about their new address this way.

  9. Back to paper prototyping Why? How to do it Clever examples

  10. What is a prototype? • Prototype = “working” model • Full-size or to scale • Fully or partially functioning • Limited representation of an idea • Common in almost every field of engineering design • Airplanes, chemical structures, architecture… • In HCI prototypes may be virtual or physical

  11. Prototype Examples • A series of screen sketches (paper) • A storyboard, cartoon-like series of scenes illustrating key points of a scenario • A PowerPoint Slide show • A video simulating the use of a system • A piece of software with limited functionality written in the target language or in another language • An electronic mock-up (hardware) • A cardboard mock-up

  12. Why prototype?

  13. Why Prototype? • To identify user interface and functional requirements • Almost impossible to specify in advance • Can’t always get things right the first time…

  14. Why Prototype? • Reveals problems/prevents mistakes • Building artifacts immediately leads to costly errors • We did not have to consider the stove, cup holder, or door to see the design flaws, we only considered pictures of them

  15. Why Prototype? • Enables quick evaluation and feedback throughout design process • Fosters discussion, reflection and innovative ideas (from designers and users): concrete artifact • Keeps design focused on users • Cheap, easy way to test designs with users • Help choose between design alternatives (risky/critical features, go/no-go decisions) • Help answer specific questions • Users enjoy prototyping and feel involved • Provides continuous feedback on the current design situation

  16. Prototyping: When/How? Early Design Late Design Brainstorm different representations Choose a representation Rough out interface Style Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Limited field testing Alpha/Beta tests Low fidelity paper prototypes Medium fidelity prototypes High fidelity prototypes Working Systems

  17. Different types of prototypes Fidelity: High vs. low Scope: Horizontal vs. vertical Materials: Paper, PowerPoint, screen…

  18. Prototype Compromises • All prototypes involve compromises…Identify the compromises being made • Examples of compromises in software-based prototyping: • Slow reaction time • Limited functionality • Use “placeholder” images: clipart, stock icons • Simulate data or input • Two common types of compromise: horizontal and vertical

  19. Fidelity in Prototyping • Low Fidelity • Quickly made representations of interface, interaction is imagined • Medium Fidelity • Prototypes that are more finalized than low fidelity, simulate interaction • High Fidelity • Prototypes that look like the final product, build interaction elements • Will cover in a future lecture….

  20. Horizontal vs. Vertical Horizontal “thin” prototype Vertical “thick” prototype

  21. Horizontal vs. Vertical • Horizontal Designs • First level of user interface is fully present • No, or limited, functionality (but looks complete) • Fast implementation • Full extent of interface can be tested, but not in a real-use context • Often does not capture the interaction “feel” • Vertical Designs • Restricted to a subset of the system • This subset offers the interface and functionality • Can undertake realistic testing

  22. Fidelity Mock-ups Site Maps Schematics Storyboards Fidelity High Low Designers create prototypes at multiple levels of detail,or Fidelity Example: Web sites are iteratively refined at all levels of detail

  23. Fidelity Example

  24. Fidelity in Prototyping • Low Fidelity • Quickly made representations of interface, interaction is imagined • Medium Fidelity • Prototypes that are more finalized than low fidelity, simulate interaction • High Fidelity • Prototypes that look like the final product, build interaction elements • Will cover in a future lecture….

  25. Wizard of Oz What the user sees The Wizard A method of testing a system that does not exist yet Example: a system that transcribes text.

  26. How to do low fidelity prototyping • You need: 3 people • 1 participant • 1 “computer” • Someone to take notes (observer) • You need: a quiet place • What is a good location? • You need: example tasks • What are good tasks?

  27. What tools do I need? Suggestions?

  28. What is this device?

  29. Index Cards • Index cards (3”x5”)… a great size! • Each card represents one screen or one element of a task • Great for software prototypes with multiple screens • Website design • Mobile devices • Windows of software

  30. Index Cards (Example) Include enough detail for users to interact with the prototype

  31. Useful Low Fidelity Tools Explore your local art store for supplies! Large, heavy, white paper Index cards Tape, stick glue, correction tape Pens & markers (many colors and sizes) Large sheet of foam core, poster board, butcher paper Scissors, X-acto knives Band-aids

  32. Make a Low Fidelity Prototype Once you like your layout, you can focus on details of the design • example data values, menu content, buttons, labels, etc • More specific layout of interface objects • You can even annotate your paper prototype!

  33. Fancier LowFidelity Prototypes Once the details are ironed out, you can create your interface “toolkit” • Cut out each of the components (windows,dialogs,menus,etc) into it’s own window • These can be used to dynamically simulate the entire interface following a storyboard, or flow.

  34. Storyboarding

  35. Paper prototyping activity • Let’s make: a mobile app for browsing courses at UMBC, viewing reviews, adding reviews • Tasks: • Search for class by course name/number • Browse reviews for a class • Add a review for a class

  36. Prototyping Examples Pieces of paper http://www.youtube.com/watch?v=ykJ60H4Qkvg&feature=related Simulated screen with paper http://www.youtube.com/watch?v=oITeUEjrY3Q&feature=related Cell phone testing http://www.youtube.com/watch?v=Bq1rkVTZLtU&feature=related Prototype usability testing http://www.youtube.com/watch?v=L7oPR2aTGlM&feature=related Complete prototyping process http://www.youtube.com/watch?v=5Ch3VsautWQ Kid’s game design (what not to do)http://www.youtube.com/watch?v=L3yl9vaJuFE&feature=related

More Related