RAPID PROTOTYPING

What is Prototype?

A scenario-based simulation that allows a person to experience chosen aspects of a potential product.
Prototypes dont have to be clever or sophisticated, so long as you can be when you present or test them.

Whats the difference between sketches, wireframes, and prototypes?

Paper isnt necessarily a wireframe and clickable screens arent necessarily a prototype Its about process and purpose It helps to use verbs:

Sketching or Wireframing: brainstorming, ideating, mocking up, laying out, documenting Prototyping: Modeling, simulating, demonstrating, evaluating, testing

Prototyping

Prototyping is an information-gathering technique Prototypes are useful in seeking user reactions, suggestions, innovations, and revision plans Prototyping may be used as an alternative to the systems development life cycle

Initial User Reactions

Reactions must be gathered from users There are three types

User suggestions Innovations Revision plans

Sytem Prototyping

Prototyping is the rapid development of a system The principal use is to help customers and developers understand the requirements for the system

Requirements elicitation Users can experiment with a prototype to see how the system supports their work Requirements validation The prototype can reveal errors and omissions in the requirements

Prototyping can be considered as a risk reduction activity

Prototyping benefits

Misunderstandings between software users and developers are exposed Missing services may be detected and confusing services may be identified A working system is available early in the process The prototype may serve as a basis for deriving a system specification The system can support user training and system testing

Four Kinds of Prototypes

There are four conceptions of prototypes:

Patched-up prototype Non-operational scale model First full-scale model Prototype which contain only some of the essential system features

Patched-up Prototype

This is a working model with all the features but is inefficient Users can interact with the system Storage and retrieval of data may be inefficient Workable but inefficient May contain only basic features

Nonoperational Scale Models

A nonoperational scale mode is one which is not operational, except for certain features to be tested Prototype input and output

First Full-Scale Models

Create a pilot system An operation model Useful when many installations of the same information system are planned An example is a system to be installed in one location, tested and modified as necessary, and later implemented in other locations

Selected Features Prototype

An operational model that includes some, but not all, of the final system features With the acceptance of these features, later essential features are added Some menu items are available System is built in modules These are part of the actual system

Prototyping As an Alternative to the Systems Life Cycle

Two main problems with the SDLC

Extended time required to go through the development life cycle User requirements change over time

Prototyping may be used as an alternative

Prototyping in the software process

Evolutionary prototyping

An initial prototype is produced and refined through a number of stages to the final system A prototype is produced to help discover requirements problems and then discarded The system is then developed using some other development process

Throw-away prototyping

Prototyping objectives

The objective of evolutionary prototyping is to deliver a working system to end-users

The development starts with those requirements which are best understood.

The objective of throw-away prototyping is to validate or derive the system requirements

The prototyping process starts with those requirements which are poorly understood

Approaches to prototyping

Evolutionary prototyping Outline Requirements Throw-away Prototyping

Delivered system

Executable Prototype + System Specification

Evolutionary prototyping

Must be used for systems where the specification cannot be developed in advance

E.g., AI systems and user interface systems

Based on techniques which allow rapid system iterations Verification is impossible as there is no specification Validation means demonstrating the adequacy of the system

Evolutionary prototyping
Develop abstract specification Build prototype system Use prototype system

N Deliver system YES System adequate?

Evolutionary prototyping advantages

Accelerated delivery of the system

Rapid delivery and deployment are sometimes more important than functionality or long-term software maintainability

User engagement with the system

Not only is the system more likely to meet user requirements, they are more likely to commit to the use of the system

Evolutionary prototyping

Specification, design and implementation are intertwined The system is developed as a series of increments that are delivered to the customer Techniques for rapid system development are used such as CASE tools and 4GLs User interfaces are usually developed using a GUI development toolkit

Evolutionary prototyping problems

Management problems

Existing management processes assume a waterfall model of development Specialist skills are required which may not be available in all development teams Continual change tends to corrupt system structure so long-term maintenance is expensive

Maintenance problems

Contractual problems

Prototypes as specifications

Some parts of the requirements may be impossible to prototype

E.g., safety-critical functions

An implementation has no legal standing as a contract Non-functional requirements cannot be adequately tested in a system prototype

Rapid Prototyping as Specification Technique

No specification phase Rapid prototype replaces specification document

Rapid Prototyping as Specification Technique

Specifications: Rapid prototype plus a list of additional features Advantages

Speed No ambiguities, omissions, contradictions Specification document is contract Testing requires specifications Maintenance requires specifications

