PROTOTYPING..............................................................................................................................
2
Introduction..................................................................................................................................2
Types of prototypes......................................................................................................................2
Requirements for prototyping tools..............................................................................................3
Prototyping tools..........................................................................................................................3
Prototyping tools for mobile applications....................................................................................6
PROTOTYPING
Introduction
A prototype is a concrete but partial representation or implementation of a system design.
Prototyping helps us to achieve two main goals:
1. Reduce the cost and risk involved in implementing systems
2. Ensure the quality of the final system
Types of prototypes
Prototypes can be classified based on the precision level of the prototype relative to the anticipated
final product.
It is considered that there are two major precision levels and therefore two main types of prototypes:
low-fidelity prototype and high-fidelity prototype.
Low-fidelity prototype (or lo-fi prototype)
A low-fidelity prototype is a cheap, simplified mock-up of the user interface.
It is often common and used early in the design process.
Low-fidelity prototypes do not have to really look like the actual user interface, as long as they
mimic or mock the same.
Since low-fidelity prototypes are cheap, in terms of money and time, designers can afford to have
more cycles of evaluation and corresponding refinement.
High-fidelity prototype (or hi-fi prototype)
A high-fidelity prototype is as close to the anticipated final product as possible in terms of look and
feel, and interaction.
The prototype accepts inputs like the actual user interface would, and responds to those events in
the same way (e.g. displaying a particular window or message, changing state, etc.).
Question: Why do we talk of the possibility of having mid-fidelity prototypes?
Question: What other ways can be used to classify prototypes?
Requirements for prototyping tools
Here are some requirements for prototyping tools
Ease of use by team members: Prototyping tools should allow all members of the development
team to participate in the development and refinement of the prototype.
Fast turn-around: Prototyping involves making many small refinements to the user interface.
Tools should allow designers to quickly make the changes and immediately see the interface in
action again.
Flexibility and extensive control over prototype features: Prototyping tools should be very
flexible. One of the purposes of prototyping tools is to try out new ideas. Prototyping tools
should therefore support a large variety of designs, and should give designers extensive control
over design details.
Data collection capabilities: Ideally, prototyping tools should capture all the different kinds of
information required during the interaction.
Executable prototypes: Prototypes should ideally exhibit reliability close to real systems,
because designers need to make them in order to increase the reliability of the information
collected. An executable prototype is one that can respond to user input and provide appropriate
responses. However, it is not always necessary that prototypes be connected to real data and that
they perform real computations (e.g. simulations could be sufficient).
Lifecycle support: Prototyping tools should help with all the stages of the entire design process
starting with the early design stages through the advanced and detailed screen and behaviour
design.
Collaborative design: Software products are developed by teams. Prototyping tools should
support groups of people working together either simultaneously or asynchronously, and
perhaps remotely.
Version control: In prototyping, it is important to explore alternative designs. Many versions of
a prototype might be built while exploring different alternatives. Designers might want to revisit
previous designs, so keeping and managing prototype versions is important.
Prototyping tools
Paper and Pencil
Paper and pencil prototyping allows the development of paper prototypes, which are low-fidelity
prototypes.
Paper and pencil prototyping is almost mandatory in early stages of design.
They produce low-fidelity prototypes which are used during early stages of design for
conceptualizing and envisioning the application.
The method itself involves creating rough, hand sketched, drawings of an interface to use as
prototypes of a design. User interface interaction objects such as checkboxes, text fields, and drop-
down lists can be cut out of a sheet of paper and added to the interface to simulate the interactivity.
These prototypes can then be evaluated by asking users to perform some tasks using the roughly
sketched out interface, while designers observe their actions to gauge where they face problems,
and what they like.
Advantages
This method is very successful at discovering usability issues early in the design process.
It is possible to create a prototype relatively fast.
The method can be done by non-technical people, or people with programming experience
in different languages.
Paper has more visual bandwidth (can see more at once).
Disadvantage
Lack of interactivity. This drawback can be countered by combining the method with classical
prototyping tools like HyperCard, PowerPoint, etc.
Facade tools
Facade tools allow designers to construct the screens of a user interface without a real application
behind. Of course, each tool has its own domain of applicability, but globally, this category of tools
takes the advantages of Paper and Pencil, by adding the basic interactivity of an executable
prototype: a response to inputs such as a click on a button.
Facade tools create mid-fidelity prototype which are used to design and evaluate mostly the content,
layout, and some interactive aspects, including navigation functionality.
These tools are usually easy to handle. They however do not produce reusable code.
Examples:
Microsoft’s PowerPoint
Apple’s Keynote
Apple’s Hypercard (for hypertext applications, but is getting old)
Animation and Modelling Tools
Sketch, Acrobat Flash and Illustrator are powerful vector based development tools. Blender and
Autodesk Maya are tools for 3D modelling, rendering, animation and simulation.
Such tools can be used to prototype user interfaces.
Tools such as Adobe Flash can produce any kind of prototypes, from low to high fidelity, including
a full Flash-based application, depending on the depth of the work on the prototype.
User Interface Builders and Application Development Suites
GUI builders are tools developed to increase the productivity of user interface development teams,
and to lower the cost of user interface code in both the development and maintenance phases.
They are the construction tools that give interface developers a drawing-like interface to specify the
layout. Their main function is to save time by generating the executable code of the interface from a
few mouse clicks. For instance: Microsoft Visual Studio, NetBeans, Eclipse, etc.
Such suites typically provide a direct-manipulation user interface builder, in conjunction with a
corresponding programming environment/code. The designer is able to create and place standard
interface elements, set and modify their properties, and associate them with codes that execute when
they are invoked by a user of the interface.
The development suite/environment makes it easy for the designer to convert the app development
project into an executable file that can be distributed and run by other users who do not have the
development suite/environment.
Prototyping tools for mobile applications
There are many prototyping tools available for mobile applications and they keep on changing.
There are so many factors to consider when deciding which specific tool to choose (as we saw
earlier in the Section on Requirements for prototyping tools).
The following tools are reasonable for prototyping mobile applications (note that some may have a
limited trial period and/or limited free version):
[Link]
[Link]
[Link]
[Link]
[Link] (iPhone prototypes)
[Link]
[Link]
etc
Note that there are also application development suites/environments for mobile applications. For
instance: Android studio, Xcode, Xamarin, etc.