Home page design: don’t buck conventional wisdom

Face it. Your Web site won’t be the very first site visited by an Internet novice. Chances are pretty good that MSN, Yahoo or Amazon.com has muscled in in front of your site and is the first for a Net virgin.

By the time a Web surfer makes it to your site, he or she has unconsciously developed a set of mental Web usability conventions that establish where everything should be on a Web page: navigation in the left margin, which consists of simple works like “Home,” “About,” and “Contact.”

Even if you’re a renegade in other ways, it would be ill-advised to buck the Web surfer’s conventional wisdom and apply a new set of design rules to your site if you hope to guide a visitor to where you want them to go.

Looking statistically how other sites are designed provides a formula for creating a user-friendly site. Marie Tahir’s book “Home Page Usability: 50 Web sites Deconstructed” ran some of the conventional numbers:

— 84% place the company logo in the upper left of the page

— 42% use the word “Search” on the button or link to find something on the site, while 40% use “Go” and 9% use “Find”.

— 30% of sites put their navigation links in the left margins; 30% use navigational tabs; 18% use links across the top of the page.

— 72% use black text with white background and nearly all use 12 point san serif font.

Tahir talked about the value of taking the best of the conventions and applying them to your Web site design.

DANA GREENLEE: When you design a home page, you have to do some math. Run down several components of the statistics section in your book that we should be aware of.

MARIE TAHIR: Overall, the best thing you can do for your user is to have some consistency. Follow the conventions that most sites follow. Download time, for example, we find works best if pages can download within ten seconds. And yet the average download time is 26 seconds. In fact, only 28% of the sites met the goal of downloading within ten seconds. A lot of times it is poor design choices that make for slow downloads. It’s not something that’s giving the user much value. Another thing is to have a liquid layout of your page so you can adapt the page width to different sizes of monitors and displays. Actually only 18% of the sites we looked at did that. While it’s good to optimize your display to the most common display most users will have – for most that’s 800 x 600 – you don’t want to penalize people who have big monitors and give them that huge white strip on the right hand side of their web page.

GREENLEE: If a designer does want to lock in a particular size dimension, what size should that be so it accommodates the most browsers?

TAHIR: Maybe instead of the lowest common denominator, you want to hit the greatest percentage of your users. If you’re looking at optimizing at 800 X 600, you want to think about the width of 770 pixels because there is space that’s taken up by the browser. That just makes sure you don’t get horizontal scrolling, which is a no-no.

GREENLEE: How do you approach deconstructing the Web sites profiled in your book?

TAHIR: We start out with a big screenshot of the home page. The facing page has an overall analysis that talks about the company and the strengths and weaknesses of the design. Then we address the Window Titles, the URL and the Tag Line – and how effective they are. We also demonstrate how screen real estate is divided up on the page, color-coded to show the percentages for navigation, advertising, filler, browser controls and so forth

GREENLEE: What are you trying to accomplish with these pie charts breaking the page up into these areas?

TAHIR: It’s most interesting looking at these pie charts for different Web sites all together. When you look at the trends, you see how much, say, self-promotion and ads for the site within the site are on the home page. You see how many top sites are spending a lot of their real estate space on promoting stuff within the site.

GREENLEE: You’re really doing a huge favor to the 50 Web sites you deconstruct in your book because you’re essentially giving the developers free design advice. You joked in your book about the value of the book.

TAHIR: (laughing) Yeah – it’s a half-million dollar book based on what we charge customers for a home page review!

The full audio interview with Marie Tahir is available for listening anytime at webtalkradio.com, where you can hear her deconstruct the Travelocity.com home page in detail.