Axure: Rapid wireframing (and a bit of prototyping)

Wireframes are something we’ve made an essential part of our process here at Engage. They help us - and more importantly our clients - visualise and finalise structure early on in a project ensuring we build a website that is both visually and functionally awesome.

We’ve tried many different tools to help us along the way but recently I’ve returned to Axure - which I had been avoiding after past experiences, I found it slow and awkward to use - but after hearing it had improved I decided to give it another crack.

The good bits

As you’d expect, along with most other wireframing tools, Axure makes great use of drag and drop placement of widgets. There are a good selection by default and absolutely loads available on the web for download. The widgets snap to each other and guides in an intelligent way and as long as you’re not attempting pixel perfection it really helps. Masters, which are a bit like a smart object in Photoshop allow you to build persistent elements once and just paste them into each future page. Changing a master changes it in every page it’s used.

All of that is pretty standard functionality, but I’d say Axure does it better than most.

The great bits - venturing into prototyping

We often build websites with a lot of movement, which can be hard to explain and demonstrate to clients without building a working demo in HTML, CSS & Javascript. While the tools Axure provide are not (and will never be) as flexible as that, it does a really good job of allowing you to really quickly build simple animations using Dynamic Panels.

Alongside dynamic panels, you can also add variables which can be set and accessed on many different events. This allows you to build a wireframe that feels a lot more interactive. For example: If you were building a shop, when a user clicks on a product in a list if you store some information about that product - name, price, intro text - you can then display that on the next page instead of lorem ipsum or a dummy product that never changes. We found this incredibly useful for user testing at the wireframe stage as nobody became confused when a link they clicked took them to an unrelated page.

Finally, something we haven’t really used yet, but I’ve got my eye on is the ability to export wireframes as a mobile app. Looking through the options you can set icons, startup screens, turn off elastic scrolling and define the device width/height. This, alongside the ability to detect swipes could enable someone to build a very thorough app prototype. I look forward to giving it a try.

The slightly irritating bits...

So, Axure does a lot right, but there are some areas that could really do with a bit of work.

Clunky interface

The UI is a bit of a mixed bag. It doesn’t compare very well to some of the more beautiful apps available on OS X at the moment but thankfully - most of the time - it doesn’t impact on functionality. By far the worst offender is the formatting palette, it's very clunky.

Speed

Most of the time, Axure is lightning fast, but once you have built quite a large wireframe or prototype, generating the wireframes can become really sluggish.

Browser Caching

This one is a pain, especially when we’ve already sent the first revision to clients. Browsers - Chrome especially - cache files quite aggressively. This means if you make a small change, sometimes you have to do a hard refresh a couple of times to view the change. Worst case you need to right click in the page and select reload frame. I don’t mind doing this, I’m used to it, but it’s frustrating when our clients run into the same issues when we’ve told them they are updated.

If else statements and interactions

I find these very awkward to work with. It took me a long time to figure out how to end an if statement and start another. They also tend to break easily if you copy panels or widgets from one page to another.

My suggestions for the future of Axure

So, Axure is mostly brilliant, and a tiny bit irritating at times, but what about those issues that aren’t really issues, but I’d still like to see them enhanced or improved in some way:

• I’d like a way to set defaults on widgets so that every future widget of that type appears on the page the same way, or have a styles pallet I can use to quickly apply a previous style to a large number of widgets.
• An option to allow dynamic panels to re-size depending on the current states height.
• A ‘paste lorem ipsum’ right click option would be very useful.
• A simple layers & folders palette to replace the grouping and ordering. If layers and groups could be hidden, even better. It’s awkward having to move widgets out of the way to work on the ones underneath.

Let's talk money

So, I like it, quirks and all, but how much and is it worth it? $289 buys you a licence for the standard Axure RP which is the option I’ve been using. $589 buys you copy of Axure RP Pro which includes project sharing enabling multiple people to work on one project at the same time. We probably wouldn’t ever need this service, but for larger projects and businesses I can see that being incredibly useful.

And I'd definitely say it's worth it. The time it will save you at the production stage because you have a clear and defined target laid out by the wireframes is invaluable.

Have you had any experience with Axure or any other wireframing tools and methods? Any useful tips or knowledge is always welcome. Let us know in the comments!