Your home page is NOT your index; it’s your store front

January 16th, 2008 | Category: Content,Heidi's Entries,How-to,Tips and Tricks,design,usability
written by: Heidi Cool

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.

Stumble This! Save to Delicious Share/BookmarkEmail This Post Email This Post

    Share on Google Buzz

21 Comments »
  1. Excellent article. It's going in my binder, thanks!

    Comment by John of gCaptain — January 17, 2008 @5:45 am

  2. 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.

    Comment by Brad Colbow — January 17, 2008 @12:16 pm

  3. 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...

    Comment by Wayne Smallman — January 18, 2008 @5:01 am

  4. 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.

    Comment by CreekBank — January 20, 2008 @10:20 pm

  5. 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.

    Comment by dave — January 22, 2008 @4:24 pm

  6. 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.

    Comment by Heidi Cool — January 23, 2008 @12:26 pm

  7. 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!

    Comment by Johnny Mulder — January 29, 2008 @2:41 pm

  8. 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.

    Comment by Website Optimisation — January 30, 2008 @2:48 am

  9. 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.

    Comment by Poli — January 30, 2008 @7:23 am

  10. Nice info.

    Comment by Sofia — February 3, 2008 @5:30 pm

  11. Great article!

    Comment by EX — February 5, 2008 @9:32 pm

  12. 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.

    Comment by santosh — February 16, 2008 @3:09 pm

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

    Comment by Property — February 19, 2008 @5:21 pm

  14. 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.

    Comment by Freelance Web Designer — April 3, 2008 @5:08 pm

  15. 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.

    Comment by jack — April 10, 2008 @9:21 am

  16. 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.

    Comment by Denver Web Design Unleaded Software — April 10, 2008 @7:53 pm

  17. 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.

    Comment by Jeffrey Raval, MD, FACS — May 19, 2008 @5:05 pm

  18. 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...

    Comment by web izrada — September 4, 2008 @5:06 pm

  19. 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!

    Comment by Brian Petti — December 30, 2008 @3:23 pm

  20. 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.

    Comment by Heidi Cool — December 30, 2008 @9:45 pm

  21. [...] Your home page is NOT your index; it's your store front [...]

    Pingback by Web Development Blog: Heidi Adams Cool » Welcome to the new home of the Web Development Blog! — February 23, 2009 @2:57 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL