How to Choose a UX Prototyping Tool

Sep 16
28

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)

Posted by: Nishant Jain
23 Comments
  1. Molly Malsam

    May 5, 2011 - 03:02 PM

    Great summary! I’ve been looking for any new tools that create reusable code, as more often I’m finding that it would be a great timesaver when we spend more time on the prototyping part of the process.

    I’m curious as to why you omitted iRise and PowerPoint from this discussion. I just read about a new PowerPoint plugin that has a toolbar for prototyping.

    Also Omnigraffle…

  1. Josh Walsh

    May 5, 2011 - 09:29 AM

    You left out OmniGraffle, one of the most used UX wireframing tools available.

  1. Michael Gaigg

    May 5, 2011 - 12:00 PM

    Very nice abstraction of the sketching/wireframe universe. One item I don’t agree with though: Sketchflow does NOT have a large number of controls (17 the last time I counted), if any, this should be a big minus for Sketchflow. There is a nice way of extending Sketchflow through Sketchables (http://www.michaelgaigg.com/blog/2010/10/12/ms-sketchflow-meets-sketchables/)

    I’m still in big favor of Balsamiq for LoFi sketching. Very powerful templating 🙂

    Cheers
    Mike

  1. Feng Chen

    May 5, 2011 - 06:02 AM

    @Molly, just released a rapid prototyping tool – App Sketcher (http://www.appsketcher.com). It uses HTML elements and jQuery components as building blocks and produces prototypes in HTML/CSS/JavaScript. I think it might fit your need of creating reusable code.

  1. Marcin

    May 5, 2011 - 03:09 PM

    Tool is just a tool. Your understanding of human needs, often unverbalized, counts.

    Many companies (including some designers at Google) started using UXPin paper prototyping kits as a design tool. Check them at http://www.uxpin.com

  1. njain

    May 5, 2011 - 12:43 AM

    We only considered those tools that we have had an opportunity to play around for a few months. Powerpoint or even Keynote could be used for quick linking of screens, though Visio itself could be used for the same purpose.

    Omnigraffle was a deliberate omission as we invested in Visio early due to cost and standardization. Though we have just started using Omnigraffle and grudgingly it looks like a superior tool.

  1. Dreto

    May 5, 2011 - 04:31 PM

    Good summary but the missing Omnigraffle makes it a bit useless. It is by far a superior tool for the Medium fidelity. Although they could make big improvements, my mockup tasks got much more efficient.

  1. infield

    May 5, 2011 - 04:45 PM

    We Have been using Axure but started using and liking justinmind Prototyper and usernote.

    http://www.justinmind.com

  1. John

    May 5, 2011 - 04:12 PM

    Agree that it’s surprising to see two missing from this list: Omnigraffle for Macs and LucidChart for the web.

  1. Ronald_T

    Jun 6, 2011 - 12:32 PM

    Thx your article – Just a few weeks ago I came across an other good overview of planning and prototyping tools
    http://ux4dotcom.blogspot.com/2010/12/prototyping-and-wireframing-its-your.html
    Perhaps it’s useful for one or two.

  1. Linda

    Jun 6, 2011 - 10:42 AM

    You also left out Adobe Fireworks – it’s up there with Omnigraffle and Axure in terms of usage.

  1. Neil Allison

    Sep 9, 2011 - 11:37 AM

    Interesting read – thanks.

    Unless I’m missing something though, you’ve got the export options for Axure wrong. There are more export options than just images.

    I use Axure to generate HTML prototypes. It’s also great for exporting mockups and notes to MS Word to contribute to business requirement documents.

  1. Caroline

    Feb 2, 2012 - 06:20 PM

    I would recommend Keynotopia to add to that list 🙂 With the templates you can quickly make an interactive prototype without writing code and choose between low fidelity and high fidelity (in fact you can turn wireframes to pixel perfect designs with just a few clicks). You can annotate the prototypes too when collaborating w/ your team (or clients), export to test your prototypes, and customize and edit in Keynote, PowerPoint, or OpenOffice (tools most of us already have)!

  1. Ian

    Feb 2, 2012 - 02:17 PM

    Check out Fluid UI http://www.fluidui.com. A new iPhone and Android prototyping web app. It’s got iPhone and Android widget sets, image uploads, fully linked prototypes, touch gestures, animated transitions and on-device testing is a click away.

    Cheers,
    Ian

  1. App Mockup Tools

    Sep 9, 2012 - 01:45 PM

    App Mockup Tools designs iOS GUI Elements: http://www.appmockuptools.com/collections/types?q=iOS+GUI+Elements to easily create wireframes or prototypes. No coding required, shareable. Fully editable elements and interactive. Looks and acts like a real app.

  1. Jan

    Sep 9, 2012 - 05:14 PM

    Check out Notism App – http://www.notismapp.com
    With Notism you can gather feedback from your team or clients, share designs for review, turn static screens into interactive prototypes.

  1. Catriona

    Feb 2, 2013 - 08:38 AM

    This is a really great blog post. It’s really important to choose a prototyping tool that fits with the needs of clients and coworkers. I have a small plug for our prototyping tool Pidoco – mid-fidelity and easy-to-use. If you are curious, we have a free trial at http://www.pidoco.com/free

  1. Mike L.

    Jun 6, 2013 - 05:41 PM

    Good article,

    I have tried the prototyping tool done in HTML5 in cloud called NinjaMock.com and it is very good, easy to use, fast, and has super sharing possibilities and functionality to show the client or team work and be able easy to comment. It supports drag and drop from desktop due to HTML5 and it has all elements in vector graphics and ability to import new icons and other elements. I used Balsamiq before but Ninja tool is way better and easy to work with, and has great exporting possibility and some other stuff, at least for me it was perfect. You should check it out

    Br
    Mike

    It is fast fri and for what Iwas doing it was just perfect.

    Mike

  1. Shalin

    Jan 1, 2014 - 05:45 AM

    I like to suggest Creaetely also as an diagramming tool. Comparing UX tools with visio is useless since now there are plenty of tools to does what visio can do. http://creately.com

  1. Olena

    Jan 1, 2014 - 05:17 PM

    One more tool that was forgotten – Mockup Builder (http://mockupbuilder.com/). It can be used for the creation low and medium fidelity prototypes.

  1. Imane

    Aug 8, 2014 - 03:08 PM

    You have forgotten to include Visual Spec, Its a great prototyping tool. Its available at http://www.visualspec.co.uk absolutely free.

  1. Clemence

    Sep 9, 2014 - 08:42 PM

    Hello, if you want to make a wireframe offline with your favorite tools discovers http://say-ui.com It’s an ultimate add-on library for any UI/UX interface designer, ai or project manager. Available on Adobe Indesign CS5.5/CC, Illustrator CS5.5/CC, Photoshop CS5.5/CC (Mac & PC) & Microsoft Office PowerPoint 2011 (Mac & PC). Best regards. Clemence.

  1. Otha Delamora

    Jun 6, 2016 - 09:37 AM

    Invaluable comments . Incidentally , if anyone are requiring to merge two images , my husband found a tool here http://goo.gl/stZy83

Leave a Comment