Prof. James A. LandayUniversity of Washington

Autumn 2008

Rapid Prototyping

November 10, 2008

CSE440 - Autumn 2008 2

Hall of Fame or Shame?

CSE440 - Autumn 2008 3

Hall of Fame or Shame?

CSE440 - Autumn 2008 4

Hall of Fame or Shame?

CSE440 - Autumn 2008 5

Hall of Shame!

Prof. James A. LandayUniversity of Washington

Autumn 2008

Rapid Prototyping

November 10, 2008

CSE440 - Autumn 2008 7

Outline

• Review informal prototyping tools

• Why build hi-fi prototypes?

• Hi-fi prototyping tools

• Widgets

• What prototyping tools lack

CSE440 - Autumn 2008 8

Informal UI Prototyping Tools

Denim SuedeOutpost

Topiary Activity Designer SketchWizard

advantages of low-fi paper prototypes + electronic advantages

CSE440 - Autumn 2008 9

Why Build Hi-fi Prototypes?

• Must test & observe ideas with customers• Paper mock-ups don’t go far enough

– how would you show a drag operation?– not realistic of how interface will be used

• Building final app. now is a mistake (?)– changes in the UI can cause huge code changes

• need to convince programmer & hope they get it right– takes too much time– what did Cooper say it is harder than????

• changing a 1000 square foot slab of concrete – drag & drop prototyping tool appropriate

• but only after we have iterated on design

• Why is Cooper against prototyping?– sees prototyping as programming (above problems)– advocates paper (which I still consider prototyping)

CSE440 - Autumn 2008 10

Why Use Tools (rather than code)?

• Faster• Easier to incorporate testing changes• Multiple UIs for same application• Consistent user interfaces• Easier to involve variety of specialists• Separation of UI code from app. code– easier to change and maintain

• More reliable– bugs found in the tool are fixed for all

applications

Prototyping Tools

• Hypercard

• Macromedia Director

• Powerpoint

• Visio / SmartDraw

• Adobe Flash

• Axure

CSE440 - Autumn 2008 11

CSE440 - Autumn 2008 12

Prototyping Tools (historical)

• HyperCard– for Macintosh – built by Bill Atkinson– metaphor: card transitions on button clicks– comes with widget set – drawing & animation limited

• Director – still commonly used by designers– intended for multimedia originally lacked

interface widgets or controls– good for non-widget UIs or the “insides” of app– Flash quickly replacing Director for prototyping

• Both have “scripting” languages

CSE440 - Autumn 2008 13

HyperCard

• Tool palettes

Director

CSE440 - Autumn 2008 14

CSE440 - Autumn 2008 15

Director Cast

• Basic objects used in interface• Mainly multimedia in nature

– images, audio, video, etc.– synchronize with cue points

CSE440 - Autumn 2008 16

Director Score

• Overview of events in time

CSE440 - Autumn 2008 17

Director Behavior Inspector

• Connect events to actions

• Drag & drop

Powerpoint

CSE440 - Autumn 2008 18

Prototyping Tools (current)

Visio

CSE440 - Autumn 2008 19

Prototyping Tools (current)

CSE440 - Autumn 2008 20

Adobe Flash CS3 Pro

Prototyping Tools (current)

Flash

• Stage – graphics, videos, buttons, and so on

appear during playback.

• Timeline – when you want the graphics and other

elements of your project to appear. – specify the layering order of graphics

• Library panel – displays a list of the media elements in

your Flash document.CSE440 - Autumn 2008 21

Prototyping Tools (current)

Flash

• ActionScript™ code

• allows you to add interactivity to the media elements

• add logic to your applications

CSE440 - Autumn 2008 22

Prototyping Tools (current)

Axure

CSE440 - Autumn 2008 23

[Video]

CSE440 - Autumn 2008 24

What is Missing?

• Support for the “insides” of applications

Prototyping Tools

What is Missing?

• Internals• Real Background data• Recognition Engines• Machine Learning quality• Speed of response

CSE440 - Autumn 2008 25

Prototyping Tools

CSE440 - Autumn 2008 26

UI Builders

• Visual Basic– lots of widgets (AKA controls)– simple language– slower than other UI builders

• MS Visual Studio .NET, JBuilder, PowerBuilder...– widgets sets– easily connect to code via “callbacks”– “commercial” strength languages

CSE440 - Autumn 2008 27

Widgets

• Buttons (several types)

• Scroll bars and sliders

• Pulldown menus

CSE440 - Autumn 2008 28

Widgets (cont.)

• Palettes

• Dialog boxes

• Windows and many more...

CSE440 - Autumn 2008 29

What’s the Difference?

• Performance– prototyping tools produce slow programs– UI builders depend on underlying language

• Widgets– prototyping tools may not have complete set– UI builders have widget set common to platform

• Insides of application– UIBs do little, prototypers offer some support

• Final product– generally use UI builders, though occasionally see

things created in a prototyping tool (multimedia)

CSE440 - Autumn 2008 30

Summary

• Informal prototyping tools bridge the gap between paper & high-fi tools

• High-fi UI tools good for testing more developed UI ideas

• Two styles of tools– “Prototyping” vs. UI builders– what is the difference?

• Both types generally ignore the “insides” of application this is research

CSE440 - Autumn 2008 31

Further ReadingPrototyping

• Books– Paper Prototyping: The Fast and Easy Way to Design and Refine

User Interfaces, by Carolyn Snyder, Morgan Kaufmann, 2003

• Articles– What do Prototypes Prototype? by Houde and Hill– “The Perils of Prototyping” by Alan Cooper,

http://www.chi-sa.org.za/Documents/articles/perils.htm

• Web Sites– UW Center for Design, Use, & Build of Interactive Technology

(DUB) Web Site for informal tool downloads, http://dub.washington.edu

– InfoDesign Toolkit, http://www.infodesign.com.au

More tools

• www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/

• balsamiq

CSE440 - Autumn 2008 32