Bien soigner la navigation d’un site

Pourquoi soigner la navigation d’un site

La navigation comprend dès éléments tels que le menu, le footer mais également les chemins de fer(1), les liens de contenu, les éventuels pavés contextuels, etc.

Tous ces éléments forment un tout qui, bien sûr, permet de passer de page en page, mais permet aussi à l’internaute de se repérer dans le site et de comprendre quelles informations il va trouver dans quel contexte.

Enfin, en plus de l’internaute, c’est le moteur de recherche a qui une navigation soignée va servir. Le référencement naturel n’en sera que meilleur.

Bien réfléchir à la navigation d’un site au moment de sa conception, participe donc à deux critères de l’expérience utilisateur : l’utilisabilité et la trouvabilité.

Comment soigner la navigation d’un site

Le menu

Le menu est, bien sûr, un élément central du site et de sa navigabilité.

En tant qu’élément récurrent, dans les sites web, les internautes sont habitués à y trouver les rubriques du site. Il peut donc être un premier indice du contenu du site et de ce qu’on y trouvera. Le découpage et le nommage des rubriques est donc primordial et doit bien correspondre au contenu effectif.

Le rendu graphique du menu est bien sûr important. Il doit être différencié du reste du contenu et lisible. Pensez au critères d’accessibilité (contraste des couleurs de fond et de texte, par exemple). Méfiez-vous également des menus qui, pour être plus jolis, utilisent des images plutôt que des typographies systèmes : le référencement en sera moins bon.

Mis à part la mise en forme d’une rubrique qui peut changer en fonction du contexte (onglet de couleur différente lorsqu’on navigue dans la rubrique en question), le menu doit être au même endroit et avec le même rendu graphique et le même contenu sur toutes les pages. C’est un élément de repérage important ; il ne doit pas “bouger”.

Le chemin de fer

Le chemin de fer aide l’internaute a s’y retrouver dans un site. Il devient indispensable à partir du moment où l’arborescence à plus de deux niveaux.

Le chemin de fer contient deux types d’éléments qui doivent être différenciés : les pages parentes et la page en cours. Les items de pages parentes sont des liens vers les pages en question et la page en cours est du simple texte (pas de lien vers elle-même). Cette différence devrait également être relayée par du graphisme.

Chacun de ces items, pages parentes ou page en cours, doivent, pour des raisons de repérage, reprendre le titre de la page (qui reprend lui-même, le cas échéant, le titre de rubrique utilisé dans le menu).
Par exemple, si dans mon menu j’ai une rubrique “Accessibilité des pages web”, la page vers laquelle pointe ce lien a pour titre “Accessibilité des pages web”. Les sous-pages de cette rubrique, dans leur chemin de fer contiennent alors un item de page parente “Accessibilité des pages web”.
Cette bonne pratique est également très utile pour optimiser une requête donnée sur une page et donc augmenter la qualité de son référencement naturel.

Pour coder le chemin de fer, vous pouvez aller consulter ces deux articles de vrais pointilleux (que j’adore ça !) : Fil d’Ariane et sémantique et Fil d’Ariane et sémantique (à nouveau).

Les liens de contenu

Les liens insérés dans un texte sont facilement lus, sont compréhensibles car contextualisés et sont fréquemment suivis. Pensez-donc, quand c’est pertinent, à rendre une allusion à une autre page du site cliquable. Là encore, l’idéal est que ce morceau de texte cliquable soit le titre de la page (que l’on retrouve dans le chemin de fer, dans le menu…)

Si un lien pointe vers un autre site, il faut le préciser. Utiliser pour cela l’info-bulle (attribut title) afin d’avertir votre internaute qu’il change de site. Cette information peut également être relayée par un pictogramme (comme le fais Wikipédia, par exemple au bas de l’article navigation).

Le plan du site

Le plan du site est indispensable, à mon sens, quel que soit l’étendue de votre site.
Il permet à l’internaute de se rendre compte du contenu d’un site dans sa globalité ; il permet à un moteur de recherche de trouver la totalité des pages d’un site.

Là encore, les items du plan du site doivent reprendre les libellés des titres de page.

Si la navigation utilise des couleurs, ces couleurs doivent être reprises dans le plan du site.

Pour en savoir plus sur le plan du site, consulter Concevoir un plan de site.

La page d’erreur

Même si on s’en passerait bien, la page d’erreur fait partie de la navigation d’un site.

Elle ne doit pas laisser l’internaute dans un cul-de-sac mais lui donner des éléments pour continuer de naviguer. Un lien vers la page d’Accueil est un minimum, une incitation à utiliser le moteur de recherche est une très bonne idée, une reprise du plan du site est indispensable.

Le moteur de recherche

La complexité du site imposera ou non la présence d’un moteur de recherche.

Conclusion

On le voit, les éléments de navigation d’un site sont nombreux et variés. Cela n’a rien d’étonnant le lien étant la particularité même du web. Pour autant, ces liens sont à traités de manière soignée et adaptée à leur fonction. Les principes vus ci-dessus s’appliqueront à chacun des éléments de votre navigation.

(1) D’après le mythe d’Ariane, le fil d’Ariane permet de repasser exactement par le chemin que l’on vient d’emprunter. Or un internaute n’emprunte pas forcément le chemin hiérachique des pages pour naviguer. Il peut également passer par des liens de contenu, le plan du site, etc. Le terme “chemin de fer” relaye l’idée que les items seront repris selon leur place dans l’arborescence du site.
Le fil d’Ariane correspond plus à “Vous êtes passer par…” et le chemin de fer correspond à “Cette page se situe…”. A vous de voir celui que vous souhaitez mettre en place.

L’expérience utilisateur

I. Qu’est-ce que l’expérience utilisateur

Lorsqu’un internaute visite un site, il enregistre des impressions, des informations – plus ou moins consciemment. Ce ressenti est composé de nombreux éléments : l’esthétique générale de la page, la facilité de navigation, la compréhension des textes, la présence ou l’absence d’information, l’efficacité des icônes, la présentation des produits, etc.

Chacun de ces aspects peut être très bon ou très mauvais, indépendamment les uns des autres et de façon disparate. Pourtant, c’est à partir de ces éléments que l’internaute va se construire une impression générale du site et de ses services.

C’est ce ressenti global que l’on appelle l’expérience utilisateur. Il peut être négatif, si une majorité des aspects de la visite sont perçus comme mauvais par le visiteur, ou positif, si l’ensemble lui a, au contraire, donné une bonne impression.

II. L’importance de l’expérience utilisateur

Qu’elle soit positive ou négative, l’expérience utilisateur a, concrètement, des conséquences pour le site.

Un utilisateur qui a eu une expérience négative ne souhaite pas revenir, ne parle pas du site ou en parler en mal et, bien sûr, il n’est pas enclin à acheter ou a profiter des services du site.

Tout au contraire, celui qui a eu une expérience positive se souvient du site pour une prochaine utilisation, peut en parler et le conseiller et est dans un contexte favorable à l’achat des produits et services proposés par le site.

Une expérience utilisateur positive c’est donc :

  • la fidélisation du client
  • un canal d’acquisition
  • la contribution à une bonne image de marque
  • une augmentation du taux de transformation

Le tout pour un coût modique voir nul puisque c’est la qualité de la conception et du développement du site qui prend en compte tous les aspects influant sur l’expérience utilisateur. Et que cette réalisation de qualité est alors relayée par la satisfaction du visiteur et le bouche-à-oreille.

III. Les facettes de l’expérience utilisateur

Pour qu’une visite soit transformée en une expérience utilisateur positive, le site doit être conçu de sorte à optimiser aux maximum tous les différents aspects qui constituent une expérience utilisateur.

Ces aspects ont été détaillés par Peter Morville, architecte informationnel renommé dont la présentation en hexagones est une référence.

P. Morville distingue sept axes à prendre en compte : l’utilité, l’utilisabilité, la trouvabilité, la crédibilité, l’accessibilité, la désirabilité, la valeur.

L’utilité :

