Chapter 7. The Big Bang Theory of Web Design

THE IMPORTANCE OF GETTING PEOPLE OFF ON THE RIGHT FOOT

Lucy, you got some ’splainin’ to do.

—DESI ARNAZ, AS RICKY RICARDO

Designing a Home page often reminds me of the classic TV game show Beat the Clock.

Each contestant would listen patiently while emcee Bud Collyer explained the “stunt” she had to perform. For instance, “You have 45 seconds to toss five of these water balloons into the colander strapped to your head.”

The stunt always looked tricky, but doable with a little luck.

But then just as the contestant was ready to begin, Bud would always add, “Oh, there’s just one more thing: you have to do it...blindfolded.” Or “...under water.” Or “...in the fifth dimension.”

Image

Bud Collyer offers words of encouragement to a plucky contestant

It’s that way with the Home page. Just when you think you’ve covered all the bases, there’s always just one...more...thing.

Think about all the things the Home page has to accommodate:

Image Site identity and mission. Right off the bat, the Home page has to tell me what site this is and what it’s for—and if possible, why I should be here and not at some other site.

Image Site hierarchy. The Home page has to give an overview of what the site has to offer—both content (“What can I find here?”) and features (“What can I do here?”)—and how it’s all organized. This is usually handled by the persistent navigation.

Image Search. Most sites need to have a prominently displayed search box on the Home page.

Image Teases. Like the cover of a magazine, the Home page needs to entice me with hints of the “good stuff” inside.

Image Content promos spotlight the newest, best, or most popular pieces of content, like top stories and hot deals.

Image Feature promos invite me to explore additional sections of the site or try out features.

Image Timely content. If the site’s success depends on my coming back often, the Home page probably needs to have some content that gets updated frequently. And even a site that doesn’t need regular visitors needs some signs of life—even if only a link to a recent press release—to signal to me that it’s not abandoned or hopelessly outdated.

Screenshot of a webpage depicts the different sections covered in a homepage.

Image Deals. Home page space needs to be allocated for whatever advertising, cross-promotion, and co-branding deals have been made.

Image Shortcuts. The most frequently requested pieces of content (software updates, for instance) may deserve their own links on the Home page so that people don’t have to hunt for them.

Image Registration. If the site uses registration, the Home page needs links or text boxes for new users to register and old users to sign in and a way to let me know that I’m signed in (“Welcome back, Steve Krug”).

In addition to these concrete needs, the Home page also has to meet a few abstract objectives:

Image Show me what I’m looking for. The Home page needs to make it obvious how to get to whatever I want—assuming it’s somewhere on the site.

Image ...and what I’m not looking for. At the same time, the Home page needs to expose me to some of the wonderful things the site has to offer that I might be interested in—even though I’m not actively looking for them.

Image Show me where to start. There’s nothing worse than encountering a new Home page and having no idea where to begin.

Image Establish credibility and trust. For some visitors, the Home page will be the only chance your site gets to create a good impression.

And you have to do it...blindfolded

As if that wasn’t daunting enough, it all has to be done under adverse conditions. Some of the usual constraints:

Image Everybody wants a piece of it. Since it’s likely to be the page seen by more visitors than any other—and the only page some visitors will see—things that are prominently promoted on the Home page tend to get significantly greater traffic.

As a result, the Home page is the waterfront property of the Web: It’s the most desirable real estate, and there’s a very limited supply. Everybody who has a stake in the site wants a promo or a link to their section on the Home page, and the turf battles for Home page visibility can be fierce. Sometimes when I look at a Home page, I feel like the boy in The Sixth Sense: “I see stakeholders.”

A venn diagram with 2 overlapping circles named “THINGS ON THE FRONT PAGE OF A UNIVERSITY WEBSITE” and “THINGS PEOPLE GO TO THE SITE LOOKING FOR.”

“University Website” | xkcd.com

The result of design by stakeholders.

The Venn diagram isn’t entirely accurate: Some university sites don’t have the full name of the school on the Home page.

And given the tendency of most users to scan down the page just far enough to find an interesting link, the comparatively small amount of space “above the fold” on the Home page is the choice waterfront property, even more fiercely fought over.

Image Too many cooks. Because the Home page is so important, it’s the one page that everybody (even the CEO) has an opinion about.

