SimpleWeb.fr

Après plusieurs années de surenchère graphique (coins arrondis, dégradés, reflets, typographies en image…) il semblerait que nous soyons rentré dans une phase de “retour aux fondamentaux” pour les sites web à forte audience. Illustration avec trois sites récemment rénovés qui ont opté pour une mise en page anguleuse (pour une isolation plus rigoureuse des unités d’information) et des couleurs bien tranchées (pour un meilleur contraste) : Castorama, Voyages SNCF et Crédit Agricole.

Le nouveau site de Castorama

Le nouveau site de Voyages SNCF

Le nouveau site du Crédit Agricole

Dans les trois cas, nous retrouvons les mêmes codes graphiques : boîtes carrés et recours massif aux aplats de couleur. Je ne peux que me réjouir de cette tendance à la simplification visuelle car le repérage et la lisibilité n’en sont que bien meilleurs.

Ce qui m’étonne par contre c’est pourquoi maintenant ? Pourquoi maintenant alors que la bande passante est de plus en plus large (grâce à l’ADSL et aux tarifs très compétitifs des fournisseurs d’accès), alors que nous sommes passés par le pire (”Skip intro“)… Ces choix graphiques auraient dû être adoptés il y a bien longtemps.

Le pite dans cette histoire est que nous commençons seulement à voir le bout du tunnel avec l’arrivée de navigateur qui supportent HTML5 et CSS3, donc peuvent nativement afficher les raffinements graphiques qui nous ont donné tant de mal par le passé (coins arrondis, dégradés, ombres portées, transitions, effets typographiques…). Serions-nous rentré dans une époque du design raisonné ? Peut-être. En tout cas je croise les doigts pour que cette tendance perdure et que nous ne nous perdions plus dans la surenchère visuelle.

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 2005

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 2006

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 2005

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 2005

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 2006

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.

Bon OK je sais le blanc n’est pas une couleur, mais pour ne pas nous perdre dans des querelles d’experts nous allons appelez ça une couleur. “Ça” ? Oui “ça“, ce non-élément graphique qui est l’élément le plus utilisé sur votre page web et à qui l’on peut faire dire de nombreuses choses. Je rebondis sur un article récemment publié chez WDL (Whitespace: The Underutilized Design Element) et qui m’a fait redécouvrir celui publié sur A List Appart (Whitespace).

Le blanc (”whitespace” en anglais) est en effet indispensable pour faire respirer une mise en page et éviter de saturer l’interface.

Exemple de mise en page saturée sans espaces blancs

Le blanc est essentiel à la fois pour structurer la grille de lecture (en mettant en évidence les colonnes verticales mais également les lignes verticales) et rythmer la page dans sa verticalité.

Le même texte avec un bon usage des espaces blancs

Les espaces blancs sont essentiels pour améliorer la lisibilité et pour concentrer l’attention. D’une part car ils facilitent le décryptage de la page (et son survol par l’oeil) et d’autre part car ils mettent en évidence les contenus qu’ils côtoient. Formulé autrement : si vous voulez mettre en évidence un bloc de contenus, oubliez les couleurs qui flashent et privilégiez plutôt de larges espaces blancs autours.

Dans l’exemple qui suit (Rikcat Industries), les espaces blancs permettent de faire ressortir les titres sans avoir recours à de la couleur :

Très belle mise en page minimaliste chez Rikcat

Les espaces blanc sont aussi très intéressants pou faire des regroupements comme ici sur le site d’Astheria ou le blanc permet d’associer les titres avec les chapô des articles :

Utilisation du blanc pour grouper des éléments sur le site d'Astheria

Enfin le blanc peut donner, s’il est bien utiliser, une impression d’élégance et de sophistication comme sur le site de Urban Outfitters :

Elégance et sophistication chez Urban Outfitters

Notez que lorsque l’on parle de blanc il peut également s’agir d’espaces vides, comme sur ce blog où le header est vide mais avec un léger dégradé.

Bref, le blanc est une couleur très puissante et un élément essentiel de l’architecture graphique de vos pages web. Je suis à la recherche d’écrits de référence sur ce sujet, si vous avez des suggestions, merci de les mettre dans les commentaires.

Connaissez-vous la limite de visibilité ? Il s’agit de la ligne horizontale d’une page au-dessous de laquelle le contenu n’est plus affiché à cause de la résolution de l’écran. Cette notion est directement héritée de la presse ou les gros titres devaient être imprimés sur la partie haute de la page, juste avant la pliure (d’où le “page fold” en anglais).

Jusqu’ici rien de problématique, si ce n’est une fausse interprétation de cette notion qui laisse entendre que les contenus sous cette fameuse limite de visibilité ne sont pas lus. Grave erreur d’interprétation car les utilisateurs savent scroller, encore faut-il leur en donner envie.

Il y  déjà eu ainsi de nombreux articles écrits sur le sujet : Blasting the Myth of the Fold, Worried about content “below the fold”? Don’t be, Debunking the Myth of the Page Fold in Web Design… et je pense qu’il y en aura encore de nombreux autres…

Mais reprenons depuis le début : la limite de visibilité. Grâce à la très complète étude publiée par le blog ClickTale (ClickTale Scrolling Research Report – Visibility and Scroll Reach), nous savons maintenant qu’en moyenne la limite de visibilité se situe entre 560 et 600 pixels :

Statistiques sur la limite de visibilité

OK très bien, mais j’attire néanmoins votre attention sur le fait que cet article a été publié en 2007 (date à laquelle la résolution 1024*768 était majoritaire) et que depuis le parc informatique a évolué et que nous comptons un peu plus d’écrans avec une résolution de 1280*800 et 1280*1024 (cf. W3counter). Mais bon ça ne change pas grand chose, pour le moment…

Intéressons-nous maintenant à une étude plus récente publiée par le cabinet CX Partners : The myth of the page fold: evidence from user testing. Ces derniers nous font ainsi partager les résultats d’une vaste étude de eye-tracking qui révèle grosso-modo la même chose : les utilisateurs savent scroller. Il suffit de regarder la longueur des pages de sites à très grosse audience pour s’en convaincre :

Les limites de visibilité de sites à fortes audiences

En fait l’astuce est de bien surveiller l’endroit où la page est coupée : si elle s’arrête dans une zone vierge, aucun repère visuel (si ce n’est la barre de défilement horizontale) ne vous indique qu’il y a du contenu en dessous. Illustration avec cette page produit :

Comment savoir qu'il y a du contenu en dessous ?

Par contre, si la limite de visibilité tombe en plein milieu d’un paragraphe ou d’une photo, cela créé une invite visuelle pour l’utilisateur :

Ici il est évident qu'il y a du contenu sous la limite de visibilité

Conclusion : La limite de visibilité ne pose problème que si vous ne fournissez pas de bonnes raisons (ou une invitation visuelle) pour inciter les utilisateur à scroller.

Dans la mesure où les avis concordent, il semblerait que ce point soit définitivement réglé… jusqu’à ce que les statistiques évoluent de façon significative ! Je vous donne donc rendez-vous dans deux ans pour en reparler.

Les netbooks sont devenus en moins de deux ans un authentique phénomène : vendus à 11 millions d’exemplaires l’année dernière, il pourrait s’en écouler près de 35 millions d’unités en 2009 (Netbook Sales Expected To Take Off). D’après les estimations, les ventes de netbooks devraient se stabiliser d’ici à 2010 avec 18 % de parts de marché (Netbook Market Forecast & Business Strategy).

Avec un tel volume de vente, les netbooks vont avoir un impact non-négligeable sur les services en ligne. J’ai déjà eu l’occasion de m’exprimer sur les changements à prévoir sur les habitudes d’utilisation de l’internet (Les netbooks vont-ils amorcer la révolution du web 3.0 ?) et sur l’utilisabilité des systèmes d’exploitation (Intel et Jolicloud à la recherche de l’interface parfaite pour les netbooks). Je m’interroge aujourdh’ui sur l’impact que les netbooks peuvent avoir sur notre façon de concevoir un site web.

Ces petites machines ré-introduisent ainsi des contraintes que l’on croyait résolues, à commencer par la résolution de l’écran (sources = W3 Schools) :

Évolution des résolutions d’écran sur les 10 dernières années

En moins de 10 ans, les petites résolutions d’écran (800*600 px) avaient presque complètement disparues. Avec plus de 90% de part de marché, la résolution 1024*768 était devenu la référence incontestée. “Était” puisque l’on commence à voir apparaitre des résolutions exotiques dans les statistiques :

Apparition de résolutions “exotiques” dans les statistiques

Nous retrouvons ainsi en 13ème position la résolution caractéristique des netbooks (1024*600 px) juste au dessus de celle des iPhones (320*396 px). Puisqu’il existe des versions spécifiques aux iPhones, pourquoi pas pour les netbooks ?

Oui je sais, vous pourriez me dire que cela ne serait pas très rentable de développer une version spécifique pour “seulement” 168 pixels de différence, mais cette différence peut être énorme lorsque cela concerne un bouton d’action. Illustration avec le site de Voyages SNCF :

La page d’accueil de Voyages-SNCF avec les deux limites de visibilité

Comme vous pouvez le constater sur cette capture, la page d’accueil fonctionne parfaitement en résolution 1024*768 mais tout se complique avec le 1024*600 car les boutons d’action sont sous la limite de visibilité.

Rassurez-vous, la situation n’est pas très dramatique car nous savons maintenant que la limite de visibilité n’est plus réellement un problème (cf. les articles Unfolding the Fold, et ClickTale Scrolling Research Report V2.0 Blasting the Myth of the Fold), mais ceci concerne surtout les sites de contenu, qu’en est-il des sites marchands ?

Peut-être pourrions-nous envisager des formulaires où le bouton d’action serait doublonné (comme sur Amazon) pour palier à ce déficit de visibilité en hauteur :

OK, mais ce n’est pas tout car les netbooks induisent d’autres contraintes :

• La saisie qui est rendu plus difficile par des claviers plus petits (surtout au niveau de la touche “Shift” qui est indispensable pour saisir des chiffres) ;
• La manipulation qui est également très difficile avec les minuscules pavés tactiles et les boutons qui sont parfois bizarrement positionnés (par exemple sur les côtés pour certains modèles) ;
• La lisibilité avec des écrans brillants (dalle “glossy” qui capte tous les reflets)…

Bref, je suis persuadé que les spécificités des netbooks devraient être prises en compte dans notre façon de concevoir les sites web et plus précisément les fonctions marchandes. Je n’ai pas la prétention de trouver une solution pour toutes ces contraintes dans cet article, mais juste d’attirer votre attention sur le “phénomène”.

Avez-vous également constaté l’apparition des netbooks dans vos statistiques de fréquentation ?

Aviez-vous déjà remarqué que les sites corporate des grands groupes US se ressemblent tous ? Nous savions déjà que le public américain est très friand de mises en page sobres (fond blanc, grille de lecture symétrique, typo unifiée…) mais de là à adopter une structure quasi identique… Jugez plutôt :

• Cisco
  

  La page d'accueil de Cisco

• IBM
  

  La page d'accueil d'IBM

• Chevron
  

  La page d'accueil de Chevron

• General Electrics
  

  La page d'accueil de General Electrics

• Ford
  

  La page d'accueil de Ford

Dans cette série nous retrouvons ainsi une structure à 5 niveaux qui facilite grandement le décryptage de la page et permet de bien exploiter la largeur de la page pour laisser un maximum de place à l’image centrale.

Nous avons donc une structure qui ressemble à ça :

La structure générique des sites corporate US

Cette uniformité est-elle due à un processus Darwinien ? Possible car je ne peux que reconnaitre l’efficacité de cette structure qui privilégie l’émotion (très large bandeau identitaire) tout en proposant un contrat de lecture limpide.

Est-ce cela que nous pouvons appeler une convention ? Peut-être : cette structure conviendra au plus grand nombre sans toutefois être une figure de style imposée.

Voyez-vous d’autres exemples ? Zurich ?

Avec les années la taille des écrans augmente, mais pas nécessairement celle de la surface d’affichage utile. Comprenez par là que si les résolutions d’écrans supérieures à 1024 px sont majoritaires (plus de 55% d’après le W3 Counter), les utilisateurs n’exploitent pas forcément la totalité de l’espace disponible. Résultat : la norme est indiscutablement de faire des mises en page de 1024 px de large (en fait 1005 px quand on tient compte de la barre de défilement verticale).

