Your Heat Lamp

Well, 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:
- Take time to review best internet practices from the Yale Style Guide site or buy the book at Web Style Guide: Basic Design Principles for Creating Web Sites; Second Edition
— this is one book that will make your life easier!
- Visit the W3Consortium
- The F Pattern: This site has heatmaps from user eyetracking studies of how sites are viewed. It’s quite fascinating: Web Reading Patterns
- Pick up any well-written book on Web Design . . . as this is written you can save up to 30% at Peachpit.com
. Peachpit press has been part of my life since I started building Websites 20 years ago; they keep me up to date (if I take the time to read!).
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).
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.”
