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.”

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.

Information Architecture

Your site’s information architecture is intended to enhance visitors’ on-site experience, making it easier for them to find what they’re looking for, and gently directing them around the site. Here are some “must-haves” on refining the organization of your site’s content.

Converting Visitors to Buyers

The science of marketing in brick-and-mortar retail stores has been developed for decades. Many of the same principles that tempt you to buy paper towel A over paper towel B can be applied to the design of your site, converting more visitors to buyers. Here’s how.

Site Access

Site accessibility is an issue of ethics, marketing and sales, and even a legal issue, The more accessible your site is, the more visitors you’ll have each day. So, check out the accessibility of your site. It’s good for business and it’s a plain good thing to do, as well.

Site Usability Testing

Many site designers are faced with clients who don’t recognize the importance of usability testing during the development process. In fact, some clients may even view this important step as ‘padding the bill’. Here’s how to answer the question, “Why should I pay extra for something I’m already paying you for?”

Page Weight, Download Times and Your Conversion Rate

In many ways, cyberspace is as wild and untamed as the Old West with snake oil salesmen, gunslingers and assorted desperados aiming to part you from your money. That’s why some organizations are trying to bring law and order in the form of open standards for everything from site design to SE algorithms. Check out how using open standards in the design and development of your site can save time, money and hassles today and down the road.