People first. Information first.
sketch-skyline-4200-80o.png

Jeremy In Flight

What's in a homepage? Often, surprisingly little for users

Summary: A simple exercise picks apart homepages and reveals some not-so-simple questions about the nature of what's good for users. Pixels are precious real estate, and too many sites waste them.

For a while now, there’s been a perverse psychology at play in my email’s inbox, where most of my time is spent deleting newsletters, alerts, and updates that I never open. Thing is though, I subscribe anyway. Apparently, I fear I’d miss something in the stream of information I’m not reading in the first place.

A lucky few are spared a swift click of the trash icon, and usually this includes the “Alertbox” emails from the Nielsen Norman Group, a UX consultancy. One of the more recent editions included this post by Jakob Nielsen about how many website homepages are mostly filled with things users don’t care about, and in fact some websites do an even worse job of delivering useful homepage content than they did 12 years ago. Although by now I think we’re all at least implicitly aware of how much crap we encounter online, I was taken aback to see in Nielsen’s survey that useful elements (namely navigation and actual content) comprised only 39 percent of the screen’s real estate.

It’s well-established how impatient online users can be (not that I blame them), and so it should go without saying that a good homepage is critical. Nielsen’s exercise made me curious, and because the thrust of it was simple enough, I thought it’d be fun to reproduce with some sites of my own choosing.

I picked six sites, wanting a diverse group: Amazon (e-commerce), Twitter (social), The New York Times (news), City of Pittsburgh (government), the PGH Forge (community development), and Yahoo (search, news, or whatever it is Yahoo does exactly). I followed Nielsen’s lead and took screenshots of each site’s homepage, dividing them up with colored boxes that represented his eight categories: content, navigation, welcome, self-promotion, advertisements, chrome (not the browser), filler, and unused space. (Note that I did this on my laptop's 14-inch screen with a resolution of 1600x900.)

Now, Nielsen’s point is that too many websites flat-out waste precious pixels, and when I added up my numbers that’s what I discovered too. On average, in my experiment, 21 percent of the screen space was completely unused. But that was not the most interesting part of the exercise. Far and away, the most interesting bits were the deceptively basic questions I had to consider in categorizing elements, wondering what made them “good” or “useful,” and even reevaluating what a homepage is for.

What counts as content?

Let’s start with Yahoo. Its homepage was made up of mostly unused space (28%), followed by content (25%). I had thought slicing up webpages into these categories would be straightforward, but early on it was Yahoo that made me stop and ask what exactly counts as content. See for yourself:

Key  {  Red = Navigation,   Green = Content,   Orange = Welcome,   Pink = Ads,   Self-Promotion = Turquoise,   Light Purple = Filler,   Blue = Chrome }

KeyRed = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

The big news items in the center of the page were obviously content, but what about that “trending now” section in the upper right? What about the weather in the lower right? This issue came up with Amazon, too — it’s a shopping site, after all, so were all the in-house banner ads the content? Or was there no content at all?

Key  { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

Key { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

Content ought to be whatever users care about. It’s the stuff that interests them, what they need, the reason they visit.

With that in mind, I’d say the weather on Yahoo’s homepage isn’t content, and neither is the click-bait “trending now” section. They’re filler, and if Yahoo thought they were important, they wouldn’t have have been banished to the right side of the page with an ad for Crocs. Meanwhile on Amazon, recommended products that appear just above the fold might seem similar to “trending now,” but in this case I wouldn’t call them filler because that’s why people visit Amazon.com, for the purpose of finding deals and shopping. Still, it isn’t content. That’s self-promotion, advertising the company’s own content elsewhere on the site. In my mind, the only content here is that carousel, as it provides front-and-center information about Amazon’s most popular and recognizable products — the Kindle, instant video, cloud services, books, and so on.

The takeaway here is that one person’s content is another’s filler. I’m sure somebody at Yahoo would argue the “trending now” section counts as content. I might even reconsider it as self-promotion. But while a “right” answer might be elusive, user research such as an eye-tracking study or a heat map of clicks would shed light on whether folks really are visiting Yahoo for “Family Feud zombie” and “Costco Bibles.” If so, no judgement here (OK, that’s a lie), but then design your website appropriately. Give users more than a mere 25% of what they came for.

Before moving on, I should add that picking apart Yahoo and Amazon also made me consider what counts as navigation. Primary navigation bars are unmistakable, but what about the links to sign in? To visit “My Yahoo”? To access your Amazon “Wish List” or cart? When a discipline’s vocabulary includes familiar words, such as “navigation,” it’s easy to take for granted that we all mean the same thing when we invoke them. To me, if a design element allows a user to travel between sections or it guides them through a website’s structure, it’s navigation.

Hello, my name is [         ]

Along with content and navigation, the “welcome” category covers another set of elements Nielsen considers “useful” because logos, taglines, and the like “tell users the site’s purpose and where they are relative to the web as a whole.” If so, Amazon must be doing something wrong — 0.79% of its homepage is dedicated to welcoming the user. But then again, so is Yahoo (0.58%), Twitter (0.24%), and the New York Times (2.6%).

What I wonder is whether welcoming elements become less important as a brand grows in recognition. The companies I just listed are incredibly well known. And even if a few outlying users haven’t heard of Amazon, does its “unwelcoming” homepage leave any question what the site is for? Still, 0.79% is awfully tiny. In Nielsen’s survey, the welcoming category average was 3%, and I have to imagine that for many websites it couldn’t hurt to put out a larger welcome mat.

In my small group, the one exception here was the City of Pittsburgh, whose welcoming elements comprised 14% of the screen. (Whether they’re effective is an entirely separate conversation.)

Key  { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

Key { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

What’s a homepage for anyway?

Nielsen says in doing this exercise he was struck by how little changed between 2001 and 2013, but there is one development in particular I think needs consideration. Today there is a newly prevalent breed of homepage that doesn’t revolve around content or exist to “give users information.” These are the homepages of the service-oriented, personalized web, and they exist for one purpose carried out with laser-beam intensity: convince users to sign up for that company’s service.

Twitter is an apt example:

Key  { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome, Yellow = CTA }

Key { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome, Yellow = CTA }

The star of this type of homepage is the call-to-action (in yellow), which I felt deserved its own category as it accounts for 13% of the screen. Content here is reduced to a teaser, providing just enough information to show why signing up would be worthwhile. There’s very little navigation, and it’s heavily corporate (terms of service, directory, company blog, etc.) because, after all, Twitter’s real content isn’t accessible unless users create an account.

Is it even accurate to call this Twitter’s “homepage”? As a regular user of Twitter who doesn’t sign out, this is my homepage:

Key  { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

Key { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

Note that it’s not the homepage but my homepage. For a service like Twitter, obviously the content appearing on the home screen is different for every user. A great deal of the appeal for social media in particular depends on this personalization, which means a universal homepage doesn’t exist. What we have is a split homepage — one website with public and personal faces, with entirely different UX design goals. When signed into Twitter, more of the screen is dedicated to content (39%) than The New York Times. However, a new visitor to Twitter.com encounters a page that leaves 60% of the screen unused.

Is that too much? Just right? The upshot here is that homepages aren't one-size-fits-all, and I'm certain new patterns will continue to emerge. As they do, new best practices in design need to emerge too. 

Taking up space

Finally, let’s address filler and unused space. By reputation, filler is the anti-content. Ads get a bad rap too, but at least the right advertisement at the right time can be useful. Filler’s raison d’être is to take up space. It’s fluff, padding, empty calories. Right?

Fact is, none of these categories are inherently good or bad. It’s how designers use them. Of the sites I evaluated, the Forge’s homepage had the most filler by a huge margin, with 74%. But what’s the purpose of this homepage? Who’s it for?

Key  { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

Key { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

The Forge is a community development project recently announced for Pittsburgh’s East End. Disclaimer: I know one of the project’s principals, and I think it’s an awesome idea. That said, I feel it’s fair to say the Forge doesn’t need a homepage like Amazon’s or Twitter’s. At this point the project is more idea than reality, and so its website aims first to stoke interest and set a tone. All the content is hidden below the fold in a parallax scroll design, though accessible from top navigation. What this represents is yet another type of website not entirely uncommon on today’s web. It wants to make a splash first, inform second.

In making an impression, this homepage relies on “filler” … but filler can be useful if it’s relevant. In the Forge’s case, its big visual isn’t stock “5mb pics of hipsters drinking coffee” (NSFW) but a photo of the actual building that will be the project’s home, with a style that speaks to its urban reclamation underpinnings. That’s a design element with value, though I would be intensely curious to see an eye-tracking study done on this and similar parallax websites.

Precious pixels wasted

Maybe you disagree and think the Forge’s filler is all style without substance. Fair enough. But it’s better than nothing. Like, literally nothing. In filling its homepage, the Forge makes use of nearly all the pixels available to it, with only 4% of its homepage unused. Amazon also ranks well here, with 6% unused. But the New York Times, Yahoo, and Twitter all leave more than a quarter of their homepage real estate fallow.

Key  { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

Key { Red = Navigation, Green = Content, Orange = Welcome, Pink = Ads, Self-Promotion = Turquoise, Light Purple = Filler, Blue = Chrome }

The Times boasts a lot of content, but on either side of the page there are just big panels of nothing. If we collected enough websites, I’m sure we’d find places to nitpick over empty versus useful whitespace. But this is inarguable, and look at the effect it has on the reading experience.  This is 100% zoom once you get into a story on nytimes.com:

nytimes_Reading.png

If I don’t want to strain my eyes, I have to zoom to 150%. Isn’t this simply better both visually and functionally?

nytimes_Reading_150.PNG

To quote Nielsen: “Pages are still designed as if people had 1024×768 monitors. Progress instead seems to focus exclusively on optimizing web pages for the smaller screens on mobile devices and tablets. ... But an equivalent argument supports the need to modify pages for bigger screens as well, and that hasn’t happened.”

Wrapping it all up

So here’s the final tally from all the homepages I analyzed:

Website Unused Content Navigation Filler Welcome Self-Promo Ads Chrome CTA
Twitter - Signed Out59.8%9.3%2.5%0%0.24%0%0%14.9%13.3%
New York Times28.7%38.7%6.7%0.92%2.6%0.95%6.5%14.9%-
Yahoo28.2%24.8%9.5%10.3%0.58%0.73%11.5%14.9%-
Twitter - Signed In24.5%39.4%6.7%8.2%0%3.7%2.7%14.9%-
City of Pittsburgh16.7%24.9%7.2%14.7%13.8%7.8%0%14.9%-
Amazon6%29.1%23.2%0%0.79%16.4%9.6%14.9%-
PGH Forge3.9%0%3.7%73.5%4.2%0%0%14.9%-

Granted it’s a small sample size, but you don’t have to venture very far from corporate and e-commerce websites to see the traditional “homepage” is taking on new definitions and purposes. What hasn’t changed is a need to maximize usefulness to users, usually with a focus on content and navigation … but not always.

Using this exercise in the wild wouldn’t be difficult, and it delivers quantifiable information that can aid qualitative discussion. To be sure, its results aren’t hard metrics. If a homepage has a high percentage of non-content elements, it isn’t automatically “bad,” but once you know, you’ve got a starting point to ask questions. Does the balance meet the needs of users? What about stakeholders? Are the content, ads, and filler the right content, ads, and filler?

I’m glad I did this. It was enlightening, and it forced me to concentrate on questions that appear basic but for exactly that reason are often overlooked or baked into assumptions. Every so often, it’s good to return to the basics.

Jeremy BurtonComment