Image One size fits all. Unlike lower-level pages, the Home page has to appeal to everyone who visits the site, no matter how diverse their interests.

The First Casualty of War

Given everything the Home page has to accomplish, if a site is at all complex even the best Home page design can’t do it all. Designing a Home page inevitably involves compromise. And as the compromises are worked out and the pressure mounts to squeeze in just one more thing, some things inevitably get lost in the shuffle.

The one thing you can’t afford to lose in the shuffle—and the thing that most often gets lost—is conveying the big picture. Whenever someone hands me a Home page design to look at, there’s one thing I can almost always count on: They haven’t made it clear enough what the site is.

As quickly and clearly as possible, the Home page needs to answer the four questions I have in my head when I enter a new site for the first time:

Screenshot of a website named “KICKSTARTER” is shown.

I need to be able to answer these questions at a glance, correctly and unambiguously, with very little effort.

If it’s not clear to me what I’m looking at in the first few seconds, interpreting everything else on the page is harder, and the chances are greater that I’ll misinterpret something and get frustrated.

But if I do “get it,” I’m much more likely to correctly interpret everything I see on the page, which greatly improves my chances of having a satisfying, successful experience.

This is what I call the Big Bang Theory of Web Design. Like the Big Bang Theory, it’s based on the idea that the first few seconds you spend on a new Web site or Web page are critical.

We know now from a very elegant experiment (search for “Attention Web Designers: You Have 50 Milliseconds to Make a Good First Impression!”) that a lot happens as soon as you open a page. For instance, you take a quick look around (in milliseconds) and form a number of general impressions: Does it look good? Is there a lot of content or a little? Are there clear regions of the page? Which ones attract you?

The most interesting thing about the experiment was that they showed that these initial impressions tended to be very similar to the impressions people had after they actually had a chance to spend time on the page. In other words, we make snap judgments, but they tend to be a pretty reliable predictor of our more reasoned assessments.

This is not to say that our initial understanding of things is always right. In fact, one of the things I’ve seen most often in usability tests is that people form ideas about what things are and how they work which are just wrong. Then they use these first bits of “knowledge” to help interpret everything they see.

If their first assumptions are wrong (“This is a site for ____”), they begin to try to force-fit that explanation on to everything they encounter. And if it’s wrong, they’ll end up creating more misinterpretations. If people are lost when they start out, they usually just keep getting...loster.

This is why it’s so crucial that you get them off on the right foot, making sure that they’re clear on the big picture.

Don’t get me wrong: Everything else is important. You do need to impress me, entice me, direct me, and expose me to your deals. But these things won’t slip through the cracks; there will always be plenty of people—inside and outside the development team—seeing to it that they get done. All too often, though, no one has a vested interest in getting the main point across.

The Top Four Plausible Excuses for not Spelling Out the Big Picture on the Home Page

Table titled “THE TOP FOUR PLAUSIBLE EXCUSES FOR NOT SPELLING OUT THE BIG PICTURE ON THE HOME PAGE” shows a user’s thoughts and the explanation.

But...the Home page? Really?

I know what some of you are thinking:

“Nobody enters a site through the Home page anymore. That’s so 2004.”

And you’re right, of course. Compared to the early days of the Web, the Home page has lost its preeminence. Now people are just as likely—or more likely—to enter your site by clicking on a link in an email, a blog, or something from a social network that takes them directly to a page deep in your site.

Because of this, every page of your site should do as much as it can to orient them properly: to give them the right idea about who you are, what you do, and what your site has to offer.

The problem is, though, there’s not much space on most pages to do that well. As a result, many users have formed a new behavior.

People will teleport into the depths of a site and look at the page the link took them to. Very often, though, the next thing they’ll do is visit the Home page to get their bearings. (I like to think of it as divers bobbing up to the surface to see where they are.) If the page they went to was interesting, they want to see what else is on the site. If it contained information they need to rely on, they may want to find out who publishes it, and how credible it is.

The Home page is still the place where this happens, and you need to do it well.

How to get the message across

Everything on the Home page can contribute to our understanding of what the site is. But there are three important places on the page where we expect to find explicit statements of what the site is about.

Image The tagline. One of the most valuable bits of real estate is the space right next to the Site ID. When we see a phrase that’s visually connected to the ID, we know it’s meant to be a tagline, and so we read it as a description of the whole site. We’ll look at taglines in detail in the next section.

