3 ways to make wireframe more useful. Slides from UX Bristol
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

3 ways to make wireframe more useful. Slides from UX Bristol

on

  • 7,312 views

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

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

Statistics

Views

Total Views
7,312
Views on SlideShare
4,152
Embed Views
3,160

Actions

Likes
32
Downloads
103
Comments
0

26 Embeds 3,160

http://www.cxpartners.co.uk 2058
http://www.wireframewednesday.com 682
http://www.stereoprototype.com 142
http://paper.li 34
http://www.scoop.it 34
http://wp-cx 26
http://cxpartners.clients.metro55.com 26
http://wolfbecvar.com 23
http://us-w1.rockmelt.com 18
http://translate.googleusercontent.com 17
http://www.wolfbecvar.com 16
http://webstuff.collected.info 13
http://posterous.com 13
http://uxdesignstuff.collected.info 13
http://readitagain.eu 10
http://feeds.feedburner.com 9
http://johannesbaeck.com 6
https://posterous.com 5
http://wireframewednesday.tumblr.com 4
http://flavors.me 3
http://www.mindgum.co 2
http://a0.twimg.com 2
http://www.google.com 1
http://webcache.googleusercontent.com 1
http://twitter.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

3 ways to make wireframe more useful. Slides from UX Bristol Presentation Transcript

  • 1. 3 ways to make your wireframes more usefulSteve Cable cxpartners steve_cable
  • 2. 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.
  • 3. 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...
  • 4. 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.
  • 5. 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.
  • 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 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.
  • 8. The last thing to consider isimages.These big grey boxes tell uswhere and how big images shouldbe.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 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.
  • 10. 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’.
  • 11. 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
  • 12. Thanks steve_cable There’s moreOrder now onAmazon.co.ukhttp://amzn.to/nvkUID