3 ways to make your wireframes more useful

Steve Cable cxpartners steve_cable

I get to work with a LOT of wireframes.

Both ones I’ve created and ones created by other agencies and in-house UX teams.

This means I get to see a lot of really good work.

But I often see certain things missing that stop them from become really great wireframes.

Here’s an example of the style of wireframe we often see.

It shows the position and size of elements perfectly well.

But it’s missing several things that stop it from communicating user needs.

So lets add them in...

The first thing to add is visual heat.

Using shading to show which areas of the page the user needs to focus on.

This is not about telling the designer how to create the user focus, just where that focus needs to be.

The next is realistic data.

This means navigation labels, prices, icons even example copy.

This allows you to design for worst case scenarios.

More importantly it helps to get better results from user testing.

Yeah... I can see key facilities

If you test wireframes without data then the questions you ask can only be specific layout questions like:

‘Can you see key facilities?’

These usually result in generic answers like....

I like that it’s got a queen size bed, but there’s a family pool. I don’t like going to hotels full of kids.

If you test with data you can ask broader questions about the page as a whole. E.g.

‘Is this the kind of hotel you’d like to stay in?’

You get more insightful answers like....

From this answer, we know they spotted the key features and the copy because they referred to it.

But we also learned about the type of information they respond to and what’s important to them.

Use Wireframes without data and you can test their usability.

Use wireframes with data and you can test their user experience.

The last thing to consider is images.

These big grey boxes tell us where and how big images should be.

But what is this big image of?....

This is a hotel details page, so we need an image of a hotel right?

Well, We did some testing for a hotel booking site that revealed that users did not want to see the outside of the hotel.

They wanted to see the room they would be staying in.

So when it came to wireframing we made sure we described what images would be most useful to users.

You can either describe images in detail using sketches.

But this takes time...

Or simply write what the image should be.

Just try to Avoid boxes that just say ‘IMAGE’.

1. Use shading to show visual priority

2. Never use lorem ipsum again

3. Carefully consider and describe images

So if you want your wireframes to be more useful and insightful, do these three things....

Order now on Amazon.co.ukhttp://amzn.to/nvkUID

Thankssteve_cable

There’s more