Afficher une grande quantité d’information à l’écran est un sacré challenge, mais ce n’est pas une raison pour faire n’importe quoi ! Illustration avec la version française du HuffingtonPost qui a été lancée hier matin à grand coup de ramdam médiatique. Il n’y a pourtant pas de quoi être fier tant le site est… (je préfère m’abstenir de le qualifier pour ne pas verser dans la vulgarité et je me range derrière l’avis de Geoffrey : Y’a-t-il un designer pour sauver le Huffington Post ?).

Même si je ne souhaite pas prendre la défense des personnes responsables de cette infamie, je constate qu’en règle générale le secteur ne brille pas par son originalité. En témoignent des sites d’actualité français qui se ressemblent tous : Le Monde, Libération, Le Parisien et Le Figaro… Mais ce ne sont pas les pires, car d’autres s’illustrent par leur mise en page complètement déstructurée (20 Minutes) ou très tassée (L’équipe).

Ceci étant dit, les grands titres US souffrent également d’une très forte densité d’information. Ils sont, certes, très sobres (une qualité que j’apprécie), mais pas non plus très inspirés comme le NY Times, Washington Post, le LA Times ou le Boston Globe.

Vous noterez que certains titres ont fait des efforts comme USA Today ou NPR. Les concurrents outre-Atlantique proposent, eux, une mise en page plus aérée et surtout plus de couleurs comme le site du Guardian ou celui de la BBC.

Dans la même lancée, les sites de magazines américains comme Newsweek, Salon ou encore The New Yorker proposent plus d’espace et d’originalité (une typographie spécifique et même un petit papillon qui virevolte au-dessus du logo).

Bref, tout ça pour dire que la solution miracle n’existe pas… ou qu’ils ne l’ont pas trouvé ! Un constat affligeant également partagé par d’autres : Designing a big news site is about more than beauty. Le designer Andy Rutledge propose d’ailleurs un nettoyage très réussi du site du NY Times :

Vous pourriez me dire qu’une mise en page aussi épurée relève du fantasme tant les contraintes que l’éditeur doit prendre sont nombreuses (bannières, offres de partenaires, confits éditoriaux…), mais pourtant d’autres ont fait ce choix de clarté et de minimalisme avec brio comme le très bon site de Inc.

Je ne peux pas terminer ce passage en revue des sites d’information sans mentionner la très réussie maquette du site d’Owni qui tranche avec tout ce que l’on connait :

La page d’accueil est ainsi coupée en deux par la frise de photos et propose une imbrication de bloc-articles dans sa moitié basse :

Au final, nous sommes bien d’accord pour dire que l’important est la qualité du contenu et non la présentation. Ceci étant dit, je ne me risquerais pas à dire que le site d’Owni est mieux que celui du Huffington Post dans la mesure où tout est affaire de goût. Mais bon… j’ai quand même une forte préférence !

Normalement une nouvelle version du site de L’Express (auquel j’avais contribué il y a quelques années) devrait sortir la semaine prochaine, peut-être apporteront-ils des solutions en terme de lisibilité / densité…

La lecture à l’écran est un débat récurent dans le monde de l’utilisabilité. Je n’ai pas l’intention de relancer ce débat ni d’y apporter une contribution significative. Par contre, je rapprocherais les problématiques liées à la lisibilité des contenus web à la montée en puissance des terminaux alternatifs : Vers des sites adaptés aux netbooks ? et De la difficulté de concevoir une interface multi-terminaux.

Le problème que nous essayons de résoudre ici est celui de la lisibilité, ou plutôt de l’adaptation de l’interface au différents contextes de lecture. Il est ainsi difficilement envisageable de concevoir une interface qui convienne à la fois aux utilisateurs d’ordinateurs traditionnels (avec des écrans toujours plus grands), de smartphones, de touchbooks… Il existe pourtant une solution toute simple pour pallier à ces situations : les feuilles de style.

Les CSS sont ainsi parfaitement adaptées à gérer cette problématique. Il serait ainsi tout à fait pertinent de fournir 4 feuilles de styles différentes :

• pour la mise en page du site en mode « web » (donc avec un affichage standard) ;
• pour pouvoir imprimer la page sans tous les éléments parasites (en supprimant les menus et colonnes) ;
• pour pouvoir lire le contenu à l’écran (en proposant uniquement le texte avec une plus grosse police de caractères) ;
• pour pouvoir consulter la page sur un smartphone.

Concernant la version imprimable, il existe quantité d’écrits sur le sujet donc je ne m’attarde pas (CSS Design: Going to Print et How To Create A Simple Print CSS For Your Site). De même pour ce qui concerne la version pour smartphones, il existe des plug-ins et des outils pour faire basculer l’affichage en mode « mobile » (j’utilise par exemple l’extension WPtouch pour WordPress).

