Your Heat Lamp

Artisteer - Web Design GeneratorWell, not yours exactly . . . but that of your web site. I recently completed a site based on a client’s wishes. This person is a top-notch print designer, but hasn’t completely embraced reader habits of people visiting Web sites. So I don’t think the site will work based on that design and recommended reviewing some of the following.

Concerns:

  • Indexing: You have less than 3 seconds to grab your visitors. Indexing on the bottom of the page (“below the fold” in newspaper jargon) is inadvisable. This can’t be seen on a mobile device, which is how many younger executives view the Web, and, generally people will not scroll down to the bottom of a page in any case.
  • Graphics must be top notch and compliment the layout and site. If they are poor quality, viewers will assume that you and/or your Web designer does not know what they are doing.

Homework:

More on the F-Shaped Pattern (F Means FAST)

According to Jakob Nielson, who recorded how 232 users view thousands of Web pages with their Web Content

Eyetracking visualization heat-reading software, users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.
In a few seconds, your visitors eyes move at amazing speeds across your website’s words in a pattern that’s very different from what you learned in school.

Basically, they found that the reading pattern resembles an "F":

  • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
  • Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
  • Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.
    Obviously, users’ scan patterns are not always comprised of exactly three parts. Sometimes users will read across a third part of the content, making the pattern look more like an E than an F. Other times they’ll only read across once, making the pattern look like an inverted L (with the crossbar at the top).
Heatmaps from user eyetracking studies of three websites.

The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations.

The above heatmaps show how users read three different types of Web pages:

  • an article in the “about us” section of a corporate website (far left)
  • a product page on an e-commerce site (center)
  • a search engine results page (SERP; far right).
    If you squint and focus on the red (most-viewed) areas, all three heatmaps show the expected F pattern. Of course, there are some differences.

The F viewing pattern is a general shape.
On the e-commerce page (middle example), the second crossbar of the F is lower than usual because of the intervening product image. Users also allocated significant time to a box in the upper right where the price and “add to cart” button are found.

On the SERP (right example), the second crossbar of the F is longer than the top crossbar, mainly because the second headline is longer than the first.

  • Users won’t read your text in a word-by-word manner.
  • The first two paragraphs must state the most important information. This is consistent with classic newspaper style — an inverted triangle is generally used to describe this.
  • Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content.
  • If you "MUST" build your own site, please consider using a package from the #1 Automated Web Design Software for Blogs, CMS and Portals. Generate templates for WordPress, Joomla and Drupal. I actually use DreamWeaver for my sites, but I also often combine my skills with templates from companies that are known for using “best practices.”

Posted by DALSF2011 on April 11th, 2011

Filed under WebWork | No Comments »