une pile de Lego

Que l’on conçoive un site web, une application mobile ou un écosystème digital complet, les questions d’arborescence, de navigation et de parcours client restent centrales. Comprendre les besoins de l’internaute et sa façon d’interagir avec des interfaces et des informations est une étape préliminaire indispensable à tout travail… Encore faut-il bien comprendre les notions que cela implique…

En réalité, dans les projets digitaux, on confond encore souvent Arborescence, Navigation et Parcours… et si ces notions sont intimement imbriquées, elles obéissent clairement à des logiques différentes. Il est peut-être temps de faire un point !

L’arborescence, la logique de l’information

Attaquons avec l’Arborescence. Héritière des racines techniques du Web, l’arborescence peut se résumer comme étant l’organisation technique ou éditoriale d’une plateforme digitale. Il y a 20 ans, elle servait à définir l’organisation des fichiers HTML sur le serveur, pour conserver une certaine logique et faciliter la gestion des mises à jour de contenu. Aujourd’hui, avec la démocratisation de CMS plus ou moins complexe, cette dépendance technique a disparu.
Reste que l’arborescence est avant tout une question de logique.

Il s’agit en fait, comme pour un livre ou un album photo, d’organiser l’ensemble des contenus de votre site de manière logique dans des dossiers – plus tard peut-être des menus – de manières à ce que le visiteur y ait facilement accès.

Par exemple, l’ensemble des contenus qui décrivent vos produits vont se retrouver dans une partie de l’arborescence qui s’apparentera à un catalogue. L’ensemble des pages s’attardant sur l’historique de votre entreprise et sa façon d’imaginer son métier pourront rejoindre une section plus corporate, comme un « Qui sommes-nous ? » ou un « A propos de notre groupe », etc.

L’idée est de faire de vos contenus des groupes logiques, sur plusieurs niveaux si nécessaires, afin qu’un utilisateur parcourant un par un vos « dossiers » n’ait pas de surprise au fil et de sa lecture et possède une vision d’ensemble de vos offres et de votre identité en fin de lecture. Encore une fois, comme dans un livre.

L’arborescence se complète avec les différentes fonctionnalités du site, comme les formulaires de contact, les formulaires de commandes, les zones de connexion donnant accès à des informations personnalisées, etc. Ils ne sont après tout que des contenus comme les autres, ils demandent simplement une interaction de la part de l’internaute pour être activés…

Comment présenter cette organisation des contenus ?
Souvent, un document Word ou fichier Excel suffit : l’arborescence n’a généralement, dans sa première intention, pas besoin de représentation « graphique ». Au contraire, cela nuit en général à sa lisibilité. Contentez-vous d’un bon vieux tableau listant vos contenus, présentant une colonne par niveau de profondeur, vous aurez ainsi rapidement une liste de vos pages et de vos fonctionnalités à faire apparaître sur le site…

La navigation, la question de l’accès

Car l’arborescence n’est au final qu’une matière première permettant de s’assurer que tous les contenus sont bien là et surtout d’entrer dans la phase de construction suivante : celle de la navigation.

La navigation, qu’est-ce-que c’est ? Dans le cadre d’un dispositif digital, c’est l’ensemble des moyens qu’a à disposition un internaute pour accéder à un contenu. On résume souvent la navigation à un ensemble de menus. En fait, c’est bien plus complexe que cela !

Les habitudes de navigation tactiles, liées avant tout aux smartphones et aux écrans des tablettes, ont rendu caduque l’usage des grands menus de navigation. On cherche désormais à rendre l’information accessible de manière plus évidente et plus naturelle pour l’internaute, que ce soit via des interfaces de saisie (des formulaires, des moteurs de recherche, parfois en langage naturel…), par des mosaïques de bouton et sans doute dans les années à venir via des interfaces de plus en plus vocales… Tout cela, c’est de la navigation.

L’étape de définition de la navigation d’un système digital consiste à reprendre l’arborescence de celui-ci et à décider par quel moyen est accessible tel ou tel contenu. Une fonctionnalité plébiscitée par 70% de vos visiteurs (la connexion à son compte personnel, l’information trafic d’un réseau de transport, le taux d’enneigement d’une station de ski…) doit forcément être accessible de la manière la plus directe possible quelle que soit l’endroit où se trouve l’internaute sur votre site. Exit donc les menus qui impliquent de parcourir une liste de contenus, ces fonctionnalités devront être présentés et évidentes dès la page d’accueil, et accessibles en un clic depuis n’importe quelle page. Favorisez donc les boutons permanent, les « télécommandes » en colonne de navigation, les headers et les footers fixes.

