User Experience. Why wireframes matter. close

Wireframes are probably the most used documents of the UX projects that we undertake at Codegent. This is because pretty much everyone in the process references wireframes where they exist. 

What is a wireframe?

Wireframes layout pages of websites whether on a computer or mobile device. They generally tend to be produced after the development of personas and user journeys, but before design. And because websites generally don’t tend to be “flat”(in other words, each page changes and responds to the user based on how they interact with it), wireframes are great at showing the dynamic elements in a way that designs don’t.

Wireframes help us consider the content hierarchy of a page: which bit of content has the greatest prominence? How do we cascade content beyond that without overwhelming the user? How do we surface particular content based on what we know about the user?

Wireframes can be a quick and dirty ‘sketch’ of the key elements on a page: we tend to start like that for our own internal thinking, but prefer to produce ‘pixel perfect’ wireframes for clients. 

Who uses wireframes?

Pretty much everyone involved in the project:

Clients

Not all projects have the budgets for wireframing, but when they do we always find it pays dividends. It creates a great framework against which to have a discussion about some of the things that may not have been originally considered: just what do we want the user to do on this page and have we included everything we wanted without overwhelming them?

For selling concepts internally before we get to the design phase, wireframes can be invaluable. It’s always slightly gutting if we get to the design phase as a result of multiple discussions with the client who then shows it to the boss who then decides it’s all wrong. Better to get the boss's buy in at the wireframe stage. Changing things at the wireframe stage is a lot easier and cheaper than doing it once the designs have all been done.

Project managers

At the beginning of the project, a lot of thinking is around how to incorporate all the “needs” and functionality into a usable interface. If we have done any focus groups we’ll have additional insights that we will need to consider. For a project manager, a wireframe is often a visual checklist that everything that we wanted to achieve has been included.

Designers

Obviously! Designers have a massive input into the wireframe – or at least they should do. The idea of a UX person producing a wireframe without designer input is pretty dumb. The point of producing a wireframe isn’t to do the designer's job for them. A wireframe is a constantly evolving document and helps create some structure, which should allow the designer to be able to explore what can be done.

Designers, will use the wireframe to help them understand the hierarchy of content, navigation and the sitemap. At Codegent, the designer usually takes the wireframes to a pixel-perfect stage as this usually makes the process of agreeing wireframes with clients a lot smoother. Similarly, if we are testing wireframes in user groups, pixel-perfect versions mean that there is less room for confusion.  

Developers

By the time a developer gets their hands on the project we’ve normally got signed off designs and functional spec, so a lot of the pieces have already come together. But a wireframe is still a useful way to explain how interactions work on the site. Increasingly sites use a lot of javascript functionality which is difficult to necessarily “get” from a PSD. Wireframes are a great way to explain and clarify how actions might render the page.

A few tips for better wireframes

This is how we do it, you may disagree, but we think they work better.

1. Use greys. Only include colour if there is something specific you want to explain. We sometimes use elements of colour to group content types together on a page – but it’s important that people don’t then translate that into a design element. You don’t want to get into a debate about colour at the wireframe stage.

2. Use design elements sparingly. The aim of a wireframe is to prompt discussion and validation of layout and content hierarchy, rather than the texture you’ve used as a background image.

3. Pixel perfect adds clarity. Making the place-holder you’ve used for the main image the exact size it will be in the design, helps get people to where they need to be in terms of sign-off. It also makes it a lot simpler for everyone to visualize exactly how pages will be laid out, rather than hoping they can use their imaginations. Where there is a style-guide, wireframes act as a sanity check that guidelines aren’t being ignored.

Pixel-perfect wireframes should really be done by a designer who has already started to think about the layout rather than a UX person. The designer needs to own font sizes and image sizes – otherwise you’ll end up passing over the digital equivalent of a colouring-in book and asking your creative director to be careful they don’t go over the lines. 

4. Use notes where you need to. If you have to explain what in-page navigation is there to achieve or how a carousel image display might work, it’s best to do this as a note on the wireframe itself.

5. Try not to lorem ipsum everything. Obviously a wireframe isn’t a design or a page of written content, but some use of real words will certainly help the person trying to make sense of it. The navigation items should be real words and maybe some of the headings of articles or descriptions of images should use terms that relate to the type of content you are intending them to be.

6. Iterate. With sitemaps and wireframes, chances are there will be several iterations. The beautiful thing about wireframes is that they are not designs and so, in theory, are easier to update. It’s important to keep a copy of earlier iterations for each page so, if needs be (such as explaining your thinking to someone who has only come into the project at the end), you can show the progress of the work over time as an iterative process.

The frustrating thing is that, especially where budgets are tight, the idea of undertaking wireframing as an essential part of the process, is sometimes considered unnecessary. But at best, it makes the process of reaching a consensus on the design direction a lot easier and can often save the client a lot of money if they find that they have gone off down a route that then has to be redone because the Chairman decides he doesn’t like something central to a signed-off concept.