3 ways to make wireframe more useful. Slides from UX BristolPresentation Transcript
3 ways to make your wireframes more usefulSteve Cable cxpartners steve_cable
I get to work with aLOT of wireframes.Both ones I’ve createdand ones created byother agencies andin-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 thestyle of wireframe weoften see.It shows the position andsize of elementsperfectly well.But it’s missing severalthings that stop it fromcommunicating user needs.So lets add them in...
The first thing to add is visualheat.Using shading to show whichareas of the page the user needsto focus on.This is not about telling thedesigner how to create the userfocus, just where that focusneeds to be.
The next is realistic data.This means navigation labels,prices, icons even example copy.This allows you to design forworst case scenarios.More importantly it helps to getbetter results from user testing.
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
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 theyspotted the key features and thecopy because they referred to it.But we also learned about thetype of information they respondto 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 isimages.These big grey boxes tell uswhere and how big images shouldbe.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 ahotel booking site that revealedthat users did not want to see theoutside of the hotel.They wanted to see the room theywould be staying in.So when it came to wireframing wemade sure we described what imageswould be most useful to users.
You can either describe images indetail using sketches.But this takes time... Or simply write what the image should be. Just try to Avoid boxes that just say ‘IMAGE’.
So if you want yourwireframes to be moreuseful and insightful,do these threethings....1. Use shading to show visual priority2. Never use lorem ipsum again3. Carefully consider and describe images
Thanks steve_cable There’s moreOrder now onAmazon.co.ukhttp://amzn.to/nvkUID
Christopher Moura