Axure Mobile Prototyping Tutorial

We’ve been harping on the joys of Axure for a while now, so if you’re familiar with our periodic Axure-outbursts, bear with us. For the uninitiated, Axure is a flexible prototyping tool for the IA community that lets you quickly create living wireframes of sites and apps, and we love love love it. Axure RP 6.0, released in 2011, ships with new (and to us, endlessly exciting) mobile prototyping features and Axure 6.5 Beta, launched in early 2012, has several more. So let’s do some Axure mobile prototyping.

Recently, we had the pleasure of building and launching the mobile website for Lexington Medical Center. This is the project that really solidified mobile prototyping with Axure RP 6 as a standard part of our mobile build process. Now that we’ve witnessed the wonders of prototypes, we wouldn’t build a mobile site without one.

You can see here how we took our mobile prototype from desktop to phone:

The basic workflow for creating a mobile prototype and then deploying it to your phone looks something like this:

  1. Create a new Axure document and set it up for mobile
  2. Create your mobile prototype using the standard Axure widget libraries and tools (Hint: we’ve included a useful list below!)
  3. Generate your prototype using the mobile settings.  Specifically, make sure the “Include Viewport Tag” checkbox is ticked in the “generate prototype” options. (Hint: we’ve added a list of forums to further explain this process below!)
  4. Upload your generated prototype files to any server. AxShare is a great tool for sharing your Axure prototypes.
  5. Use your mobile browser to access the address of the prototype on your server
  6. Voilà!

We didn’t get it right the first time (gasp!). After uploading the prototype to our server, we accessed it via our iPhone and conducted ad hoc user testing. As you can see in the video below, the live site is slightly different than the mobile prototype:

Why Test and What to Ask

For an interactive usability consultancy such as ours, user testing is part of our genetic make up, but we realize that not everyone practices user testing before beginning site development. The benefit is that you are talking to real people, end users of the product and project outsiders. Their perspectives and actions can provide great insight that is sometimes difficult to notice when in the minutia of project.

Things to remember:

  • Don’t ask leading questions.
  • Let the user use the site.
  • Let them fail. Seriously, let them fail. This is when you get the most useful information.

Relating to the example prototype, what are some sample questions we asked? (after politely asking if they had some time to help me and handing them the phone)

  • What are you looking at?
  • Find a heart doctor.
  • Send your friend flowers.

Helpful Notes and Limitations

Device widths on a prototype: Axure is a WYSIWYG tool. It isn’t set up to define item widths in screen size percentages. In other words, on your real site, you’ll be able to specify a <div> width of 70% so that no matter the mobile device you’re on, the display will seamlessly scale to fit. But in Axure, a 300px-wide box will always be a 300px-wide box. Practically speaking, what this means is that you’ll need to prototype at the width of one target device, and when loading the prototype on other devices, you’ll need to first load it, and then zoom in or out to the correct width.

Load the home.html page to hide Axure’s left-hand navigation panel: When you generate an Axure prototype, both a home.html page and an index.html page are created. When loading the generated prototype in a browser, if you don’t specify any particular page to load, the prototype will default to index.html, which includes an Axure-created page navigation and notes panel on the left-hand side of the screen. On a desktop, there’s enough real estate that this doesn’t cause a problem, and often the page-navigation panel is extremely useful. On a mobile device, the panel takes up almost the entire view and is a bit obnoxious to close every time your prototype loads. To get around this, specify that your prototype loads /home.html—or whatever you named your home page—to load it without the navigation panel.

Additional Tutorials & Resources

Needing to spice up your mobile prototype? We recommend the following widget libraries:

There are many helpful Axure forums to get one started prototyping for mobile. We recommend starting with these:

For a detailed run-down, the Axure community has made available some fantastic tutorials on how to get started setting up and generating your prototypes for mobile. In addition to Axureland, here are a few choice offerings.

For beginners: Download the official Mobile Site tutorial pack from Axure.com (http://www.axure.com/learnbydoing)

Intermediate users: Will Hacker offers up some great pointers on using the Axure RP 6 prototyping tools (http://willhacker.net/2011/08/14/axure-for-mobile-prototyping/)


About the Author(s)

Truematter is an interactive usability consultancy dedicated to creating, reviewing and testing websites, apps and mobile experiences. Kendra Schaefer is an Experience Designer/Front-End Developer and Meghan E. Billings is a Project Manager with Truematter. Visit truematter.com or follow @truematter on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *