Usability testing for a website in the early stages of development, before design and functionality has been fully 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 produced on a wireframe or prototype of the website.
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. Website wireframes can have a wide range of “fidelity”—from non-interactive sketches to fully-interactive website “prototypes”.
Website 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 interactive HTML wireframes like those created using ProtoShare, is the way they lend themselves to ongoing user testing. Because of their interactivity, HTML wireframes can easily be used to conduct early-stage usability testing.
Here’s how you can quickly and easily conduct usability testing with your ProtoShare prototypes using Loop11.
We worked with one of ProtoShare’s customers, Artonic, who have been planning a redesign of their own website. They created a clickable prototype of their new website design using ProtoShare.
Once the clickable prototype was created and all the pages were linked together, we came up with a number of appropriate tasks in order to test the prototype and then we created 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 ProtoShare 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 Artonic wireframe) provide good feedback on site structure, labelling, and select usability issues while high-fidelity, fully clickable and functional prototypes with indicative or actual content are ideal for replicating natural browsing and all aspects of usability can be tested. One thing we like so much about ProtoShare is that you have the flexibility to build in as much interactivity in a prototype as you need—from very low-fidelity to very high-fidelity.
The final launched project in Loop11, including some additional tasks and questions we didn’t cover can be viewed here: [http://www.loop11.com/usability-test/16803/introduction/]. 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.