Enable Commenting on your Live Axure Prototypes

I’ve started working on a large project as part of a team of 5 people recently. Aside from doing the visual design, I’m working on the UX strategy and information architecture with an IA and UX designer from the US. We’re of course creating most of our documentation, user flows, wireframes and prototype in Axure RP Pro. He and I have been working on the same project file using the new Shared Project feature from Axure 5.x and collaborating on it through a free Subversion server (www.myversioncontrol.com). That works very well and, once a day or sometimes more often, I’ll generate the Axure prototype and FTP it to a password protected sub-domain on my site so that other team members can consult it. There’s also other project file linked from a page in the prototype. But there was one thing missing from this process.

The thing is that, as of now, Axure prototypes do not handle comments on the project from other stakeholders as some online prototyping applications like Protoshare do. But recently, I’ve discovered a little script that enables us to integrate comments quite easily using the free Protonotes service. That script is called Head Insert and has been developed by another Axure enthusiast named Joshua Morse. He originally published version 1.2 in this blog post and recently updated the script to version 1.31 which can be found here.

What the script does is add a small bit of JavaScript code provided by Protonotes when you signup (for free) to the head of each appropriate HTML file in the generated Axure HTML prototype. Then, when a user loads the prototype in their browser, they can see comments added by others, edit/reply to them and add their own through a toolbar created through the Protonotes script. Using variables in the script you can control whether the toolbar or the actual comments appear on page load by default. The comments themselves are saved in a MySQL database on ProtoNotes’ server or, optionally, on your own. It works very well and the great thing is that this is all free!

Rapid Prototyping Tools and Principles

Dan Harrelson from Adaptive Path has written a very interesting blog post titled Rapid Prototyping Tools and what makes good prototypes. My long time favorite Adobe Fireworks is mentionned along with Axure RP Pro (which is a newer tool in my arsenal) but also several others including online tools like Balsamiq Mockups.

What is most interesting to me in the post is the first part before he lists the tools and where he explains the principles of good prototyping and why it should be done in the first place. For me, this comes following a very well received presentaion at the IA Summint 2009 from Fred Beecher titled Integrating Effective Prototyping Into Your Design Process and which I followed through live tweeting as I couldn’t attend.

Both Harrelson and Beecher press the important point that creating interactive prototypes helps us design better user experiences as they help validate a design direction early in the process before investing a lot of money and effort into design or development solutions that may not yield the best results possible.

I strongly suggest you take a look at Dan Harrelson’s blog post and go through Fred’s presentation slides. They may put you on a track to improve your own process and deliver better solutions to your clients.

Discussion on Standards for Axure Design Librairies on Axlib

As I mentioned in my recent “My Top 10 Web Design Tools” post, I have started using Axure RP Pro for creating highly interactive prototypes, wireframes, site maps , flow charts and specifications. It is a fantastic application with a lot of depth that can create very complex prototypes.

Axure also has a growing community around it and, in recent months, several people and organizations have started to create libraries of reusable components that ease the effort of creating simple or complex interactive widgets from scratch in Axure. A list of the best of these resources recently has been published on A Clean Design‘s site and can be found here: http://www.acleandesign.com/2008/11/the-top-10-axure-resources/

One of those resources is the open source Axlib project who’s aim is “to create a robust design library of common interaction patterns for use with Axure RP”. Axlib is both a Google Group as well as a Google Code repository for the latest version of the librairy. The reason I mention Axlib specifically is that there’s a great conversation going on now in the Google group about how those open-source Axure librairies should be standardized both in terms of how they are created and documented and anyone involved in UXD that is using Axure or is interested in using it at some point should participate. Some of the issues under discussion include:

  • Width of widgets (assumed page width, perhaps)
  • General look and feel, perhaps a simple color palette
  • Level of fidelity
  • Level of interactivity
  • Use and documentation of Variables
  • Use and documentation of Raised Events
  • Fonts and font size

If you are an Axure user, give this and other librairies a try and get involved in the community!