Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Improving Site Design and Usability

1,869 views

Published on

Some quick tips for making your site more readable and usable.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Improving Site Design and Usability

  1. 1. Improving Site Design and Usability Part 2 Jessica Neuman Beck couldbe studios | www.couldbestudios.com
  2. 2. Readability Images: Good images make people want to read your posts. Take some time to think about angles, lighting, and focal point when you're taking pictures. Text size: Tiny text is hard to read. Huge text can be annoying. Find a middle-ground. Contrast: A low-contrast site can be hard to read, especially if any of your readers have color-blindness or a limited range of vision. http://www.checkmycolours.com/ Text: Size, font, letter spacing and line spacing all play a huge role in how readable a site is. You can test out various combinations using an online tool like Type Tester. http://www.typetester.org/ Focal point/call to action: Try giving your site the ‘squint test.’ Is it your main content area? If not, you might want to re-think your layout and design.
  3. 3. A Note About Sidebars: Make your sidebars part of your design rather than just places to put stuff.
  4. 4. Usability • Simplify your navigation • Make sure your site is searchable • Tag your posts and use categories • Use pretty urls
  5. 5. Speed Up Your Site • Delays in serving up content, even short ones, can heavily impact your site’s click rate and number of return visitors • Use a tool like YSlow (a Firebug add-on) to find out how to optimize your site • Enable caching in WordPress by using a plugin like WP-Super Cache
  6. 6. Increasing Page Views & Click-through Rate • Make sure readers can find not only the content they're looking for, but the content that is relevant to their search. • Use descriptive categories and augment them with tags • Internal linking: link keywords and phrases to articles you've published in the past.
  7. 7. Turn Skimmers into Here’s how an average site visitor views content: 1. They scan the headlines. 2. They look at the pictures. 3. If they find the pictures interesting, they read the captions 4. Finally, if they’re still interested, they read the copy. • Use pull quotes • Include blurbs below headlines to summarize upcoming content • Use icons to give readers quick visual cues • Include lists
  8. 8. Eye Tracking • People’s eyes start at the top left of a page and from there go down and over in a sort of “F” pattern • The eye automatically skips large images or portions of white space
  9. 9. Eye tracking examples
  10. 10. Use plugins to: • Show popular posts, related posts, even random posts • Show more posts in any given category • Optimize site performance • Incorporate better SEO
  11. 11. Plugins • WP-Super Cache for caching & speed improvements http://wordpress.org/extend/plugins/wp-super-cache/ • WordPress Popular Posts http://wordpress.org/extend/plugins/wordpress-popular-posts/ • Yet Another Related Posts Plugin http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/ • UpPrev for a NY Times-style “Next Post” animated button http://wordpress.org/extend/plugins/upprev-nytimes-style-next-post-jquery-animated-fly-in- button/ • Google XML Sitemaps http://wordpress.org/extend/plugins/google-sitemap-generator/
  12. 12. Where to find...? • Check My Colours: http://www.checkmycolours.com/ • Type Tester: http://www.typetester.org/ • Google Webmaster Tools: Tags vs. Categories: http://www.youtube.com/ GoogleWebmasterHelp#p/a/u/0/A96yDPqa2rs • O’Reilly speed tests: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 • YSlow: http://developer.yahoo.com/yslow/ • Luanne Seymor, Right On Target: Designing for Your Audience: http://www.adobe.com/ designcenter/dialogbox/targetaudience/ • EyeTools: http://eyetools.com/research_google_eyetracking_heatmap.html • Jakob Nielson’s Eye Tracking Tests: http://www.useit.com/alertbox/reading_pattern.html
  13. 13. Improving Site Design and Usability Part 2 Thanks, Drink.Write 2010! Jessica Neuman Beck couldbe studios | www.couldbestudios.com

×