How to test your myBalsamiq prototypes with Loop11

The following is a guest blog post by Toby Biddle of Loop11. Enjoy!


Usability testing for a website in the early stages of development, before design and functionality has been implemented, is widely accepted as the most appropriate stage for evaluating a new website design. Testing at this stage provides a cost effective option by reducing the risk of having to make significant changes after programming has begun. Typically testing at this stage is undertaken on wireframes.

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:

  • Wireframes are faster.
  • Information architecture and design phases can happen in parallel.
  • Wireframes force viewers to focus on the content, not the visual design.

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.

In myBalsamiq

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:

In Loop11:

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.

Happy testing!

Comments (3)

  1. Pingback: How to test your myBalsamiq prototypes with Loop11 | Loop11

  2. How can I test prototypes created using the desktop version of Balsamiq?

  3. @BV: This page has some info on what I think you’d have to do: http://www.loop11.com/wireframe-testing/

    1. Export your Mockups to PNG images
    2. Create HTML pages with the PNGs in them
    3. Upload your HTML pages to a web-accessible location and use that for the URL fields

Leave a Comment

Your email is never published nor shared.