SimpleWeb.fr

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.

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 :

Le tableau de comparaison 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 :

Avant la refonte

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 :

Après la refonte

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 :

La page d'accueil de Hulu

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

La page d'accueil de YouTube

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

La page d'accueil de Dailymotion

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 :

Une page intérieure de Hulu

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 :

Une page intérieure de YouTube

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 ?) :

Une page intérieure de Dailymotion

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.