5 Principles to Maximize Conversion Rate & Usability

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:

  1. 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,
  2. 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,
  3. “Information Blocks” should be wider than tall for easiest consumption — again this is in step with the wider layout point above,
  4. 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.
  5. 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.”

Keys to Consistent CSS

Eric Meyer has done it again (yes I’m a cult follower). It was awesome to sit through the live walk through of most of the principles that Eric presented in his final version.

What Eric has decided to do with the support of many interested participants is create a baseline for many of the HTML elements that behave inconsistently from browser to browser. The result being a fantastic snippet of code that removes the subtleties that often cause anomalies in the render of pages in Internet Explorer 6/7 (and in other browsers too).

For those that just want to see the code:

You can see that nearly every element is considered above and is “reset” to values to provide sure bedrock for styling a document.

I suppose I should go to mention another great tip from Eric, while on the topic of consistency and this one points to to consistency between the CSS “functionality” of internet explorer 6 and internet explorer 7. Dean Edwards put together great javascript code which enables coders to focus on CSS production for IE 7 and not have to worry support for behavior that doesn’t exist in IE 6 — definitely worth a look.

Interweb Evolution

Many of you out there have seen this already, but I had to point to something at good old you tube that’s simply well done and insightful. With all of the confusing content out there and controversial definitions, it’s great to be able to sit back and watch the story of the interweb evolution unfold in such a meaningful presentation (it reminds me quite fondly of the evolutions web designers themselves made as we embraced web standards and CSS based web design). Check it out below or at YouTube.

Advanced Link Building

Creating non-reciprocal, in-bound links to your site takes quality content that can be syndicated to several sites or, it can become hosted content on a single, high-ranking site — for a fee. You pay the site owner who displays your informational content with a prominent, non-reciprocal link back to your site. It’s a fast, low-cost means of getting your site identified as an authority site. And that authority designation is solid gold when it comes to search engine rankings.

Web Design Sensibilities Have Changed

Web design sensibilities have changed.

The motifs found in sites like the following go far beyond their community driven content:

Many of these sites have been around for more than a decade and ultimately changed the paradigm of how we use the web, (Tim O’Reilly discussed after the fact in 2005). However it wasn’t until recently that the trends in design that began with these sites finally gave birth to new design sensibilities as well.

Not too long ago, building a community online just meant that people bookmark your site and visited it frequently. Perhaps a site owner pumped out some newsletters to drive subscribers back to the site or partner sites had links to your properties to remind various visitors that you exist. When RSS appeared, it helped people stay abreast of the latest content pushed out from content owners. More recently we work and play in a world where the community owns the content, and if they are so bold, the site owners are only moderators (and the guys that pay the web hosting bills). Great examples are the Wikis (well done Jimmy Wales) we all know and love — good old “folksonomy“. Having said that, we’re also in a world where anyone’s voice can be heavily syndicated and tagged as worthy of note, which is a beautiful thing…

Let me get back to the point before I get lost in the history of forums as the original online communities. Now that a community can control the content and determine what is relevant and important, the visual language that we as web designers are now using has changed significantly as well. Today we communicate instead of decorate (as Phil Brisk put it so succinctly) with design aesthetics — with the focus on content, that’s exactly how things should be. A nice post at webdesignfromscratch.com discusses this trend pretty well imho. These design trends have finally even cascaded into corporate design sensibilities which once accounted for the majority of the design work we designers are asked to perform.

Characteristics like:

  • a focus on typography,
  • larger font sizes in navigation and copy,
  • use of white space and centered page positioning,
  • graphically rich layered layouts often using some 3D design elements or icons,
  • layouts that compliment the copy in a page and showcase it with sharp color accents where appropriate,
  • diligent use of CSS and table-less markup with a demonstrated understanding of semantics, accessibility, usability and open standards

It seems to me that also the DDA legislation in the UK contributed to the “Web 1.5″ as markup that used standards, semantics and exhaustive CSS designs began to take hold and foster a renaissance in the approach to usable and accessible site design. We still don’t see the abundance of layouts that are designed for a resolution higher than 800×600, but this trend is mostly a function of the audience for many of the clients out there looking for our services. In custom business web design, there are of course a number of restrictions that deter us from employing a wider fixed-layout, perhaps that will change as well soon enough.

Thanks to all of those folks highlighted in this post for enabling me to support my thoughts on custom business web design with supporting opinions. I hope this blog will be a destination in the community soon enough.