You don't need to speak German to know this store sells hosiery
In preparing this article I asked some friends, designers and users, for some of their recommendations or pet peeves regarding home page design. Here are some of their Do's and Dont's. (Thanks to Dan, Nicole and Zeke.)
Simple and uncluttered
Intriguing, but what does it mean?
Space. Designers want to preserve it and clients want to fill it up. It's not that the copywriters, marketers and others don't like space. It's just that they have some important points they want to make, and there is only so much room in that quarter page magazine ad, 2 page-spread, catalog, or Web page. But wait, Web pages aren't restricted the way print is. We can make it wider—everyone has larger monitors these days. Or we can make it longer—people can scroll. No wait, we read somewhere that people don't like to scroll. Put it all above the fold. Or put it above the place where I'd have to scroll on a 17" monitor using a browser that has 5 toolbars. (In other words, the space we'd have in that quarter page print ad.)
Whether you're a designer, a writer or a client you've all participated in this debate. What goes on the home page and what does not? At one point you may have even thought the matter settled. But then Joe in operations suggested that it would be imperative for people to get to the transportation section in one-click. If that's on the home page, then Sally feels it is equally important to include the section on ergonomics, Brad wants to include the President's Day sales specials, and Sonia in Plumbing Supplies has just offered up the latest kitchen sink—in scratch resistant stainless steel.
Everyone's ideas are important. Any of these could be compelling to your reader, and supportive of your goal of selling widgets, clarifying the calculus, promoting an event or what have you. So how do you decide what goes on the home page?
Your Web site has one or more goals, educational, commercial or otherwise. The Web site project team has additional specific goals. They may want to sell out the stainless steel sinks to make room in the warehouse for next year's ceramic models. They may want to promote their research to help pave the way for the grant application due in March. These are all worthwhile, but when it comes to the home page I find there are three things we should make clear to our users.
That's it. If you can achieve these three steps, the rest will follow and Sonia will be able to unload those stainless steel sinks. O. K., I admit that is easier said than done. But let's compare our site to something more tangible, with which we're all familiar.
In America, particularly in areas of urban sprawl, the well-designed storefront is rare. But if you've spent any time in Europe, large American cities, or small towns whose retail districts have not yet been replaced by box stores and strip malls, I think you'll know what I mean. A store front usually has a large sign over the door (like our Web banner) proclaiming the name (and often the nature of) the business. If you are walking down the street in the hopes of buying hiking boots, the sign over Larry's Leather Shoe Emporium will make you stop. You'll look in the window.
If you see patent leather heels surrounded by shiny fabric, you'll continue walking. That wasn't the right place. If you see products by Merrell and Columbia sitting next to backpacks and logs on a field of crushed leaves, you'll recognize that they may very well have what you need.
Next you will look for the door. Ideally it will be obvious. If there are two doors, you want one to be clearly marked as the entrance. You don't want to walk up to a door and find a 3 x 5 inch sign with an arrow saying, "enter next door." If you can't find the entrance you may keep walking. But if the door is clearly marked, you will come inside and look for the hiking boot section. Ideally the store will have clear signage and displays, so you can pick out your boots and make your purchase. (Inside navigation will be the subject of a later article.)
I use the store metaphor because it's easy to visualize. An appealing display of items we want or need will entice us to enter. A cluttered display (with some exceptions) will not.
Imagine Larry's store window with the boots and the leaves. Now lets add a stuffed deer, BB gun, hunting knife, camouflage vest, pup tent, Coleman Lantern, fake trees, a plastic owl, binoculars and a canoe. Is this a wilderness supply store or a shoe store? No matter, they have boots, so you'll enter anyway. Now add sleeping bags, parkas, stuffed bunnies, a grizzly bear, a basket of easter eggs, and a mannequin of Little Red Riding Hood carrying an open basket overflowing with jam, cheese, sausages, wine and two crystal goblets. It's an intriguing scene. You may stop and stare at the window for a moment. You may wonder what the display is about and you may wonder what they really sell here but you might not notice that pair of hiking boots sitting behind the bunny rabbits. Thus, you may keep walking.
Larry's window, crowded as it may be, may still create an attractive display. But it's also confusing. When presented with too many choices, it is easy to get confused. At that point the easier choice is to continue walking. The same applies to our Web site. If we don't present simple and obvious choices, it is easier for the user to hit the back button and look elsewhere than to enter our site—even if we have the information or products they want. (View psychologist Barry Schwartz's video below to learn more about the problems humans face when confronting choices.)
As you are planning the page, think of the storefront and keep it simple. Include your name and a brief description that let's people know they're in the right place. Highlight 1-6 products, news items, special offers or announcements (not 1-6 of each). Include a simple menu with less than a dozen (6 would be good) choices that will take them to obviously distinct sections of your site. You may also include a search box, footer, related sites and other simple navigational aids, so long as they offer intuitive guidance rather than clutter. (If your site is a blog it is fine to include your primary content, i.e. your entries, on the first page, as this is standard blogging practice. I'll address blogs another time.)
These numbers aren't written in stone. Perhaps you really need 7 menu items rather than 6. It depends on the content. But when you justify 7 it's easy to think that one more won't hurt, and what about this bit, then suddenly you are up to 31 and your visitor doesn't know where to look. Just keep thinking of that store front. While you are doing that, pretend you are the visitor, a person far less familiar with your content than you. Look at your site plan or design draft through their eyes. Does it allow you to make simple choices? Or do you have to think about where to go?
It's sometimes hard to tell how much is too much. Or your team may have marketing research that shows your target market wants to see 50 things on the front page. What they think they want may not be what they can really use, so test it. Create 2 front pages, one with the clutter and one with 6 menu choices. Get some volunteers (unfamiliar with your product or subject area) and ask them to answer 12 questions, the answers to which they will find in your site. Have them time how long it takes to find the the answers. For each question ask how easy or difficult it was to find the answer (on a scale of 1-6). There are many ways to test usability (I'll write more about that later), but this one is fairly easy to implement, even on a shoestring budget, and it can give you some quick insight between what you think will work and what really does.
My friend Shirley, from Pownce, gave me the link to the Home Page Design article which offers a number of interesting insights into the role of your homepage. Other than that I thought I'd focus more on the psychology of decision making that really drives our need to make sites simple. To that end I've included Mano Singham's articles on snap judgments and the Barry Schwartz video. These aren't directly related to Web page design, but they underscore why our design choices are so important.
In this video, presented by TED (Technology, Entertainment, Design) Barry Schwartz explains how freedom of choice can be stressful and make us less happy, a notion counter-intuitive to those of us raised to think that freedom choice is better. I think it's an idea we can apply to the content choices we present to our site visitors.