Disadvantages

Reusing the Rapid Prototype

Develop and refine rapid prototype till the final product Build-and-fix No specifications, no design Quality Maintenance Real-time constraints

Incremental development

System is developed and delivered in increments after establishing an overall architecture Requirements and specifications for each increment may be developed Users may experiment with delivered increments while others are being developed

These serve as a form of prototype system

Intended to combine some of the advantages of prototyping

More manageable process Better system structure

Incremental development process

Define system deliverables

Design system architectur e

Specify system increment NO

Build system increment

Validate increment

Deliver final system YES

System complete?

Validate system

Integrate increment

Throw-away prototyping

Used to reduce requirements risk The prototype is developed from an initial specification, delivered for experiment then discarded The throw-away prototype should NOT be considered as a final system

Some system characteristics may have been left out There is no specification for long-term maintenance The system will be poorly structured and difficult to maintain

Throw-away prototyping

Outline requirements Reusable components

Develop prototype

Evaluate prototype

Specify system

Develop software

Validate system

Delivered software system

Rapid prototyping techniques

Various techniques may be used for rapid development

Dynamic high-level language development Database programming Component and application assembly

These techniques are often used together Visual programming is an inherent part of most prototype development systems

Dynamic high-level languages

Languages which include powerful data management facilities Need a large run-time support system. Not normally used for large system development Some languages offer excellent UI development facilities Some languages have an integrated support environment whose facilities may be used in the prototype

Choice of prototyping language

What is the application domain of the problem? What user interaction is required? What support environment comes with the language? Different parts of the system may be programmed in different languages Example languages

Java, PHP, ASP, Python, Smalltalk, Lisp, Prolog, Perl, Tcl/TK, etc.

Database programming languages

Domain specific languages for business systems based around a database management system Normally include a database query language, a screen generator, a report generator and a spreadsheet May be integrated with a CASE toolset The language + environment is sometimes known as a 4GL Cost-effective for small to medium sized business Interface systems Spreadsheet generator
DB programming language Database management system Report generator

Fourth-gener ation language

Component and application assembly

Prototypes can be created quickly from a set of reusable components plus some mechanism to glue these component together The composition mechanism must include control facilities and a mechanism for component communication The system specification must take into account the availability and functionality of existing components

Visual programming

Scripting languages such as Visual Basic support visual programming

the prototype is developed by creating a user interface from standard items and associating components with these items

A large library of components exists to support this type of development These may be tailored to suit the specific application requirements

Visual programming with reuse

Date component Hypertext display component

File

Edit

Views

Layout

Options

Help General Index

12th January 2000 Range checking script 3.876

Draw canvas component

User prompt component + script

Tree display component

User interface prototyping

It is impossible to pre-specify the look and feel of a user interface in an effective way UI development consumes an increasing part of overall system development costs User interface generators may be used to draw the interface and simulate its functionality with components associated with interface entities Web interfaces may be prototyped using a web site editor

Other Uses of Rapid Prototyping

Management Implications

Immediate delivery Instant maintenance Waterfall modelget it right first time Rapid prototypingmany changes, then discard Increased interaction with clients

List of Prototyping Tools

Axure RP Pro Balsamiq Mockups CogTool Coutline Dreamweaver EasyPrototype Excel Expression Blend Expression Blend + SketchFlow Expression Design Fireworks Tool specifically designed to create web site prototypes. Axure outputs clickable HTML and a spec in Word format. Complex interactions are supported. Create a mockup of your software super-fast. The look of Balsamiq's output is sketchy, which can help to disarm those who think that suddenly your software is "done". Create simple UI mockups and evaluate their effectiveness. CogTool predicts how long an experienced user will take to complete a given task. A web-based to design and preview clickable prototypes. Also includes features for project management and team review. Use the visual side of Dreamweaver to drag-and-drop your design into place, point-n-click to add interactivity and dive into code for more complex prototyping. Very similar to the popular Axure, this lightweight tool allows you to design screens and export a clickable HTML prototype along with documentation. You are thinking: "Excel? Are you crazy?!". The authors of this book think not. Output prototypes for Silverlight and WPF apps with rich interactions quickly via a drag-and-drop interface. Axure Balsamig Bonnie E. John Coutline Adobe ExtremePlanner Software Microsoft Microsoft

