arguments.callee web design & development blog  

Bounce Rate

Bounce rate is a statistic available on most web analytics applications. It tells you what percentage of visitors arrived and left your website after seeing only a single page. What it really tells you is that your website is not compelling enough to even click one link on the page. Why not? Find out by scanning your website with your eyes.

What your visitors see: The F Pattern (or E Pattern)

As you build your website, scan it the way your visitors will; in a general F-shaped or E-shaped pattern. That is, in broad horizontal strokes. The important part of this exercise is to not read your text. Don't look at any one part of the page for more than a split second. In fact, relax your gaze and look "past" the page as with a Magic Eye image.

A hypothetical heatmap tracking visitors' eyes across a webpage.

After your scan, consider the following questions:

• What's the FIRST thing I see? Is that what I want people to see first? What made my eyes land there?
• Does anything DEMAND ATTENTION? If so, should it? If not, should something?
• Does everything have an OBVIOUS PURPOSE? Show someone new your design and watch how they use it. Do they get stuck anywhere?
• Am I just used to my own design? Do something else for a while, then come back later (or tomorrow) and scan again. You may come up with completely different results!

Making sites easy to scan

• Provide meaningful section headers. This helps visitors zero in on what they want to actually read.
• Group related items. Don't confuse people by making them hunt and find the next step, next link, or next chunk of content.
• The truth, the whole truth, and nothing but the truth. Tell your visitors everything necessary to understand that page, but no more. Don't make them remember things from other pages, don't leave "extra parts" around that will make them wonder why they're there.
• Avoid jargon and acronyms whenever possible. If you do use them, use tags such as <dfn title="Tooltip description">dfn</dfn> to define them.
• Keep the most important content above the fold. If a page is extremely long, consider adding a table of contents.

Strongly contrasting colors help guide the eye and tell visitors what is and isn't related on your page. Items with the same color background appear to be related, like the navigation in this example.

Differing font sizes can also guide the eye. Big fonts typically indicate section headers (in this example, "latest blog posts" and "discuss your project"), but they can also push keywords that you want visitors to remember about your website or brand.

Do you get anything useful from scanning your own websites? Why or why not? What about heatmap software — leave a comment to let others know what you like and don't like about a particular heatmap solution. Or, mention other ways you've made sites easy to absorb.

More in my SCAN web design series:

1. SCAN Introduction
2. S is for SCANNING (current page)
3. C is for CONTENT
4. A is for ACCESSIBILITY
5. N is for NAVIGATION