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.