Home Page Essentials:

We’ve noticed a disturbing trend in home page design -- information overload. Web designers and developers seem to have resolved the "to click or to scroll?" controversy by loading everything onto the home page. "More and more and more is better," they seem to be saying.
But, to our mind, home page overload creates more problems than it solves. When there’s too much information on the home page, users can’t process it. It’s similar to driving down the highway (the real one, not the information one) and being inundated by so many billboards that you miss the one sign you’re actually looking for.

We understand how home page overload happens. An e-commerce developer wants to use the home page to announce every product the company sells. Or dueling departments within a company fight for home page real estate. And advertisements produce revenue! It’s often easier to put everything on the home page than to make tough editorial choices.

Overloading the home page may quiet your colleagues, but it’s a disservice to your site visitors who then have the frustrating task of sorting through and processing the information. And, as we all know, frustrated site visitors don’t stick around to figure things out; they simply click off overloaded home pages.
To make your home page do what you intended it to do – earn money, build community, disseminate information – be sure it answers these five essential questions.
QUESTION #1: WHO ARE YOU?
First of all, tell visitors who you are. If you’re a household name -- Coca Cola -- your logo may be all you need. If not, you need a headline or statement that says what you’re about.
As you write this important identifying statement, keep your visitors in mind. Don’t post your mission statement: "...our goal is to optimize our relationships with customers..." Instead, write a concise, user-focused phrase. A couple of good examples: theknot.com ( calls itself "The #1 wedding resource and gift registry." The home page for the Mayo Clinic’s Health Oasis ( announces "Reliable information for a healthier life."
QUESTION #2: HOW IS INFORMATION ORGANIZED AT YOUR SITE?
The home page should indicate to the user how you’ve organized or structured your site. And the site structure should be obvious and logical. Is the site ordered by product or by service? By department or by region? The user must be able to use the home page to predict where he will find answers to his questions. If his first attempt doesn’t yield pay dirt, he may not try again.
Think of a home page as the table of contents in a magazine – organized, annotated, enticing. Magazine contents are organized by departments: feature articles, short tidbits, columns, letters. A short blurb describes each item and provides a hook, a reason for the reader to turn pages. A home page has a similar function. Its purpose is to provide a logical structure for the information the site contains, preview the information, and give the user a reason to click or scroll for more. Though it contains a great deal of information, the home page of ISP Earthlink ( is clearly organized and easy to follow.
QUESTION #3: WHAT’S NEW, HOT OR TIMELY?
The home page is the right place to tell the user about sales, new products, or web site updates. Time-sensitive information -- contests or product offers, breaking news -- deserve space on the home page. You want visitors to come back frequently so the home page should tell them what’s changed since their last visit.
QUESTION #4: WHAT CAN THE VISITOR DO AT YOUR SITE?
Remember that web sites promote interaction. At your home page give the user a way to interact: sign up for a newsletter, enter a contest, participate in a poll, quiz, or chat. Even better, some home pages allow users to personalize the interaction. A return visitor to amazon.com (http://www.amazon.com) can click on a personalized list of recommended books. At the CNN site ( you can personalize your home page so local weather reports, movie listings, and stock quotes for your portfolio are available each time you sign on.
QUESTION #5: HOW CAN THE VISITOR GET HELP?
Don’t make users go on a scavenger hunt to find out how to contact you. Place contact information, or a button that leads to complete contact information, on the home page. Complete contact information includes e-mail, telephone, fax, street address, AND THE NAME OF A CONTACT PERSON WHO WILL ANSWER QUESTIONS. The web is about customer service. If you don’t want to hear from users, and if you won’t answer their questions fully and promptly, don’t put up a web site!
 
------------------------------
About the Authors:
Leslie O'Flahavan and Marilynne Rudick are partners in E-WRITE.   E-WRITE teaches the new rules for writing  well in the electronic age. At the E-WRITE web site http://www.ewriteonline.com - you can enroll in web and e-mail writing courses, subscribe to a free newsletter, the E-Writing Bulletin,  take an EQ (E-mail Quotient) Test, review web writing winners in the Web Writing Showcase,Rules of Thumb for Web Design

These are design rules of thumb; you won't see much HTML here, if any. These are ways to think about your pages, not ways to code them.

The Web is not on paper

People who have done design work on paper documents often have a hard time making the transition to the web. The web is a fundamentally different medium, for better and for worse. A good designer will use a medium--any medium--to its best advantage, and will minimize its weaknesses.
You cannot control layout on the web; trying to do so will ensure that some readers will not be able to use your pages at all. HTML is a structuring language that lets you give hints about presentation, but the final presentation is a combination of your document plus the reader's browser, the reader's preferences, and the reader's window size for the browser. All of these latter items are out of your control.
This doesn't mean that everything you know about layout is useless; you can still do things such as flowing text around an image and adding white space. For examples of pages which use white space, and yet are durable enough to work well in different browsers and in different window sizes, take a look at the TriCHI home page. Feel free to look at the source, too; you'll find that the HTML mark-up is pretty conservative.
The web is a hypertext environment. Paper documents can only begin to approach the possibilities, through such things as indexes, tables of contents, and cross-references. Web documents can bring these tools to life by providing live links that go immediately to the referenced topic.

At present, the web is accessed almost entirely through computer screens. This does have its drawbacks; screens have much lower resolution and sharpness than paper. They are also harder for many people to read for other reasons. Typographical controls should be approached with great restraint, especially when it comes to body text in your documents. Readers should be able to select a font style and size that are comfortable for their reading conditions; as designer, if you override these choices, you may be degrading the reading conditions for the most important person in your life--the person who reads your pages.
Another important use of the web is searching, and how you code your documents does affect their accessibility to search engines. <meta> tags are important for providing the right information to search engines, but the search robots will read the rest of your document as well. Some things simply won't be available to the robots, such as text in images (alt text is important here) and words which are split by mark-up embedded in the words (e.g., drop caps).
You are a guest in your reader's environment
When you visit the home of someone you've never met, do you immediately tell them to replace their carpet or rearrange their furniture? Do you carry a portable stereo into their homes and turn it up with your favorite music?
Each of the following is just as rude:* telling the reader to get a new browser
* expecting the reader to resize their page to fit your design
* playing background sounds that the user can't control
* setting type size or font in ways that the reader cannot override
It isn't simply that you don't know what your reader's environment might be, but you don't and can't know what things might be important to them, or why. Anything you do which forces conditions on your reader might violate some basic need that determines how they configure their system. Telling a reader to reconfigure their system just to accommodate your page is rude; if it does so in a way to breaks their work routine, they will probably leave your page immediately.
And you'll never know.

Make no assumptions about your user's browser
I've already said that you shouldn't try to dictate what browser the reader uses. Since you really have no control over this anyway, you might as well start with the assumption that your reader may use anything under the sun.* Always use alt="..." attributes for your images, and provide text alternatives for image maps. There are many reasons why a reader might not be loading your images, including the possibility of a voice synthesis browser for a telephone. (Don't blow it off; there are telephone companies that would like to make that happen.)
* If you use frames, make sure that your site works just as well without them.
* If you use proprietary tags, don't depend on them to get your message across. The same goes for Java and for features that require plug-ins; think of those as enhancements rather than requirements.
Designing for any possible browser isn't that hard. You start with a subset of HTML that is universally recognized. HTML 2.0, plus a few enhancements such as tables, is a reasonable base. Restrict yourself to this set of tags when you add your content and design your navigation. Then add the rest as enhancements, making sure that your pages are readable and transmit their content on browsers that don't support those special features. (Yes, it's a good idea to keep an outdated version of a second-rate browser, and to use it periodically to check out your own pages--before you put those pages out on the web where other people might view them with the same outdated, second-rate browser.)

Keep your toys to yourself
There is a tendency at many sites to clutter up the home page with stuff that is of no interest to readers. Counters. Awards. Things the author cares about, but no one else.
The key point here is focus. Your web site has a purpose. Each page has a purpose. Everything should contribute to that.
This is not to say that you can't have fun with things. Take awards, for instance--I have nothing against those, and have a few myself. But they're all stashed away on an awards page; those who are interested can look, and those who don't care don't have to deal with it. Awards really don't belong on your home page.

Counters are another sticking point. No one cares how many other people have been to your web site. If possible, get your access counts from your server's logs. If those aren't available, use a hidden counter, although remember that even those will require an additional internet connection, and will slow down the loading of your page.

And then there are the people who collect animated gifs. These are incredibly distracting. I'll have more to say on these shortly. For now, I'll only say that most of the animations I've seen are pointless, cute but no more. They are confections. As Bruce Sterling once said, no one ever cried over the beauty of a cupcake. (I have exactly one animation on my site. Good luck finding it; I like it partly because it is so subtle, and it's hidden away in the place where it is most appropriate.)

Advertising is another kind of distraction. Think about it: Do you really want to go through all the work of attracting someone to your site, only to suggest that they might be happier somewhere else? Many advertisements offer hidden counters as an inducement, but they're not worth it. And you get to advertise your site as well--except that it takes thousands of hits on your site to get an extra hundred hits through the advertisement. You can assume that at least that many people leave your site to follow an ad, and they may never return. I'd suggest that you don't bother with advertisements; they're not worth it unless you're getting a lot of money.
Your reader is not an idiot
If a person has been using a web browser long enough to find your page, they probably understand what a link is, and how to activate it. It is not necessary to tell your reader to "click here."

Don't try to be cool
Being cool generally means that your web site isn't so cool. "Cool" generally seems to mean distractions, self-promotion, and such. A lot of it is counter-productive.
The human visual system tracks to motion. This is why blink is so evil, and why animated gifs are distracting. At first, these things sound great: "I want this to be noticed!" The question is whether you want your reader to see anything else on your page. Every blink, every movement, is going to draw attention away from everything else. And if you use these to draw attention to something adjacent to them, such as text, their mere presence will be extremely annoying when the reader is trying to read what you want them to read.
Background graphics is another way for coolness to interfere with your website. Most backgrounds, even lightly textured ones, reduce legibility of plain text. Different browsers--even different versions of the same browser--differ considerably in the amount of contrast displayed in a background, so what looks OK to you might not be legible to someone else. Solid colors that contrast strongly with text colors are really the only way to ensure legibility.
It should go without saying that high-contrast or extremely busy backgrounds are really very un-cool. It should go without saying, but there are some really hideous backgrounds on the web that totally destroy their pages.
Understatement works surprisingly well on the web. Remember that when your page comes up, your reader will be completely focused on it. So know what it is that you want to say, then say it and be done with it. If you've done your job well, you'll get your point across. If you haven't, no amount of cool is going to compensate.

Leave the reader in control
There are a lot of things that go into this, more than some of the really awful sins. One peeve of mine is the auto-refresh. Please, let me decide when I want to go to the next page.
A more subtle interpretation of this is to make your page usable as quickly as possible, even before it is completely loaded. Don't force your reader to wait for netlag.* Use height=nn and width=nn attributes on all of your images. Most browsers will format the page immediately and load the image later, so at least the text of your page is usable.
* Break long pages into several pages, unless the page really focuses on a single issue. (Long pages are most likely to be appropriate on detail pages, and least likely to be appreciated on your home page.)
* Use the top of each page to give the reader enough information to decide whether they want to stay on that page.
There are other ways of taking control away from the user. Frames are bad about this, because they take up valuable screen space, and most framed sites don't give you a way to make the frames go away.

Keep your hands off the status line! Status-line crawlers are a popular toy, but they take away link information that the user may consider more important than your crawler. (Not to mention that crawlers, either in the status line or elsewhere, are nearly as evil and distracting as blinking text.) Some people also use JavaScript to put link descriptions in the status line when the mouse is over a link. If you have a link description that's that good, use it for the link text. Again, you're taking the URL away from the reader at exactly the moment that they're likely to be looking at the status line to see where a link is going to take them.
Background sound is another bad idea; most sounds are fairly large, and a reader should be able to choose whether they want to spend the time waiting for a large download. The same is true of large graphics; give readers a thumbnail to select, and let them know before they select that they're going to be downloading something huge.

Provide redundant navigation
People learn in different ways. People behave in different ways. People's perceptions respond to different cues. So be good to everyone, and provide navigation that works in multiple ways.
This is one of the arguments for using both image maps and text. Some people are going to use the text links, even if they are loading graphics and the image map is right there on their screen.
There are other ways to provide useful redundancy, including horizontal linkage between pages at the same level in the same area (this can be either a complete mapping or threading, as appropriate), vertical linking (especially upward to all levels), including pages in more than one subject area when appropriate, putting cross-links in context within articles where it is appropriate, and for large sites, a site map page whose only purpose is to link to every page in the site in some organized manner. For site maps, it helps if every page links back to the site map as well. For the primary navigational links which provide structure to your site, be as consistent as possible about the placement of these links.

The "three-click rule" is important in navigation. It should be possible to get from any page in your site to any other page in your site with no more than three links. It's even better if there are multiple three-links-or-less paths, because different readers will try different paths between the same pair of pages.
Listen to hear yourself say, "Yes, but..."
If you find yourself defending the design of your pages, especially to the people who read them, but also to other designers, be open to the possibility that your pages really do have a design problem.
Remember that most people aren't going to tell you about errors or problems. If your content is worth staying for and the problems aren't too obnoxious, they may stay and read. Otherwise, they're likely to hit the back button and never come to your pages again. You'll never know how often that happens, so listen carefully when you do get feedback.
Better yet, seek out feedback from other designers. They'll be happy to tell you everything that you're doing wrong. You don't have to agree with them, but do listen carefully to their explanations of why they think some particular feature is a problem.
Make your pages error-free
Make sure your graphics load. Make sure that your links work. Where you link pages at other sites, review your links regularly to catch sites that have moved.
Validate your pages. Errors in your HTML can cause strange behavior, including information that doesn't display.
Look at your pages. It's truly amazing to see a page that doesn't even load correctly; it says that someone didn't care enough to look even once before putting that page on the web. While you're looking, make sure that the page displays the way you intended for it to display. Do this in several browsers; not all browsers implement the same tags, or implement them the same way. Browsers also tend not to follow HTML syntax faithfully; validation is no guarantee that any particular browser will render your page in a readable, useful manner.
Bet your ego on your readers' assessment
We all want to have the best-looking, most effective pages on the web. Unfortunately, our own opinions of our work are highly unreliable. The only opinions that matter are the opinions of your readers. Base your ego on that.