Upload
dominick-stephens
View
218
Download
2
Tags:
Embed Size (px)
Citation preview
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