1 1 2 3 45 6 7 8

9 10 11 12

c h a p i t r e

L’accroche visuelleConception de pages pour un survol

et non pour la lecture

3 1 2 3 45 6 7 8

9 10 11 12

Krug.indb 30Krug.indb 30 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug

[ 31 ]

Si vous / Ne savez pas / Ce que sont / Ces panneaux / C’est que vous n’avez pas / Été assez loin / Burma-Shave

– S é qu e n ce de p a n n e a ux p ub l ic it ai re s

d i sp os é s l e l on g de s ro ute s p ou r u n e c rè m e à r as e r, 19 35

Face à l’insouciance de vos visiteurs, il y a cinq choses importantes que vous pouvez faire pour vous assurer qu’ils verront et comprendront vos sites autant que possible :

> Créez une hiérarchie visuelle claire sur chaque page.

> Servez-vous des conventions à votre avantage.

> Découpez les pages en sections clairement identifi ables.

> Mettez en évidence les éléments cliquables.

> Éliminez les éléments parasites qui risquent de perturber l’attention.

Créez une hiérarchie visuelle claireL’un des meilleurs moyens de rendre une page aisément et rapidement compréhensible est de s’assurer que l’apparence des objets sur la page (tous les indices visuels) illustre clairement et précisément les relations qui existent entre eux : quels éléments sont liés, et quels éléments font partie d’autres éléments. En d’autres termes, chaque page doit avoir une hiérarchie visuelle claire.

Les pages dotées d’une hiérarchie visuelle claire présentent trois caractéristiques :

> Plus un élément est important, plus il se distingue. Les titres les plus importants doivent être écrits en gros, en gras ou dans une couleur distinctive, par exemple. Ils peuvent également être encadrés par davantage d’espace vierge, ou être situés au sommet de la page. Ils peuvent aussi présenter une combi-naison de tous ces éléments.

Très important

Un peu moins important

Beaucoup moins important

Krug.indb 31Krug.indb 31 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug

c h a p i t r e 3

[ 32 ]

> Les éléments liés logiquement doivent aussi l’être graphiquement. Vous pouvez, par exemple, montrer que des éléments appartiennent à une même catégorie, en les groupant sous un titre, en leur appliquant le même style visuel ou en les plaçant dans une zone clairement défi nie.

> Les éléments doivent être imbriqués visuellement pour signifi er qu’ils font partie d’ensembles ou de sous-ensembles. Un titre de section (« Livres informatiques ») peut par exemple chapeauter le titre d’un livre donné. On sait alors visuellement que ce livre appartient à la catégorie des livres informatiques. À son tour, le titre du livre peut englober les éléments qui décrivent son contenu.

Il n’y a pas d’innovation en matière de hiérarchie visuelle. Chaque page d’un journal, par exemple, se sert de la taille des caractères, des regroupements et des imbrications pour donner au lecteur des indications sur son contenu, avant même qu’il ne commence à lire le moindre mot. Cette photo va avec cet article, car ils sont tous deux placés sous ce titre. Cet article est le plus important, car c’est celui qui a le plus gros titre, les colonnes les plus larges et une position dominante sur la page.

LivresMusiqueSportsVoyagesDivertissementsLoisirsAnimaux

Livres d'informatique

24,95 €

Un livre d'informatique enparticulier

Blab Blab BlabBlab Blab BlabBlab Blab BlabBlab Blab BlabBlab Blab BlabBlab Blab BlabBlab Blab BlabBlab Blab BlabBlab Blab BlabBlab Blab Blab

Le titre s'étend sur ces trois colonnes,il est donc évident

qu'elles font partiedu même article.

Grâce à la taille dutitre, il est évidentque cet article estle plus importantde la page.

Krug.indb 32Krug.indb 32 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug

L ’ a c c r o c h e v i s u e l l e

[ 33 ]

On interprète tous quotidiennement des hiérarchies visuelles, que ce soit en ligne ou sur papier, mais le processus est tellement rapide qu’on ne s’en rend même pas compte. Lorsqu’on prend conscience de ce travail, c’est en général parce qu’on ne parvient pas à établir une hiérarchie visuelle, et que les indices visuels (ou leur absence) nous obligent à réfl échir.

