Creating Reader-friendly Websites: a quick intro

Web reading differs from book reading

• Jakob Nielsen study on How Users Read on the Web (1997)
• Other Nielsen articles on Writing for the Web

Summary

1. Users mostly see first few words of line, first few lines of page.
2. Keep it short, simple and clear and provide follow up links for more detailed info once you've hooked a reader. Delete fluff text.

How do you know if it's working?

Google Analytics can help you see how people are using the site.

Compare some Sites

Bad Sites

• http://www.dpgraph.com/
• http://www.gatesnfences.com/
• http://www.alovelyworld.com/
• http://www.charisseafood.com.au/aboutcharis.htm

What do they have in common?

• Complicated
• Crowded
• Lack of integrity / continuity
• graphical elements distract rather than reinforce message of site

Good Sites

• http://www.alistapart.com/
• http://www.csszengarden.com/
  • Here's a visually complex page with internal integrity so it actually works and doesn't distract: http://www.csszengarden.com/?cssfile=/213/213.css&page=0
• http://meyerweb.com/
• http://clearleft.com/
• http://analog.coop/
• http://www.davidgill.com/#

Structural Readability

• Structure the information sensibly (use outline format)
• Use Headers to convey that structure on the page
• Keep sections short: "chunk" the info with headers, bullets, drawers
• Add bulleted lists to add detail without overwhelming

Common Issues: Feel compelled to add Flashing or red text for emphasis?
--> The information is probably poorly presented.

Graphical Readability

Know purpose of site - more graphical readability required for textual-information-dense sites. Art site? Not so important

Important features for text-heavy sites

• Lots of Text Contrast - white background, dark text most readable
• Lots of White Space - Space around headers, between paragraphs, along edges
• Structural Readability (see above)
• Navigation: ease and clarity
• Short lines of text - like a newspaper
• Reduce visibility of less important text: grey font, smaller size etc
• Avoid Motion on page - too distracting
  • Random image better than changing image
  • Unless an animated gif is showing you how to do something, it's probably distracting fluff - leave it out
  • Videos great, but let user start and stop them
  • Flashing text - just say No.

Side Note: Adding readability to sites with ads

Textual Readability: Can Readers Understand what you're saying?

Test your pages with this Readability Test

Some of My Favorite "easy things"

• page updated (so if you know if the information is recent). I use this:
  <!--#config timefmt="%m.%d.%Y"-->
  <!--#echo var="LAST_MODIFIED"-->
  
• Include an email link for Contact the editor / webmaster (so user can easily report errors)
• Prominent Headers so user can scan page
• NOT underlining links - too distracting - but still make them visible
• SIMPLICITY - NOT including "silly" links - like going to google.com if you use the word google or link the word "hat" to the history of hats when it has nothing to do with your info.
• Name Links Meaningfully -Instead of Click here describe what you're linking to e.g. Creating Meaningful Links

Related Topics

How Users Navigate: the Scent of Information