Paper Prototyping IS 403 – Fall 2013 6
Post on 25-Feb-2016
Embed Size (px)
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
Paper PrototypingIS 403 Fall 2013 61AdminTODAY: Paper prototyping
Thursday: HTML programming in ENGR 104A (not here)
Making up participation
2But first, scenarios3ScenariosA descriptive story about a use of your design
Designed to captureUsers goalsUsers stepsEnvironmental context
4How scenarios are usedCreate during design process, keep throughout
Help balance design decisions
Typical projects may have 5 to 500 scenarios5Example scenariosFrom http://www.usability.gov/how-to-and-tools/methods/scenarios.html
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
Common in almost every field of engineering designAirplanes, chemical structures, architecture
In HCI prototypes may be virtual or physical11Prototype ExamplesA 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-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
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
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
16Prototyping: When/How?Brainstorm different representationsChoose a representationRough out interface Style
Task centered walkthrough and redesign
Fine tune interface, screen designHeuristic evaluation and redesignUsability testing and redesignLimited field testing
Alpha/Beta testsLow fidelity paper prototypes
Medium fidelity prototypes
High fidelity prototypes
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.
20Horizontal vs. Vertical
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
22FidelityDesigners create prototypes at multiple levels of detail, or FidelityExample: Web sites are iteratively refined at all levels of detail
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
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.
Wizard of OzA method of testing a system that does not exist yetExample: a system that transcribes text.
What the user seesThe Wizard26How to do low fidelity prototypingYou need: 3 people1 participant1 computerSomeone to take notes (observer)
You need: a quiet placeWhat is a good location?
You need: example tasksWhat are good tasks?27What tools do I need?Suggestions?3X5 cards28What is this device?
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
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!
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!
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
These can be used to dynamically simulate the entire interface following a storyboard, or flow.
35Paper prototyping activityLets make: a mobile app for browsing courses at UMBC, viewing reviews, adding reviews
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