45

A feel of the real is very important in User Experience Design and we often find clients asking for prototypes (proof-of-concept) during the design process. Prototypes better communicate the interactions and navigation of the proposed design than static wireframes and mockups. Prototypes can be created at various stages of the design process (Analysis, Design or actual Test), for an informed user and client feedback to reduce number of design iterations. There is a broad array of prototyping applications available to suit the purpose, skill set and the fidelity required of a deliverable. In this blog we present a brief survey of common prototyping tools.

Low fidelity prototypes

At the onset of any design effort. a few conceptual sketches are usually discussed during the stakeholder interviews. These concept sketches can be made on paper or sticky notes (often known as story boarding) or they can be made as low fidelity prototypes by using tools such as Balsamiq or Microsoft Sketchflow. Low fidelity prototypes help convey a rough overview of the design direction. Low fidelity prototypes can be made very easily and quickly. Moreover, their “sketchy” look keeps the focus on more abstract design elements without getting distracted by subtle things such as alignment, size, colors, etc.

Low Fidelity Prototyping Tools (Click to enlarge)

Medium fidelity prototypes:

Medium fidelity prototypes do not yet communicate a final look but address various aspects such navigation, interaction flow, labels and information hierarchy (wireframes). Medium fidelity prototypes can also be called as interactive wireframes. In such prototypes, the actual content is represented by corresponding widgets. Images are represented by placeholders and text is replaced by the arbitrary Greeking “(Lorem Ipsum)”. Here the main focus is on the sizes and relative positions of the various elements on the screen but not on the actual content. The advantage of medium fidelity prototypes over low fidelity prototypes is that the relative positions of the UI elements can be decided even though the actual content has not yet been finalized. The scope and variety of interactions possible depends on which software we use for wireframing.

Medium Fidelity Prototyping Tools (Click to enlarge)

High fidelity prototypes:

High fidelity prototypes get as close to the final product as possible (without any actual back-end coding). Visual mockups are usually used as starting points for creating high fidelity prototypes. The interactions are added to the existing widgets in the mockup itself. Flash Catalyst, GUI Design Studio, and Microsoft Expression could be used to create the visual design mockups themselves. Applications like Flash Catalyst can import designs created in Photoshop and Illustrator easily and allow easy additions of an interactivity layer on top. Microsoft Expression and GUI Design Studio are end to end tools that allow wireframing, visual design and prototyping in a single workspace.

High Fidelity Prototyping Tools (Click to enlarge)

Apart from determining an appropriate fidelity, a few other factors could govern a designer’s decision in choosing a prototyping tool. What is the starting point? Whether the designer visualizes the concepts on paper, as wireframes or hi-fi visuals. This would decide the ingredients available to kick start the  prototype and thus, govern the choice of the application. Another factor could be the export options available in a particular prototyping tool,  as sometime the created screens could be re-used as final wireframes or mockups.  Then  there are other considerations like does the application let the designer manipulate the underlying  code or not or whether the available libraries  are more suited for web or mobile applications.

In other words, these are some issues that a designer should consider in order to make an educated decision to opt for one tool over the other. We have summed up our evaluation of this tool into a matrix (given below), this should serve as a quick reference to help you choose the right application to suit your needs.

Choosing the right prototyping tool (Click to enlarge)