Wireframing with a desktop app? Oh come on – that’s so 2009.

Recent months have seen a slew of online web apps specifically for the creation of low-fidelity, clickable prototypes. It all started with “Balsamiq” some time ago now (complete with Comic Sans default font scandal) and has quickly progressed to an alarming array of free and affordable options.

Over at Bunnyfoot towers we’ve been giving them a spin. Here’s a quick rundown.

Mockflow

http://www.mockflow.com/

Pricing: 1 mockup with 4 pages is free, or $49 per year for pretty much unrestricted use.

The overall experience feels swift and straightforward after initial bump of a UI learning curve. The key differentiator over others on test here is the ability to co-edit mockups with collaborators. Online chat is also built in, making it easy to work together to craft your dream app.

Other nice features include align guides as you draw, a comprehensive library of components and quick and easy sharing (both private and public).

The main gripe whilst editing was the lack of keyboard shortcuts (at least on a Mac), making every copy and paste a menu selection.

screen shot of the mockflow application

iPlotz

http://www.iplotz.com

Pricing: free for 1 mockup with 5 pages. Subscription packages from $15 per month to $495 for 10 users with desktop and online access.

Phew. iPlotz is a beast. As well as wireframing, you also get an array of project management features, including to-do lists and completion status. There are also other powerful features such as version control, fine drawing tools, HTML export and annotations. It also makes a mean cappucino if you ask nicely enough!

Putting together a mockup is fairly straight-forward, once you’ve become accustomed to the (quite busy) interface. The default “sketchy” style is similar in feel to Balsamiq (see below), but a little less “play school” in feel.

Of course the trade-off with many powerful features is simplicity. The overall experience is more akin to a desktop app and takes some determined effort to feel comfortable.

screen shot of the iplotz application

Balsamiq

http://www.balsamiq.com

Pricing: free for online use, $79 for desktop app.

Balsamiq is fairly well known in web circles, and courted controversy with it’s choice of the oft-slammed font Comic Sans as a default (although you can change this).

The overall experience is not bad: drag, drop and edit works reasonably well. You can also search for widgets and add them to your canvas with the press of an enter key, speeding up the drawing process. There are some nice human touches: there’s an inspirational design quote as the app loads.

You can export your design, but unfortunately you can’t easily share your mockups – you need the desktop version to do this.

Overall, the end result feels a little too playful for serious heavy duty projects – we’re not sure how well it would go down in the financial sector for example.

screen shot of the balsamiq application

Mocking Bird

http://gomockingbird.com

Pricing: free (currently still in beta).

Probably the slickest of the apps on offer here, Mocking Bird has a clean look and easy to learn UI.

Like Balsamiq, you can get stuck in and create a mockup without creating an account (you get a prompt to signup on save).

There’s nothing drastically new on offer in terms of drawing tools, but they work well and there’s a comprehensive library of components to start you off.

Public sharing is also pretty straight-forward, making it easy to send out a link for user feedback. There’s no private sharing unfortunately, although the URL is sufficiently obscure.

On the downside, it’s not straightforward to create precise pixel width layouts (there’s no ruler or way to specify exact sizes) and no page masters or templates to save on copy and pasting.
So will we be throwing away Axure anytime soon? Well, the job is not entirely done — there’s a gulf between quick and dirty concept tools and full-blown, enterprise standard specifications. It also requires a client with a good understanding of the design and user research process and confidence in the value of low-fidelity, disposable prototypes. Oh, and maybe a soft-spot for Comic Sans.

screen shot of the mockingbird application

The biggest boon has got to be the ease and speed of sharing (anyone trying to upload an Axure prototype with its 1,000s of spacer gifs via a slow connection will feel our pain). It’s dead easy to get an idea online for client review and a rapid round of user feedback.

Got your own favourite, or an opinion on these apps? Have  you used them on client projects? Let us know.
Author: Neil Collman, Senior Consultant, Edinburgh

If something as innocent as baker’s doughy product has the potential for confusion, misinterpretation, class associations and heated argument (yes disputes are rife – raise the issue with your colleagues and wait for the fallback) then imagine the potential for chaos and bewilderment when communicating more complex propositions across national and international markets…. …this is where good customer research with a reach beyond the confines of London can help

Bunnyfoot has been performing customer research and customer usability testing for the last 10 years. We noticed very early on that there were distinct UK regional differences (over and above other demographic influencers) in people’s responses to the same website – and these differences have profound consequences on the websites’ ability to communicate, persuade and convert. Knowing and acting upon the geographical differences (cultural, social, language, attitudinal etc.) dramatically increases the effectiveness of the end result. This is one of the reasons why we set up 5 offices with usability labs running the length of the UK and why we encourage our clients to look beyond the myopia of London when researching with their customers (it works better if you do – simple as that).

