En ce moment la communauté des concepteurs est en ébullition à propos des interfaces mobiles. Nous pensions avoir trouvé une solution à la multiplication des formats d’écran (ordinateur + smartphone + tablette) avec les mises en page en responsive design, mais c’était sans compter l’imagination des constructeurs. Pour éviter la concurrence directe avec l’iPhone et l’iPad, les constructeurs ont commencé à sortir des formats intermédiaires (phablets de 5 pouces, mini-tablettes de 7 pouces…). En conséquence de quoi les concepteurs doivent maintenant jongler avec un éventail très large d’écrans et de terminaux.

Si la question de la mise en page est à peu près réglée avec les techniques de responsive design, cette multiplication des formats est problématique pour les systèmes de navigation (lire à ce sujet : Les tablettes méritent des interfaces dédiées). La façon dont l’utilisateur tient son terminal a un impact sur la facilité d’accéder aux menus de navigation qui ne doivent pas nécessairement se trouver en haut de page, comme c’est de rigueur avec une page web affichée sur un ordinateur. Les smartphones tout comme les tablettes sont ainsi généralement tenus par le bas, les pouces étant alors les seuls doigts disponibles pour manipuler l’interface.

Partant de ce constat, Luke Wroblewsky et Jason Weaver se sont penchés sur le problème et proposent une solution tout à fait convaincante : Responsive Navigation: Optimizing for Touch Across Devices. Leur idée est de proposer un système de navigation adaptatif qui se positionne en bas de l’écran pour les smartphones et qui est même divisé en deux pour les tablettes.

Je vous invite à constater le résultat sur ces pages : Off Canvas with Navigation Fixed Bottom et Off Canvas with Split Navigation Fixed Bottom.

Le résultat est très convaincant et apporte un plus indéniable en confort d’usage, l’auteur donne un peu plus de détails ici : Exploring Touch Navigation.

Signalons que ce n’est pas la première fois que ces deux personnes collaborent, car elles avaient déjà proposé une solution de mise en page adaptative : Off Canvas Multi-Device Layouts et A Multi-Device Web Layout Pattern. Cette technique permet ainsi d’afficher une mise en page et un menu de navigation différents en fonction du terminal :

Vous pourriez me dire que tout ceci est un peu complexe à maintenir, mais je vos répondrait qu’avec des techniques avancées comme RESS vous pouvez vous simplifier la vie : Améliorez la performance de vos interfaces mobiles avec RESS.

Je pense ne pas me tromper en disant que plus nous avançons dans le temps et plus la situation se complique avec la multiplication des formats de terminaux. Heureusement les techniques de développement gagnent en sophistication tous les ans et permettent de contourner ces difficultés. Reste encore à gérer LE gros point faible des ces astuces : les systèmes de gestion de contenu dont les gabarits de page ne facilitent pas la travail d’intégration.

Pendant ses dix premières années, le web a su séduire le grand public avec uniquement du texte et des images. Puis vint l’avènement de la vidéo avec YouTube. Puis vient la révolution des terminaux mobiles avec l’iPhone et l’iPad. Nous sommes maintenant en 2012 et plus personne ne veut lire à l’écran : trop fatigant, trop long, trop… ringard. Les articles et contenus sont maintenant mis de côté pour être lus sur un smartphone ou une tablette, ils sont synthétisés sous forme d’infographie ou sont tout simplement ignorés (on se contente de les tweeter si le titre est accrocheur ou des les épingler s’ils contiennent une photo sympa). Une réalité bien triste… Face à cette bien triste réalité, les navigateurs s’organisent en proposant un mode de lecture comme Safari ou des extensions comme Clearly ou Readability, mais je ne peux m’empêcher de penser que ce ne sont que des caches-misère.

Heureusement, certains éditeurs de site relèvent le défi en proposant une expérience de lecture à l’écran beaucoup plus agréable. Cette expérience est conditionnée par plusieurs choses :

• La mise en page (lignes pas trop larges, photos et vidéos bien intégrées, pas d’éléments parasitant l’attention) ;
• La densité d’information (avec un interlignage optimisé et des paragraphes pas trop longs) ;
• La typographie utilisée pour le texte, les titres et intertitres…

Je précise au passage que tout ceci est maintenant grandement facilité avec les navigateurs récents qui savent correctement afficher les CSS3 qui autorisent des choses tout à fait intéressantes : Vers une scénarisation des contenus textuels.

