Step 5 - Designing the Home Page

The home page is often the single, most crucial on your website (although, if you are driving a lot of PPC traffic, your landing pages are just, or perhaps even more, crucial -- so similar considerations apply to your landing pages as well).

If users can't easily find the information or products they are interested in on your home page, they will quickly hit the back button and vanish (along with the amount you paid per click to get them to your site).

Bring Content to the Home Page

I have a bit of a different home page philosophy than others in designers. While I do try to have my home pages do the basics very well - load quickly, give people the basic linking option of the site, etc. - I also try to bring a bit of content onto the home page.

In other words, I don't make the home page just a welcoming page showing the various links in the site. Your customers don't need to be welcomed; they are on your site and are already interested. Instead, what I try to do is move some of the actual product content onto the home page.

Why bring product content onto the home page? Because it gives your customers a quick way of determining the value of clicking on a link. As people are quickly surfing the web, it is vital that they think clicking on a link is worth their time.

And providing some basic content on the home page is the best way I have found to do this. Providing content on the home page also pre qualifies your customers a bit. If they then proceed into your site, you know that they have a real interest and can design the internal pages that deliver the kind of detailed content that they are then looking for.

Hit the High Points

There is a fine line here between giving some content on the home page and giving too much information so that the home page isn't easy to read or use. I try to limit the content to a usable amount and just hit the highest points. A lot of this is trial and error, and I usually go through a few home page tries before I settle on one that seems to work well. And by working well I mean that it has a nice look and feel, and also gets good results (a good amount of people actually clicking into the site and ultimately buying).

Basic Home Page Layout

The design for the My Favorite Baby Carrier home page is typical of what I do. As for the actual visual design, I use a special home page layout that may well be different than the one I use for the internal pages.

The basic layout of the header and navigation is the same. But in the text areas, I may split it into columns in order to show a couple areas of content above the fold.

This is vital - to have the basic content areas "above the fold" - because most people won't scroll down, especially on your home page when they are quickly trying to determine if your site is worth their time. That is what makes designing the home page so difficult - there is a lot to try to put into a fairly small space, and still make it usable and not too visually overwhelming for your users.

Keep the Main Content Area Focused

Now I'm ready to design the main content area of the home page. And rather than trying to cram everything into this remaining visual area "above the fold", I generally concentrate on just the most important product or service sections of the site.

These are the sections that attract the most interest and also drive the sales of the site. I too often instead see small business home pages that just use this area above the fold to list all possible links, have text welcoming users, or use the space for nice graphics.

I can't emphasize enough how wasteful this is. Most users spend less than 5 - 7 seconds deciding whether they will explore your site or hit the back button. So it is vital that your home page be very focused and provide your users with good feel for what your site has to offer and the benefits of your product or service.

If this information isn't right there on your home page, people won't take the time to explore deeper to ferret it out. So I take a calculated risk in my home page design - I go for quality of information rather than quantity of links or graphics.

I try to hone in on the most important information to my users and put it right there on the home page rather than leaving this just having stark links with this information buried on an inside page.

The home page is my best chance to grab the interest of my visitors, so I really try to put as much detail as practical on the most important content areas. If you simply use the home page to welcome your visitors and have a list of your page's content, you are wasting what may be your only opportunity to introduce your visitors to your content areas and engage their interest in your products or services.

Content Area of My Favorite Baby Carrier Site

For the My Favorite Baby Carrier site, it was clear that the major content area I was going to focus on in the home page was the ERGO Baby Carrier. I do have links to the other sections of the site as well (FAQs, Comparisons of the Ergo to other baby carriers, etc.), but I use most of the remaining visual space above the fold to focus just on the ERGO carrier. I gave the text area a basic two column look - text with a basic graphic to the left and important bullet points on the right.

I try to keep the text section short and use links and bolding of important words to allow people to quickly scan the text for the most important content. The bullet points are the most important content points about the ERGO. These bullets are a blend of the most important benefits of the ERGO along with important sales information (such as free shipping).

Concentrate on Content

This is one of the basic layouts that I've come to use over time for the content sections of my home page. It allows me to put in some introductory text in the left section along with some important link information to the unique content of my site (in this case, the links were to the FAQs and Comparison Information).

The goal of this section is to give people a good, basic introduction to the product area and also let them know that there is a lot of valuable content about this product inside the site.

This should allow your users to quickly understand what you are selling, some benefits, and the payoff for them clicking further into the site. I always put in links to the FAQs and other content areas here to let really interested users know that I offer a great deal of detailed information about these products.

Since the depth of the site's information is what I use to distinguish my site from my competitors, I want to put these links prominently on the home page right after this introductory text so those users looking for this sort of detail will easily find it

.

Graphics Should Illustrate Important Properties of Product

I do think it is important to have a good picture of your product as well in this section of the home page. The picture should be both of good graphic quality and also illustrate the basic properties of the product well.

I talked to my wife about what pictures she wanted to use on the home page, and she felt it was important to show both a picture of the ERGO carrier being used as a front and a back carrier.

To her this was one of the most important and unique qualities of the ERGO - its versatility compared to the standard carriers that only work either as a front or back carrier. So we went with two smaller pictures of the ERGO rather than one larger picture in order to show it being used in these two different positions. And I added the text "Works as Front, Back, or Hip Carrier!" above the pictures to emphasize this point.

The Bullet Points hit the Highlights

The bullet point area in the right hand section of this content area really focuses on the most important content sections about this product. It takes a bit of trial and error to figure out what to include in the bullet points.

Rather than make this a bullet list of my best "sell" points, I instead try to focus the bullet points on those questions or concerns I most get from customers. For the ERGO carrier, this meant focusing on what was special about the ERGO carrier.

The first three bullet points address how the ERGO is different and the benefits to the user and their baby/infant. The next bullet point addresses a major concern - how can I know if I will like it since I've never seen it? We know how important this is to our users - few customers say they feel comfortable buying a product sight unseen without a good return policy. So I make sure it is right there in the main bullet points so people know up front that we offer a good return policy.

Similarly, quick shipping and free shipping is very important to customers, and can often be the deciding factors in their choosing who to buy from. So I put these in the main bullet points as well.

Reviewing Design Choices

After laying out this section, it became clear that this section would end up using most, if not all, of the remaining visual area "above the fold". So I sat down with my wife and reviewed this, and I asked her if she felt comfortable with using the available visual space in this way. Was there anything else she felt needed to show above the fold, or was this how she wanted to use the space.

She decided to go with this layout - it was important to her to really focus the page on the ERGO and felt that it was important to go beyond just a picture and a link to put up this level of content on the home page.

The only thing I wanted to add was a testimonial - it is important to have an offer of proof if possible, and I wanted to get this onto the home page.

I wrestled on where to put the testimonial, and experimented with putting it at the top of the page as well as at the right. But this moved the content sections of the page down, and so we settled on it being at the bottom of the navigation section on the left.

The disadvantage to this placement is that it isn't as visually apparent as a testimonial right in the center of the page. This is one of those tough choices that you have in designing the home page, and we went with content in the main text section over the testimonial.

Next > Step 6 - The Content Areas of the Site.

Previous < Step 4 - Designing the Basic Look and Feel of the Site.

comments powered by Disqus