But you don’t have to be locked to physical labs, getting out there in the field and observing what real people do in their own environments is a valuable thing to be doing that can reveal key insights. One problem with this is that it can be expensive. One way of getting there without so much cost is to perform ‘remote usability testing’. This typically relies on screen-sharing over the internet, and with recent advances in broadband penetration it is now possible to run usability tests and observe people in their own homes or places of work (with consent!!) from practically anywhere.

Beyond the UK

When your product or service reaches beyond national boundaries then geographical and cultural differences become even more pronounced. HSBC clearly know this and you will know doubt have seen some of their adverts revealing the different cultural, geographical and socio-economic meanings associated with things like colour, gestures, symbols and language.

It goes beyond this too – we have recently been working extensively across Europe, the Middle East and Asia (and a little bit in Africa) we have uncovered challenges associated with extending online communications across these regions. This includes:

• the need for flexible or even completely different interfaces to cope with different languages (e.g. German = long words and phrases, Arabic and Chinese = right to left)
• the fact that in some regions the preferred or only way people engage online is via mobile (Africa and Japan in particular)
• display advertising and contextual advertising is far more effective than search engine marketing in some regions (e.g. Middle East) because of not just language differences but also cultural differences
• ‘western style’ minimalist aesthetic design doesn’t work well in China – and again this is cultural and not just because of the character sets used

We, as an agency, need to take our own advice on board to adopt local knowledge to get the best results. Bunnyfoot employs consultants from across cultures and have recently opened an office in Hong Kong to get closer to international differences. When we test abroad we use a network of quality agencies, it just brings that edge of local knowledge that makes the testing run much smoother.

In 2005, here at Bunnyfoot, we carried out an eye tracking usability study; it showed that 79% of people were able to find the 2003 UK gross domestic product using Google.
We carried out a similar eyetracking study in May 2009 using Bunnyfoot’s Mass User Testing approach and found that this had dropped to 37%.
We also compared the performance of Google to the new WolframAlpha search engine where 100% of people got the correct answer. This result is worrying for Google for two reasons:

• Google’s algorithms have got better in the intervening years; despite there being significantly more pages indexed on Google in 2009 compared to 2005 Google returns fewer results for the same search string; “gross domestic product UK 2003”. Given more pages to return results from and better algorithms it ‘should’ be easier to find information, not harder.
• The general level of people’s Internet experience and expertise has increased since the original study – people ‘should’ be more successful, not less.

WolframAlpha also outperforms Google on three key measures of usability; effectiveness and efficiency and satisfaction. However, the strength of the Google brand dominated WolframAlpha with 100% of users saying that they would recommend using Google to a friend with only 77% saying they would recommend WolframAlpha.
The study is by no means comprehensive; it is based on a single search query and one that favours WolframAlpha’s approach to knowledge management/search, but is does pose an interesting question:
Can Google’s search dominance be beaten by better results and usability or is the brand so strong that people will stay loyal no matter how good the competition gets?

The BBC news item below shows a report on the UK’s first Internet enabled car – produced and invented by Bunnyfoot in 1999. The car was intended as a demonstration of the essential importance of usability and accessibility … our message got somehow lost in translation in the newspapers and TV shows that ran the story, but it taught us a lot about different communication methods and to always look to the future.

Since then (is it really 10 years ago?) we have produced hundreds of video demonstrations showing usability testing, eyetracking and accessibility in action, our customer experience presentations at seminars and conferences etc, and many will be appearing here in the next few months – but this BBC one was one of our first … and is still a firm favourite.

What is perhaps surprising is that this type of technology and other ‘alternative interfaces’ haven’t really come on that far in the last 10 years- it seemed then (in 1999) that things like sophisticated voice interfaces for all sorts of devices and uses were bubbling just under the surface. In 2009 though you are likely to be annoyed at best, but most probably bemused, by the majority of telephone interfaces (has anyone tried Egg’s?), never mind anything more ambitious. It seems like it should be simple but this type of interface requires just as much research and careful design (perhaps more) than seemingly more complex visual interfaces. I’ll return to discuss this in more detail in a future post.

The point of the Bunnymobile video?

It was meant to demonstrate that usability and accessibility are vital for the interfaces of the future:

• the car used software that blind people use to translate web sites into voice = accessibility
• and needed to be simple enough so distraction didn’t cause you to crash (amongst other things) = usability

It seems we were right, and they still are important … lots more challenging and interesting work to do though.