CS 321 HumanComputer Interaction Today Paper Prototyping Video

CS 321 Human-Computer Interaction Today ü Paper Prototyping ü Video: Paper Prototyping Tricks CD Ch. 17 -19 “Prototyping for Tiny Fingers” Tuesday How to run a Paper Prototyping Session © 2001 Southern Illinois University, Edwardsville All rights reserved.

Prototyping Ø Definition of a prototype Ø A model on which something is based. Ø A reasonably close facsimile of the final product © 2001 Southern Illinois University, Edwardsville All rights reserved.

Why Prototype? Ø A tool to validate the user interface is usable and reveals the structure clearly Ø Provides a structure that fits the user’s work model Ø A tool for communication between the design team and the user Ø User’s vocabulary Ø User becomes a co-designer Ø Iterative refinement © 2001 Southern Illinois University, Edwardsville All rights reserved.

Prototyping Medium Ø High Fidelity Prototypes Ø A. K. A. Hi-fi, Rapid Prototyping Tools Ø Examples Ø Visual Basic Ø HTML and scripting (ASP, Java) Ø Director Ø Powerbuilder Ø Hypercard Ø Black Box Coding © 2001 Southern Illinois University, Edwardsville All rights reserved.

Prototyping Medium Ø Low Fidelity Prototypes Ø A. K. A. Lo-fi, Paper Prototyping Ø Examples Ø Paper Ø Post-it’s Ø Tape Ø Glue Ø Play Computer © 2001 Southern Illinois University, Edwardsville All rights reserved.

Paper Prototyping ü What Is Paper Prototyping? • Early design tool. • Used to test a programs usability. • Use simple office materials to create a paper based simulation of an interface. • Rough draft thus open to correction and errors. • Lo-fidelity. © 2001 Southern Illinois University, Edwardsville All rights reserved.

Paper Prototype Kit ü Useful things to have in your kit • Post-it notes (multiple sizes) • Post-it tape • Index cards • Sturdy Paper / Index Folders • Transparencies • Pointer or pencil • Hardware Props • Scissors, straight edge © 2001 Southern Illinois University, Edwardsville All rights reserved.

Lo-fi vs. Hi-fi Score Board Ø Time to Build Ø Lo-fi: Ø Quick to build Ø 2 to 3 hours depending on number of screens and complexity Ø Hi-fi: Ø Screen quick, but black boxing can take a significant time commitment Ø 2 to 3 weeks depending on complexity and team size © 2001 Southern Illinois University, Edwardsville All rights reserved.

Lo-fi vs. Hi-fi Score Board Ø Quality of Feedback Ø Lo-fi: Ø Maintains focus on work structure and interface elements Ø Hi-fi: Ø Reviewers tend to focus on finishing touch issues ØFonts, alignment, colors © 2001 Southern Illinois University, Edwardsville All rights reserved.

Lo-fi vs. Hi-fi Score Board Ø Changeability Ø Lo-fi: Ø Invites change Ø Because it is easy to change, changes can be made on the fly Ø Hi-fi: Ø Developers resistant to change Ø Too much time and effort invested – feeling of ownership © 2001 Southern Illinois University, Edwardsville All rights reserved.

Lo-fi vs. Hi-fi Score Board Ø Feature Creep (Creap) Ø Lo-fi: Ø Gives the impression that development is still in design Ø Hi-fi: Ø Gives the false impression of being done © 2001 Southern Illinois University, Edwardsville All rights reserved.

Lo-fi vs. Hi-fi Score Board Ø Program bugs Ø Lo-fi: Ø No program bugs – no problem Ø Hi-fi: Ø Single bug can bring prototype session to a halt (or kill a project) Ø Users as Co-Designers Ø Lo-fi: Ø Invites the user to provide suggestions Ø Hi-fi: Ø Gives the impression of being done © 2001 Southern Illinois University, Edwardsville All rights reserved.

Lo-fi vs. Hi-fi Score Board Ø Timing Studies Ø Lo-fi: Ø Cannot be done Ø Hi-fi: Ø Can be done Ø Animation Ø Lo-fi: Ø Cannot be done Ø Hi-fi: Ø Can be done, but sometimes complicated © 2001 Southern Illinois University, Edwardsville All rights reserved.

And the Winner Is. . . Lo-fi! Final Score Lo-fi Hi-fi Score Board © 2001 Southern Illinois University, Edwardsville All rights reserved.

How do you make a paper prototype? © 2001 Southern Illinois University, Edwardsville All rights reserved.

How do you make a paper prototype? ü Paper Prototype Tricks Video © 2001 Southern Illinois University, Edwardsville All rights reserved.

What about small screens? © 2001 Southern Illinois University, Edwardsville All rights reserved.

What about small screens? © 2001 Southern Illinois University, Edwardsville All rights reserved.

What about small screens? © 2001 Southern Illinois University, Edwardsville All rights reserved.

What about small screens? Include both if they are designed to work together © 2001 Southern Illinois University, Edwardsville All rights reserved.