Home E-mail Tips Website Metrics   Scenarios     A/B Testing     Search Engines     Layout/Design Tips   Book Reviews Web Resources    Explore M5 Subscriber Web-based list management made simple! Simple subscribe tool Opt-in confirmed Track reads and clicks Custom matching look Free for up to         5000 contacts Explore M5 Mailer Take the bulk out of email! TM Use your own data Personal email merge Handy email templates Scriptable with JavaScript, PHP, VBasic Explore M5 Analyzer Get great site statistics directly from your web server log files. Optimize site design Track campaigns Performance Metrics

Tips for Web Site Design and Layout

The design and layout of your website can have a huge impact on your visitor experience. It can effect your bottom line: you want to encourage your visitors to explore what you have to offer, and those who find what they are looking for quickly and efficiently will likely purchase or try your services.

We recently received a copy of a recent study by the Poynter group named EyeTrack III. This 340-page comprehensive report provides a wealth of information for site designers, and while oriented towards news sites, the findings bear relevance to general website design. We've taken the time to distill the findings into a more succinct report, and combine it with some of our own expertise. In addition, where possible, we describe how to back up your changes with web analytics.

This article has three sections:

• Home Page Design outlines recommendations and guidelines for home page layout and design elements
• Subpage Design outlines good ideas for designing deeper pages in your site
• Ad placement outlines how to choose where to place which ads.

In each section, you'll find a succinct recommendation, followed by some thoughts, and mixed in there from time to time, some tips on web analytics. The main analytic tool to use in measuring site design change effectiveness is the A-B Split Test. In FastStats Analyzer, this test is usually part of Scenario Analysis. Basically, you outline a desired path through your site, and then measure the rates of visitors following this path both before and after your site change. The A-B Split Test gives you hard numbers to decide if changes to your website are effective.

Home Page Design

Top navigation captures more viewing in general than left or side navigation. In general, navigation across the top and above the content serves well on the home page, and preserves the valuable top-left content area of your page for most prominent promotion of your services without distracting your viewer to other potentially less-relevant or less-attractive content.

Information-dense layout, with tight and packed content, gets more attention than sparse content. Sparse content with a good deal of whitespace encourages skimming behavior, with loss of focus on the meaning of the content.

Content in the left top third of the content area gets the first attention and the most attention. Most visitors identify which portion of a web page is header versus content very rapidly, and attention starts, and often ends, at the top left of the content area.

Minimal-sized main logos that stand out in color or shape from the layout help keep attention focused on content and links. In general, large logos and header areas just reduce the amount of first-screen content you are able to present. Additionally, the top left third of the content area gets the most attention on your site. With a large header area or logo on the top, there's less room for content, and so you'll have a smaller top left third area to utilize.

Blurbs with short paragraphs generally get reading attention more so than do long paragraphs. A 'blurb', being two or three sentences or lines, doesn't appear to be too much to read or digest. Most visitors get discouraged immediately when a page contains long paragraphs of text.

Smaller headlines that are of the same style and size as the blurbs encourage reading of the whole page and leads to visitors progressing further down the page. Larger headlines or headlines in a distinctive color stand out more, and visitors tend to skim down the page, reading only the headlines.

The left third of blurb text gets the most reading attention, even on subsequent lines of a blurb. If you you have a fixed-width bit of text, placing key words or phrases on the left part of the page in a blurb paragraph will get that key word or phrase more exposure.

Bottom of screen content doesn't get much attention. Many visitors click or scroll down in page chunks, and some go down one page at a time rather than scrolling smoothly. Average screen size for your visitors may help you determine where the content on a page will be at the top on "page two," which on a web page is not at a fixed boundary.

Uniformity in font size encourages reading. Disparity in font size encourages scanning. Pages that have callouts in red or bold don't get much careful attention except for the callout words.

Smaller font size results in more careful attention to meaning. If a site's text is just small enough to require slightly more than usual focus and attention to read, the result is that visitors tend to shift into a more focused attention reading mode, and will study the text more carefully as they read. Larger, easy-to-read text actually gets less attention and focus.

Analysis

When you make a change to your home page, you can use base statistics such as average visitor stay length to determine if that change is effective. Again, you should conduct an A-B Split test, but a scenario analysis may not be the only tool to use. Most important will be the hyperlink TreeView, or path analysis, so you can see if your home page change leads to different actual visitor behavior.

You may also wish to conduct some usability studies, and observe some users trying out your home page design before you put it into place. Even if you just get some friends who may not have seen your site before to sit down and look at it, you may garner some invaluable information from them that may affect what you put on your home page.

