Préface

Ce blog est un résumé du livre de Steve Krug : Don't make me think seconde édition parue en 2006.

Il résume, chapitre par chapitre le raisonnement et les techniques simples énoncées par Steve Krug, à appliquer à l'ergonomie de son site web.

Le livre étant en anglais, je l'ai résumé en le traduisant en français afin qu'il soit compréhensible pour un maximum de lecteurs (le blog étant un blog français sur un site français, destiné à des personnes parlant français!).

Les idées principales sont en Helvetica book, les anecdotes ou exemples intéressants sont en italic.

N'hésitez pas à laisser un commentaire sur un article si vous avez quelque chose à ajouter.

Bonne lecture

PS : Pour voir une agence qui respecte ces conseils : http://agencemyam.com

Chapitre 1 : Ne me faites pas réfléchir

Pour rendre un site web facile à utiliser, il faut éviter de faire réfléchir l'utilisateur. C'est à dire : 

• Rendre la section sur laquelle un utilisateur veut cliquer évidente, par son nom.
  
• Faire en sorte qu'il comprenne rapidement qu'un lien est un lien cliquable et qu'il n'en doute pas.
  
  Ainsi il gagne les quelques millisecondes de réflexion afin de déterminer si le lien est un lien, et il aura l'impression que le site est très facile à utiliser!
  
• Pour une barre de recherche, il faut minimiser les choix de critères de recherches à des critères généraux et explicites.
  Ceci dans le but que l'utilisateur ne se pose pas de question du type "ai-je choisi la bonne catégorie pour lancer ma recherche?" ou du type "pourquoi est-ce comme ça?", "suis-je au bon endroit?".
  
• Il ne faut pas contrarier l'utilisateur, rendre un maximum de choses évidentes sur le site (mais pas tout car c'est impossible!).
  
  keywords: steve krug, don't make me think, ergonomie, ergonomie web, ergonomie site, ergonomie Internet, ne me faites pas réfléchir, Internet, design, webdesign, webdesigner, graphisme, infographie, web, html, css, php, langage, programmation, visuel, art.

Chapitre 2 : Comment nous utilisons réellement le web

Lors de la création de votre design, attention au fait que les gens ne visitent jamais le site de la façon dont le concepteur l'a imaginé. C'est à dire :

• Les utilisateurs parcourent le site en recherchant des mots, des phrases, des images qui les intéressent. Ils balayent des yeux le site.
  
• Ce que voit l'utilisateur dépend donc de ce qu'il a en tête lorsqu'il visite le site web.
  (ex : une question à laquelle répondre, un centre d'intérêt. C'est la raison même pour laquelle l'utilisateur s'est rendu sur votre site! via un moteur de recherche ou un lien depuis un autre site)
  
• L'utilisateur va donc rechercher l'élément qui lui procure l'effet d'être satisfait sans trop avoir cherché ni perdu son temps.
  
  En effet ça n'est pas grave si il s'est trompé, il peut revenir en arrière et recommencer. C'est un des principes même du web : la facilité et la rapidité d'accès aux informations recherchées.
  
• Les gens ne cherchent pas à comprendre ce qu'ils utilisent mais se débrouillent pour l'utiliser au mieux sans le comprendre. Ils bidouillent jusqu'à trouver ce qu'ils recherchent, sans chercher pourquoi ni comment ils ont réussi.

Chapitre 3 : Billboard design 101

Ce chapitre explique comment créer une hiérarchie visuellement propre sur son site :

• Ce qui est important doit être le plus visible, ainsi moins une chose est importante moins elle est visible.
  
  Il faut par exemple grouper l'ensemble des éléments (catégories) ou liens vers des pages similaires, ou imbriquer les éléments afin de bien visualiser l'appartenance d'un élément (exemple Amazon : le livre don't make me think dans la catégorie livres d'informatique dans la catégorie livres).
  
