Jakob Nielsen :: Change the design of the main pages

Annotation: web design is becoming more stable - on average, about 40% of the main pages of sites change over the course of a year (compared to a full redesign that occurs every 3 years).

For 19 years I have been collecting images of the main pages of many sites, taking screenshots once a year. Comparing the current state of the pages with what it was a year ago gives me the opportunity to determine the degree to which the design of the main pages changes.

Let's start by looking at some typical examples from my collection.

1994-1995 Huge changes (example: Microsoft)

These are the classic homepages of the web’s inception: many graphic elements without any traditional GUI elements.

Also, it is clearly visible that at that time the design of the main pages completely changed with the advent of the new version. In those years, web design was so experimental that very often the only element untouched after the redesign was the name of the company itself.

2002-2003 Medium Changes (Example: CNET News.com)

The number of design changes in this example illustrates a common phenomenon in the years after the dot-com bubble burst: the changes were still quite noticeable, but the key elements were transferred from one iteration to another.

In general, the page layout was quite similar - especially if you look at them in a reduced size - navigation tabs at the top of the wide left and narrow right columns. The left column contained the most important articles, followed by 10 additional articles, each of which had a heading and about 3 lines of description.

However, if you look at the little things more closely, we will see that the 2003 design worked differently than the one that was in 2002, so the degree of change was estimated at 70%.

Although both versions had 7 tabs, in the new design the tabs were stretched to the full width of the page and the color scheme of the active tab was changed. Moreover, the changes affected navigation categories. In 2002, the list of categories was: Front Page, Enterprise, E-Business, Communications, Media, Personal Technology, and Investor. In 2003 - Front Page, Enterprise Software, Enterprise Hardware, Security, Networking, Personal Tech, and The Net.

In addition to the link to the main page, only the Personal Technology category was able to survive the 2003 meat grinder, although it was truncated to Personal Tech.

In addition, the preservation of the yellow bar created visual integrity, and the design itself was radically changed, most of all this is seen in the headings, which have become noticeably smaller and in the color of links that have ceased to be blue.

Characteristic changes:

• the number of main articles was reduced: from 2 articles with small illustrations to one, but with a large illustration;
• abandonment of the news.context area at the bottom of the page;
• adding third level headings below additional articles;
• the communists and their photographs were given a more prominent place;
• videos have a less attractive place on the page;
• the transition from searching through sections of the site to a simple search with the additional ability of an advanced search;
• change of temporary stamps from absolute (“October 4, 2002, 1:46 PM PDT”) to relative (“1 hour, 17 minutes ago”), the color of the stamps changes to gray (for frequently updated sites, relative stamps are better because they free users from the need to think about time zones);
• moving the time of the last update to a more noticeable place (sequential change, as a result of the transition to relative time stamps);
• the ability for users to save articles;
• adding the 'get up to speed' section.

Thus, even though both designs look identical at first glance, if you start using them, they will seem to be different rather than the same.

2011-2012 Moderate changes (example: Aetna)

The color of the main banner was very different, a new logo was used, but otherwise the two main pages were almost the same. Both were divided into 4 areas — the navigation bar, the main banner, news and detailed navigation, in addition, the size and content of all areas were almost the same.

However, when it came to using pages, more changes could be noticed.

As a small example, the 'get a quote' button has been shifted from the right side of the screen to the left. Also, a mysterious plus sign was added to the logo in the 2012 version (by clicking on it a message appeared saying that “we look different” with a link that provided more detailed information; it would be better to place this change in the news area and avoid incomprehensible plus).

However, a more important fact was the change in position of the main button 'get a quote'.

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

The only thing left untouched is the Find a Doctor option, which was moved to another location. The new area of ​​authorization was a definite improvement. It's better to start with keywords than with a company name .

In conclusion, links to the Chinese and Spanish versions were removed in 2012. Whether this is good or bad depends on the number of customers who need these languages. The 2011 version provided the opportunity to choose a language in a non-standard place for this (bottom right, below the first screen on most monitors that were used that year).

This is a good example of why it can be dangerous to rely on analytics to determine the value of a functional. Links to language changes were probably poorly visible in 2011, and therefore were removed. However, it would most likely be more convenient for people to use them if they were in the place expected for this (top right).

Increase Web Design Stability

The graph below shows the average change rate on monitored sites in each year compared to the same year earlier.



The trend is clear: huge changes in the beginning of the existence of the web, decline during the dot-com bubble and stabilization at 40% in recent years.

Of course, the curve has a slightly zigzag shape, because it is based on 3 parameters: the number of elements changed in each year, the importance of these elements, and how much they changed. However, the big picture shows: web design is stabilizing .

This is good news because users hate change. People prefer to use things in their usual way. In addition, a smaller step of change gives design teams more time to think and research.before they apply these changes to sites. Think before you do something. Again, this makes it possible to make changes more successful and effective.

An annual change of 40% corresponds to a complete redesign every 3 years (3 years, not 2.5, because some things change over and over before they are used in the final version). Progress, of course, does not stand still. We still need to make sites better, as can be clearly seen from the significant improvements and experiments that pop up when you look at the same sites year after year.

From a translator
For those who are interested, my other translations of Nielsen's articles are available:
Scrolling and attention
Proximity of actions and objects in interface design