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

Laisser un commentaire