MightyMerchant Services & Features > Resources > Articles > Successful Home Page Design - Secrets of a Sticky Website

Successful Home Page Design - Secrets of a Sticky Website

Successful Home Page Design - Secrets of a Sticky Website By Vanessa Salvia, 7/15/07

When it comes to website design, your homepage is the most important factor. It is often the first page a visitor to your site sees, and so offers your best chance to make a good first impression. Once someone lands on your homepage you may have only a few seconds to impress upon them that your business is professional and trustworthy, and to capture their attention enough to make them stay.

Where do visitors look first? What draws their eyes the most? Is a creative website layout a good idea? Much research has been done to determine what is an effective homepage layout, and in this article we have compiled some of the trends that research has uncovered.

The Poynter Institute is a non-profit school for journalists. In 2004 they undertook a study known as Eyetrack III, in which researchers observed 46 people for one hour to determine where their eyes rested on the pages of mock news websites and real multimedia content. The Eyetrack researchers used special cameras to record where participants halted their gazes most often, and analyzed the data for certain patterns.

While this research focused on sites displaying news content, the results can be relevant to many different types of websites. Generally speaking, website visitors appreciate clean graphics, sites that aren't "busy" with too much Flash and animation, and sites that are laid out in the manner in which they have come to expect.

Where and at what?

Most site visitors focus their gaze first in the upper left of the page, hovering there before scanning left to right. Visitors look at the top portion of the page thoroughly before exploring further down the page.

Headlines

Surprisingly, among the tested group, dominant headlines--rather than photos--most often drew the first looks upon entering the page, especially when the headlines were in the upper left and upper right. (Most people assume that images are what draw the eye first; this study did not find that to be true, perhaps because they were testing news content.)

Headlines in the upper left were scanned first, but only the first few words were looked at. The Eyetrack researchers found that people mostly looked at the first one or two inches of each headline, particularly when headlines are in a list or when headlines and the accompanying blurbs have a similar format. This suggests that putting attention-grabbing key words first will draw the most attention.

Type Size, Underlines?

The Eyetrack III researchers discovered that smaller type encouraged people to actually read the words, while larger type promoted scanning. Smaller type seems to encourage the focused behavior of reading, while fewer words were focused on when larger type was used.

This seems a bit counter-intuitive, but the brain sees a large size word and doesn't feel like it has to focus completely on it to get the message, so the eye alights on it then moves on. Larger headlines encouraged scanning more than smaller ones, in this test. Apparently, when a headline is larger than the blurb text following it, the large headline is perceived as the important element, so viewing the headline is deemed sufficient and people skip the blurb. The Eyetracker discovered that underlined headlines discouraged testers from viewing blurbs on the homepage.

Following is a screenshot from the Eyetrack III page showing how they handled headlines and text blurbs.

The boldface type sets off the headline from the blurb, while the type size is only slightly bigger. A different but compatible color is used for the author's name, giving a clean, easy to read effect. When people look at blurbs under headlines on news homepages, most people look at just the first couple of words. If those words are compelling, they will read further, if not, off they go to something else.

Page Layout

How would you feel if you rented a car, turned the key in the ignition and were ready to go only to discover that the acceleration and brake pedals weren't where you expected? You would have to spend several frustrating minutes figuring out how to drive this car. If you figured it out fast enough, you might happily go on your way. If the frustration was too great, you would likely abandon your efforts and seek out a different car. That is often how visitors feel when they are trying to navigate a website that is laid out in a way that is different from what they expect.

Just because all cars have the accelerator placed to the right of the brake pedal doesn't mean that all cars are the same, like no two web pages are the same just because the store names are placed in a banner on the top. But site visitors do have certain expectations about where common things on a site should be located. Following is a summary of the trends uncovered by the Eyetrack III testing: Navigation placed at the top of a homepage performed best, meaning that the highest percentage of test subjects saw the navigation menus and looked there for the longest period of time. Unsurprisingly, shorter paragraphs performed better in Eyetrack III research than longer ones. The eyes of test subjects fixated for longer periods on websites with a standard one-column format. The bigger the image, the longer people looked at it.

More Tips

Placement of such things as links to subscribe to newsletters or RSS feeds, survey invitations, and the like fare far better when they are placed "above the fold," meaning in the top part of the page so that visitors see the link without scrolling down. Light colored text on a dark background may get you creativity points, but it is also frequently hard to read. Dark text on light colored backgrounds is the preferred format for general ease and pleasure of reading. Flash animation looks cool, but it is invisible to search engines. Too many whirleygigs or dancing bears on a site not only don't help you in the search engine race but frequently annoy site visitors. Take a look at your website and compare it to what these researchers have discovered. Some of these results are intuitive and some aren't. What room do you have for improvement?

About MightyMerchant

MightyMerchant specializes in developing e-commerce and database driven, content-rich websites for small business customers across the US. The company as listed as one of Practical eCommerce Magazine’s “Top 100 Notable Shopping Carts” in September/October 2007. Hundreds of site owners use MightyMerchant to manage their online stores. For more information visit www.mightymerchant.com, and for ecommerce knowledge and tools visit the MightyMerchant eCommerce Blog.