Design and Prototyping CS 5115 Fall 2013 September 18
Agenda for today • Project check-in • Due tomorrow • Design and Prototyping
Paper (Low Fidelity) Prototypes • Sketches of interface and task completion • paper, post-its, or screen drawings
Examples and References • http://www.nngroup.com/reports/prototyping/video_stills.html • http://www.paperprototyping.com/references.html • http://www.alistapart.com/articles/paperprototyping • http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups • http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/
Let’s watch some videos • http://speckyboy.com/2010/06/24/10-effective-video-examples-of-paper-prototyping/ (1st video) • http://www.youtube.com/watch?v=9wQkLthhHKA&list=TLUW7xIcYFqfQ • http://www.youtube.com/watch?v=GrV2SZuRPv0&list=TLUW7xIcYFqfQ • http://www.youtube.com/watch?v=V8LNDqMIapY&list=TLL0ibcpJyZas • http://www.youtube.com/watch?v=_g4GGtJ8NCY
LoFi pluses • Easy to produce • Rapid iteration / generate then test • To get a good idea, get lots of ideas • Never look for the “best way” – look for hundreds of ways • Users focus on the important stuff • Bugs don’t halt testing • Status is clear – proper expectations • Designers don’t get emotionally invested
LoFi limits • Hard to capture timed, dynamic interaction
What to prototype? • Screen layouts and information display • Work flow, task design • Technical issues • Difficult, controversial, critical areas
Resources • Paper widgets you can download and print http://www.userfocus.co.uk/resources/prototype.html • Electronic tools • Balsamic: http://www.balsamiq.com/ • Pencil: http://pencil.evolus.vn/en-US/Home.aspx • Stencils available for Android 4.0 http://evoluspencil.googlecode.com/files/Android.GUI_v2.zip
Prototyping Exercise, 1 • Individually: sketch a campus kiosk system designed to help people find their way around the University of Minnesota campus. The kiosks will be located at a number of positions around campus.
Prototyping Exercise, 2 • In groups of 3-4 • Review the individual prototypes • Pick a starting point for a second (revised) prototype • Draw a second prototype as a group
Prototyping Exercise, 3 • Still in your group: select a task... • Find a building: get directions from current location to that building • Find a class: find the time and location of a class (for example, “User Interface Design” or “CS 5115”) • Find a person in the campus directory, get directions to their office And did you think about who your users were? Did you have an implicit persona in mind? • Evaluate how well your prototype supports that task • Redesign your prototype as necessary • (If necessary) redraw your prototype for presentation to the class
Discussion • How much difference was there between the individual designs? • Did you think some were better than others? Why? • How much did the task focus help? Did considering a task make you change your design significantly? • How did you think about users and usage?