Adding more control to Axure when prototyping

WHY WE LOVE AXURE

Axure is a prototyping tool that does many things well. It let’s us quickly mock up ideas for user flows and simple interactions. It’s also robust enough to produce high-fidelity facsimiles of websites or apps to put in front of clients as well as users for usability testing. In cases where it’s easier to show rather than tell our clients our developers how something is supposed to function, Axure is a great asset in our arsenal of tools.

WHEN AXURE (SORT OF) STINKS

But like many digital tools, Axure has its share of shortcomings. Sometimes entirely too much time can get spent on illustrating interactions that could be easily crafted using HTML and JavaScript. As of yet, there’s no way to get data into prototypes from external sources (XML or JSON) into prototypes which means you’re pretty much forced to enter content in manually which can make iterations a bit of headache. Regardless, it’s easy enough to work around some of these limitations to illustrate a particular idea or interaction.

WORKING AROUND THE CONS

While not technically an open-source piece of software, there are options to extend its functionality beyond its core features. The creators of Axure have been thoughtful enough to give its users the option of adding custom JavaScript and CSS to prototypes that have been uploaded to its Axshare service.

While this feature was intended to give UX Designers an additional level of control over their prototypes it also gives us the opportunity to tack on features that may help in other ways for the purposes of client presentations and usability testing.

OUR PROBLEM

For the latter, Usability Matters needed a method to show where users click or tap when interacting with a prototype. During usability testing we almost always record their actions happening on the screen using the screen capture tool, Silverback. This app, which also records the user themselves through the use of an additional webcam, works well enough for most situations, but with one small caveat: the videos that are generated provide no visual indication of what they tapped or clicked during a session.

While Android devices provide a “show touches” option within the Developer Settings of the phone, iOS-based gadgets offer no such feature. It may seem like a minor quibble, but being able to see these actions post-testing makes it easier to evaluate what’s working and what isn’t– both in terms of our team as well as our clients who are often given the footage to review.

OUR SOLUTION

Given this limitation, we used Axure’s script attachment feature to shoehorn our own solution for this into prototypes with a bit of custom-written JavaScript and CSS.

Now when our usability testing participants touch the screen, a circle appears beneath their finger and follows it for the duration of the gesture. When a particular item is tapped, a pulsating animation appears. This same animation appears on desktop platforms whenever the user clicks.

This is a relatively simple add-on that makes use of the jQueryTouch plugin, a few custom functions and a handful of CSS. The only particularly complicated aspect involves detecting the difference differences between a tap, a click as well as a swipe—even though it’s a gesture that involves a tap, albeit more of a prolonged one.

If you’d like to use this (beta version) tool for your own projects (or add to its functionality), simply download the file and upload the CSS and JavaScript files to the ‘<a href=”http://goo.gl/vNvB2x”>plugins</a>’ section of your Axshare project page.

Enjoy!