Webpage of Rezdy site is shown.

Image The Welcome blurb. The Welcome blurb is a terse description of the site, displayed in a prominent block on the Home page, usually at the top left or center of the content space so it’s the first thing that catches your eye.

Webpage of Idealab displays the following site description in the content space: “Founded in 1996, Idealab has created and operated more than 125 companies and 40 IPOs and acquisitions. Idealab created Picasa, then sold it to Google in 2004. Established in 2000.”

Image The “Learn more.” Innovative products and business models tend to require a fair amount of explanation, often more than most people have the patience for. But people have become accustomed to watching short videos on their computers and mobile devices. As a result, people have now come to expect a short explanatory video on most sites and are often willing to watch them.

The point isn’t that everyone will use these three elements—or even that everyone will notice them. Most users will probably try to guess what the site is first from the overall content of the Home page. But if they can’t guess, you want to have someplace on the page where they can go to find out.

Here are a few guidelines for getting the message across:

Image Use as much space as necessary. The temptation is to not want to use any space because (a) you can’t imagine that anybody doesn’t know what this site is, and (b) everyone’s clamoring to use the Home page space for other purposes.

Take Kickstarter.com, for example. Because of their novel proposition, Kickstarter has a lot of ’splainin’ to do, so they wisely use a lot of Home page space to do it. Almost every element on the page helps explain or reinforce what the site is about.

Homepage of "KICKSTARTER" is shown with "What is Kickstarter?" link highlighted in bold.

Kickstarter may not have a tagline (unless it’s “Bring creativity to life”) but they do put an admirable amount of effort into making sure people understand what they do and how it works.

“What is Kickstarter?” is clearly the most prominent item in the primary navigation.

Image ...but don’t use any more space than necessary. For most sites, there’s no need to use a lot of space to convey the basic proposition, and messages that take up the entire Home page are usually too much for people to bother absorbing anyway. Keep it short—just long enough to get the point across, and no longer. Don’t feel compelled to mention every great feature, just a few of the most important ones.

Image Don’t use a mission statement as a Welcome blurb. Many sites fill their Home page with their corporate mission statement that sounds like it was written by a Miss America finalist. “XYZCorp offers world-class solutions in the burgeoning field of blah blah blah blah blah....” Nobody reads them.

Image It’s one of the most important things to test. You can’t trust your own judgment about this. You need to show the Home page to people from outside your organization to tell you whether the design is getting this job done because the “main point” is the one thing nobody inside the organization will notice is missing.

Nothing beats a good tagline!™

A tagline is a pithy phrase that characterizes the whole enterprise, summing up what it is and what makes it great. Taglines have been around for a long time in advertising, entertainment, and publishing: “Thousands of cars at impossibly low prices,” “More stars than there are in the heavens,”1 and “All the News That’s Fit to Print,”2 for example.

1 Metro-Goldwyn-Mayer studios, in the 1930s and ’40s.

2 The New York Times. I have to confess a personal preference for the Mad magazine parody version, though: “All the News That Fits, We Print.”

On a Web site, the tagline appears right below, above, or next to the Site ID.

Taglines are a very efficient way to get your message across, because they’re the one place on the page where users most expect to find a concise statement of the site’s purpose.

Some attributes to look for when choosing a tagline:

Image Good taglines are clear and informative and explain exactly what your site or your organization does.

2 webpages with site ID "zipcar" and "OpenTable" are shown.

Image Good taglines are just long enough, but not too long. Six to eight words seem to be long enough to convey a full thought, but short enough to absorb easily.

2 webpages with site ID "www.fueleconomy.gov" and "ONVIA" are shown.

Image Good taglines convey differentiation and a clear benefit. Jakob Nielsen has suggested that a really good tagline is one that no one else in the world could use except you, and I think it’s an excellent way to look at it.

3 webpages with site ID "Urbanspoon Boston" are shown.

Image Bad taglines sound generic.

2 webpages with site IDs "netmarket.com" and "nationalgrid" are shown. The taglines are "Save Time. Save Money. Save Your Sanity," and "HERE WITH YOU. HERE FOR YOU" respectively.

NationalGrid can probably get away with using a motto instead of a differentiating tagline, because they’re a public utility with a captive audience, so differentiation isn’t an issue.

