Evolutions des modes graphiques depuis 5 et 10 ans

Aujourd’hui je vous propose un voyage dans le temps pour comparer l’évolution des pages d’accueil des gros sites web sur ces 10 dernières années. En fait c’est l’article suivant qui m’a inspiré : The Evolution of Websites: How 10 Popular Websites Have (And Have Not) Changed. L’idée n’étant pas de se moquer mais plutôt d’analyser ces évolutions et d’en déduire des courants ou tendances.

Commençons dans l’ordre alphabétique avec Adobe :

La page d'accueil d'Adobe.com en 2000
La page d'accueil d'Adobe.com en 2000
La page d'accueil d'Adobe.com en 2005
La page d'accueil d'Adobe.com en 2005
La page d'accueil d'Adobe.com en 2010
La page d'accueil d'Adobe.com en 2010

Vous noterez que le look & feel n’a pas beaucoup bougé en 10 ans : Toujours ce bandeau noir en haut de page, toujours les mêmes couleurs (rouge, noir, blanc et gris foncé), une mise en page carrée et une forte concentration de liens sur la bas de la page.

Poursuivons avec Amazon :

La page d'accueil d'Amazon.com en 2000
La page d'accueil d'Amazon.com en 2000
La page d'accueil d'Amazon.com en 2006
La page d'accueil d'Amazon.com en 2006
La page d'accueil d'Amazon.com en 2010
La page d'accueil d'Amazon.com en 2010

Outre l’abandon de la navigation par onglets en 2007 (au profit d’un bloc dépliable), le look & feel est d’une constance exemplaire avec une palette de couleurs et un logo quasi identiques, des blocs et un coeur de page toujours très épurés pour bien faire ressortir les produits. Notez que c’est quasiment le seul “gros” site web au monde à ne pas modifier le traitement graphique des liens.

Intéressons-nous à Apple :

La page d'accueil d'Apple.com en 2000
La page d'accueil d'Apple.com en 2000
La page d'accueil d'Apple.com en 2005
La page d'accueil d'Apple.com en 2005
La page d'accueil d'Apple.com en 2010
La page d'accueil d'Apple.com en 2010

Là encore je ne peux qu’être admiratif devant la cohérence de la mise en page qui n’a pas bougée depuis 10 ans : Une barre de navigation, un visuel en pleine largeur, un bandeau pour les news et 3 ou 4 blocs de mise en avant. Vous noterez également l’absence du nom de la marque écrit en toutes lettres (juste le logo dans le premier item de navigation). Je trouve personnellement que les visuels détourés avec un léger ombrage n’ont pas pris une seule ride.

Voyons maintenant le site de Microsoft :

La page d'accueil de Microsoft.com en 2000
La page d'accueil de Microsoft.com en 2000
La page d'accueil de Microsoft.com en 2005
La page d'accueil de Microsoft.com en 2005
La page d'accueil de Microsoft.com en 2010
La page d'accueil de Microsoft.com en 2010

Alors que ce site a longtemps conservé son aspect très sobre qui fonctionnait plutôt bien (beaucoup de liens, très peu d’illustrations), ils ont récemment décidé d’adopter une intention graphique plus soignée et une navigation locale par onglets verticaux dans la moitié inférieure de la page (la mise en page est très déroutante). Vous pouvez néanmoins constater qu’ils conservent toujours une forte densité de liens pour faciliter l’accès aux contenus importants.

Finissons avec Yahoo! :

La page d'accueil de Yahoo.com en 2000
La page d'accueil de Yahoo.com en 2000
La page d'accueil de Yahoo.com en 2006
La page d'accueil de Yahoo.com en 2006
La page d'accueil de Yahoo.com en 2010
La page d'accueil de Yahoo.com en 2010

Tout comme Microsoft, Yahoo a longtemps été fidèle à sa mise en page : Le logo entouré de raccourcis vers les services principaux, la barre de recherche, la colonne centrale réservée aux liens et la colonne de droite un peu plus éditorialisée. Depuis peu cette mise en page a été complètement revue avec un système de navigation latérale dépliable et une zone centrale façon “Une”. Même si cette dernière version présente une bonne lisibilité et une densité d’information bien répartie, je ne peux que regretter les anciennes versions qui symbolisait l’attachement de Yahoo! à son héritage historique (l’annuaire).

Même s’il n’est pas réellement possible d’en tirer des tendances, cette belle collection de pages d’accueil permet de mettre en valeur un élément essentiel : la constance. Adobe, Amazon et Apple ont ainsi su capitaliser sur leur propre signature graphique (jeu de couleurs, mise en page…) alors que Microsoft et Yahoo! semblent avoir rompu avec le passé en opérant une réorientation dans leur univers graphique / ergonomique.

