Improving Site Design and Usability

Improving Site Design and Usability Part 2

Jessica Neuman Beckcouldbe studios | www.couldbestudios.com

Thursday, October 21, 2010

ReadabilityImages: 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.

Thursday, October 21, 2010

A Note About Sidebars: Make your sidebars part of your design

rather than just places to put stuff.

Thursday, October 21, 2010

Usability

• Simplify your navigation

• Make sure your site is searchable

• Tag your posts and use categories

• Use pretty urls

Thursday, October 21, 2010

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

Thursday, October 21, 2010

Thursday, October 21, 2010

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.

Thursday, October 21, 2010

Turn Skimmers into Readers

• Use pull quotes

• Include blurbs below headlines to summarize upcoming content

• Use icons to give readers quick visual cues

• Include lists

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 captions4. Finally, if they’re still interested, they read the copy.

Thursday, October 21, 2010

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

Thursday, October 21, 2010

Eye tracking examples

Thursday, October 21, 2010

• Show popular posts, related posts, even random posts

• Show more posts in any given category

• Optimize site performance

• Incorporate better SEO

Use plugins to:

Thursday, October 21, 2010

P lugins• WP-Super Cache for caching & speed improvements

http://wordpress.org/extend/plugins/wp-super-cache/

• WordPress Popular Postshttp://wordpress.org/extend/plugins/wordpress-popular-posts/

• Yet Another Related Posts Pluginhttp://wordpress.org/extend/plugins/yet-another-related-posts-plugin/

• UpPrev for a NY Times-style “Next Post” animated buttonhttp://wordpress.org/extend/plugins/upprev-nytimes-style-next-post-jquery-animated-fly-in-button/

• Google XML Sitemapshttp://wordpress.org/extend/plugins/google-sitemap-generator/

Thursday, October 21, 2010

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

Thursday, October 21, 2010

Improving Site Design and Usability Part 2

Jessica Neuman Beckcouldbe studios | www.couldbestudios.com

Thanks, Drink .Write 2010!

Thursday, October 21, 2010