CASE.EDU:    HOME | DIRECTORIES | SEARCH

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

hose.jpg
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.)

Do Include:
  • 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

furniture.jpg
Simple and uncluttered

Don't Include:
  • 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

formal.jpg
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.

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.

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button


Posted by: Heidi Cool January 16, 2008 03:45 PM | Category: Content , Heidi's Entries , How-to , Tips and Tricks , design , usability

Trackbacks

Trackback URL for this entry is: Your home page is NOT your index; it's your store front

Comments

gravatar

Excellent article. It's going in my binder, thanks!

Posted by John of gCaptain on January 17, 2008 05:45 AM

gravatar

I like the storefront metaphor. I've always said that if everything is important than nothing is important.

I'll add this to my delicious links so I can reference for a client next time I need to explain why it's important not to clutter up your homepage.

Posted by Brad Colbow on January 17, 2008 12:16 PM

gravatar

OK, let's take the bricks & mortar metaphor to logical next step, shall we?

Imagine you've just walked into a store, you look ahead and you see isles, each marked with a distinct heading: Frozen Foods, Hygiene, Alcohol, Pet Foods, et cetera.

You don't see all of the products at first glance, but at the end of each isle facing you, you see a selection of offers and featured products.

To your right is a selection of magazines, newspapers and candy / sweets next to the counter, while to your left is an assortment of books, videos and music.

Depending on what you're looking for, you have enough information 'at first glance' to make an informed decision...

Posted by Wayne Smallman on January 18, 2008 05:01 AM

gravatar

Nice article. The KISS principle always works best ... so why do we always need to be reminded of that? ... Just human nature. But I do think the "store front" metaphor is very apropos in keeping a client focused on their real needs. I'm even rethinking my own home page now.

Posted by CreekBank on January 20, 2008 10:20 PM

gravatar

I'm not in love with the storefront metaphor.

With a storefront you can control the entry point and exit point of the customer. Corporations spend big dollars desgining the layout of a store to take advantage of this fact.

However, with a website you can't control the entry point of your user. Due to links and search engines a person can enter your website (store) at any point. To be sure, you hope that most visitors enter through your main page - but not everyone will.

I'm not sure what other analogy I'd use. Maybe your website is like a shopping mall. Each page represents a different store. Shoppers enter from any number of doors - most through the main entrance.

Maybe websites are like schools. Some have more security than others. Most kids enter through the front door while others use the side and back doors. Kids spent some time in one area and then move to another area. After a period of time they leave out the closest door. Hopefully they are a little smarter for the experience.

Or maybe a website is so much more than any brick and mortar structure that any analogy falls short.

Posted by dave on January 22, 2008 04:24 PM

gravatar

Dave,
You bring up an interesting point, people will enter from a variety of places. I think the metaphor still holds though because I am speaking specifically to the design of the front door.

Those who enter through the back or crawl through the window will rely on other wayfinding aids. One hopes the content on each page will still entice them to explore, but they'll also recognize they're not on the front page.

I'll try to address this further in my upcoming article(s?) on interior navigation. Wayne is right on track with where I'm taking this. Once inside, the visitor still needs signposts or other navigational aids to guide him/her around, just as one would in a store, and always the content must prove useful.

Your point also gives us another good reason to not throw all the good stuff on the front page. Those who come in the back may never see it, so there should always be alternative routes.

Posted by Heidi Cool on January 23, 2008 12:26 PM

gravatar

Boy!
Thinking is difficult. Even thinking about thinking is difficult.
I get a few thousands hits a day on a homepage from 200 different keywords. I have the page narrowed down to three major categories but many examples in each category.
I want the person looking for the purple round widget to come as well as the person looking for the vanilla block widget.
I try to move them to better landing pages but the SE's keep sending them to the homepage.
Thank-you for the article!

Posted by Johnny Mulder on January 29, 2008 02:41 PM

gravatar

To my experience within some commercial organisations designers & developers often develop fantastic "store fronts". Unfortunately as soon as it goes to the board room for approval everything get changed. Alternatively you have every department fighting to get space on the front page. Just two examples of how a great store front can end up looking confused.

Posted by Website Optimisation on January 30, 2008 02:48 AM

gravatar

There's no doubt that the home page of a website is the most important one as it attracts (or drives back) the visitors. I agree that it shouldn't be too crowded and it must display only a small but significant part of the website content. That way visitors will be encouraged to look further.

Posted by Poli on January 30, 2008 07:23 AM

gravatar

Nice info.

Posted by Sofia on February 3, 2008 05:30 PM

gravatar

Great article!

Posted by EX on February 5, 2008 09:32 PM

gravatar

True. Your Homepage is more than your store-front, it is actually a part of your personality. It reflects your ideas and ideals, you are projecting your inner thoughts and skills to the subconscious of your visitors who needs to be turned into your (website's) friends in a small time-frame. The website, I believe, is the extension of your self, and the index page is the doorway.

Great write-up! Best wishes to you and this website.

Posted by santosh on February 16, 2008 03:09 PM

gravatar

Every landing page is a storefront. This is because every page sells a different product.

Posted by Property on February 19, 2008 05:21 PM

gravatar

Very interesting article, and I like the metaphor. I think what was said about the website's goals is very important. The pages on the site should focus on helping to reach the goals of the site.

Posted by Freelance Web Designer on April 3, 2008 05:08 PM

gravatar

I have read the poetry written from Saddam and I find much beautiful one to it. Sin has been written from a such personage. Thanks in order to have given the possibility to me to express.

Posted by jack on April 10, 2008 09:21 AM

gravatar

I like the analogy to a storefront. Online people have very little to evaluate whether or not they will do business with you that it really comes down the how professional your first impression of your website is. Search engines have made it so simple to go to the next site, that you have to engage them right away or you risk losing them.

Posted by Denver Web Design Unleaded Software on April 10, 2008 07:53 PM

gravatar

Online one has to strike a balance between content that is for your viewers and the search engines. Our site has a mix of Flash and HTML. The Flash provides an engaging first impression and the HTML provides content for the search engines to read.

Posted by Jeffrey Raval, MD, FACS on May 19, 2008 05:05 PM

gravatar

Great article, I must say, the homepage reflects much more then just "whats in the shop".
Its more like first impression then anything else and I agree that we all should pay much more attention on the subject...

Posted by web izrada on September 4, 2008 05:06 PM

gravatar

From a SEO (search engine optimization) perspective, think of which "internal" pages you want to have better chances of getting higher results in Google. If you don't have a link to the "important" content, your going to loose valuable page rank. Or, if you have too many links on the home page, you can also loose page rank. So not only do you have to think about what will be attractive to the end user, you also have to think about what will perform the best in the serps. What good is a home page that looks inviting but has no indexable content? After all, your home page is usually the highest ranked page of your website. You need to think about how people will find your store, before you think about how to make people come inside, no?

Think of it as you have one bottle of wine (website) to share with five people (pages) who are all varied in size and weight. Each person wants to get the same "buzz" (#1 position in Google). Do you pour everyone an equal amount, or do you pour more in one versus the others because the "bigger" person needs more wine to get the same buzz?

Happy New Year!

Posted by Brian Petti on December 30, 2008 03:23 PM

gravatar

Brian,
Excellent points. This is yet another great reason to focus your attention on the most important areas of the site. Knowing that people don't always enter through the front door, we not only want to make navigation easy from any entrance, but we need to consider how SEO helps people find those entrances in the first place.

Posted by Heidi Cool on December 30, 2008 09:45 PM

Post a comment

















Posted by: hac4 (Heidi Cool) January 16, 2008 03:45 PM | Comments (20) | Trackback