Responsive Wireframe Usability Testing Tips and Tricks
How we did some of the observational usability testing for Relate's national charity website.
We planned and implemented a significant amount of usability testing as part of the responsive redesign and Drupal development of several large websites for Relate - a large national UK charity catering for a wide range of people.
With over one million visits to the Relate national charity website in 2013, it was essential that we developed a user-friendly and intuitive user experience for this content-rich charity site. Last year, Relate saw their visits from mobile devices rise more than 20% to over half their visitors, so it was also critical that the new site was easy to navigate across a range of devices. To ensure both of these objectives were met we planned several sessions of usability testing.
Mobile usability testing in action
To kick the project off we held a user story workshop where we helped Relate to explore the different audiences that use the site and what they need to do. With these user needs in mind we then redrafted the information architecture page by page. Keeping the user at the centre of our thoughts, we worked with the London-based digital team at Relate to reorder the page hierarchy using our collaborative content tool of choice, Gather Content. One really useful feature of Gather Content is the dynamic content map that lets you view and edit the topology of the site at a glance, and see how the visitor will journey through the site structure.
The next step involved sketching and drawing up ideas for the page layouts, before building responsive HTML wireframes that were suitable for usability testing. Using Steve Krug’s model, we recruited eighteen people to help us test the site. In between sessions we quickly implemented amends to the prototype sites over the course of several separate testing days.
The final version of the responsive HTML wireframe homepage for Relate.
The setup for the mobile testing used a 4th generation iPod touch attached to our custom-designed mobile user-testing sled, and a Logitech C200 USB webcam to capture the finger movements of the user. The webcam connected to a desktop PC and monitor, which in turn was mirrored to a 60-inch flat screen in the neighbouring room so the session could be viewed by observers. Using the Krug-approved Camtasia screen recording software, the output of our mobile-sled webcam was viewed live and recorded for future reference. The last component to add was a Duet Executive USB speakerphone to make a Skype call to the next room so the testing session could be heard. The desktop testing used a similar set-up using Camtasia to record the on-screen cursor movement.
A diagram showing the setup for our usability tests
After priming the recruits that they were about to see an early version of a new site with no images or colours, we asked each user to think aloud and quickly say what they thought the homepage was about, and what they could do here. Each recruit was then asked to complete a series of scenarios that involved them clicking through pages and explaining what they were thinking. Whilst not every link worked (as we had only produced a test site of 15 pages), the wireframes proved to be a useful tool to see if people understood the labelling, navigation and layout of the proposed new site.
Each testing session lasted between 30 - 45 minutes and after each block of three tests, everyone in the observation area, outside of the testing room, compared notes and ordered the usability issues by importance. When we identified potential UX improvements, we acted by making small amendments to the responsive HTML wireframes in between groups of tests, to further refine the user interface. The result is a more intuitive content structure and website interface where users can more easily find information they need.
Webcam screen capture of the responsive wireframes being tested
Fly on the wall
It is incredibly compelling to watch someone use something you’ve designed for the first time, and then try and work out how it can be better. From this experience we’ve drawn up a list of key learning points to help with future usability testing:
Scenarios are key
The scenarios you choose to test can end up shaping the entire site so make sure to choose them carefully. Think about what the key objectives of the site are and make sure you cover these actions first. For the new Relate site, the most important pages were the online live chat; the nearest centre map search tool and the directory of relationship advice, so we made sure scenarios focussed on these sections were given high priority.
Working on the web everyday, it’s easy to forget that the behaviour of a web designer is not normal and what a lot of us presume as obvious navigation or UX copy is rarely the case. A good example of this on the Relate site is the navigation icons that appear on mobile. On the first version we tested, we discovered that very few people recognised the map pin icon as a link to the find your nearest centre map - so we remedied this by adding the label ‘Nearest Relate’. Likewise, the three line symbol for the menu proved to confuse several users so we added the label ‘Menu’ to prevent any doubt.
The mobile homepage of the finished Relate site
If you’re designing a site for a particularly web-savvy audience, then these issues probably wouldn’t show themselves, but Relate’s online demographic is very broad, attracting users of different ages and browsing knowledge.
Keep it natural
One question test recruits might ask is: “Do you want me to go back to the home page now?”, after they’ve completed a task. This might be helpful in some scenarios, but resetting the experience is unnatural compared to how people browse the web in a non-test situation.
The goal is to try and keep the flow of the user journey as natural as possible, and encourage the test subject to figure out how to move on to the next scenario themselves. It is also important to throw in a few tasks that involve the user browsing pages in the same section, or you might end up with a new site that is very easy to navigate up and down through different levels, but not intuitive to move around within pages positioned on the same level in the architecture.
The importance of taglines
Never underestimate the power of the tagline. A short line of text next to the site logo or displayed prominently on the homepage no longer than 6-7 words, is all the user should need to work out what the site is about in a few seconds. Testing with wireframes does put an onus on words, but a clear logo and quick site description they don’t have to hunt for will always be welcomed by a new visitor.
Choose changes carefully
Usability testing can feel a bit like trying to solve a Rubik’s cube. You match all the colours on one side, and then turn it around to find a block of colour has fallen out of sync on the back. Solving usability issues is a careful balancing act of predicting what impact one change will have on the rest of the user experience. For example, we experimented with adding Frequently Asked Questions to the global navigation as this was a popular section of the existing Relate site. When we asked our test subjects to 'find information about relationship counselling' the new FAQ link caused a moment of confusion as people were unsure as to click here or on the 'Relationship help' link (where the content actually was). To prevent this flicker of puzzlement we decided to take FAQs off the global navigation and add it as a quick link within the Relationship help mega menu.
Usability testing is an invaluable process, and should ideally be a core part of the on-going maintenance and user experience optimisation of all dynamic websites.
If you’re thinking about doing some usability testing but are not sure where to start, or would like to find out more about our Usability Testing Lab at Curve, please get in touch.