Wireframing and the user experience

512 views
452 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
512
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Wireframing and the user experience

  1. 1. What is it?  Wireframes are basic visual guides  They describe the content and functionality without design  They are very useful in working out the user experience an journey of a site without design
  2. 2. What to include  Placement’s for content with descriptions. You can use things like CTA to describe the visuals.  Point out functionality where needed  Show when there are images and text
  3. 3. Think about how people read online  Generally people read websites left to right top to bottom.  You can change how read down your website but placing more weighting on different areas  In you wire framing you have the chance to try many ways of laying out content to try it! Its much easier to get it right now, rather then later.
  4. 4. F-shape theory  Formed from eye-tracking  First Horizontal movement  Then down a bit and second horizontal movement  Then Finally a left hand side vertically
  5. 5. F-shape
  6. 6. What to learn from F  Users won’t read your text completely  The first two paragraphs must contain your most important information
  7. 7. Copy  Online you need to dumb everything down the plain English  People don’t pay attention online, unless they are committed to site. (they will just scan for what they want and look for keywords.)  If you site has a lot of copy (like news and blogs) then make ways for people to work out if they want commit or not
  8. 8. Wire framing tips  Try different solutions on paper  Keep in mind different users, and what their approaches may be  The wireframe isn’t the design, don’t feel like your committing to much to the layout.  Form a priority order for the content

×