Best Usability Mockup Tools

February 13th, 2009 By Scott Savage Categories: software

In my current role I am really  noticing the huge rewards delivered through extensive prototyping and usability testing. The ability to better capture and illustrate user feedback (internally and externally) as well as accelerate application development cannot be undervalued. As they say a picture tells a thousand words, but in this case a functional picture replaces a thousand words in a requirements document with ease. Requirements documents still have their place, but not as a basis for user comment or even developer guidelines. So what programs do I recommend?

Balsamic screenshot

Balsamic screenshot

The first is Balsamiq, a great little tool that you can use to replace those back of the envelope sketches at 1am in the morning. It is very rough and intended for initial prototypes only, but I find this is well suited for situations where your stakeholders can’t see the concepts for the details. I like it because it lets me see if the ideas that click beautifully in my head actually translate to something workable in real life. Above all though it is quick. Don’t expect to do full working prototypes, but you can expect to have a full Web 2.0 application roughly laid out within an hour. Once you have the concept nailed down however then it is time to move on to some other tools. Think of it as throwing a couple of A4 sheets on a table and spending an hour scribbling, without the rubber shavings and sloping misshapen tables. It is great to be able to pin it to your wall to make sure you keep focusing on the key deliverables of the application, rather than getting carried away with the details of day to day execution.

Axure Screenshot

Axure Screenshot

My favourite tool however is Axure. This tool is great because like Balsamiq it lets you build a working website really quickly, but it then lets you “colour between the lines” and flesh out an almost fully functional prototype. Out of the box Axure is a great program, with all the basic web elements you would expect. They are all easy to edit, move, layout and link. Generating HTML prototypes is also extremely easy, a one click step once you have specified an output directory.

To really unlock the power of Axure however you need to use some community resources. This top 10 Axure resources link is a great starting point. A Clean Design’s templates (number 3 in the top 10) is my personal favourite, it has almost every Web 2.0 element you can think of. The ones that are missing (i.e. Accordian, flyout menus) are covered by the official Axure design library (which is also a good example of HTML generated in Axure).

In conclusion these two tools are the staples of my usability and prototyping work. They are so powerful that one starts wondering, how long until I no longer need to send these off to a coder to develop and deploy my solution?

Tags: , ,

7 Responses to “Best Usability Mockup Tools”

  1. February 13th, 2009 at 15:25
    1

    I agree they are great tools and definitely have their place as a prototyping tool. Often a developer had to spend days away from their current tasks to develop a prototype, now these can be mocked up fairly easily by a BA or similar role.

    The only problem I see with them, is that they don’t document the business rules for you. They’re great for a developer to see the look and feel, but the business rules still need to be documented both for the developer to code, and for the QA resources so they know what test cases to write.

    I guess what i’m saying, is that they’d be even better if they could be extended to cover documentation of business rules as well – can they do this?

  2. February 13th, 2009 at 16:55
    3

    Have you seen iplotz.com yet?..This is an online web app (wtih an AIR version coming out shortly), that allows anyone to create navigable wireframes and mockups – only just been launched in January, so we have a lot more features to add which will allow it to compete head on with Axure…

  3. Matt Gay
    February 14th, 2009 at 12:45
    4

    As you say, the ability to quickly communicate and iterate over requirements visually, rather than through reams of text, can’t be undervalued.

    For any user-facing development, I’m a big fan of jumping straight to the mockups. It’s far easier to model problems, explore interaction and experiment with solutions through rough sketches than by trying to capture everything in exhaustive requirements and spec documentation. It’s also a cheaper method: sketches and wireframes can be abandoned and redone, but discovering that a solution doesn’t make sense or is difficult to use when the interface is delivered _after_ the code has been written is crazily expensive. How many times is that mistake made?

    The spec generator in Axure looks like a great compromise between mockup-first and requirements-first analysis. We should request something similar for Balsamiq… but only if it can print the docs on napkins or beer-stained bar coasters.

    A couple of other handy & free (but not as sophisticared as Axure) UI mockup tools that I’ve used:

    – Pencil (http://www.evolus.vn/Pencil/Home.html), available as a firefox extension as well as a standalone xulrunner app; slightly more geared towards desktop app UIs, but still workable for web wireframes.

    – GUUUI (http://www.guuui.com/issues/02_07.php), almost the equivalent of Balsamiq but as a template pack for the ubiquitous Visio. This can be useful for introducing the low-fi UI mockup technique to businesses and teams that are skeptical about the value of apps like Axure, baby steps style.

  4. Shane Frederick
    February 14th, 2009 at 13:45
    5

    Check out iRise for the most functionality with regards to fidelity (data,business logic,look/feel). The most bang for your buck might be Axure, but many find it to be ‘clunky’ and lacking the ability to model complex apps.

  5. Peter Severin
    March 11th, 2010 at 06:38
    6

    Another tool for software wireframes and mockups is WireframeSketcher. It’s a plugin for Eclipse-based IDEs such as Aptana, Zend Studio, RadRails, Flex Builder and others: http://wireframesketcher.com

Leave a Comment