How to create a homepage to please everyone (well almost everyone)

August 14, 2007

One of the first things that I learned about website usability was that the homepage is the most controversial page of a website:

It is the first page that visitors see and therefore the most important
Everybody wants a piece of it
There are so many things you need to include: navigation, shortcuts, login / registration, info about the company / site, teasers, fresh content, search etc.
It’s easy to drive visitors away with too much content
It’s often left until last and thrown together quickly with disastrous results

These days, even with smaller sites, people have a certain expectation about the standards of websites. We’ve all read quotes about how impatient Internet users are and how they only scan sites, so I won’t go into that. But I will say that we’ve reached a level of maturity that can no longer be achieved by graphic designers alone. Even if you’re building a small website, it’s important to go through the process of figuring out the ingredients of a homepage that will keep the site’s stakeholders happy.

The homepage is usually the first page that I work on (after defining the site’s functionality) as it affects the rest of the site so much. Following is the process that I’ve found works for me. Depending on the size of the site I may be continuously switching hats to fulfill all of the roles involved in this process or I may be working with experts in different areas; either way it’s still a valuable process to follow.

Figure out your homepage’s one or two reasons for living

What are the major goals of your homepage? Is it to make contact with you? Sign up as a user? Buy a product? Subscribe to a newsletter? Generate revenue from ads? Be honest, be sensible and be tangible. If your site has many functions your homepage’s goal may be to drive users to one or two particular pages. These are goals that you can eventually measure and derive real business value from.

Figure out what the homepage needs to contain

In order to meet its goals, what does the homepage need to contain? How can it gently lead users to take action? This doesn’t mean lots of CAPITAL letters, exclamation marks!!! and outrageous claims.

As a guide, the homepage should contain most of the following:

Logo / Site Name / Tagline

Of course the most obvious and valuable part of the site is the logo and / or site name. Usually by the time a website is required these have already been designed. Taglines are an optional but very valuable asset to have on a homepage.

Fresh / Timely Content

Few people are happy reading old and out-dated news or content. It’s nice to give your visitors content that is up to date for two major reasons: a) they’re more likely to return to view the latest content and b) they know that the site and therefore the business is active, still operating and still trying to live up to its business goals. Fresh content may include any or all of the following:

In content / community-driven sites there’s likely to be one or two Top X lists. These lists may be based on ratings or recency, for example
Feature content / promotions: make sure any featured content on the homepage is the best of the best. You aren’t going to draw visitors in with rubbish.
If there is likely to be regular interesting content include a Latest News or Latest Blogs area.

Fixed Content

Fixed content is not necessarily a block of text that never changes but content who’s message doesn’t change. This includes usually a description of the company and / or site. This text should be written by a copywriter and should be restricted to a couple of sentences. As the site or the business grows it can be altered. In fact, if the site becomes a household name you could lose this description altogether without harm. (Think eBay, Yahoo!, MySpace – their site description is their tagline).

Other fixed content may be a tour of the product / site. In such a competitive market this is a really good way of giving visitors more information to arm themselves with in making their decision to use your services / buy your product.

Navigation

There’s bound to be a menu of some sort, but will the site contain so much content that shortcuts on the homepage will help? Is there different navigation for different users – i.e. guests vs. logged in members?

Sign up / Subscribe forms

Think about the goals of your site. Is it smart to have a sign up / subscribe form on the homepage or would it be better suited to another page with a link from the homepage?

Advertising

Again, think about the goals of the site. What sort of advertising is required?

Cut it down

Now that you know what should go on the homepage, cut it down to the bare minimum. Summarise paragraphs and then summarise again. Take out everything that’s not absolutely necessary.

Lay out the page

Now you’ve got the pieces of the puzzle, starting putting it together by laying the page out as a wireframe. This really should be a joint collaboration between a business analyst, a front-end producer and a usability expert. Knowledge of eye-tracking findings is very useful here. There’s no need for fancy graphics but make sure the details of each area are included. For example, should the dates and authors be included with the latest content?

Once laid out, sit back and look at the layout as an overall page. Does it convey the purpose of the site? Does it tell the user what they can do? Does it have light and shade – i.e. some areas are emphasised more than others?

Just Add Paint

I have read that it’s not a good idea to give graphic designers a wireframe because it’s though of as being too prescriptive and they tend to be less creative but this is the one page that I think is an exception to that rule. If you’re worried about limiting the designer’s creativity it may be a good idea to get them to design a different page first and then apply that design to the homepage.

At this stage you should be able to provide the graphic designer with enough information that they can go away and come back with a killer homepage.

Test it Out

Either at the wireframe stage or with the pretty version usability testing the homepage design is a valuable step. There’s a great chapter on this in Steve Krug’s Don’t Make Me Think! You’ll very quickly see where you need to change the emphasis of different areas or explain things more.

Evolve

The homepage should evolve with your business: as you discover what works and what doesn’t, what users prefer, with changes to the industry, new features, etc. If you can set up goal tracking and website statistic tracking all the better to have tangible data to work from to help you improve the homepage (Google Analytics is great for this!)

Some great homepages:

Flickr: It has everything – navigation including shortcut links, search, summary content, featured content, a link to a tour and yet it’s got light and shade, it’s clean and clear.
Google: The first release of the Google homepage consisted of a logo, a search box and two buttons (Google Search and I’m Feeling Lucky). Today the page has a few more links and a simple toolbar if you’re signed in but they’ve stuck with a formula that works – simple, clear, no fuss. It was always clear that the site was a web search so they didn’t need an explanation.
istockphoto – the homepage cleverly shows featured photos by rotating one image that might be a mosaic of smaller photos or one large photo. They also have a site intro, reasons for joining, costs and a large, simple search box right there in plain site so you can get started quickly. There’s also shortcut links, a login and footer menu but the page is neat and simple.