Dan Thies over at SEO Research Labs has pointed out a remarkable video by Andy Edmonds. He and his team have used statistical analysis to study how the eye and brain process information while interacting with web sites!
First a definition:
“Foveal View” — The area of visible space where the user is best able to focus with maximum detail. The point here is that outside of the focal area the eye (and therefore the mind) is not perceiving color nor as much detail. Understanding this concept cascades into the takeaways that follow.
Now some highlights from Andy’s portion of the video + my two cents:
- The traditional marriage to 800×600 optimized design is really on it’s way out (as many people have noticed looking at their site statistics). Instead wider screen layouts not only bring more content above the fold, reducing the amount of scrolling required to use a page, but they also compliment a user’s natural behavioral desires while using a site,
- Page elements should be organized in such a way that relevant blocks of information are near each other so that the brain can make logical associations and accurately assess relevance while scanning a page,
- “Information Blocks” should be wider than tall for easiest consumption — again this is in step with the wider layout point above,
- Typography & whitespace use (contrast) are also as important as ever; when properly used they create a guide to lead the eye through blocks of content in the body of a page or in navigational areas.
- Group navigation items to contain 7 +/- 2 options per group. This avoids forcing the user to stop and process the information. In other words, use this principle to create at-a-glance usability in your navigation, which is vital to conversion.
Heat mapping sites like the following are useful in understanding the result of the eye/brain interaction. Use the insight above to review your design and your heat map results to identify problem areas in your user interface design. Here are some popular tools:
Let’s not forget Google Analytics (Urchin) is useful when using the "Site Overlay" view in also seeing which anchors are most clicked in your site.
However, what we’ve long called “EBO” or Eyeball Optimization is explained masterfully by Andy — Well done!
Since I’m not sure how long that video will be in place so here’s the “permalink.”