Une bonne hiérarchie visuelle nous épargne du travail, en permettant une première analyse presque inconsciente de la page. Elle permet d’organiser le contenu et de défi nir des priorités quasi instantanément.

Lorsqu’une page ne présente pas de hiérarchie visuelle claire, et que tout semble avoir la même importance par exemple, on est obligé d’eff ectuer un travail d’analyse conscient beaucoup plus lent, en parcourant les phrases et en essayant de déterminer ce qui est important et ce qui l’est moins. Cela demande beaucoup plus de travail.

En dehors de ça, on a également besoin de repères éditoriaux sur les sites Web, comme dans les autres médias. L’éditeur sait mieux que quiconque quels éléments sont les plus importants du site, ceux qui sont les plus populaires ou ceux qui off rent le plus de valeur ajoutée. S’il prend soin de les identifi er clairement, le lecteur n’aura pas à le faire.

Interpréter une page avec une identité visuelle même très légèrement confuse (lorsqu’un titre regroupe des éléments qui n’ont rien à faire dans cette catégorie, par exemple) revient à lire une phrase mal construite (« Bill posa le chat sur la table un instant car il était un peu fatigué. »).

Même si on parvient généralement à comprendre le sens de la phrase grâce au contexte, on est obligé pour cela de réfl échir, alors qu’on ne devrait pas.

LivresMusiqueSportsVoyagesDivertissementsLoisirsAnimaux

Livresd'informatique

Cette hiérarchie visuelle confuse semble suggérer que toutes les sections du site font partie de la section Livres d’informatique.

Krug.indb 33Krug.indb 33 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug

c h a p i t r e 3

[ 34 ]

Les conventions sont vos amiesÀ un moment donné dans votre jeunesse, vous avez sûrement appris à lire tout seul un journal. Pas les mots bien sûr, mais vous avez appris à interpréter les conventions.

Vous avez appris, par exemple, qu’une phrase avec des gros caractères est un titre qui introduit l’article qui suit. Vous avez aussi appris que le texte placé sous une photo est soit la légende qui décrit la photo, soit les crédits photographiques qui indiquent qui a pris la photo, si les caractères employés sont tout petits.

La connaissance des conventions de mise en page et de mise en forme facilite la lecture rapide d’un journal et la localisation des articles qui nous intéressent. Lorsqu’on voyage à l’étranger, on sait que les journaux locaux appliquent les mêmes conventions (avec quelques variantes). La connaissance des conventions facilite donc la lecture de n’importe quel journal.

Chaque média développe ses propres conventions et ne cesse de les améliorer, voire d’en développer de nouvelles1. Le Web utilise déjà bon nombre de conventions qui dérivent essentiellement de celles employées dans les journaux et les magazines. De nouvelles font aussi leur apparition.

Toute convention découle de l’idée brillante d’un individu. Si elle est effi cace, elle est reprise par d’autres sites, et lorsqu’elle a été vue par suffi samment de personnes dans suffi samment d’endroits, elle n’a plus besoin d’explication. Ce processus d’adoption peut prendre du temps, mais les choses vont vite sur Internet. Les utilisateurs ont désor-mais suffi samment l’habitude d’utiliser un panier ou un caddy virtuel sur les sites de commerce électronique pour qu’il ne soit plus nécessaire d’indiquer en toutes lettres « Panier virtuel » à côté du logo qui représente cette fonction.

1. Prenez, par exemple, les petits logos semi-transparents qui ont fait leur apparition à la télévision depuis quelques années, et qui permettent de savoir quelle chaîne on regarde. Ils sont maintenant omniprésents, mais ils n’ont fait leur apparition qu’une cinquantaine d’années après la naissance de la télévision.

Krug.indb 34Krug.indb 34 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug

L ’ a c c r o c h e v i s u e l l e

[ 35 ]

Il y a deux choses importantes à savoir à propos des conventions du Web :

> Elles sont très utiles. Par défi nition, les conventions ne deviennent des conventions que si elles fonc-tionnent. Les conventions correctement appliquées facilitent la navigation de site en site, sans qu’il soit nécessaire de se demander à chaque fois comment les choses fonctionnent.