Problème : Comment faire pour afficher un maximum de choses dans la limite de visibilité (sans scroll de la page) ?

Solutions : 8 Layout Solutions To Improve Your Designs.

Dans ce très bon article, l’auteur nous livre ainsi différentes techniques pour virtuellement gagner de la place en jouant notamment sur les couches (layers en anglais) et sur une interface plus dynamique (entre autre) :

• Les carrousels et bandeaux défilants (ex. : Coda)
  

  Un exemple de carrousel

• Les onglets intérieurs (ex. : Fontecase)
  

  Un exemple d'onglets intérieurs

• Les fenêtres modales (ex. : KissMetrics)
  
• Le roll-over qui affiche un panneau de contenu (ex. : Miro)
  

  Un exemple de panneau affiché en roll-over

• La mise en page progressive qui fait apparaître le contenu au fur et à mesure des clics (ex. : Sursly)
  

  Un exemple de mise en page progressive

• Les grilles de lecture marquée qui autorisent une très grande densité d’information sur une seule page tout en assurant une bonne lisibilité (ex. : Neutron Creations)
  

  Un exemple de grille de lecture très marquée

• Les accordéons (ex. : Alex Cohaniuc)
  

  Un exemple d'accordéon

• Les menus sur-dimensionnés (ex. Porsche)
  

  Un exemple de menu sur-dimensioné

Voici donc une très belle collection d’exemples de ces différentes techniques permettant d’augmenter virtuellement le nombre de pixels.

Le haut de page est par définition la partie la plus visible d’une page web. Normal puisque vous n’avez pas d’autre choix que de consulter une page en commençant par le haut. Il est donc normal de soigner cette partie de l’écran.

Avoir un header efficace est un art bien maîtrisé par un grand nombre de sites web, mais quand est-il du sub-header ? Mais si enfin, ce bandeau horizontal qui vient se glisser au-dessus du header. Nous parlons bien d’un bandeau de quelques pixels de haut (entre 15 et 20) mais qui peut se révéler particulièrement efficace.

Illustration avec le New York Times qui s’en sert pour faire la promotion des nouvelles fonctionnalités :

Le sub-header du NY Times

Pour Twitter cette zone peut servir à faire de l’animation saisonnière :

Le sub-header de Twitter

Ce bandeau peut également être exploité pour diffuser des liens sponsorisés comme sur le blog du Capitaine Commerce :

Le sub-header du Capitaine Commerce

Les groupes peuvent également s’en servir pour faciliter le basculement d’une marque à une autre comme chez Land’s End :

Le sub-header de Land

Les plus audacieux enfin s’en servent même pour faire panier commun comme GAP :

Le sub-header de GAP

Avec ces différents exemples vous avez donc une panoplie assez large des possibilités offertes par le haut de page. J’espère surtout que ces exemples vous aurons convaincus du potentiel de cette zone de l’écran.

(via Blink)

Le blog UIE Brain Sparks vient de publier un billet des plus pertinent : The Question that Won’t Die: Optimal Screen Resolution?. Il y est question de la largeur d’écran idéale. Ça tombe bien puisque que l’on en parlait récemment (voir à ce sujet le billet précédent : Osez le 1024 pixels de largeur).

A la question quelle est la largeur d’écran idéale ? (800 ou 1024 pixels) la réponse de Jared Spool est sans ambiguïté : Il est bien plus important d’avoir du contenu pertinent. On n’a jamais vu une société faire faillite parce qu’elle avait une mauvaise largeur d’écran sur son site web, par contre l’inverse n’est pas vrai. Le plus pertinent est dans un premier temps de se concentrer sur le contenu et dans un deuxième temps de passer du temps avec les utilisateurs finaux pour savoir quelle largeur d’écran leur correspond le mieux.

Et toc, voilà qui clôt le débat ! En plus, cela fait écho avec un précédent billet : De l’art de se différentier par le contenu et l’usabilité.

/!\ Article initialement publié sur FredCavazza.net.