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 [Link]. 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 * [Link] * 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 [Link] Signed [Link]
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 * [Link] * 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 [Link] Signed [Link]
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.
