prototyping. review : why a prototype? helps with: –screen layouts and information display –work...
TRANSCRIPT
![Page 1: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/1.jpg)
Prototyping
![Page 2: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/2.jpg)
REVIEW : Why a prototype?
• Helps with:– Screen layouts and information display– Work flow, task design– Technical issues– Difficult, controversial, critical areas
![Page 3: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/3.jpg)
Low-fidelity (LoFi) Prototypes
• Quick and cheap to make, easy to change• Use a medium which is unlike the final medium, e.g.
paper, cardboard• Examples
• sketches of screens, task sequences, etc• ‘Post-it’ notes• storyboards• ‘Wizard-of-Oz’
![Page 4: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/4.jpg)
![Page 5: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/5.jpg)
![Page 6: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/6.jpg)
![Page 7: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/7.jpg)
![Page 8: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/8.jpg)
![Page 9: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/9.jpg)
Surprisingly…
• In many circumstances, LoFi prototypes work better than HiFi prototypes
• Why? The goal is to try out lots of ideas fast, early in development (when changes are cheap)
– “To get a good idea, get lots of ideas”
• HiFi prototypes take too long to develop
![Page 10: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/10.jpg)
Surprisingly…
• Testers focus on superficial issues rather than content
• Developers resist changes• HiFi prototypes can set unrealistic expectations• A single bug in a HiFi prototype can halt testing• Downside of LoFi prototypes: hard to envision
course of an interaction– Storyboards help
![Page 11: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/11.jpg)
Need a “toolkit” for making LoFi prototypes
• Construction paper• Note cards• Post-it notes• Scissors• Glue, tape• Lots of paper copies of standard GUI
elements: text fields, buttons, check boxes, radio buttons, labels, etc.
![Page 12: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/12.jpg)
For More Information…
http://www.snyderconsulting.net/us-paper.pdf
http://www.uie.com/articles/prototyping_tips/
![Page 13: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/13.jpg)
Let’s go to the Film
• First 5 chapters of Nielsen DVD
![Page 14: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/14.jpg)
Storyboards
• Series of sketches showing how a user might progress through a task using an interface
• Often used with scenarios, bringing more detail • Make it easier to envision the progress of the interaction
![Page 15: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/15.jpg)
![Page 16: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/16.jpg)
Medium fidelity prototypes
• Now move to the computer (e.g., use Visual Basic)– Simulate some but not all features of the intended
system more engaging for users
• Purpose– Provide interactive (but limited) scenario for user to try
out; gets around limits of LoFi prototypes on testing flow of interaction
– May offer a development path to running system
![Page 17: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/17.jpg)
How do you limit functionality?
• Horizontal prototypes– Entire UI is implemented, but no underlying
functionality
• Vertical prototypes– Include in-depth functionality for a few features– Common design ideas can be tested in depth
• Scenario-based– Scripts of particular uses of the system; no deviations
• Wizard of Oz – human simulates the intelligence
![Page 18: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/18.jpg)
High fidelity prototypes
• Basically complete running system• But may not be:
– In a suitable language for delivery– Efficient– Robust– Well-coded
• “Build one to throw away”… a common research methodology
![Page 19: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/19.jpg)
Recall benefits of LoFi Prototypes
• LoFi prototypes are very quick to develop– Early in the process when changes are cheap
• Users focus on content instead of superficial issues
• Developers aren’t yet invested, thus are willing to change
• Don’t set unrealistic expectations• No bugs to halt testing
![Page 20: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/20.jpg)
The Prototyping Spectrum
Brainstorm different representationsChoose a representationRough out interface styleTask centered walkthrough and redesign
Fine tune interface, screen designHeuristic evaluation and redesign
Usability testing and redesign
Limited field testing
Alpha/beta tests
LoFi (paper) prototypes
Medium Fidelity prototypes
HiFi Prototypes / restricted systems
Working system
Early design
Late design
![Page 21: Prototyping. REVIEW : Why a prototype? Helps with: –Screen layouts and information display –Work flow, task design –Technical issues –Difficult, controversial,](https://reader031.vdocuments.site/reader031/viewer/2022032308/56649f565503460f94c7a3ba/html5/thumbnails/21.jpg)
Next Steps
• Project– Paper Prototypes due next week