Jacob Nielsen :: Changing the design of the main pages

Annotation: web design becomes more stable - on average, about 40% of the main pages of sites change during the year (compared to the full redesign, which 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 was a year ago gives me the opportunity to determine the degree of how the design of the main pages changes.
')
Let's start by looking at a few typical examples from my collection.

1994–1995 Huge changes (example: Microsoft)

These are the classic main pages of the beginning of the web: many graphical elements without any traditional GUI elements.

Also, it is clearly seen here 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 intact element after redesign was the name of the company itself.

2002—2003 Mean changes (example: CNET News.com)

The number of design changes in this example illustrates a common occurrence in years after the dotcom 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 - the 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, each of which had a title and about 3 lines of description.

However, if you look at the little things more attentively, we will see that the design of 2003 worked differently than it did 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 the 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 grinder, although it was trimmed down to Personal Tech.

In addition, the preservation of the yellow strip created visual integrity, and the design itself was radically changed, most of which can be seen in the headings, which have become noticeably smaller in the color of the links, which are no longer blue.

Characteristic changes:

• the number of main articles was reduced: from 2 articles with small illustrations to one, but with a large illustration;
• rejection of the news.context area at the bottom of the page;
• adding third level headings below additional articles;
• Columnists and their photos were given a more prominent place;
• videos got less attractive place on the page;
• the transition from the search sections of the site to a simple search with the additional possibility of advanced search;
• changing time stamps from absolute (“October 4, 2002, 1:46 PM PDT”) to relative (“1 hour, 17 minutes ago”), the color of the stamps changed to gray (relative to 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 prominent place (sequential change, as a result of the transition to relative time stamps);
• opportunity for users to save articles;
• Add section 'get up to speed'.

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

2011—2012 Moderate changes (example: Aetna)

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

However, when it came to the use of 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 put this change in the news area and avoid incomprehensible plus).

However, a more important fact was the change in the 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 has been moved to another location. A new area of ​​authorization was a definite improvement. It is better to start with keywords than with the name of the company .

Finally, references to the Chinese and Spanish versions were removed in 2012. Good or bad depends on the number of customers who need these languages. The 2011 version provided an opportunity to choose a language in a non-standard place (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, determining the significance of the functional. References to language changes were probably not very noticeable in 2011, and therefore were removed. However, it would probably be more convenient for people to use them if they were in the place expected for this (top right).

Increased stability in web design

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



The trend is clear: a huge change at the beginning of the web, a decline in 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 have changed. However, the big picture shows: web design is stabilized .

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

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

From translator
For those who are interested, my other translations of Nielsen’s articles are available:
Scrolling and attention
The proximity of actions and objects in the design of interfaces