Slides from my presentation at UX Bristol. How to improve wireframes in a way that shows insights learned from user research.

1. 3 ways to make your wireframes more useful
Steve Cable cxpartners steve_cable

2. 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.

3. 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...

4. 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.

5. 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.

6. 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....
Yeah... I can see key facilities

7. 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....
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.
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.

8. 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?....

9. 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.

10. 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’.

11. So if you want your
wireframes to be more
useful and insightful,
do these three
things....
1. Use shading to show visual priority
2. Never use lorem ipsum again
3. Carefully consider and describe images

12. Thanks
steve_cable
There’s more
Order now on
Amazon.co.uk
http://amzn.to/nvkUID