Last month I blogged about the paper prototyping work we did with students for the Reference Tree project. As I mentioned in that post – paper prototyping is a great way to start a project off on the right foot. But it's by no means an exhaustive usability testing process, and since the initial prototypes we needed to move forward with the development process.
Charles from Liveline took my final paper prototypes and worked up some interactive wireframes which we invited another group of students to come and test. In this instance the wireframes were developed on PC (see footer for Mac alternatives) using a tool called Axure RP Pro which worked very well for what we needed – a rapidly deployable interface which we could tweak on-the-fly. We recorded the students using the wireframes using Morae by Techsmith.
As Clive Howard of Howard Baines blogged about for Think Vitamin – the final wireframes will provide a blueprint for the rest of your project, ensuring that your designers, developers, project managers, and equally important clients – are all reading from the same hymn sheet.
Clive's post has some great advice on wireframing but he also suggests that "the wireframe should be a document rather than something interactive (like design, it can be a distraction) and therefore creating HTML may not be the best thing." which is where I have to differ. As far as I'm concerned wireframes are a great development process if they capture the functionality of an interface, and certainly for more complex interfaces provide some sort of interactivity for testing. Isaac Pinnock of Made By Many wrote a great post on the future of wireframes and the importance of creating wireframes that more closely represent real life screens. Isaac writes "using a 'just enough' approach, we often create a series of simple interactive prototypes to try out a variety of approaches to solving a problem." He also highlights some of the pitfalls of this more comprehensive wireframing approach – for example managing client expectations that the final design will look exactly like the wireframes.
I think the benefits are huge to opening the interface up to the kind of vigorous user behaviours that you simply couldn't pre-empt at such an early stage in a project otherwise. Certainly most of the benefits of using functional wireframes on a project as ambitious as Reference Tree are pretty obvious. Using them with the students allowed us to make simple changes to the layout and copy that made the interface easier and clearer to use. We realised from the live feedback that seemingly small changes such as re-wording ‘Library' as ‘My Library' added a lot of clarity. Equally, making the log-in box on the homepage less prominent removed a confusing distraction to the user journey. We were able to test these changes on-the-fly and see the results and responses from the students. By the end of the day we had our working-spec and a much greater understanding of the project requirements.
Next up the design process, stay posted...
Notes on the testing suite:
The testing we were doing was carried out on Windows using Axure RP Pro ($589) for the interactive wireframes and Morae ($195 - $1,495) for the user recording. It's not a cheap set-up but it worked very well for the task at hand.
A great alternative to Morae is available for OS X – Silverback by Clearleft for the very reasonable $49.95.
I've yet to find a wireframing tool for OS X that I'm completely happy with so any suggestions are very welcome.
Nice post Ben, I’ve recently been using balsamiq (http://www.balsamiq.com/) for wireframing which I like but as of yet I’ve not had a project with a budget to support interactive wireframing. Looking forward to your post about the design process!
Cheers Dave, I’ll take a look at Balsamiq. I did come across a pretty critical article on it though by Andy Budd.
Yeah, but Any Budd is a ****.