Subpage Design

Left navigation captures more viewing, and top navigation should remain consistent. This is one area where the home page design may differ from the subpage design. In a sub page, visitors need to know where they are in the site, where to go next, and how to move around to find what they need. This information is more complex than overall categories for most sites, so a detailed left navigation area is more important. Many times, visitors don't see right navigation areas, since there's usually ads over there on the right that may be off-page in small browser windows.

A leading full summary paragraph in a slightly different style will get a lot of attention and be read almost entirely by most visitors. The leading paragraph, if you have one, will be the most important paragraph. 95% of readers examine it fully and carefully. By putting the paragraph in a slightly larger font, in italic, or a different font, visitors can recognize it as an abstract paragraph. Interested readers will read the rest of the page, while non-interested readers will not, but almost all readers will read that paragraph very carefully.

Sub headings in content increase attention and retention of skimmers. If you place sub headings in your content areas, you will not affect reading for interested readers. But weakly interested readers will be more likely to skim the remainder of a page. Something of interest may catch their eye. The effects of heading style vs. blurb / paragraph style are the same as for the home page: sub headings in the same style, in-line with the paragraph text, leads to more careful attention.

Short subsequent paragraphs encourage continued reading, with headlines in the same style and size. This is the same as for your home page. Long paragraphs turn visitors away quickly. Similarly, smaller font sizes encourage more careful reading and attention to content.

Visitor focus on subpages is generally on text, not on images. Visitors read sub page content because they are interested in the content, at least mildly, and aren't generally interested in seeing pictures. However, visitors may be interested to click on a multimedia or slide show presentation if you make one available.

Analysis

Scenario analysis is very effective for doing A-B Split tests of subpages. Usually, on a sub page, you want to drive the visitor toward some eventual goal. With a scenario you can set up a step-by-step map from entry to goal, and measure what effect your site change has on progression to the goal.

Ad Placement

Less visually interesting and less active ads attract more eyes, but busy ads, when they get attention, get more intense attention. Most visitors can tune out busy ads right away and may even make a conscious effort not to focus on them. However, a less busy ad may encourage a visitor to pass their eyes over it, knowing that the ad is not going to distract them unduly from the content.

Static ads get more viewing on the margins than animated ads. It may be that animated margin ads promise to suck too much attention away, and so get consciously ignored.

The top left area of a page gets the most attention, and ads there also get the most attention of all ads on a page.

Nicely, non-distracting animated ads get more attention inlined with content than do static ads. If an ad sits in the flow of content, visitors have a harder time skipping over it, and so animation in the ad can help retain attention on the ad a bit longer.

Top banner ads are invisible. Visitors are used to skipping over them, and all they do is reduce the amount of critical first-screen content space you have.

Borders between ad and content reduce ad viewing. If the ad has a border around it, or is in a box that is a different color, visitors more aptly skip over the ad area. But if the ad has no borders and has a background that is seamless with the content, visitors are more apt to give the ad some attention.

Larger ads get more eyes. Half page ads in the content generally receive a good deal of attention.

Pop-up ads get virtually no attention, other than to close them.

Photos, pictures of faces, and eyes draw the most attention. People tend to like to look at the faces and eyes of other people.

Analysis

Tracking ad performance can be tricky, because the click-through is a bit over-rated. Most advertisers know that attention and branding are, in the long run, valuable components of an ad campaign. Don't be fooled into thinking that the clickthrough rate of an ad is a measure of the ad campaign's success. It's not.

Of course on your own web page you cannot measure how long or whether or not someone looks at your ad. But the above guidelines may help you choose what ads to put in what places. More importantly, if you want to advertise, you can think about your ad design and make sure that an ad that you know will be placed in a certain area on a web page is the best style to draw the most beneficial attention.

If you do put ads on your own site, of course you want to measure the clickthrough rate for the ad, even though it is not the most useful measure of ad effectiveness. If the link is an external link you can redirect the link through a CGI on your web server, and track the site exits that way.

Summary

The actual EyeTrack III report includes many interesting graphics and examples of visitor eye behavior on mockup pages. If you are interested in exploring more, take a look at that report online. Hopefully, this summary may help guide you through this very long but useful report. You'll know the key features to look for, and be able to give more attention to the data that backs up these conclusions.

Home   |   Site map   |   Analyzer   |   Mailer   |   PopMonger   |   Resources   |   Customers and Partners  |   Contact
Mach5 is a trademark of Mach5 Development, in use since 2000.