The following is a guest blog post by Toby Biddle of Loop11. Enjoy!
Originally the term “wireframe” referred to a quickly rendered 3D model showing the model’s structure used while the model maker was working. They were much faster to work with than the full rendering, and in the field of web design they still are.
Wireframes are constructed instead of designing final pages, in part, because:
Perhaps the most important benefit of wireframes, particularly HTML wireframes, is the way they lend themselves to ongoing user testing. Because of their interactivity, HTML wireframes can very easily be used to conduct early-stage usability testing.
Here’s how you can quickly and easily conduct usability testing with your myBalsamiq prototypes using Loop11. We’ve replicated the Kayak website as wireframes in myBalsamiq and we’ve put together a simple usability project using Loop11.
Firstly, to create a clickable prototype in myBalsamiq simply create your mockups and then link the pages together using the built-in link features. Then, from the project pages, click the up/right arrow icon in the upper right of the page (see image below). This launches the project in prototype mode and lets you navigate through your prototype as a clickable interface.
The prototypes have keys in their URLs to make them shareable, but private. Here's a URL from the Kayak project: https://acme.mybalsamiq.com/projects/kayak/naked/Home?key=dcf6a8799cecef8ea699d6bd76d8483ba5bd8b24
Once you have created your mockups and linked all the pages it’s then just a matter of coming up with some appropriate tasks to tests the wireframes and creating a project in Loop11. Here’s how to do that:
Loop11 has a simple 5-step process for creating a usability project. Step 1 requires you to enter some basic details about your project, including a public title, a working title, language (there are over 40 languages you can run your projects in) and introduction text for your participants.
Step 2 is the crux of a usability project; it’s where you enter the tasks you want your participants to perform and any follow-up questions you might have for them.
To create a task you need a task name, which simply helps you differentiate one task from another later, and the specific task scenario that you want participants to perform.
Importantly, so Loop11 can generate the metrics that help you understand how usable your prototype is you need to enter a URL where you want your participants to commence the task (the start URL) and then a success URL(s) which is the page of your prototype that you want to see your participants navigate to for a specific task. These URLs come directly from your Balsamiq prototype and just need to be copied and pasted in the appropriate fields in Loop11.
The remaining steps in Loop11 are pretty straightforward so we haven’t covered them here.
When preparing your wireframes the level of functionality and interaction you build into them depends on the comprehensiveness of the testing you want to do. Wireframes with minimal functionality (like the Kayak prototype) provide good feedback on site structure, labelling, and overall usability issues while fully clickable and functional wireframes with indicative or actual content are ideal for replicating a natural browsing and all aspects of usability can be tested with fully-functional wireframes.
The final launched project in Loop11, including some additional tasks and questions we didn’t cover can be viewed here. If you conduct the evaluation as a real life participant we’ll generate some useful results and can discuss the analysis of results in a future post.