• Il faut bien utiliser les conventions de titres, sous-titres et de légendes comme en presse papier.
  
  En effet tout le monde connait le format de présentation des journaux quotidiens, la façon dont les articles sont présentés, les images intégrées.
  
• Les conventions/normes sur le web sont très utiles car rassurantes pour l'utilisateur.
  Elle permettent de ne pas aller à l'encontre des habitudes de l'utilisateur et donc qu'il n'ait pas à réfléchir avant de trouver ce qu'il cherche.
  
• Attention à n'innover que lorsque l'on a une meilleure idée de convention que celles qui existent déjà. Sinon mieux vaut tirer parti de ce qui fonctionne.
  
• Définir des zones d'éléments dans la page permet à l'utilisateur de définir par lui même quelle(s) partie(s) du site il va utiliser et la(les)quelle(s) il va ignorer.
  
• Rendre évident à l'utilisateur là où il peut cliquer.
  (cf. chapitre 1)
  
• Attention à ne pas encombrer le champ visuel de l'utilisateur avec trop de publicités ou le distraire avec une image de fond trop chargée.
  (exemple : une tapisserie en background trop psychédélique)
  
• Bien vérifier la place que prend chaque élément, notamment des lignes séparatrices.
  
  Si une ligne séparatrice dans un tableau par exemple est trop grosse, elle distrait l'utilisateur et pollue son champ visuel, tout cela en rendant le tableau moche.

(Mini-)chapitre 4 : Animal, végétal ou minéral?

• Ce qui compte vraiment pour l'utilisateur, c'est la difficulté qu'il a à pouvoir cliquer pour obtenir ce qu'il cherche et non en combien de clics il arrive à ce qu'il cherche.
  
  C'est à dire que beaucoup de clics simples et bêtes valent mieux que peu de clics où il faut réfléchir à où et comment cliquer.
  
• Le plus difficile et fatiguant sur le web étant de faire un choix, il faut optimiser son site afin que l'utilisateur n'ait qu'à le parcourir bêtement.

Chapitre 5 : Eviter les textes inutiles

• Il faut éviter au maximum les textes d'intoduction de sections sur un site ou le texte de présentation qui vante les mérite de la société qui possède le site web.
  
  Tout ce qui est présentation de "qui, comment, pourquoi" qui apparaît sur la page d'accueil principale ou en introduction d'une catégorie, est ce que Steve Krug appelle du "happy talk" (happy talk must die). C'est à dire du texte totalement survolé par l'utilisateur donc non lu. Comme quand quelqu'un parle et que l'on ne l'écoute pas, cela revient à entendre du brouhaha dans sa tête...
  Ce blabla inutile, définit ainsi par Steve Krug doit disparaître de la page d'accueil d'un site au profit d'une introduction présentant ce que propose l'entreprise, et en quoi c'est bien/mieux que ce que proposent les autres. Le but est donc d'énoncer un propos simple et de l'argumenter correctement et courtement, voila ce qui frappera bien plus l'esprit du visiteur.
  
• Pour les instructions (pour l'utilisation d'un formulaire par exemple) il faut écrire le minimum et mettre les bonnes instructions au bon endroit (l'explication à coté de ce que l'on explique).
  exemple : mettre le lien pour contacter le service client au moment où l'on en parle.

Chapitre 6 : l'organisation et la hiérarchie de son site web

Steve Krug compare la navigation sur un site web afin de trouver ce que l'on chercher, à cette même recherche d'un article dans un magasin. En fait c'est de cette façon que le ressentent les gens, le fait d'explorer un site comme ils explorent un espace réel dans la vie de tous les jours :

• Lorsque l'on arrive sur un site web, comme dans un magasin, on a un but, une idée en tête.
  Exemple : je souhaite trouver une table en bois, ou juste en connaître le prix ou la fourchette de prix.

Deux options s'offrent à nous :

• Soit on choisit d'explorer le site via les catégories, sous catégories, ce qui revient en magasin à se guider grâce aux panneaux dans les allées;