Le site doit répondre aux besoins, à la recherche de l’internaute.

Ou encore il lui apporte des renseignements, des fonctionnalités qu’il ne cherchait pas forcément mais qui lui ont été utiles.

L’utilisabilité :

L’information, le renseignement, même très utile à l’internaute, est inefficace s’il n’est pas pratique à comprendre, à utiliser.

La trouvabilité :

Cela implique deux notions :

  1. le site doit être trouvé facilement par les internautes auxquels il s’adresse ;
  2. l’information doit être trouvé facilement à l’intérieur même du site

La crédibilité :

L’ensemble du site doit convaincre l’internaute qu’il est dans un climat de confiance : offres sérieuses, interlocuteur respectueux, outils fiables, etc.

L’accessibilité :

L’internaute doit pouvoir accéder à l’information quelles que soit sa condition physique ou son installation matérielle

La désirabilité :

Le site doit “donner envie”, séduire. Il doit offrir un contexte visuel confortable ou attrayant incitant ainsi l’internaute à s’y sentir bien, à y rester pour y trouver information et service.

Bien sûr, tous ces différents aspects influent les uns sur les autres et peuvent même parfois agir au détriment les uns des autres. Par exemple, un site au design innovant et très soigné, peut servir la désirabilité mais perdre l’internaute (et l’utilisabilité) dans des boutons graphiques séduisants, parfaitement intégrés au design et … ne correspondant plus à ce que l’internaute connaît et reconnaît comme étant un bouton !

Transformer une visite en une expérience utilisateur positive est donc tout un jeu d’équilibre à respecter.

IV. Les implications sur la conception et la réalisation

Pour qu’un site réponde à chacun des impératifs de l’expérience utilisateur sans en léser aucun, il y a donc de nombreux points à prendre en compte lors de la conception et de la réalisation du site.

Les différents acteurs de cette phase de création travaillent et réfléchissent ensemble à l’optimisation des différents points, utilisant leurs différentes compétences de façon croisée.

Quelques exemples de l’interaction d’une compétence sur les facettes de l’expérience utilisateur :

La rédaction des textes doit faciliter l’utilisation du site sans alourdir le design. Les textes doivent être riches en informations et compréhensibles.

Ils peuvent participer à l’appréhension de la navigation, de l’utilisation d’un outil mais aussi à la séduction, à l’attraction.

  • Bénéfices : utilisabilité, trouvabilité, crédibilité, accessibilité, désirabilité

Le design doit servir la séduction mais également la facilité d’utilisation du site, la compréhension des différentes zones, des fonctions, des actions, etc.

Il participe aussi à la compréhension de la navigation, fournit des repères “géographiques”, informe l’internaute sur la hiérarchisation des éléments d’une page.

  • Bénéfices : utilisabilité, trouvabilité, crédibilité, désirabilité

Le code source optimise les pages de sorte qu’elles soient plus facilement trouvables sur Internet (référencement naturel), apporte des fonctionnalités supplémentaires de compréhension, organise et hiérarchise les types de renseignements donnés.

Il assure également une présentation correcte sur tout type de supports, garantissant ainsi une fiabilité de l’outil (présentation et utilisation)

  • Bénéfices : utilisabilité, trouvabilité, crédibilité, accessibilité

Le projet de la page ou du site vise à fournir à l’internaute les information ou les outils qu’il lui manquait, optimise leurs fonctionnalités de sorte à être toujours plus utile et à répondre aux attentes des clients.

Une réflexion de la page dans son contexte permet de soigner sa cohérence avec l’ensemble du site (design, rédaction) favorisant ainsi la navigation dans le site, le confort de l’utilisateur, l’utilisation des repères, etc.

  • Bénéfices : utilité, utilisabilité, trouvabilité, crédibilité, désirabilité

Les différents métiers interviennent ainsi sur plusieurs aspects chacun et doivent le faire en collaboration les uns avec les autres afin de prioriser et harmoniser tout ces points importants et afin d’optimiser les pages et les outils de sorte à transformer toute visite en une expérience utilisateur positive.