Les conventions sont rassurantes par leur côté fami-lier. C’est, par exemple, le cas des listes de liens vers les diff érentes sections d’un site, qui sont placées dans un cadre coloré dans la partie gauche des pages (même si parfois, cela peut entraîner un sentiment de déjà-vu un peu fastidieux).

> Les concepteurs sont souvent réticents à les utiliser. Les concepteurs sont souvent tentés de réinventer la roue au lieu d’employer les conventions existantes, et ce, parce qu’ils ont souvent l’impression (à juste titre) qu’on les a embauchés pour qu’ils proposent quelque chose de nouveau et de diff érent (et pas toujours les mêmes mises en forme). D’autant que la « bonne utilisation des conventions » n’est pas un critère déterminant pour obtenir une récompense professionnelle ou un poste gratifi ant.

Les conventions permettent aux utili-sateurs d’en apprendre beaucoup sur les pages Web, même s’ils ne comprennent pas un mot de ce qui est écrit.

Krug.indb 35Krug.indb 35 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug

c h a p i t r e 3

[ 36 ]

Parfois, le temps passé à réinventer la roue permet de découvrir une idée révolutionnaire, mais dans la plupart des cas, c’est juste du temps perdu à réinventer quelque chose qui existe déjà et qui a fait ses preuves.

Si vous ne souhaitez pas utiliser une convention Web existante, vous devrez vous assurer que ce que vous emploierez pour la remplacer sera tout aussi simple et explicite, et ne nécessitera pas d’ap-prentissage, ou bien que ce sera d’une telle valeur ajoutée qu’un léger apprentissage ne sera pas dissuasif. Si vous souhaitez innover, vous devez bien évaluer la valeur de ce que vous vous apprêtez à remplacer. De nombreux concepteurs ont tendance à sous-estimer l’intérêt des conventions existantes.

Mon conseil : innovez lorsque vous savez que votre idée est meilleure (le genre d’idée qui fait dire « Ouah ! » à tout le monde), mais dans le cas contraire, tirez parti des conven-tions existantes.

Divisez les pages en zones clairement défi niesLorsqu’un utilisateur accède à une page, il doit être capable d’en identifi er, d’un seul coup d’œil, les principales composantes : les choses qu’il peut faire sur le site, les liens vers les articles du jour, les produits proposés à la vente, le système de navigation vers le reste du site, etc.

Il est important de diviser la page en zones clairement identifi ables, car l’utilisateur peut ainsi choisir rapidement sur quelle zone il souhaite focaliser son attention, et quelles zones il peut ignorer. Plusieurs études sur les mouvements oculaires lors de l’observation de pages Web semblent indiquer que les utilisateurs décident très rapidement quelles parties de la page sont susceptibles de contenir les informations qui les intéressent. De plus, ils ne regardent presque jamais les autres zones, un peu comme si elles n’existaient pas.

Brevet N° 48,022 B.C., 42.639 B.C, 46.875 B.C, 43.154 B.C,15.576 B.C, 42.574 B.C, 47.845 B.C, 45.487 B.C, 35.148 B.C,19.255 B.C, 22.843 B.C, 15.157 B.C, 25.877 B.C, 92.547 B.C.

ROUE

Krug.indb 36Krug.indb 36 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug

L ’ a c c r o c h e v i s u e l l e

[ 37 ]

Mettez en évidence les éléments cliquablesComme la plupart des gens cherchent sur le Web sur quoi ils peuvent cliquer, il est impor-tant de mettre en évidence les éléments sur lesquels on peut cliquer.

Par exemple, sur la page d’accueil du sénateur Orrin Hatch2 durant sa campagne ratée pour les présidentielles de 2000, il était diffi cile de savoir si tous les éléments étaient cliquables ou pas. La page contenait 18 liens, mais deux seulement disposaient de signes distinctifs : un gros bouton intitulé « Click Here to CONTRI-BUTE » (Cliquez ici pour CONTRIBUER), et un lien textuel souligné « FULL STORY » (Article complet).

Les autres liens étaient représentés par du texte en couleur, mais le problème c’est que l’intégralité du texte de la page était aussi en couleur. Il n’y avait donc aucun moyen de distinguer les liens du reste au premier coup d’œil.

