GUI Prototyping Tools

Special purpose UI prototyping tools, like the ones listed on C2 Wiki, offer a convenient blend of usability and flexibility. I have tried some of these tools. I was looking for something that -

• doesn’t become unwieldy when used to prototype a large and complex GUI
• allows me to use my own screenshots/images/icons
• allows me to modify the prototype without making it a hair-pulling experience.
• can prototype all aspects and artifacts of modern web and desktop interfaces, specially -
  • tree controls  - you will be surprised how many prototyping tools don’t have this. Pencil, I am looking at you
  • tabbed panels  - can you position your tabs at the bottom ? on the right edge ?
  • film strips
  • ribbons
  • NavBars

The one that met all these requirements and more (and blew me away) is Balsamiq Mockup.
Disclaimer : I requested and received a complimentary license from Balsamiq.

• Balsamiq Mockup’s usability is what attracted me at first and then it was just a series of surprises, one after another.
• You can click on the widget “legend” to toggle aspects of the widget on and off. Very slick !
• You can link (aspects of) widgets to other mockups. This allows you to build some interactivity into your prototype. Very cool !
• You can clone a mockup with a button click – to prototype a transition.
• I could use my own images/screenshots and sketch them (basically,  applies a sketch transformation on the image) !!! If you think that sketchy look of the prototypes looks unfinished, you should read this.

Here are some things I wish I could have in Balsamiq -

• name (and search for) individual widgets in my mockup
• select multiple widgets by dragging over an area
• auto-group when dropped on containers (or other widgets)
• stretching container stretches everything in it, I wish I could have some control over it
• register my own mockups as library widgets
• zoom in and out

Just to be thorough, here are some other approaches I have used in the past -

• Using a RAD tool like VisualStudio is great way to prototype. You have to be very proficient, like a GUI developer , with the tool of your choice. Otherwise, it is can be an excruciatingly slow approach. The best part of this approach is that the interactions can be prototyped seemlessly and some of the feasibility doubts can be cleared early on. The problem with this approach is that the prototype can be mistaken as the actual product and the effort /scheduling expectations of the stakeholders can become hard to manage. Read Joel Spolsky’s brilliant observations on The Iceberg Secret, Revealed. Also, when the prototype looks like a finished product, type of feedback you receive is usually not strategic, it is narrower. Read more about this on Creating Passionate Users article.
• When you have an existing UI (perhaps from a 3rd-party library’s demos) that can become the basis for your new UI, it makes sense to use screenshots of your existing UI and modify them using image editors like Paint.NET or Photoshop or even MS Paint. It is a quick way to produce a prototype but the expected changes to the prototype must be minimal. Otherwise, you will find yourself spending long hours with your image editor.
• General purpose drawing programs, like dia and Visio, can be used to create UI prototypes. With these type of tools, you will probably need to work with building blocks that are a bit too granular, although you may be able to procure widgets/stencils for some of these tools to make things easier. These tools have a some learning curve and less than fluid usability.

Share This

Related posts

• Using DbUpdater with MySql (0)
• ReSharper vs CodeRush + Refactor Pro (6)
• Database Schema Version Control Tool (4)