• Soit on choisit de taper directement dans la barre de recherche du site ce que l'on cherche et d'en trier les résultats par pertinence, ce qui revient en magasin à demander à un vendeur où se trouve un produit.

Par la suite, après avoir exploré le site :

• Soit j'ai trouvé mon bonheur sur le site;

• Soit je passe à la barre de recherche en espérant avoir de meilleurs résultats.

De toutes les manières, je peux me lasser à tout moment et choisir de partir. Même après la recherche grâce à la barre de recherche, si je n'ai pas trouvé ce que je cherche je peux partir.

• Contrairement à un magasin, il est plus difficile de retrouver son chemin lors d'une seconde visite sur un site web. C'est pourquoi il faut que la hierarchie soit claire, disposer d'un bouton qui renvoie à la page d'accueil afin que l'utilisateur soit en mesure de se rediriger. De plus, il peut placer le lien trouvé dans ses marques pages afin de le retrouver immédiatement une prochaine fois.

• Il vaut mieux se sentir aux alentours de ce que l'on recherche, sans le trouver, plutôt que totalement perdu sur le site. Aussi il faut donner, via la hiérarchie, des points d'ancrage à l'utilisateur pour qu'il se situe. Cela permet également de montrer comment s'utilise le site, ainsi que donner confiance en le personnes qui l'ont conçu.

• Il faut laisser sur chaque page un header qui confirme bien à l'utilisateur qu'il est toujours sur le même site et où il en est, avec par exemple le nom du site, les sections, la section où il se trouve et un bouton home. Sauf sur la page home et sur les pages d'enregistrement ou de formulaires à remplir (pour payer sur un site de e-commerce par exemple).

• Placer les sous-setions sous les sections principales, et les liens utiles (4 ou 5 maximum) au dessus des sections principales.
  Exemples : barre de recherche, page home, aide.

• Le logo doit renvoyer à la page home. On peut l'indiquer discrètement à l'utilisateur.

• Il faut mettre un lien vers une page recherche ou une barre de recherche sur chaque page. Celle-ci doit être la plus simple possible. Avec des options pertinentes si il y a besoin d'options.
  Exemple : champ et la mention ou le bouton "Recherche" à côté.
•  Comme dans une ville, il faut des panneaux d'affichage, sur un site web il faut des boutons indicant où l'on est et ce qu'il y a autour. Ces boutons doivent être visibles, et celui de la page où on se trouve doit être surligné simplement par exemple.
   
• Le nom d'une page doit avoir le même nom que le lien qui le pointe afin que l'utilisateur ne se demande pas pourquoi le nom du lien et de la page sur laquelle il arrive sont différents.
• Le nom doit être très visible dans une page afin que l'utilisateur n'ait pas à chercher.
• Le nom de la section du site où l'on est doit être très visible par rapport aux autres noms de sections.
  Exemple : le mettre en gras, changer la couleur de la typo, mettre une fleche devant, changer la couleur du bouton...

• Lorsqu'un site est très gros avec une arborescence conséquence, il vaut mieux rajouter des "breadcumbs". C'est le chemin parcouru depuis la page d'accueil par l'utilisateur. Il faut le placer en haut de la page web, le laisser en petite police pour ne pas oublier que ça n'est qu'un outil, utiliser des flèches > pour séparer les noms et mettre en gras celui où l'on est. Attention, cela ne remplace pas le titre d'une page!

• Afin de séparer les catégories, une très bonne méthode consiste à utiliser des onglets. Un onglet facilite la compréhension du nom de la catégorie, on le rate difficilement, et il rajoute une touche de design au site en étant joli et en donnant un effet de mouvement lors du passage d'une catégorie à une autre.
  Exemple : un onglet actif doit avoir une couleur différente des autres, et sa couleur doit être la même que celle de la page active. Il doit être connecté à celle-ci (pas de séparateur entre l'onglet et la page active).
• Les onglets peuvent être de couleur différentes afin de bien différencier les catégories du site.