De mémoire, le premier éditeur à avoir fait volontairement un gros effort est Google avec son Think Quaterly :

Vous pourriez me dire que dans ce contexte précis les choses sont plus simples, car c’est un site dédié. Soit, mais laissez-moi alors vous parler de l’admiration que j’ai pour The Verge, un blog de gadgets qui propose les plus belles pages d’article que j’ai pu voir en 12 ans de carrière :

Le travail de composition et de mise en page sur ce site (pourtant à très gros tirage) est tout simplement splendide.

Toujours dans cette lignée, je vous engage vivement à explorer le très impressionnant Ridebook de Harley-Davidson :

Là encore, la mise en page a été particulièrement soignée pour intégrer de façon élégante les différentes photos et la vidéo. Un travail pas si compliqué si l’on utilise le bon outil (le tout étant d’exploiter un outil de gestion de contenu avec un mécanisme de gabarits de page suffisamment souple).

Sans partir dans des expérimentations techniques trop proches de ce que l’on trouve sur les tablettes (à l’image du Experimental Page Layout de Tympanus), je suis convaincu qu’il serait tout à fait possible d’appliquer les mêmes formules pour un site institutionnel ou même pour des pages produit.

Bon par contre tous les exemples cités utilisent du texte aligné à gauche, alors que je suis un grand défenseur du texte justifié. Mais ce n’est qu’une question de goût (et sûrement parce que j’ai un côté psychorigide). Et vous, quel alignement préférez-vous ?

Vous ne l’aviez sûrement pas remarqué, mais le thème de ce blog a été entièrement réécrit en HTML5. Le but de cette refonte n’était pas de revoir la charte graphique (qui me convient bien), mais de se livrer à un exercice de remise à niveau du code. J’ai donc demandé à mes anciens collègues de Mahi-Mahi (et notamment Alex) de se pencher sur la question et vous avez le résultat sous les yeux : un thème graphique identique au précédent, mais avec un temps de chargement divisé par deux (on passe d’une page d’accueil de 2 Mo à 880 Ko) et une mise en page en responsive design qui s’adapte automatiquement à l’écran du terminal que vous utilisez (cf. Le responsive design à l’assaut des terminaux mobiles).

Donc concrètement ce blog est beaucoup plus rapide à charger (moins de 7 secondes au lieu de 14), et sa mise en page s’adapte à la largeur de la fenêtre ou du terminal utilisé. Ici vous avez les deux versions smartphone et tablette :

Nous avons également travaillé sur une version “grand large” (notamment avec un test sur deux colonnes, mais qui n’était pas concluant) :

L’adaptation de la mise en page à la taille de la fenêtre est très ludique, mais je peux vous assurer que c’est un véritable casse-tête à faire fonctionner correctement.

Pour rentrer dans les détails, voici les tâches réalisées sur la structure HTML :

