Saving you time and money

Wireframing

  • Why and When

    Successful websites put the right things in the right places! Many websites don’t have the content users need in the right locations and often screen elements (e.g. navigation bars, content panes, search boxes, etc.) 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.

     

    Wireframe development is an integral part of the user-centred design of a website. 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.

    Read More
  • Our Approach

    Normally, wireframe development is part of a wider user-centred web design project involving research to understand users and their goals, and the 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 wireframe 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.

    Read More
  • 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, so, when we test the wireframes, users can work through the site and complete their tasks.

    User testing of the wireframes can be undertaken in two ways:

    • Formal testing (2 iterations) involving observed usability testing of the whole prototype; the first round of testing typically follows the development of the first wireframe prototype, and the second is conducted 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

    Formal testing

    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, Web Usability agrees a set of user goals with the client to be used in the research
    • Web Usability recruits the testers – profiles of which are agreed with the client
    • Web Usability 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, Web Usability 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

    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.

    Read More
  • 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.