Le mode « lecture à l’écran » me semble par contre tout à fiat intéressant à étudier. Il existe déjà des initiatives intéressantes en ce sens (comme le Skimmer du NY Times) mais elles restent marginales. Au mieux, ce que nous proposent les éditeurs pour améliorer le confort de lecture à l’écran est d’augmenter la taille de la police de caractère. Personnellement, je préfère de loin cliquer sur le bouton « Imprimer » et de lire la page d’aperçu avant impression.

Il ne serait pourtant pas très compliqué de proposer un bouton pour basculer en mode « Lecture« . Cette fonction existe ainsi sur le navigateur Safari :

L’avantage des feuilles de styles est de pouvoir exploiter un code HTML unique tout en proposant des expériences de lecture adaptées au contexte. Je suis en train de travailler sur une refonte de ce blog et je vous fournirais des explications détaillées sur les multiples feuilles de styles mises en place dès que ça sera prêt.

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.

Lorsque vous vendez du service (ou même des produits avec beaucoup de caractéristiques techniques), il est essentiel de bien présenter les différentes offres et surtout de ne pas générer de la confusion chez le prospect. Plus facile à dire qu’à faire car vous pouvez avoir des offres très similaires ou complexes à présenter. Idéalement il faut un tableau comparatif qui donne envie et où chacun va trouver facilement l’offre qui lui correspond et se persuader qu’elle est mieux que les autres.

Pour attayer votre réflexion je vous propose donc deux très bons articles : Pricing Tables: Examples And Best Practices et Design Decisions: The new Highrise signup chart.

Dans le premier article, il est question des meilleures pratiques :

• Faire ressortir les différences et non les similitudes ;
• Mettre en avant un choix pour faciliter la prise de décision des indécis ;
• Ne pas surcharger le tableau pour pouvoir utiliser une typo plus grande ;
• Clôturer le tableau avec des appels à l’action simples.

Pour illustrer ceci, voici un exemple avec le très bon tableau des offres de CrazyEgg :

Dans le deuxième article, il est question de la refonte du tableau de présentation des offres de Highrise dont voici la version initiale :

Vous noterez le côté brouillon de ce tableau avec beaucoup de bruit et du contenu difficile à décrypter (trop de tailles de typo différentes, de couleurs et stimuli visuels). Voici la version finale :

Nous avons ici une page bien plus incitative avec une belle promesse au-dessus du tableau, moins de bruit, une meilleure segmentation (« For big groups, For small teams…« ) et des appels à l’action bien plus visibles. Vous noterez également qu’il existe une offre gratuite mais qu’elle est complètement mise en retrait (en bas à gauche du tableau).

Pour prolonger cette réflexion je vous engage à visiter les sites des constructeurs automobile US qui proposent  des Car Comparator très intéressants.

Voilà un petit moment que les sites de vidéo en ligne trustent l’audience du web mondial. Extrêmement appréciés des internautes, ces sites n’en sont pas moins d’une pauvreté affligeante au niveau de leur interface. Vous pourriez me dire que l’important c’est le contenu et que si YouTube et Dailymotion sont si dépouillés, c’est pour mieux mettre en valeur les vidéos. Certes, il n’empêche que d’autres sites proposent une expérience bien plus plaisante avec plus de sophistication dans l’interface sans toutefois « éclipser » l’intérêt pour les vidéos. Je pense notamment à Hulu, un site de contenus vidéo « officiels », qui propose une expérience utilisateur en rupture radicale avec les autres hypermarchés de la vidéo.

Dès la page d’accueil le ton est donné avec un remarquable travail au niveau de la grille de lecture, de l’harmonie des couleurs et des typos :

Rien à voir avec la page très déséquilibrée de YouTube (minuscules vignettes et colonne de droite trop courte) :

Pour Dailymotion c’est un peu mieux même si la densité d’information est trop forte :

Au niveau des chaînes thématiques c’est encore plus flagrant avec un très large bandeau identitaire pour Hulu et toujours ces zones de respiration très agréables (les espaces blanc entre les différents éléments) qui reposent l’oeil et concentre l’attention :

Chez YouTube il y a un peu plus de place pour respirer, peut-être trop car les 6 lignes de texte sous les vignettes sont difficiles à lire et force l’oeil à faire des sauts :

Chez Daillymotion la page est plus équilibrée mais la surabondance de vignettes (« Best of« ), n’est pas très intuitive (est-ce la timeline d’un même film ?) :

Bref, je suis admiratif du travail réalisé sur Hulu, qui même sur les pages de vidéo conserve cette remarquable lisibilité et toujours beaucoup de « rondeur » dans les formes et couleurs. Hulu réussi le tour de force de nous reposer l’oeil là où YouTube à plus des airs de prospectus publicitaire.

Oui la critique est sévère mais je pense que les sites de vidéo en ligne, de part leur audience et la place qu’ils ont pris dans notre société de l’infirmation méritent un meilleur traitement et surtout plus d’attention de la part des concepteurs.