Posted on by & filed under Basics.

This blog post does not start with a quick win, because using the tool I will present is a quick win, by itself. Axure RP is the most advanced wireframe, mockup and rapid prototype creation tool with built in collaboration features.

From wireframe to prototype

Pre-production user experience testing has three stages: wireframe, mockup and prototype. Obviously any of them can be omitted, and even if all three stages are present, the boundaries between them can be quite blurry.
Axure RP Pro
You basically start with an idea (that can originate from a brainstorming), the first, low-fidelity rendering is the wireframe. A wireframe should not contain any visual styling, but they should contain annotations (explanations or notes about an element or an interaction).
wireframe to prototype
If you have a keen eye, and you agree with authors Russ Unger and Carolyn Chandler (A Project Guide to UX Design) you will see a “wireframe error”. The aforementioned book, while a great read, and very useful resource to all UX designers, warns the wireframe creator, not to use the word “should”. Do not leave anything to chance in an annotation; there is a very big difference between should and shall. I do believe that a wireframe is not cast into stone, and leaves place to discussion and reiterations. The main reason we create wireframes is to present them to someone, and to start a discussion. I have found limited use for wireframes in user experience testing. If you explain the wireframe to the test subjects, it will distort, and most likely invalidate the test results. On the other hand, if you don’t explain, you will test your wireframing skills, not the web application you are about to create.

The middle element in the above picture is the mockup. This evolves from the discussions started by the wireframe, and it is showable to a larger group (usually needs little to no explanation). It is not functional, but can be used for early usability tests. Axure RP makes the transition from wireframe to mockup seamless, and smooth. There are quite a few great wireframing tools, like Visio by Microsoft, OmniGraffle by Omni Group or Balsamiq Mockups by Balsamiq Studios. I used to create wireframes in Balsamiq Mockups, because I felt in love with its sketchy art style and ease of use. While they work great for small scale projects, and you can create “click-through prototypes”, or print out paper prototypes, they are not in league with Axure RP when you need a functional prototype. A prototype is born, when you add a working functionality to a mockup. This should be a high fidelity rendering, so you can conduct meaningful usability tests on it.

Rapid prototyping

I started creating prototypes for web applications, even before I knew, that they were called prototypes. As odd as it sounds, I used Macromedia Flash (now Adobe Flash). While the web applications of that age where quite simple, the most time consuming things where the server side programming (before frameworks like Yii or Ruby on Rails) and the browser fix (when Internet Explorer had the largest market share, by far, and developers where happy that Netscape Navigator was gone). Back then, at the dawn of the web user experience design, Flash seemed like a solid choice for testing and prototyping. It run in any browser, so it was easy to show the prototype. It had a scripting language (ActionScript) and Symbol support for reusable elements. It did everything, that Axure RP does today… and took only ten to twenty times more to create a prototype. If you did not guess by now, RP stands for Rapid Prototyping.

Does it open the garage door?

garage door in Axure
Axure RP does everything, except opening the fabled garage door… Actually it even does that. I made a Kaizen-UX garage door opening demo in 5 minutes tops. The demo is a bit slow to load, because Axure RP is not a production tool and it should not be used as one.

Now seriously, Axure RP is the fastest way to turn a concept into a prototype through a wireframe and mockup phase. It has powerful, built-in collaboration tools, so you don’t need one more tool for that. You can publish your prototype to a hard drive, web server, or their cloud called Axure Share right from the Publish menu. The most recent version (7) creates HTML5 files, and they work in Firefox, Chrome and IE11. While they show up as blank screen on old IE browsers, installing the latest Firefox should not be a problem in case of an user behavior test computer.
Axure prototype Windows Phone 8
What is more important, the prototypes will work on all major mobile operating systems. Not only Android and iOS, but I have tested on Windows Phone 8, and it works flawlessly. This is insanely helpful, because you can’t hope to test mobile sites and apps in front of a PC monitor. If you are into mobile usability testing, you need to give cell phones and tablets to the test subjects… with a working prototype.

Futuresight

Axure RP is currently the sharpest tool in the user experience designer’s shed. Will this change? Hard to tell. I’m yet to find a worthy contender, but if you know one, pray tell me about it in a comment. Thank you.

Leave a Reply