Create task flow maps and interfaces concepts that literally look like sketches. Prototypes can evolve into the Microsoft final product within the Expression suite. Use powerful drawing tools to create HTML, WPF or Silverlight prototypes with limited interactivity. Microsoft

Create complex clickable prototypes using many of the same drawing tools found elsewhere in the Adobe Adobe suite. Exports to PDF or HTML. FlairBuilder Create interactive wireframes via an AIR desktop app. Send the resulting file to clients to review in the free Cristian Pascu viewer. Flash Quickly generate self-running animations or simple clickable prototypes. Add a little bit of ActionScript Adobe knowledge and you can build complex interactions. Flash Catalyst A still-in-development tool to help designers build interfaces for Flash apps. Adobe Flex While more tuned for app developers, the WYSIWYG interface and support for importing skins from Ilustrator Adobe give you the ability to go quickly from design to prototype. Can export Flash or AIR aps. ForeUI Design mockups, define behaviors and simulate the app in a browser. EaSynth Solution FormBuilder for Web-based interface to drag and drop form elements onto a page. Design a working form, including input Lullabot Drupal requirements, in minutes. GUI Design Design interfaces, add annotations and build a storyboard to define a working prototype. There's a nice sketch Caretta Software Studio visual style that can be applied. iPlotz Create clickable wireframes online and collaborate with others. Also includes basic project management iPlotz features like task assignment. Desktop version (AIR) available. iRise A very complex tool used to model business process and prototype application interfaces. iRise Justinmind Create wireframes and simulate them against functional specs defined as use case diagrams. Justinmind Prototyper

JustProto Keynote

A web-based tool focused on collaboration with remote teams Like Powerpoint, Keynote allows objects to be clickable, opening external links, playing Quicktime movies or transitioning to a new slide. LiveView View your desktop screen on a virtual iPhone, or via an app, on your actual iPhone. Lucid Spec Design screens and simulate a working application by using standard widgets and easy to use drawing tools. MockApp An iPhone UI library and template for Keynote. There's also a Powerpoint version, though it is not tested and may not export correctly. MockupScreens More of a wireframing tool since it only exports to a slideshow instead of something click-able. OmniGraffle Diagramming and mockup tool that can export clickable PDFs and HTML OverSite Create the structure of your app, design the interfaces and simulate the app as a click-through prototype. Can even import an existing site to use as a starting point. Pencil A Firefox add-on that's really more of a wireframer than a prototyping tool. PHPRunner Code Generator HTML+PHP + Database (MySQL, Access, Oracle, PostgreSQL) pidoco Formerly RapidRabb.it. Collaborative, web-based prototyping. Has both a "regular" and a sketched mode. Polypage This is a jQuery plugin that allows you to show/hide elements of a page. Use it to simulate state change via a toolbar. Powerpoint A Powerpoint deck as a prototype?! Yep, it's a little known fact that Powerpoint supports clickable hotspots to jump to slides. Combine this with built-in transitions to prototype animation. Protonotes Not a prototype creation tool, but a way to allow a disparate team to annotate your design via the web. Protoscript A super-simplified scripting language enabling designers to add behaviors to existing HTML pages. Protoshare A web-based tool aimed at teams who need to collaborate on clickable wireframes. Prototype Composer Prototype web and desktop applications and hand off assets to dev teams using other Serena tools. Screen Architect Works in conjunction with the UML modeling tool Enterprise Architect to create interface prototypes in RTF and HTML. Tinderbox A complex notes tool that could be used to export click-through HTML Visio Professional Many would call Visio the "gold standard" of wireframing tools. Did you know that it can create clickable prototypes as well? XHTML & CSS Have the coding skills, then skip the software tools and build it yourself!

DeSmart Apple IDEO Elegance Technologies Dotan Saguy

MockupScreens OmniGroup OverSite

Duong Thanh An PHPRunner pidoco ClearLeft Microsoft Webanza Bill Scott Site 9 Serena

CATCH
Eastgate Systems Microsoft W3C? ;-)

Prototyping Tools Positioning

Practical Prototyping Tools

Creating Hi-Fi, semi-functional prototypes with minimal effort PowerPoint Prototyping UX-Specific Tools Photoshop + HTML/Dreamweaver Visual Studio Code Generator

PowerPoint Prototyping

Advantages:

Almost everyone has it

Ubiquitous format

Fast and easy to use Can use hyperlinks to simulate interaction Must be used at a computer

Disadvantages:

e.g., difficult to do mobile-based interactions

Somewhat limited functionality Cannot be reused for final implementation

Visual Studio Prototyping

Advantages:

Fast to put together windows interfaces Can evolve into a fully functional prototype

Disadvantages:

Requires programming knowledge to start creating interactivity

Axure RP

A commercially available wireframes maker/prototyping tool

Great for websites Can transition from wireframe Prototype Functional system

Axure RP Key Features

WIREFRAMES
Widget libraries and easy to use tools for layout and formatting will help your wireframes come together in no time.

PROTOTYPES
With one-click HTML prototype generation, Axure RP brings your designs to life without writing a single line of code.

SPECIFICATIONS
Specification generation with customizable templates and formatting options means less time documenting and more time designing.

COLLABORATION
Integrated source control helps your team work simultaneously on a project and maintain a history of revisions.

Wireframe

Blue prints placeholder and functionality Basis for discussion Communication tool a.k.a. Page Architecture, Mock-Up, Page Schematic Who develops it?

WF-103 Cancel Permit Application Application # M2009-000267 Status Season Flag One Flag Two Flag Three 15-76SH 12/12/2008 15/12/2008 W - Web Joe Smith $ 15.00 Upload * Drawing005.pdf * New Winter B A A Copy Print

Monthly Permit Annual Permit Start Date End Date System Code Date Created Date Issued Issue Code Approved by Permit Fee

Uploaded Documents C Drawing004.jpg Signed application.doc

D Pay Online Tab 5 F Customer Code ACME City Phone Edmotnon 780-123-4567x369 Contact Person Prov/State Fax Tab 6

E Reject Permit

E Approve Permit

Tab 1

Tab 2

Tab 3

Tab 4

Customer Information Customer Address Postal Code Acme Cutomer

Dave Smith Alberta 780-987-6541

114 120 Ave NE T6R-0F4

A B C

Read only for user, Admin can overwrite it Flags are updated based on start and end date Link to download document

D E F

Only if permit is in approved state Only visible to Admin Link to Customer detail page

Not a Wireframe

Wireframes are not prototype Wireframes do not convey Brand Wireframes are not final design Wireframes do not convey design - e.g. colors, graphics, or fonts

How Wireframes are useful?

Enable communicate with clients and stakeholders Focus on application functionality Get people thinking and generate requirements Aligns with Agile approach Elicit functional requirement Getting signoff Save Time & Money Avoid expensive Change Requests

Audience

Business, Stakeholders, and Executives Project Managers Application Users Developers and Testers Everyone

Tools

Hand sketch Excel HTML Visio Photoshop Gliffy Axure Etc.

Hand Sketch Wireframes

Spreadsheet Wireframes

HTML Wireframes

Visio Wireframe
WF-103 Cancel Permit Application Application # M2009-000267 Status Season Flag One Flag Two Flag Three 15-76SH 12/12/2008 15/12/2008 W - Web Joe Smith $ 15.00 Upload * Drawing005.pdf * New Winter B A A Copy Print Monthly Permit Annual Permit Start Date End Date System Code Date Created Date Issued Issue Code Approved by Permit Fee

Uploaded Documents C Drawing004.jpg Signed application.doc

D Pay Online Tab 5 F Customer Code ACME City Phone Edmotnon 780-123-4567x369 Contact Person Prov/State Fax Tab 6

E Reject Permit

E Approve Permit

Tab 1

Tab 2

Tab 3

Tab 4

Customer Information Customer Address Postal Code Acme Cutomer

Dave Smith Alberta 780-987-6541

114 120 Ave NE T6R-0F4

A B C

Read only for user, Admin can overwrite it Flags are updated based on start and end date Link to download document

D E F

Only if permit is in approved state Only visible to Admin Link to Customer detail page

Key points

A prototype can be used to give end-users a concrete impression of the systems capabilities Prototyping is becoming increasingly used where rapid development is essential Throw-away prototyping is used to understand the system requirements In evolutionary prototyping, the system is developed by evolving an initial version to the final version Rapid prototyping may require leaving out functionality or relaxing non-functional constraints Prototyping techniques include the use of very high-level languages, database programming and prototype construction from reusable components Prototyping is essential for parts of the system such as the user interface which cannot be effectively pre-specified Users must be involved in prototype evaluation

Workshop
1.

2.
1. 2. 3. 4. 5. 6.

Wireframing using Axure RP First Full-Scale Models (using PHPRunner)

Functional Database design User Interface Integration Test Review & Evaluation Next?

7.