PROTOTYPING

1
PROTOTYPING
2.1
2
PROTOTYPING

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

3
TYPES OF H-F PROTOTYPES

• Scope
• horizontal provide a wide range of functions,
  but with little detail
• vertical provide a lot of detail for only a
  few functions
• Strategy
• Evolutionary
• Throw-away

4
REQUIREMENTS FOR PROTOTYPING TOOLS

• Ease of learn and use
• Fast turn-around
• Extensive control over prototype features
• Potential for scaling up
• Team support
• Version control

5
TYPES OF TOOLS FOR H-F PROTOTYPES

• GUI builder
• Netbeans GUI builder, Java Me Visual Mobile
  Designer, Visual Basic
• Façade Tools
• Powerpoint, Visio, Denim
• RAD tools
• Director, Flash, Dreamweaver
• Scripting languages
• Lingo, ActionScript, Javascript, html, xml, css
• Graphic languages
• Processing, Quartz Composer
• Domain specific tools
• 4GLs, CMSs

6
GUI BUILDERS

• A module of Integrated Development Environments
  (IDEs)
• Allows GUI building interactively
• Behaviour has to be specified through a
  mainstream programming language
• Netbeans http//www.netbeans.org/kb/articles/mati
  sse.html
• Java Me VMD http//www.netbeans.org/kb/docs/javam
  e/tableitem.html
• Eclipse http//www.eclipse.org/vep/WebCon
  tent/main.php
• Visual Basic
  http//msdn.microsoft.com/en-us/vbasic/default.asp
  x

7
FAÇADE TOOLS

• Drawing editors
• Enable specification of input behaviours
• No application behind
• Limited, canned behaviour
• PowerPoint http//blogs.msdn.com/jensenh/archive/
  2006/02/20/535444.aspx
• Visio http//www.stcsig.o
  rg/usability/newsletter/0007-prototypingvisio.html
  
• Denim http//dub.washington.edu2007/denim/

8
RAD TOOLS

• More sophisticated than façade tools
• Combine graphics, sound, video and other media
  together
• Allow use of predefined behaviours
• Creation of new behaviours usually through
  scripting languages
• Flash http//www.adobe.com/devnet/flash/
• Director http//www.adobe.com/devnet/director/
• Dreamweaver http//www.adobe.com/devnet/dreamweav
  er/
• Macromedia mobile devices http//www.adobe.com/de
  vnet/devices/

9
SCRIPTING LANGUAGES

• Lightweight programming languages
• Weak typing
• Frequently embedded
• Application specific
• Easy to learn and use
• JavaScript http//www.w3schools.com/js
• ActionScript http//www.actionscript.org/
• Lingo http//www.adobe.com/support/director/lingo
  .html
• HTML http//www.w3schools.com/html
• XML http//www.w3schools.com/xml
• CSS http//www.w3schools.com/css/

10
(No Transcript)
11
SOME PROTOTYPING QUESTIONS

• What tool to use?
• How much fidelity is needed?
• How many functions?
• Simulated, canned or real behaviours?
• Draft or final look-and-feel?
• Is a neat design architecture needed?