The Web Development Blog has moved to http://www.heidicool.com/blog/. Please visit me there to read the latest entries and to update your bookmarks and RSS feeds.
January 16, 2008
Your home page is NOT your index; it's your store front
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.)
- Clean easy to follow layout.
- Navigation that is apparent and doesn't require precise mouse movements to get to sub items.
- Tailor your navigation to your target audience and their primary goals
- A page that says, "This is who we are, and this is what you can do here... have at it!"
- Easy access to contact information
Simple and uncluttered
- Audio or video that plays automatically
- Splash screens, or "specials" that appear as popup layers
- Advertisements on home pages
- Businesses / Corporations that use Adsense
- Products or services ... WITH NO PRICES
- Self Praise "The number one site for ...." as if you'd tell us if you were number 2
- Improperly used navigation that follows scrolling
- Long-winded welcome statements
- Company history
- Instructions on how to use the site
- Big useless images of smiling hip people
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?
Establish your home page priorities
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.
- Tell them where they are.
- Your home page should make clear the name of the organization and the nature of your business.
- Encourage them to come in and look around.
- Give them a taste (but just a taste) of what you offer, so they want to learn more.
- Provide clear directions to the entrance.
- Show them how to enter and navigate your space.
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.
Your home page is like a storefront
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.)
Don't clutter up the window
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.)
So what should we put on the front page?
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?
Test your content
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.
Homepage Design and Decision Making Resources
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.
- UX Matters: Home Page Design
- Snap judgments (1): Mano Singham examines decision making in relation to Malcolm Gladwell's book, Blink
- Snap judgments and prejudices (2)
- Improving the quality of our snap judgments (3)
Ted Talks: Barry Schwartz, author of The Paradox of Choice: Why More Is Less
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.
TrackbacksTrackback URL for this entry is: Your home page is NOT your index; it's your store front
Office of Marketing and Communications