Paper Prototyping IS 403 – Fall 2013 6
out of 37
Post on 25-Feb-2016
DESCRIPTIONPaper 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. - PowerPoint PPT Presentation
<p>Slide 1</p> <p>Paper PrototypingIS 403 Fall 2013 61AdminTODAY: Paper prototyping</p> <p>Thursday: HTML programming in ENGR 104A (not here)</p> <p>Making up participation</p> <p>Project ideas?</p> <p>2But first, scenarios3ScenariosA descriptive story about a use of your design</p> <p>Designed to captureUsers goalsUsers stepsEnvironmental context</p> <p>4How scenarios are usedCreate during design process, keep throughout</p> <p>Help balance design decisions</p> <p>Typical projects may have 5 to 500 scenarios5Example scenariosFrom http://www.usability.gov/how-to-and-tools/methods/scenarios.html</p> <p>67</p> <p>8Elaborated 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.9Mr. 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.Back to paper prototypingWhy?How to do itClever examples10What is a prototype?Prototype = working modelFull-size or to scaleFully or partially functioningLimited representation of an idea</p> <p>Common in almost every field of engineering designAirplanes, chemical structures, architecture</p> <p>In HCI prototypes may be virtual or physical11Prototype ExamplesA series of screen sketches (paper)</p> <p>A storyboard, cartoon-like series of scenes illustrating key points of a scenario</p> <p>A PowerPoint Slide show</p> <p>A video simulating the use of a system</p> <p>A piece of software with limited functionality written in the target language or in another language</p> <p>An electronic mock-up (hardware)</p> <p>A cardboard mock-upWhy prototype?13Lo fiQuickEasy to changefriendly13Why Prototype?To identify user interface and functional requirementsAlmost impossible to specify in advanceCant always get things right the first time</p> <p>14Why Prototype?Reveals problems/prevents mistakesBuilding artifacts immediately leads to costly errorsWe did not have to consider the stove, cup holder, or door to see the design flaws, we only considered pictures of them</p> <p>15Why Prototype?Enables quick evaluation and feedback throughout design processFosters discussion, reflection and innovative ideas (from designers and users): concrete artifactKeeps design focused on usersCheap, easy way to test designs with usersHelp choose between design alternatives (risky/critical features, go/no-go decisions)Help answer specific questionsUsers enjoy prototyping and feel involvedProvides continuous feedback on the current design situation</p> <p>16Prototyping: When/How?Brainstorm different representationsChoose a representationRough out interface Style</p> <p>Task centered walkthrough and redesign </p> <p>Fine tune interface, screen designHeuristic evaluation and redesignUsability testing and redesignLimited field testing</p> <p>Alpha/Beta testsLow fidelity paper prototypes</p> <p>Medium fidelity prototypes</p> <p>High fidelity prototypes</p> <p>Working Systems</p> <p>Early DesignLate Design17Different types of prototypesFidelity: High vs. lowScope: Horizontal vs. verticalMaterials: Paper, PowerPoint, screenPrototype CompromisesAll prototypes involve compromises Identify the compromises being madeExamples of compromises in software-based prototyping: Slow reaction timeLimited functionalityUse placeholder images: clipart, stock iconsSimulate data or inputTwo common types of compromise: horizontal and vertical19Fidelity in PrototypingLow FidelityQuickly made representations of interface, interaction is imaginedMedium FidelityPrototypes that are more finalized than low fidelity, simulate interactionHigh FidelityPrototypes that look like the final product, build interaction elementsWill cover in a future lecture.</p> <p>20Horizontal vs. Vertical</p> <p>Horizontalthin prototypeVerticalthick prototype21Horizontal vs. VerticalHorizontal DesignsFirst level of user interface is fully presentNo, or limited, functionality (but looks complete)Fast implementationFull extent of interface can be tested, but not in a real-use contextOften does not capture the interaction feelVertical DesignsRestricted to a subset of the systemThis subset offers the interface and functionalityCan undertake realistic testing</p> <p>22FidelityDesigners create prototypes at multiple levels of detail, or FidelityExample: Web sites are iteratively refined at all levels of detail</p> <p>Site MapsStoryboardsSchematicsMock-upsLowHighFidelity23Difference between storyboard - site map: site map on stickynotes which can be rearranged to explore the link structure of this webpage.Fidelity Example</p> <p>24Fidelity in PrototypingLow FidelityQuickly made representations of interface, interaction is imaginedMedium FidelityPrototypes that are more finalized than low fidelity, simulate interactionHigh FidelityPrototypes that look like the final product, build interaction elementsWill cover in a future lecture.</p> <p>25</p> <p>Wizard of OzA method of testing a system that does not exist yetExample: a system that transcribes text.</p> <p>What the user seesThe Wizard26How to do low fidelity prototypingYou need: 3 people1 participant1 computerSomeone to take notes (observer)</p> <p>You need: a quiet placeWhat is a good location?</p> <p>You need: example tasksWhat are good tasks?27What tools do I need?Suggestions?3X5 cards28What is this device?</p> <p>Index CardsIndex cards (3x5) a great size!Each card represents one screen or one element of a taskGreat for software prototypes with multiple screensWebsite designMobile devicesWindows of software30Index Cards (Example)Include enough detail for users to interact with the prototype</p> <p>31I dont love this example b/c they used some tools to make the prototype look more fancy.Useful Low Fidelity ToolsLarge, heavy, white paperIndex cardsTape, stick glue, correction tapePens & markers (many colors and sizes)Large sheet of foam core, poster board, butcher paperScissors, X-acto knivesBand-aidsExplore your local art store for supplies!</p> <p>32Make a Low Fidelity PrototypeOnce you like your layout, you can focus on details of the designexample data values, menu content, buttons, labels, etcMore specific layout of interface objectsYou can even annotate your paper prototype!</p> <p>33Fancier Low Fidelity PrototypesOnce the details are ironed out, you can create your interface toolkitCut out each of the components (windows,dialogs,menus,etc) into its own window</p> <p>These can be used to dynamically simulate the entire interface following a storyboard, or flow.</p> <p>34Storyboarding</p> <p>35Paper prototyping activityLets make: a mobile app for browsing courses at UMBC, viewing reviews, adding reviews</p> <p>Tasks:Search for class by course name/numberBrowse reviews for a classAdd a review for a class36Prototyping ExamplesPieces of paperhttp://www.youtube.com/watch?v=ykJ60H4Qkvg&feature=relatedSimulated screen with paperhttp://www.youtube.com/watch?v=oITeUEjrY3Q&feature=relatedCell phone testinghttp://www.youtube.com/watch?v=Bq1rkVTZLtU&feature=relatedPrototype usability testing http://www.youtube.com/watch?v=L7oPR2aTGlM&feature=relatedComplete prototyping processhttp://www.youtube.com/watch?v=5Ch3VsautWQKids game design (what not to do)http://www.youtube.com/watch?v=L3yl9vaJuFE&feature=related</p>
View more >
Working with type IS 403 – Fall 2013 13. A4 Due Tuesday http://userpages.umbc.edu/~skane/classes /is403/a4.html 2.
CSE 403 Lecture 6 User Interface Prototyping Reading: Paper Prototyping, C. Snyder slides created by Marty Stepp http://www.cs.washington.edu/403