Notez que ces réorientations graphiques coïncide avec un changement de stratégie pour ces deux derniers qui souhaitent changer d’image. Dommage car les internautes y perdent leurs habitudes. Faut-il en déduire qu’une refonte est une opération délicate ? Oui et non : Oui car une refonte n’est pas une opération anodine (perte de repères) mais permet de corriger d’un coup de nombreuses faiblesses ergonomiques ; Non car il est tout à fait possible de conserver des couleurs, formes ou tonalités de l’ancienne version.

Pour finir je conclurais là-dessus : Changer n’est pas un problème (surtout si c’est pour améliorer) mais changer en douceur est encore mieux car cela évite de perturber les utilisateurs (et par la même Google qui pénalise durement les modifications dans l’arborescence). Je ne répèterais jamais assez qu’un site web n’est pas une application informatique, il ne faut donc pas raisonner en évolutions majeures (une nouvelle version tous les 2 ou 3 ans) mais plutôt en micro-évolution permanentes.

6 commentaires pour “Evolutions des modes graphiques depuis 5 et 10 ans”

  1. Posté par Gilles a dit : le

    Bonjour

    Analyse intéressante, d’autant que bon nombre de client, quand il s’agit de se refaire une jeunesse veulent bien souvent “tout remettre à plat”. Sans doute parce que, parti d’une analyse profonde de leur besoin (et d’un vrai désir d’être “au top”), le site au fil du temps part “en live” à cause d’oubli dans sa conception (ajout de bloc en tout genre, d’encarts publicitaires et de partenariats en tout genre). Au bout d’un temps, le site ne ressemble plus à rien, devient une “usine à gaz” et s’égare dans les méandres d’une technique, qui doit tout faire pour palier au manque de cohérence de sa gestion.

    Un client qui veut renouveler son site, ne le fait bien souvent que pour coller à la sacro-sainte tendance (“mon site est vieux”) et ne payera pas le juste prix d’une “mise à jour” graphique qui lui permettrai de rester cohérent.

    Un petit mot pour les blogguer qui change de thème (wordpress, joomla, etc) sans penser à cette donnée importante : l’habitude de navigation. Un internaute qui ne sait plus ou cliquer est un internaute difficile à garder. Hors changer de thème c’est la plupart du temps modifier la structure du site (entête, onglets, menu, encarts visuels, pied de page, etc.).
    Difficiel à faire mais comme vous le disiez, il vaut mieux des micro changements (pour les moteurs ou les internautes) que des révisions complètes.

  2. Posté par Guillaume a dit : le

    Bonjour,
    Pour reprendre le cas de Yahoo!, je leur reprocherais plus d’avoir conservé un design constant entre les deux premiers screenshots. En effet, Yahoo! passe alors d’annuaire à moteur de recherche. Le site se permet donc de mettre son portail en avant, de la même manière qu’il mettait ses catégories en valeur. Très déstabilisant…
    Ensuite la deuxième refonte est sensée permettra à Yahoo! d’être utilisé comme page d’accueil (comme iGoogle et Netvibes). Yahoo! change de positionnement, ils change de design, ça me semble plutôt logique. Après on peut remettre en question l’intérêt du changement de positionnement…

  3. Posté par Ecommerce Wall a dit : le

    Mis à part Apple, qui est tout simplement visionnaire depuis le début, je note surtout une simplification visuelle des pages, la présence d’une grande image centrale et moins de liens textes.
    Apple est quand même très fort en marketing … ;-)
    Merci pour cet article

  4. Posté par FredCavazza.net > L’actualité de mes autres blogs (février 2010) a dit : le

    [...] Evolutions des modes graphiques depuis 5 et 10 ans ; [...]

  5. Posté par France Montagne été a dit : le

    Un article très intéressant qui dans le domaine du e-tourisme est aussi très instructifs ! Sans objectif de vente directement lié, on pense souvent que faire du neuf, c’est changer la charte graphique, incorporer toutes les nouveautés techniques du web (flash a fait des ravages dans ce domaine)… Et on oubli trop souvent que le web c’est de la communication, de la continuité et de l’efficacité dans le temps ! L’exemple d’une communication produit par Apple reste en effet assez visionnaire !

    Merci pour cet article instructif ! J’en profite pour agréger le blog à mon RSS !

  6. Posté par Thomas a dit : le

    Le lien ci-dessous est une conférence qui a eu lieu dans le cadre du Paris web 2009. Elle explique tout l’intérêt du design itératif notamment pour les sites de grandes envergures.

    http://www.dailymotion.com/video/xbglwe_design-iteratif-pour-un-site-web-de_tech