Introduction to Prototyping

Objectives for today Learn about design methods, specifically LoFi (paper) prototyping

Interaction Design Prototypes May consist of … a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide show a video simulating the use of a system a lump of wood (e.g. a handheld device) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language

Why prototype? Evaluation and feedback are central to interaction design Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing Team members can communicate effectively You can test out ideas for yourself It encourages reflection: very important aspect of design Prototypes answer questions, and support designers in choosing between alternatives

What to prototype? Screen layouts and information display Work flow, task design Technical issues Difficult, controversial, critical areas

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’

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

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

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.

For More Information… http://www.snyderconsulting.net/us-paper.pdf http://www.uie.com/articles/prototyping_tips/

Let’s go to the Film First 3 chapters of Nielsen DVD

Prototyping Exercise #1 By yourself Sketch an interface for the following device An automated teller machine That also sells postage stamps “Sells” rolls of coins And converts Euros, Canadian Dollars, British Pounds, and Mexican Pesos into US Dollars

Next Steps Project Next class Paper prototype due in one week More on prototyping and design