1 / 32

Rapid Prototyping

Rapid Prototyping. November 10, 2008. Hall of Fame or Shame?. Hall of Fame or Shame?. Hall of Fame or Shame?. Hall of Shame!. Rapid Prototyping. November 10, 2008. Outline. Review informal prototyping tools Why build hi-fi prototypes? Hi-fi prototyping tools Widgets

janicec
Download Presentation

Rapid Prototyping

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Rapid Prototyping November 10, 2008

  2. Hall of Fame or Shame?

  3. Hall of Fame or Shame?

  4. Hall of Fame or Shame?

  5. Hall of Shame!

  6. Rapid Prototyping November 10, 2008

  7. Outline • Review informal prototyping tools • Why build hi-fi prototypes? • Hi-fi prototyping tools • Widgets • What prototyping tools lack

  8. Denim Outpost Topiary Suede Informal UI Prototyping Tools advantages of low-fi paper prototypes + electronic advantages SketchWizard Activity Designer

  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)

  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

  11. Prototyping Tools • Hypercard • Macromedia Director • Powerpoint • Visio / SmartDraw • Adobe Flash • Axure

  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

  13. HyperCard • Tool palettes

  14. Director

  15. Director Cast • Basic objects used in interface • Mainly multimedia in nature • images, audio, video, etc. • synchronize with cue points

  16. Director Score • Overview of events in time

  17. Director Behavior Inspector • Connect events to actions • Drag & drop

  18. Prototyping Tools (current) Powerpoint

  19. Prototyping Tools (current) Visio

  20. Prototyping Tools (current) Adobe Flash CS3 Pro

  21. 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.

  22. Prototyping Tools (current) Flash • ActionScript™ code • allows you to add interactivity to the media elements • add logic to your applications

  23. Axure [Video]

  24. Prototyping Tools What is Missing? • Support for the “insides” of applications

  25. Prototyping Tools What is Missing? • Internals • Real Background data • Recognition Engines • Machine Learning quality • Speed of response

  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

  27. Widgets • Buttons (several types) • Scroll bars and sliders • Pulldown menus

  28. Widgets (cont.) • Palettes • Dialog boxes • Windows and many more...

  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)

  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

  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

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

More Related