Finding the Ideal UX Wireframing Software

Wireframing is the way a UX designer expresses their ideas by showing layout, navigation and task flows in a skeleton of a web interface. For a better idea on wireframes, check out the ‘I ♥ wireframes’ group.

Why?

When I recently joined the UX team at Caplin I wanted to make sure that we were using the right level of tool for the right stage in our design process. For instance, when you first have an idea, it’s not appropriate to go straight into complicated computer mock-ups, but rather to grab a paper and pen and begin sketching.

Likewise during the stages between rudimentary sketches and polished GUIs, it’s crucial to have the appropriate tool to express your concept so it can be explored and refined without a huge investment in your time. And thus I set out to find a suitable tool….

What I did?

With a quick ‘google’ of the internet, I was able to identify numerous prototyping software tools on the market, most with free trials to test out their various wireframing abilities. I evaluated the programs based on the following criteria:

• Their cost
• How interactive they were
• How collaborative
• Their speed of use
• A clean vs. sketchy look
• How fun they were to use(by ‘fun’, I really mean how intuitive; what the learning curve was and how quickly I wanted to bash my head against the keyboard upon launching the program).

I looked at around 20 programs in all including:

• Microsoft Visio
• Omnigraffle (Mac only)
• Balsamiq
• Axure RP
• Microsoft Expression (Sketch Flow)
• Mockflow
• Mockery
• iPlotz
• inPreso
• Pidoco
• Mockingbird
• Hotgloo
• Protoshare
• Justinmind
• Cacoo
• ScreenSketcher
• FluidIA
• Adobe Illustrator
• Adobe InDesign
• Adobe Flash Catalyst

These programs ranged from simple wireframing tools, to rich interactive prototyping powerhouses, to industry-standard designer software. Just go to this website to see the vast amount of programs on the market for prototyping: http://konigi.com/wiki/wireframes

I tested out all of the programs against the above criteria and levelled it down to:

My Top Five

• Pidoco – Quick and fun to use. Sketch or plain mode. User testing and collaboration.
• Balsamiq– Also very quick and fun to use. Sketchy interface. Useful UI component library.
• inPreso– Good level of interactivity. Can share mock-up with others by link. Fast to use.
• FlairBuilder– Good customisation. Clean style. Fun to use. Great interactivity.
• iPlotz– Sketchy feel, but more refined than Balsamiq. Decent UI library. Some interaction.

My Worst Five

• Mockingbird– Look and feel is quite basic/childish. Not a huge amount of customisation or expandability.
• Cacoo– Very basic look. No bells or whistles to differentiate it from any other program. Upside: Free for a basic account
• Justinmind– Pretty basic in scope. Not very interactive. Decent layout of tools, but not enough.
• ScreenSketcher– Quick to use, but too few UI components. Basic layout.
• Protoshare– Similar to Mockingbird and Hotgloo in style. Too elementary looking.

I then further explored my top five programs by duplicating the same wireframe in each to see how easy it was to use, how time consuming and if I was pleased with the overall finished look.

My findings?

Balsamiq Mockups came in third as it was very delightful to use and took no time at all to churn out a design. With a drag and drop interface, a useful UI components library and the ability to click-through pages, it was a treat to design with. However the overall look proved to be too sketchy for our specific design needs.

The runner up inPreso was indeed impressive. A clean layout, a good level of customisation and ‘actions’ that made a functioning click-through prototype made this program stand out. The finished look was very clean and you could switch between different visual styles to quickly change the look of your mock-up. In the end though, we decided against it as some of the components had a visual style such as a gradient or gloss, while others were simplistic. The overall look didn’t blend together well and it was too stylised to show our clients for initial stage mock-ups.

The winner! In first came FlairBuilder, a prototyping program with great interactive abilities, a good level of customisation and useful vector drawing tools. Not to mention the customer support was excellent-I contacted the owner on Twitter and received instant feedback on a problem I was having with a particular file. This program is a joy to use and delivers prototypes that can easily be understood by clients and developers alike, which made it a winner for us.

And now?

Since introducing FlairBuilder into our repertoire, wires have been produced at a faster rate and communication of ideas internationally has been made much easier. It’s clear that choosing the right tool for your UX needs is essential in speeding up productivity.

And what about you? What is your favourite wireframing tool and why? What features do you find indispensable? Please discuss below in the comments.