by John Eberhard
One of the worst offenses on the senses perpetrated by bad web sites and bad web design today has to do with the complete lack of correct eye trail.
“Eye trail” is defined as how your eye travels across or down a promo piece, advertisement or web page. Proper eye trail means the design was well done so that your eye travels across or down the piece in a logical progression. Proper eye trail allows you to really get the communication.
Bad eye trail is caused by design where the designer in most cases did not even consider the idea that eye trail existed, and so he tried to jam too much stuff into the piece and did not lay it out in any logical order or pattern or sequence. Just for fun, I will link to some of the worst offenders I’ve ever seen a little later in this article.
A logical type of eye trail has evolved for web sites over the years, usually consisting of:
- A masthead at the top which gives the company name, logo, and sometimes contact info.
- A navigation bar that usually goes along the top underneath the masthead, or down along a narrow left-hand column.
- A central area, below the masthead, and either under the navbar if it is along the top, or to the right of the navbar if it is in the left column, which contains the one point of that page. This is one of the things that the worst sites violate, trying to cram a bunch of things into this central area. Each page should have one main topic, not six or ten.
- Often on sites these days, there will be a narrow right sidebar, usually below the masthead, which contains links to special items of interest.
- Footer: There is an area at the bottom which contains the text links and copyright information and sometimes a link to the web designer.
Some more comments on the elements above and how they relate to eye trail:
Masthead: The masthead is usually the entire width of the content of the page. I think these (and your whole page content) should be a minimum of 800 pixels wide today, usually centered in the page. I think 900 or 1,000 is better. The majority of web viewers today have their screen resolution set at 1152 x 864 (49.19% of visitors to my site this year), followed by 1024 x 768 (15.74%), and 1280 x 1024 (11.09%). Those percentages add up to 76.02%. So why are some designers still putting up tiny little sites that are 600 or 700 wide that take up a quarter of the screen? I guess that’s a good idea if you want to make a site with less impact (why would you want that?). But if you want to make a site that has good impact, then “use up some of that real estate” as a former boss of my wife (and trained marketing executive) used to say. But do NOT make the masthead and main content more than 1,000 pixels wide, forcing people to scroll from left to right to read it. And the masthead should be relatively narrow from top to bottom, not more than 150 or 200 pixels tall.
Navigation Bar: I think a good navigation bar should include no more than say 10 items in it. If you have more than that, then arrange the navigation in major categories with drop-down menus, or have sub-menus on pages as you drill down into the site.
Central Area: As I said, I generally think the central area of the site should be mainly about one thing, but I’ve seen as many as three topics tastefully arranged in the central area.
Right Sidebar: This is becoming more of a chic thing to have a right sidebar, with links to special things you wanted to highlight, sell, etc.
Footer: I think a footer should always be included with text links to all the main pages shown in the navigation bar above, with copyright info, etc.
The Good, The Bad, and the Ugly
The Good
First I am going to show some sites that I think have good eye trail.
 | I designed these first two. Note the home page is very compact, which is the way the client wanted it, with minimal nav buttons showing, but with drop-down menus giving all the links. The sub-pages include a footer and right-hand sidebar. |
 | This site features a Flash animation on the home page that goes all the way across the width of the content (900 pixels), a right sidebar, and a footer. |
 | No I didn’t design this one (I wish), or any of the subsequent sites. But I think they have laid this page out and offered a lot of information and options, but done it in an elegant and logical way that is not hard on the eyes. |
What a clean page. You get a lot of options in the form of extensive drop-down menus. | |
 | Apple always has a very clean looking web site. Right now they’re promoting this tiny iPod Shuffle that is the size of your thumb. |
The Ugly OK, here are the stinkers. | |
 | This was selected as the #1 worst site of the year for 2008 by www.webpagesthatsuck.com. This is possibly the worst eye trail I have ever seen on a web site. |
 | This was selected as the #2 worst site of the year for 2008 by www.webpagesthatsuck.com. Aside from the garish colors and lack of a pleasing color scheme, there is no eye trail. What are you supposed to look at? |
This was selected as the #4 worst site of the year for 2008 by www.webpagesthatsuck.com. Check out those colors! I think the designer thought he was getting paid by the color. Plus, eye trail? Nope. And you have to scroll way to the right to see that picture of an airplane and oriental writing. | |
This was selected as the #5 worst site of the year for 2008 by www.webpagesthatsuck.com. I include this one not because the eye trail is so bad but because it is perhaps the most ridiculous things I’ve ever seen presented on a web site. It is promoting a bidet (look it up if you don’t know what that is, I’m not gonna tell ya), and starts out showing naked butts of these various people and then switches to their faces talking and telling you about the Washlet bidet. | |
 | AlternativeTransportServices.co.uk/ This was selected as the #8 worst site of the year for 2008 by www.webpagesthatsuck.com. Once again this is an eye trail stinker. |
Summary
The moral is design sites with good eye trail and people will find your site pleasant and will want to spend more time there.