Don’t confuse a tagline with a motto, like “We bring good things to life,” “You’re in good hands,” or “To protect and to serve.” A motto expresses a guiding principle, a goal, or an ideal, but a tagline conveys a value proposition. Mottoes are lofty and reassuring, but if I don’t know what the thing is, a motto isn’t going to tell me.

Image Good taglines are personable, lively, and sometimes clever. Clever is good, but only if the cleverness helps convey—not obscure—the benefit.

3 webpages with site IDs "THE DAILY BEAST, REAL SIMPLE, and THE BREAKFAST BLOG" are shown.

Tagline? We don’t need no stinking tagline

Some sites can get by without a tagline. For instance:

Image The relative handful of sites that have already achieved household word status.

Image Sites that are very well known from their offline origins.

Personally, though, I’d argue that even these sites would benefit from a tagline. After all, no matter how well known you are, why pass up an unobtrusive chance to tell people why they’re better off at your site? And even if a site comes from a strong offline brand, the mission online is never exactly the same and it’s important to explain the difference.

The fifth question

Once I know what I’m looking at, there’s still one more important question that the Home page has to answer for me:

Homepage of "KICKSTARTER" website is displayed with a user thinking "Where do I start?"

When I enter a new site, after a quick look around the Home page I should be able to say with confidence:

Image Here’s where to start if I want to search.

Image Here’s where to start if I want to browse.

Image Here’s where to start if I want to sample their best stuff.

On sites that are built around a step-by-step process (applying for a mortgage, for instance), the entry point for the process should leap out at me. And on sites where I have to register if I’m a new user or sign in if I’m a returning user, the places where I register or sign in should be prominent.

Unfortunately, the need to promote everything (or at least everything that supports this week’s business model) sometimes obscures these entry points. It can be hard to find them when the page is full of promos yelling “Start here!” and “No, click me first!”

The best way to keep this from happening is to make the entry points look like entry points (i.e., make the search box look like a search box and the list of sections look like a list of sections). It also helps to label them clearly, with labels like “Search,” “Browse by Category,” “Sign in,” and “Start here” (for a step-by-step process).

Why Golden Geese make such tempting targets

There’s something about the Home page that seems to inspire shortsighted behavior. When I sit in on meetings about Home page design, I often find the phrase “killing the golden goose” running through my head.3

3 I always thought that the phrase came from the story of Jack and the Beanstalk. In fact, Jack’s Giant did have a goose that laid golden eggs, but nobody tried to kill it. The senseless slaughter occurs in one of Aesop’s fables, and there’s not much to it, plot-wise: Man finds goose, man gets greedy, man kills goose, man gets no more eggs. Moral: “Greed often overreaches itself.”

The worst of these behaviors, of course, is the tendency to try to promote everything.

The problem with promoting things on the Home page is that it works too well. Anything with a prominent Home page link is virtually guaranteed to get more traffic—usually a great deal more—leading all of the site’s stakeholders to think, “Why don’t I have one?”

The problem is, the rewards and the costs of adding more things to the Home page aren’t shared equally. The section that’s being promoted gets a huge gain in traffic, while the overall loss in effectiveness of the Home page as it gets more cluttered is shared by all sections.

It’s a perfect example of the tragedy of the commons.4 The premise is simple:

4 The concept, originated by nineteenth-century amateur mathematician William Forster Lloyd, was popularized in a classic essay on overpopulation by biologist Garrett Hardin (“The Tragedy of the Commons,” Science, December 1968).

Any shared resource (a “commons”) will inevitably be destroyed by overuse.

Take a town pasture, for example. For each animal a herdsman adds to the common pasture, he receives all proceeds from the sale of the animal—a positive benefit of +1. But the negative impact of adding an animal—its contribution to overgrazing—is shared by all, so the impact on the individual herdsman is less than –1.

The only sensible course for each herdsman is to add another animal to the herd. And another, and another—preferably before someone else does. And since each rational herdsman will reach the same conclusion, the commons is doomed.

Preserving the Home page from promotional overload requires constant vigilance, since it usually happens gradually, with the slow, inexorable addition of just...one...more...thing.

All the stakeholders need to be educated about the danger of overgrazing the Home page and offered other methods of driving traffic, like cross-promoting from other popular pages or taking turns using the same space on the Home page.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
54.80.11.160