Breadcrumb
Level 2 navigation
How much functionality should wireframes have?
One-on-one 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 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.
Wireframes are essentially a prototype of a website without design elements, and make a useful way to communicate how a site will appear and function whilst in development.
We are often asked by clients ‘how much functionality should the wireframes have for testing?’ The good news is that no hard and fast rule need be applied. We have experience working with all types of wireframes, and can test with whatever level of functionality that is available.
The following provides a brief description of different types of wireframes, and some of the pros and cons associated with testing at different levels of functionality:
Minimal functionality – wireframes made up of static images of web pages with no clickable buttons or functionality. Below is an example of a low functionality wireframe, where pages are accessible via pre-numbered links which are placed within the browser window alongside the wireframe. After the participant verbalises what they would click and why, the moderator directs the participant to the numbered link that corresponds to their chosen path.
- Testing with this level of functionality provides good feedback on site structure, labelling, and overall usability issues.
- The natural flow of carrying out the task may take participants a while to get used to, and therefore it’s difficult to evaluate typical browsing behaviour on the page with this level of functionality.
Static pages with numbered links to the left-hand-side
Intermediate functionality – wireframes containing images of pages with clickable links within the wireframes to most, if not all, main menu items along with clickable links to the navigation paths of task solutions. Content displayed is either grey shading or lorem ipsum. Static pages of ‘dummy’ search results and/or other confirmation pages are presented, e.g. after clicking on ‘submit’, to gain participant feedback.
- This format allows for more exploration of browsing behaviour, and as with more limited functionality wireframes allows us to explore structure, labelling and usability issues in general.
- Note that it’s important for the links to all appear active in this format, rather than limiting active links only to those on the expected navigation path. The later approach may unduly influence the choice of path for the participant, and thus cloud results.
Maximum functionality – fully clickable and functional wireframes with indicative or actual content. Maximum functionality wireframes typically have all but the design elements available on the page. In the above example, the left hand side image is the wireframe version of the final finished page, shown on the right.
- This format is ideal for replicating a natural browsing flow as much as is possible, for the participant to carry out the task at hand, with minimal moderator intervention.
- All aspects of usability can be tested with fully-functional wireframes.
As with any prototype testing, it is essential to set participant expectations early within the session. Typically, we’ll include time for a detailed explanation of the test platform and artefacts, so that participants do not become disoriented or confused by the limited functionality and design during the test.
Although ‘maximum functionality’ may seem to be best for moderated user testing on wireframes, valuable insight can still be gained from testing on any of the above types of wireframes. The level of functionality of wireframes should be determined by the web development team’s project schedule and costs. UsabilityOne’s experienced moderators will design a test plan that maximises the insight gained from the session, and accommodate whatever level of functionality that is available.