Ce n’est pas une catastrophe majeure. Je suis certain que les utilisateurs n’ont pas mis longtemps à cliquer sur les diff érents éléments de la page, mais dès que vous obligez les visiteurs à réfl échir alors qu’ils devraient spontanément savoir sur quoi ils peuvent cliquer, vous entamez leur réserve de patience et de bonne volonté.

2. Orrin Hatch mérite au moins une note de bas de page pour son rôle dans l’histoire de l’utilisabilité, puisqu’à ma connaissance, il a été le premier présidentiable à faire de l’ergonomie sur le Web un thème de campagne. Durant le premier débat télévisé des candidats républicains de la campagne de 2000, il a dit à George W. Bush : « je dois dire, gouverneur, qu’en comparaison du vôtre [site Web], il est beaucoup plus facile de trouver ce qu’on cherche sur le mien. Le vôtre est vraiment diffi cile à utiliser. Il n’est pas convivial. ».

www.orrinhatch.com (le site n’est plus en ligne).

Krug.indb 37Krug.indb 37 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug

c h a p i t r e 3

[ 38 ]

L’un de mes exemples préférés est le champ de recherche du site drkoop.com (le site sur la santé de C. Everett Koop).

Chaque fois que je l’utilise, il me fait réfl échir, car le bouton qui permet de lancer la recherche ne ressemble pas à un bouton, en dépit de deux indices visuels : le mot « SEARCH » (Rechercher) s’affi che (et c’est l’un des deux meilleurs inti-tulés pour ce type de bouton3), et c’est le seul élément graphique qui se trouve à proximité du champ.

Il y a même une petite fl èche triangulaire, qui est l’un des indi-cateurs conventionnels du Web pour signifi er « Cliquez ici ». Le problème, c’est que la fl èche pointe hors du texte, comme si elle désignait quelque chose d’autre. La convention aurait voulu que la fl èche soit placée avant le texte pour le mettre en évidence en tant qu’élément cliquable.

Éliminez les éléments parasites qui risquent de perturber l’attentionL’un des éléments qui nuisent fréquemment à l’intelligibilité immédiate des pages Web est la pollution graphique, c’est-à-dire la présence d’éléments visuels parasites. On peut distinguer deux types de pollution :

> Pollution commerciale. En consultant certains sites, j’ai parfois l’impression de me retrouver face à l’un de ces jeux-concours qu’on reçoit par courrier, en me demandant quel autocollant je dois coller sur le formulaire pour pouvoir participer au grand tirage au sort sans risquer de m’abonner à quoi que ce soit.Lorsque tous les éléments d’une page sollicitent mon attention, l’eff et recherché peut provoquer une réaction de rejet. Il faut se méfi er des trop nombreuses incitations à acheter, des points d’exclamation utilisés à tort et à travers, et des couleurs criardes trop présentes.

> Bruit de fond. Certaines pages donnent l’impression d’assister à un cocktail : aucune source sonore n’est suffi samment forte pour attirer l’attention à elle seule, mais l’accu-mulation des sources individuelles de bruit fi nit par fatiguer ou par noyer le message principal.

3. « GO » est l’autre intitulé dont l’effi cacité est avérée, mais uniquement si le mot « Recherche(r) » fi gure en tant que légende du champ.

Krug.indb 38Krug.indb 38 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug

L ’ a c c r o c h e v i s u e l l e

[ 39 ]

Les menus du site MSNBC, par exemple, sont des outils de navigation pratiques et discrets qui permettent aux utilisateurs de se déplacer rapidement. En revanche, les lignes qui fi gurent entre ces menus ajoutent beaucoup de bruit visuel. L’utilisation de lignes de séparation en gris facilite beaucoup la lecture.

Les utilisateurs présentent diff érents niveaux de tolérance face à la complexité et aux distractions. Certaines personnes ne sont pas gênées par les pages chargées et les bruits parasites, alors que d’autres trouvent cela totalement rédhibitoire. Lorsque vous concevez une page Web, considérez tous les éléments comme du bruit visuel, jusqu’à ce que vous soyez certain du contraire.

www.msnbc.com

Avant Après

Krug.indb 39Krug.indb 39 10/08/12 14:5810/08/12 14:58

© 2012 Pearson France – Don't make me think – Steve Krug