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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

7,098

Published on

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.

Published in: Design, Technology, Travel
0 Comments
33 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,098
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
109
Comments
0
Likes
33
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×