• Utilisation de HTML5 et des rôles ARIA (Passer son blog WordPress à la sémantique HTML5 et ARIA) ;
• Ajout de la microdata Article ;
• Utilisation des media queries pour adaptation aux différentes tailles d’écrans (avec une adaptation des déclarations du Less Framework) ;
• Adaptation des tailles de vidéo à la taille du contenu parent (la largeur des vidéos s’adapte en fonction de l’espace disponible dans la colonne de gauche du site grâce à FitVidsJS) ;
• Pour la gestion des images, il y a une détection des plateformes mobile (Android, iPhone, Windows 7 mobile…) pour retailler les images à 320 pixels de large (utilisation de Sencha IO, mais qui pouvait aussi être faite avec le plugin jQuery Doubletake) ;
• Création d’un media print pour l’impression de l’article ;
• Les dégradés et autres effets graphiques sont réalisés en CSS3 (Fading au chargement du logo et de la baseline sur la page d’accueil, légère animation sur les liens au survol de la souris ;
• Une seule image est utilisée (le logo), ce dernier est appelé en data-uri dans la feuille de style (aucun appel d’image du thème pour les navigateurs modernes) ;
• Création d’une webapp pour distribuer le blog sur le webstore de Chrome.

Voici également les travaux effectués sur la version mobile :

• La page d’accueil “version mobile” ne présente que l’excerpt des 10 derniers articles et non l’intégralité des 10 derniers articles (la page “normale” pèse 1,6 Mo alors que la page “mobile” pèse 158 Ko) ;
• Les liens vers les autres blogs en haut de page sont remplacés par un menu déroulant (Convert a Menu to a Dropdown for Small Screens) ;
• Utilisation du appcache permettant de consulter le blog en mode hors-ligne ;
• Gestion de l’orientation pour les tablettes (en mode portrait, le barre latérale passe sous la zone centrale) ;
• Masquage par défaut du moteur de recherche sur les smartphones ;

Concernant Internet Explorer, voici les astuces utilisées :

• Pour IE 10, utilisation basique des dégradés et media query ;
• Pour IE 9, reprise des linear brackground en filter et utilisation de Pinned Site ;
• Pour IE 8 et inférieur, Utilisation du respond.js pour assurer l’adaptation de la mise en page.

Vous remarquerez que la mise en page se dégrade de très belle manière dans IE 6 :

Comme vous pouvez le constater, le résultat est donc à la fois performant et robuste. Je tire donc mon chapeau à Alexandre qui s’est réellement arraché les cheveux pour me proposer les solutions les plus élégantes. Si vous souhaitez plus d’explications, vous pouvez directement lui poser des questions sur @BrettSinclair, sinon vous pouvez également consulter des ressources en ligne sur Mobile Boilerplate ou Stuff and Nonsense. Si vous avez des remarques sur les choix retenus pour cette refonte du code, n’hésitez pas à vous exprimer dans les commentaires, par contre soyez constructifs.

Encore bravo à l’équipe de Mahi-Mahi qui devrait dans les prochaines semaines s’attaquer également à la ré-écriture en HTML5 de RichCommerce.fr, un thème graphique plus complexe…

Le web est constitué d’une infinité de sites, plus ou moins jeunes. Certains sites changent régulièrement, d’autres sont tellement connus qu’ils se contentent d’une refonte tous les 10 ans (W3C, IMDB, MSDN… quand les dinosaures se font une jeunesse), d’autres doivent se faire forcer la main (Propositions de refonte pour Wikipedia et Craigslist). Même s’il n’existe pas réellement de règle sur la fréquence idéale de mise à jour ni sur l’obligation de coller aux “tendances” graphiques, il y a toujours des irréductibles pour traîner des pieds. De façon surprenante, les dernières refontes majeures d’Amazon et Ebay datent d’il y a 4 ans, à moins d’un mois d’intervalle (Une nouvelle version pour eBay et Une nouvelle version pour Amazon). Ils se sont visiblement donnés le mot, car les deux ancêtres de l’internet se en train de déployer quasi simultanément une nouvelle version.

Commençons par Ebay qui semble avoir lancé son chantier légèrement en avance avec une mise en page à étages :

Cette nouvelle page d’accueil privilégie visiblement la sobriété, car elle suprime la couleur jaune historiquement utilisée dans le menu de navigation. Pour cette nouvelle version, nous avons donc droit à une hiérarchisation très formelle des unités d’information : la recherche, la navigation, la réassurance (Welcome, Shop safely) et la communauté (Popular). Une large place est encore réservée à la publicité et à l’auto-promotion (le gigantesque carrousel au centre de la page).

Concernant la page intérieure, un gros effort a été fait pour simplifier la compréhension des différentes versions d’un même produit (New, Refurbished, Used, Bundles…) et une présentation beaucoup plus proche de ce que l’on trouve sur des sites marchands traditionnels :

Avec cette refonte, Ebay souhaite donc développer la performance marchande de sa plateforme, au détriment peut-être de ses contenus ou de la communauté.

Pour Amazon la refonte est plus radicale avec un objectif d’interopérabilité : Amazon is testing a slick new site design, built with tablets in mind. Le haut de page est donc réduit au minimum avec un menu de navigation replié par défaut et un gigantesque moteur de recherche :

Visiblement cette refonte n’est que partielle, car elle ne concerne que le header. Vous constatez de plus que sur la version ci-dessus ce dernier est utilisé à des fins d’auto-promo, mais que dans sa version standard, le traitement graphique du header est d’une sobriété à toute épreuve :

Nous avons donc confirmation que le coeur de page ne change pas et que la refonte se concentre sur une réorchestration du header et principalement du menu de navigation. La raison de cette refonte est très simple : Le menu de navigation actuel fonctionne très bien sur un ordinateur, mais est très problématique sur une tablette où il n’est pas possible de survoler un item avec la souris.

Outre une plus grande sobriété pour donner plus d’importance aux produits, la motivation première d’Amazon semble donc être d’anticiper la montée en puissance des tablettes avec une conception orientée multi-écran. Pour le moment cette nouvelle version n’est pas encore déployée en Europe, et j’attends avec impatiente de pouvoir la tester sur différents terminaux mobiles.

MàJ (21/09/2011) : Visiblement l’approche d’Amazon fiat des émules car la BBC s’y met également : The BBC debuts new touchscreen-inspired homepage design.

Avec la généralisation des écrans plats, la résolution moyenne des moniteurs qui équipent les internautes est en constante hausse (cf. StatCounter Global Stats). En conséquence de quoi, les pages des sites web s’allongent de plus en plus. Mais qui dit “pages qui s’allongent” dit “menus de navigation qui s’éloignent“. Le (petit) monde de l’ergonomie web est donc en train de débattre sur les menus de navigation qui restent collés en haut de l’écran (Docking Navigation Bars) et même les pieds de pages statiques (Static Footer Bars).

On retrouve ainsi un très bel exemple de menu de navigation qui se positionne au-dessus du contenu lorsque vous parcourez la page chez GamePro :

De même, on trouve un exemple de pied de page statique chez Cnet :

Dans ces deux précédents exemples, la gène est minime, car ces bars affichés en permanence ne prennent pas trop de place. Par contre, on ne les remarque pas forcément (surtout le pied de page de Cnet).

On trouve également des exemples de pied de page statique sur des sites marchands comme Comet :

Une astuce très pratique, car cette barre permet de caser le comparateur et la liste des derniers produits visités, le tout sans prendre trop de place.

L’intérêt de telles techniques est discutable :

• Dans le cas d’un site de contenu, elle facilite surtout le zapping d’une page à l’autre (augmentant mécaniquement le nombre de bannières affichées) ;
• Dans le cas d’un site marchand, elle déplace dans une zone moins exposée au regard des fonctions à valeur ajoutée (comparateur et liste des derniers produits).

Je suis tout à fait d’accord avec les premières conclusions exposées dans l’article : les hauts et pieds de page statiques ne compensent en rien un système de navigation / repérage défaillant. Ceci étant dit, il est tout à fiat possible de proposer des améliorations aux exemples cités plus haut :

• Ne pas imposer ces barres affichées en permanence et donner la possibilité de les replier ;
• Utiliser un fond transparent pour ne pas trop réduire la surface d’affichage ;
• Ne pas utiliser toute la largeur de la page, mais seulement une partie (comme peut le faire Chrome avec sa status bar) ;
• Ne pas se reposer uniquement sur ces barres et doubler les fonctionnalités dans la page elle-même.

Plus que pour les sites de contenu, c’est avant pour les sites marchands que je vois un intérêt à cette technique. Il serait ainsi tout à fait envisageable de combiner les deux : le panier, compte-client et pourquoi pas la recherche dans la barre de haut de page, le comparateur, les derniers produits visités et même le rubricage dans le pied de page.

Je n’ai pas encore trouvé de site utilisant les deux, mais si vous avez des exemples, je suis preneur.

Ces derniers temps je parle de plus en plus des terminaux mobiles, et pour cause : ils prennent une place de plus en plus importante dans notre quotidien et surtout dans notre consommation de l’internet (services et contenus). Avec la multiplication des plateformes mobiles et même des formats de terminaux alternatifs, les concepteurs de sites et services en ligne s’arrachent les cheveux pour trouver des solutions à cette fragmentation.

Présentée à la communauté l’année dernière, la technique du Responsive Web Design semble apporter une réponse concrète à la prolifération des formats d’écran. Jusqu’à présent, lorsqu’un internaute visitait un site ayant plusieurs interfaces, il était redirigé vers la version du site qui correspondait le mieux à son mode d’affichage (ex : IMDB.com qui renvoie vers m.IMDB.com si vous le consultez avec un smartphone). Le principe du Responsive Web Design est de ne proposer qu’une seule URL avec une interface qui s’adapte en fonction de votre écran en exploitant différentes feuilles de styles CSS (et les media queries qui peuvent maintenant s’exprimer en largeur de page).

L’exemple ci-dessus vous permet de tester ce principe en redimensionnant la fenêtre de votre navigateur. Ce n’est donc pas qu’une question de largeur de page, mais une nouvelle façon de penser les interfaces web. L’approche de l’auteur (traduction française disponible ici : Le Web Design Réactif) est donc de prévoir à la fois une mise en page qui s’adapte (nombre et largeur des colonnes), mais également des images qui se redimensionnent et même des éléments qui sont repositionnés voir supprimés.

Ce type d’interface demande un minimum d’expertise et surtout un gros travail de préparation en amont pour “penser” une interface en plusieurs largeurs. Il existe heureusement un certain ombre d’article traitant de ce sujet :

• Responsive Web Design: What It Is and How To Use It
• Understanding the Elements of Responsive Web Design
• Les Media Queries CSS3
• The best responsive web design examples and resources

Avec la récente sortie de nouvelles versions de navigateurs (IE9, Firefox 4, Chrome 11, Opera 11…), l’utilisation de ce type de technique va devenir une réalité et évitera de devoir passer par du code javascript et des acrobaties pour assurer une t-rétro-compatibilité.

Encore une fois, c’est un sujet assez technique, mais qui concerne une approche radicalement novatrice dans la distribution de contenus et services en ligne. La plupart des réalisations déjà disponibles concernent des sites de designeurs (visibles sur MediaQueri.es), mais nous commençons à voir des sites de beaucoup plus grosse importance adopter cette technique comme la rubrique Election du Chicago Tribune :

Les exemples listés sur MediaQueri.es sont illustrés en 3 largeurs (smartphones, netbooks/tablettes et ordinateurs) mais peuvent potentiellement s’adapter à n’importe quelle interface (téléphones mobiles, TV connectées, consoles portables…). Je suis particulièrement enthousiaste quant à cette approche de la mise en page d’un site ou service en ligne. D’ailleurs une réécriture du gabarit de ce blog est en cours pour justement exploiter les medias queries. Des explications détaillées seront publiées quand ce nouveau thème sera en ligne.

Si je m’en tiens à la définition de Wikipedia : “Un site Web est un ensemble de pages Web hyperliées entre elles“. OK, mais qui a dit qu’un site web devait nécessairement être composé de plusieurs pages ? C’est sur cette réflexion que le blog Six Revision nous propose un article très intéressant : The Science Behind a Single Page Website.

Les arguments en faveur d’un site web à page unique sont les suivants :

• Tout le contenu est chargé en une seule fois ;
• Scroller est moins compliqué et risqué que de cliquer ;
• La maintenance est plus simple ;
• La densité d’information favorise un meilleur référencement.

Les arguments en défaveur des sites web à page unique sont les suivants :

• Le site est plus long à charger ;
• Le site est généralement truffé de javascript pour proposer une navigation locale (au sein de la page) ;
• Les utilisateurs peuvent être désorientés.

Une fois ces arguments énoncés, la visite d’un certain nombre de sites à page unique a finalement réussi à me convaincre de l’efficacité de cette technique : 30 Outstanding Single Page Website Designs, 88 Single Page Website Designs For Design Inspiration, 50 Examples of Modern Single Page Website Designs et aussi One Page Love.

Au final, si vous n’avez pas grand chose à raconter ou si vous savez limiter le contenu au strict minimum, cette solution s’avère particulièrement efficace. Prenons par exemple les sites dédiés à des applications mobiles qui peuvent se contenter d’une description, de quelques captures d’écran et d’un détail des fonctionnalités en bas de page comme Camera+ ou Goin’ Nutty :

De même, il existe un certain nombre d’applications en ligne à périmètre restreint qui ne nécessitent pas un site à plusieurs pages comme Silverback (ou dans une certaine mesure Basecamp), le contenu est réduit au strict minimum et est déroulé sur la hauteur de page :

Même chose pour Coda qui propose par contre un système d’onglets intérieurs pour réduire la hauteur de la page :

Beaucoup plus intéressant, certains sites marchands se content également d’une seule page comme ici pour ce modèle unique de noeud papillon chez Blixt & Dunder :

Cet exemple n’est pas le seul, car il est également possible d’en faire de même pour des produits dématérialisés comme chez Red+White.

Dernier exemple avec Grooveshark, un service d’écoute de musique en ligne :

Au final en cherchant un peu, vous pouvez vous rendre compte qu’un site avec une page unique bien conçue peut faire beaucoup mieux qu’un site avec plusieurs pages et du contenu éparpillé. Bien évidemment ceci ne concerne qu’une minorité de sites, mais cette solution me semble tout à fait viable à partir du moment où l’information apportée est pertinente et que les fondamentaux ergonomiques sont respectés (lisibilité, hiérarchisation de l’information…).

Je suis fan, pas vous ?

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.

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 :

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 :

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 :

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 :

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! :

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.

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é.

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 :

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 :

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 :

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.