3 Starting Well
Home Pages
Both you – and all those people whom you thought about, visited, observed, listened to, and created personas and scenarios for – want your web site to succeed.
To have a successful experience on a web site, people have to
And they have to be able to do all that in the time and effort that they think it is worth.
Most of this book is about “understand what they find.” It’s mostly about writing destination (information) pages beyond the home page and beyond the pathway (menu, gallery) pages that people may have to go through on their way to what they want.
Although we’ll concentrate later in the book on information pages, all web pages have content. Home pages have content. Pathway pages have content.
Letting go of the words is especially important on home pages and pathway pages. So before we get to writing information pages further down in your site, let’s briefly explore home pages in this chapter and pathway pages in the next chapter.
Home pages – the 10-minute mini-tour
Most people read very little on the home page. They want to grab the information they need and move on because what they need from the site is almost always beyond the home page. Home pages can be content-rich, but they must not be wordy.
Many of your site visitors may be bypassing your home page and pathway pages by coming to specific information pages in your site through a search engine like Google.
In the rest of this chapter, we’ll discuss five major functions of home pages:
Nonetheless, you must still set up your site for those who do start at your home page – or who get to your home page after looking at the information page the search engine sent them to.
We’ll see how to accomplish all that without asking people to read much.
For an analysis of many home pages, see Nielsen and Tahir, Homepage Usability, 50 Websites Deconstructed, 2001.
We’ll end the chapter with a brief case study of revising the home page of a portal site, as well as a short section on how important it is to plan your site from your information topics up to the home page – not only from the home page down to the information topics.
Identifying the site, establishing the brand
For more on tag lines and other aspects of home pages, pathway pages, and navigation, see Krug, Don’t Make Me Think! 2005.
Your site’s logo, name, and tag line identify it. Don’t use a paragraph to explain the site. Don’t put paragraph-long mission statements on the home page. Most people won’t read them.
Instead, encapsulate your company’s or organization’s mission in a memorable tag line – a short phrase that tells people how to think about the site.
Consider Figure 3-1, the top of the Aspen Square Hotel’s home page. The identifying information here works well with very few words, as long as people coming to this site know what a condominium hotel is and recognize Aspen as the famous resort in Colorado.
Setting the tone and personality of the site
Remember that your web site is part of a conversation. You set the tone for your side of the conversation by sharing the web site’s personality with your site visitors. Indeed, different web sites have different personalities – expressed in the site’s visual style, colors, graphics, typography, writing style, and words.
For an interesting paper on web sites having personalities, see Coney and Steehouder, 2000.
A few years ago, the U. S. Internal Revenue Service (IRS, the tax collectors) had a home page that looked like a tabloid newspaper (Figure 3-2).
What impression does the IRS home page give you of the agency? What adjectives would you use to describe this page? Do those adjectives match your expectations for the IRS web site? What personality should the IRS web site have?
Figure 3-3 is the 2005 IRS home page. It may not be exciting, but it is much more appropriate. The rest of the pages in the site are in compatible templates with the same visual style so that they meet the expectations this home page sets.
Deciding on the personality that you want your site to project is part of developing your “brand.” Both commercial companies and government agencies need to consider their “corporate image,” their brand. Branding and marketing specialists can help you decide on an appropriate brand.
Who decides on the site’s personality?
If you own the site (it’s your blog; it’s your company), you decide on the tone and personality you want your site to have. However, if you are part of a larger organization, it’s not your decision alone. In fact, another division of the organization (for example, marketing or corporate communications) may dictate aspects of the site’s brand – colors, templates, and writing style.
Don’t arbitrarily reject those decisions; there’s value to your site visitors in finding a consistency in personality and style across subsites within a larger site. Always connect your site to the home page (and other parts) of the larger site so that people who come into the organization’s site through your part get the value of your belonging to that larger organization.
If you want to influence the tone and personality the organization is using on the site, get involved. Communicate up the chain and across groups. Become part of the web site task force (if your organization has one).
As you think about the site’s tone and personality, think broadly about all of the organization’s audiences, not just the specific audiences for your part of the site. A web site is the whole organization’s face to the world.
Branding specialists often start by asking for the adjectives you want people to use when referring to your site.
What adjectives come to mind when looking at the Crayola page in Figure 3-4? Do those adjectives seem appropriate for the audiences and scenarios of the site? What about the Car Talk page in Figure 3-5?
Figure 3-4 Crayola sells crayons and art supplies. The visual style seems appropriate for the audience of children, parents, and teachers.
Figure 3-5 This site matches the irreverent tone of the popular U. S. call-in radio show on which it is based. Other companies would not help their image by labeling their e-commerce section “Shameless Commerce.’
Notice how you can set the tone and personality with very few words. Even if you want to say “we’re a friendly site; we’re glad you’re here,” you should do it without a paragraph of text because most people won’t read the paragraph.
Helping people get a sense of what the site is all about
Many people coming to your site for the first time want to know:
But they want to grab that information quickly because they also want to know:
Return visitors often just do a quick check to be sure they are on the right site and, perhaps, to see if there’s anything new and exciting before they plunge further into the site.
Both too little and too much can keep people from understanding what the site offers.
A useful home page makes it instantly clear what the site is about
Look at Figure 3-6, the 2005 home page of SBC. Is it instantly clear what their business is?
Web sites must serve both those who already know the company and those who do not. Managers and staff inside a company are often so familiar with the company’s history and business that they forget that other people are not. If a web site is going to help a company market itself successfully, it must speak to people who do not yet know the company.
Figure 3-6 The 2005 web site of SBC had too little information for people who did not already know what SBC did, making it difficult for them to find out at a glance.
SBC merged with AT&T in late 2005. As you can see in Figure 3-7, the new site does a much better job of showing at a glance what businesses the company is in and what it offers.
A useful home page is mostly links and short descriptions
A useful home page for both new and returning site visitors is almost all links with just a few brief descriptions to help people very quickly understand what the site is all about and to know which link to choose to move on.
Look at Figure 3-8, which shows more of the Aspen Square home page.
Where do your eyes go? Did you look at the pictures first and scan the picture captions? How much of the text did you read?
Figure 3-8 More of the home page of the hotel site we saw in Figure 3-1. The page uses long paragraphs of text.
Many people scan. For them, the page might look like Figure 3-9.
People might actually take away more information from this page if it looked like Figure 3-10.
Figure 3-9 What many people see on a site like this. Their eyes go to the pictures and the links, but they don’t read the text.
Figure 3-10 What I might suggest for the Aspen Square site, to make the links stand out and to use many fewer words.
Letting people start key tasks immediately
When people come to a web site to do a task, they usually want to start that task right away. Many tasks involve forms, and it’s been interesting to watch over the years as more and more forms come to the front of sites. If people need a form, putting the form on the home page is a good strategy.
Put forms people want right away on the home page
For example, on travel sites what people most want to do is set up travel. That’s why most travel sites let people start a reservation right from the home page. Figure 3-11, the Scandinavian Airlines site, is an example.
Make sure the forms are high on the page
If you have forms on the home page, make sure they are easy to find – high enough on the home page to be seen immediately. The large pictures that many sites have on their web pages push critical tasks and critical information far down on the page. These large pictures hinder people from finding the critical information or critical field quickly and easily. See the FedEx example in Figure 3-12.
Figure 3-11 Like most travel sites, SAS lets travelers describe their plans immediately. Users of any other travel site are likely to know what to do here even if they don’t speak Swedish.
Don’t assume full screens at high resolution
Some web users still have small screens or work at low resolution. Those of us who work on large screens at high resolution – and I’m looking at what I’m typing on a 24-inch monitor at a screen resolution of 1900 × 1200 – tend to forget that most of the people who use what we develop aren’t working in that environment. Most of your site visitors are probably working at 1024 × 768; but a sizable minority are still using 800 × 600 screens. (Summer 2006: About 20 percent of web users are still at 800 × 600.)
Furthermore, even sophisticated business people and research scientists don’t all work with small type on large screens. In a field study with employees of a large health information group in which everyone had monitors that could display at least 1024 × 768, the client and I were surprised to see that many employees had changed their displays to lower resolutions or large type. They were seeing much less on the screen at one time than we had assumed.
Many expert web users open multiple windows and let those windows share screen space. They don’t maximize the windows; they see only part of your web page at one time.
These realities are all good reasons not to use most of the upper part of a web page for a large picture that serves only for emotional appeal. Use the space instead for the most important forms or information that people come to your site to get.
For up-to-date information on screen resolutions most people are using, see the web sites I listed in Chapter 2, page 18.
Put Search near the top – where site visitors expect it
Always put the Search box near the top of the page. If your site has search capability (and any large site should), a Search box (not just a link to another page) should be in the same place on every page of the site.
People have come to expect that the Search box will be either at the top right or at the left at the top of the left navigation column. Those are both good places.
A long home page with the Search box at the bottom is not a good idea if the site will draw visitors who have small monitors, use low resolution, or don’t maximize each window. If the Search box is below the fold, many people will assume the site does not have search capability. They won’t scroll down to look for it.
Blind web users who like to search also want to find the Search box very close to the top of the web page. Screen-readers start to read from the top of the page. If the Search box is before other content, blind web users get to what they need quickly.
“Above the fold” for a web page is whatever the site visitor sees when the page first opens – at whatever resolution or window size that person is using.
Information that is “below the fold” becomes visible only if the web user scrolls down the web page.
The phrase “above the fold” comes from print newspapers, where you see only what is above the fold when the paper is delivered to your doorstep or is being sold in a vending machine.
Newspaper editors know they must put the most important and interesting information above the fold to attract people’s attention.
Don’t make people fill out forms they don’t want
Starting people on forms they want on the home page is good. However, forcing people to fill out forms that they don’t want – or before they are ready to give you the information – is likely to be counterproductive.
Think carefully about the benefits and perils of asking for information when people are not ready to give it to you. If you ask too early, or you ask for too much, or you ask for information that people have to struggle to get for you, you risk losing more than you might gain. Consider the trade-offs. If you are asking people to register so that you can market to them later, do you lose more than you gain by having people leave early? If people put in fake information just to get past your form, does that end up being a costly pain to you?
Sending each person on the right way, effectively and efficiently
In the study reported by Nielsen and Loranger, average time on the home page was 25 to 35 seconds! People want to get on with the task that brought them to the site.
Most people want to move off the home page quickly. Even most first-time visitors spend almost no time getting a sense of the site; they immediately try to find the link they need to move on.
Chapter 12 is all about writing meaningful links. If that’s important for you right now, feel free to go there and then come back to the rest of this chapter. Here I’m going to focus on two critical guidelines about writing links to help people get started down a good path from the home page:
Use your site visitors’ words
When people come to your web site to start a conversation with you, they have a topic or question in mind. They are looking for the words they have in their minds – words that give them confidence that if they click there, they’ll get closer to the information they are seeking.
To make connections between what your site visitors want and the content you have, you must use their words – not cute, made-up names that they do not know. Cute doesn’t work if it doesn’t help your site visitors know where to click.
Use all the sources of information about your web users that we discussed in Chapter 2 to get their words.
Don’t make people wonder which link to click on
Site visitors want to think about their topic, their need – not about how you’ve put together your site. If people don’t feel confident that you are helping them get to what they need, they might not feel confident that your information is credible or that you are a good firm to do business with.
The web site in Figure 3-13 might make people who come to it unsure about going further. Lots of other sites offer car loans and ways to invest money. Busy web users might just go elsewhere rather than try to figure out what’s where on this site.
Figure 3-13 Web users don’t want to have to figure out where you’ve put the information they need. They want to feel comfortable and confident as they move through your site.
Putting it all together: A case study
Let’s see how our five points play out in a specific case. This case study is of revising the portal site to all the information in all the agencies that make up the U. S. Department of Health and Human Services.
Case Study 3-1: Revising the home page of a portal
With 12 major agencies, more than 300 programs, more than 65,000 employees, and an annual budget of more than $500 billion, the U. S. Department of Health and Human Services (HHS) is larger than many major worldwide corporations. Its agencies include the Centers for Disease Control and Prevention, the Centers for Medicaid and Medicare Services, the Food and Drug Administration, and the National Institutes of Health – sources of information on health and safety for people all over the world and on medical benefits for elderly and poor Americans.
Each HHS agency has web sites (and subsites and subsites of those subsites). The main page at www.hhs.gov has to serve as a portal to all the topics on all those agency sites – as well as give visitors the “big picture” of what HHS does.
A team of HHS subject matter experts, web designers, and usability specialists – with my help as an external usability consultant – revised the site in 2002. One of our first steps was to do a usability test of the existing site, both to get baseline data against which we could later compare a revised site and to identify problems to address in revising the site.
Here is the old HHS home page and what we learned from watching and listening as people tried to use it:
How did the site do on our five functions?
The site failed on all five of the functions we discussed in this chapter:
What lessons did we learn?
Here are a few of our take-aways that you might find relevant for your site:
What happened?
After 6 months and several rounds of developing and testing prototypes, HHS launched the new site in October 2002. The overall information architecture and design have held up very well since then. Here is the modified site:
Did it make a difference?
The new portal allows people to get to what they need much more effectively and efficiently than the old one did. Here are some data points from usability testing:
| Success with the new HHS portal site (16 people each doing 12 tasks = 192 attempts) | |
|---|---|
| Getting off the home page onto a good path | 97 percent |
| Getting off the next menu page still on a good path | 87 percent |
| Completing the scenario successfully | 82 percent |
See Theofanos, Mulligan, and Redish, 2004, for more on changing the HHS portal site.
Five of the tasks we asked people to do in the usability test of the old site at the beginning of the project and the usability test of the new site at the end of the project were exactly the same. Therefore, we can compare results for those five tasks. (We had 16 participants in each test. The tests were at different times, so the people were different, but they were all recruited by the same group from the same overall pool of people and had similar demographic characteristics.)
| Comparing the two sites on the same tasks | |
|---|---|
| Success using the original home page on five tasks | 41 percent |
| Success using the final home page on the same five tasks | 92 percent |
Building your site up from the content – not only down from the home page
Most web users who come to your site are looking for information that is a few clicks down in the site. If they navigate to the information, they do so by going down a path from the home page. But to make those paths – and your home page – work well, you have to build the site the other way, from the information up through the pathways to the home page.
To build up from the content, you have to have some sense of the content you have and the content you will need for the site. Do a content inventory/content analysis by listing all the content you now have on the site. You can use a spreadsheet to keep track of the topic, the current URL, who is responsible for that content, and so on. You might also have a column to indicate whether that page should be deleted, revised, or kept as is. You can also add notes about content that needs to be written.
For more on doing a content inventory/content analysis, see www.usability.gov/design/inventory.html.
You can then use card sorting to find out how your web users would organize the content. For a card sorting study, you create a stack of 50 to 60 cards to represent your content with one topic on each card. Representative users sort the cards into groups that are logical to them. In an “open card sort,” the users also label the groups they create. That gives you the users’ words for your home page. In a “closed card sort,” you tell the users the labels you plan to use and they tell you what topics they would look for under each of your labels.
For more on card sorting, see www.usability.gov/design/cardsort.html. Also see Courage and Baxter, 2005, Chapter 10.
You can get help from professional information architects in organizing the content of your web site.
For more on information architecture, see Rosenfeld and Morville, 2006.
SUMMARIZING CHAPTER 3
Here are key messages from Chapter 3: