Homepage Design Changes

by Jakob Nielsen on September 24, 2012

Summary: Web design is stabilizing; the average homepage is only about 40% different than it was a year before, corresponding to 3 years between complete redesigns.

For 19 years, I've been collecting screenshots of a broad range of homepages, capturing shots of each site once a year. Comparing each screenshot with its homepage the year before lets me estimate the annualized degree of change in homepage design.

Let's start by looking at a few typical examples across my collection period.

1994 to 1995: Huge Change (Example: Microsoft)

Screenshots from 1994 (left) and 1995 (right) of the homepage for Microsoft.

These are classic homepages from the Web's earliest days: highly graphical and designed without any reference to traditional GUI (graphical user interface) conventions.

It's also typical of the early years that the homepage was fully redesigned from one version to the next. At that time, web design was so experimental that it wasn't uncommon for the company name itself to be the only element that survived from one year to the next.

2002 to 2003: Medium Change (Example: CNET News.com)

Screenshots from 2002 (left) and 2003 (right) of the homepage for the News.com service from CNet.

These CNET examples were typical of the amount of design change seen after the dot-com bubble's implosion: still quite dramatic, but with key design elements carried over between design iterations.

The overall layout was fairly consistent — particularly when seen at reduced size — with navigation tabs on top of a wide left column and a narrow right column. The left column started with the more-emphasized top stories, followed by 10 additional stories, each of which had a headline and about 3 lines of summary.

However, a closer look at details shows that the 2003 design worked quite differently than the 2002 design, which is why the degree of change was estimated at 70%.

Although both versions have 7 tabs, the newer design's tabs reached all the way across the page and the color scheme indicating the selected tab was changed. More important, the actual navigation categories were also changed. The 2002 IA categories were Front Page, Enterprise, E-Business, Communications, Media, Personal Technology, and Investor . The 2003 categories were Front Page, Enterprise Software, Enterprise Hardware, Security, Networking, Personal Tech , and The Net .

Other than the very concept of a front page, "personal technology" was the only category to survive the IA bloodbath of 2003, and even this category had its label amputated.

Although retaining the yellow stripe created some visual continuity color-wise, the actual visual design changed drastically — most notably in making the headlines smaller and abandoning the use of blue for links.

Feature changes abounded, including:

  • going from two lead stories with small illustrations to one lead story with a bigger illustration;
  • abandoning the news.context box at the bottom of the screen;
  • adding many tertiary headlines below the secondary stories;
  • giving columnists — and their photos — much more prominent placement;
  • reducing the prominence of videos;
  • switching the default from scoped search to simple search, with an optional advanced search;
  • changing time stamps from absolute ("October 4, 2002, 1:46 PM PDT") to relative ("1 hour, 17 minutes ago") and making the time stamps gray (for frequently updated sites, relative time stamps are better because they free users from having to convert time zones);
  • moving the time of last update into a more prominent location (an appropriate consequence of the change to relative time stamps);
  • giving users the ability to save stories; and
  • adding a new "get up to speed" section.

Thus, even though the two screenshots look somewhat the same at first glance, if you actually started using them, they'd seem more dissimilar than similar.

2011 to 2012: Modest Change (Example: Aetna)

Screenshots from 2011 (left) and 2012 (right) of the homepage for the Aetna health insurance company.

The color of the hero area was very different, and the logo was new, but otherwise these two homepage designs were basically the same. Both were divided into 4 areas — navigation bar, hero area, news, and detailed navigation — and each area's size and content was about the same in both years.

Still, there were some changes when it came to actually using the pages.

As a minor example, the "get a quote" button moved from the right to the left side of the screen. Also, a mysterious plus sign appeared next to the logo in 2012. (Clicking it revealed the message "we have a new look" with a link to find out why; it would have been better to put this in the minor news area and avoid the weird "+" graphic.)

More important, however, were the drastic changes to the key calls to action on the hero area's left side.

In 2011:

  • Aetna Navigator Member Log In
  • New Members: Register
  • Find a Doctor
  • Small Business Owners
  • Buy Health Insurance

In 2012:

  • Find a Doctor
  • Get a Form
  • Learn About Health Insurance
  • Contact Us
  • Log In to Aetna Navigator (with the words "log in" highlighted)
  • Register now to
    • Get an ID Card
    • Get Coverage & Benefits Information
    • Get Cost Estimates
    • Complete a Health Assessment

Find a Doctor was the only action that survived unchanged (though in a different location). The new login feature was a definite improvement; it's better to start with information-carrying keywords than a company's own name.

Finally, links to Chinese and Spanish information were removed in 2012. Whether that's good or bad depends on the number of customers who need those languages. The 2011 version presented the language-change option in a non-standard location (bottom right, below the fold on most monitors that year).

This is a good example of why it can be dangerous to rely on site analytics to determine a feature's value. The language-change links probably saw very little use in 2011, which is why they were killed. However, people would have been much more likely to use them if they'd been placed in the expected location (the upper right).

Increasing Stability in Web Design

The following chart shows the average change in each year's collection of homepage screenshots compared with the same homepages the previous year.

Chart showing the annualized change in homepage design, averaged across the websites that were sampled each year.
Annualized degree of change in homepage design.

The trend is clear: huge changes in the Web's early years, a fall off around the dot-com bubble, and a stabilization in the low 40s in recent years.

Of course, the curve has a bit of zig-zag because it's based on estimates of 3 things: the number of design elements changed each year, the importance of those elements, and how much they changed. Still, there's no questioning the big picture: Web design is stabilizing.

This is good news, because users hate change. People prefer to have things work in familiar ways. Also, the slower pace gives design teams more time for reflection and research before they make changes. Look before you leap. Again, this makes design changes more likely to be successful and profitable.

Annual changes of around 40% correspond to a full redesign every 3 years (3 years, not 2.5, because some things get changed again and again before arriving at the final design). Progress certainly has not stopped. We still need to make websites better, which is clear from the many notable tweaks and experiments that surface when you track websites over time.

Share this article: Twitter | LinkedIn | Google+ | Email