Wireframes

We develop usable wireframes based on user research

Many websites have screen elements (e.g. navigation bars, content panes, search boxes, etc.) that are not placed in the optimal position from a user’s perspective. Often the layout of pages is based on what an organisation wants to ‘tell’ users rather than on user priorities. The best way to develop a usable wireframe is to involve users in its development. (NB a wireframe is a representation of all the key page elements, including the information architecture showing where they would appear on the page prior to any design elements being added).

Home Office home page wireframe

Wireframe development is an integral part of the user-centred design of a website. Ideally, it should be carried out after the user goals the site should support have been agreed, and the information architecture (i.e. how content is chunked into a hierarchy) has been developed, but before any work on design is undertaken. However, existing sites with poor page layouts also benefit from wireframe development.

Our approach

Normally, wireframe development is part of a wider user-centred web design project involving research to understand users and their goals, and development of a usable information architecture. Therefore, the development of the initial wireframes is informed by the user research undertaken in these other stages of the project.

Typically we develop wireframes for a home page, navigation pages and the main content page types.

The prototype is ideally tested and refined through a series of iterative research sessions with representative target users. Two or three iterations of user research are normally adequate.

How we do it

We develop one or more variations of each template based on an understanding of users and their goals (identified through earlier research). We like to populate the wireframes with real content for a small number of user goals (10-20) so, when we test the wireframes, users can undertake their tasks completely.

User testing of the wireframes consists of two types:

Formal testing (2 iterations) with observed usability testing of the whole prototype; the first typically following the development of the first wireframe prototype, and the second at the final wireframe prototype development stage to enable a ‘whole site’ perspective to be adopted. These iterations will involve key client stakeholders in site development
Informal testing (number of iterations varies) with users, on elements of the site during prototype development. These are ‘work-in-progress’ sessions to test developments of, and identify improvements to, specific elements of the wireframes

The formal testing is conducted as follows:

Each research session is typically conducted at our premises and takes place over one day. The session is attended by up to 8 client personnel.
The research is split into two parts: user testing in the morning and consideration of the results in the afternoon to refine the prototype wireframes
Prior to the test day, WUP agrees a set of user goals with the client to be used in the research
WUP recruits the testers – profiles of which are agreed with the client
WUP prepares a simple HTML representation of the prototype wireframe
Each tester tests the prototype for c. 50 minutes individually.
The testers are asked ‘Where would you click’ to achieve each goal, through as many levels as there are in the prototype wireframe. They are asked to ‘think aloud’ so we can understand any issues about the usability of the wireframes.
On the same day, following the user testing, WUP facilitates and contributes to a discussion to produce a revised wireframe for the next round of testing
A report is produced summarising the research, analysis and detailing the revised wireframes.

Informal testing is conducted with a panel of testers, representative of the target audiences, in order to undertake short, fast, informal usability testing of development concepts. These might be new ideas or changes to elements that have previously encountered problems in testing. Testers can be called in at short notice to provide feedback as appropriate.

Outputs

The output of the research is a set of site wireframes showing all the key screen elements on the home, navigation and content pages. This is also detailed in a report.