De même, les contenus de votre arborescence qui ne concernent qu’une petite partie de votre audience peuvent très bien n’être accessible qu’après un filtre du type « Vous êtes : un client, un partenaire, un journaliste… ». Si l’identification du type de lecteur a un impact fort sur le type de contenu proposé, alors la navigation doit être pensée en ce sens sans pour autant modifier l’arborescence des contenus originaux.

La définition de la navigation va de paire avec les premiers efforts de maquettage de votre système digital : en définissant l’accessibilité de vos contenus, vous orienterez votre maquette pour y présenter les grandes zones d’accès à l’information indispensable au bon fonctionnement de votre site ou application. Gardez simplement en tête les grands principes suivants :

  • Les contenus indispensables doivent être accessibles en un seul clic, si possible sans scroll, aussi bien depuis la page d‘accueil du dispositif que depuis ses contenus internes ;
  • Si votre navigation est bien conçue, les doublons sont inutiles et un contenu accessible via un bouton ou une télécommande n’a pas à être à nouveau présent dans les menus généraux du site… sinon, il y aura confusion pour l’internaute !

Comment se présenteront les conclusions de cette étape de conception ?
Forcément, en travaillant vos zonings et/ou maquettes d’une part, mais également en amendant votre document d’arborescence avec ces informations supplémentaires sur l’accès à l’information : cela peut-être un code couleur particulier en fonction du moyen d’accès (menu, boutons, page d’accueil, footer…) ou une mini-cartographie du site symbolisant l’ensemble de la navigation dédié à ce contenu.

Le parcours, la réalité de l’internaute

Maintenant, même si vous avez défini arborescence et navigation, vous pouvez compter sur l’internaute pour ne rien respecter de ces beaux principes que vous avez mis en place. Il est rare que, passant d’un site à l’autre, l’utilisateur prenne le temps de découvrir et d’apprendre une nouvelle interface.

Il convient donc d’imaginer son parcours à l’intérieur de vos pages sur quelques demandes critiques pour voir ce qui pourrait manquer dans votre navigation. Imaginez les grandes étapes d’utilisation de vos contenus et fonctionnalités. Par exemple, pour réserver une chambre d’hôtel, l’internaute va devoir :

  1. Arriver sur votre site, le plus généralement par la page d’accueil… mais pas forcément.
  2. Trouver sa destination sur votre site ;
  3. Identifier un hôtel à cette destination dans votre catalogue ;
  4. Parcourir les photos pour voir si les chambres sont bien à son goût ;
  5. Se pencher sur les services proposés par l’hôtel et s’assurer qu’un restaurant ou un spa sont bien accessibles dans l’établissement ;
  6. Vérifier les disponibilités de l’établissement aux dates auxquelles il souhaite arriver ;
  7. S’assurer du tarif et des options que cela inclue ;
  8. Et enfin réserver.

Ce parcours est simple et demanderait en réalité de nombreuses micro-étapes complémentaires et fonction des profils de clientèle ciblées. Mais sur cette base, on peut déjà valider ou non les premiers principes de votre arborescence et de votre navigation.

Identifiez à chaque étape de ce parcours à quel contenu de l’arborescence correspond l’information ou la fonctionnalité recherché par l’internaute. En identifiant les 8 pages répondant aux 8 étapes du parcours, vous obtiendrez le comportement réel de votre prospect sur votre site ou votre application mobile. Mettez maintenant ce parcours en regard de vos choix de navigation : menus, télécommandes, navigation contextuelle… Pour passer d’une étape à l’autre de son parcours, l’internaute ne doit avoir qu’un sel clic à faire. C’est de cette façon que vous pourrez vous rendre compte que l’interface que vous venez de concevoir est valide ou non pour la réalité du parcours client

Trois étapes sinon rien.

Une fois les parcours clés de vos internautes validés (achat, demandes d’information, recherche de documentation…) vous pourrez alors avancer sur la conception et le maquettage de votre site et étant certains que l’interface que vous allez proposer à l’internaute correspond à ses parcours. Sans ces trois étapes claires, impossible de différencier ce qui tient de votre organisation interne et ce qui doit servir réellement l’internaute dans votre interface digital.

Voilà, à présent vous ne confondrez plus Arborescence, Navigation et Parcours. 😉