La navigation
La navigation est le fil d’Ariane d’une interface, que ce soit sur un site Internet, une application ou une borne tactile. Elle est comme un sommaire qui permet de comprendre l’organisation de l’interface et de s’y repérer.
La navigation guide les utilisateurs et utilisatrices à travers le produit pour les aider à trouver la bonne information, ou à réaliser une action, selon leur besoin.
Bien souvent, la navigation prend la forme d’un menu, qui peut être situé :
- En haut
Exemple de menu en haut - site Internet de Notion
L’ordre et le nom des items (éléments) d’un menu n’est jamais anodin : ils sont souvent issus d’une recherche poussée, de plusieurs itérations et de tests.
- En bas
Exemple de menu en bas - application mobile Strava
Sur mobile, l’enjeu de concision est de taille. Sur Strava, puisque l’objectif principal de l’application est d’enregistrer ses activités, le bouton du même nom est donc l’élément central du menu.
- À gauche
Exemple de menu à gauche - Spotify
Sur Spotify, le menu est très restreint, avec notamment 3 items principaux. Le but du jeu étant de laisser les utilisateurs et utilisatrices personnaliser leur menu à l’aide de leurs playlists musicales.
- Au sein d’un menu burger
Exemple de menu burger - site de Maddyness
L’icône avec des traits en haut à gauche de l’écran est un menu burger. Au clic, le menu se déploie pour laisser place aux différentes catégories de navigation sur le site.
Ce type de navigation est assez bien ancré dans l’esprit des utilisateurs et utilisatrices dans le cadre d’un usage sur mobile. À l’inverse, le menu burger est généralement déconseillé pour un usage sur ordinateur, car cela pourrait compliquer la navigation (menu caché).
→ Avant que le menu soit ouvert :
→ Une fois le menu ouvert et déployé :
Comment bien rédiger pour la navigation ?
L’enjeu est de nommer les intitulés du menu de façon claire : l’utilisateur·trice doit comprendre ce qu’il ou elle va y trouver derrière. En effet, rien de plus frustrant que d’arriver sur une page qui n’est pas celle qu’on voulait parcourir… Ces intitulés doivent également être concis pour être plus lisibles et s’adapter à un espace restreint, qui plus est lorsqu’ils se retrouvent également sur mobile. Le menu est donc un vrai challenge de concision ; tant lorsqu’il s’agit de nommer chaque élément, mais surtout lorsqu’il faut définir son architecture et les catégories qui s’y rapportent.
Parfois, la navigation apporte des repères visuels pour aider l’utilisateur ou l’utilisatrice à se localiser dans un parcours. Les étapes sont alors indiquées visuellement par des numéros dans l’ordre chronologique ou par une progress bar (barre de progression). C’est le cas dans certains processus de commande par exemple.
Exemple de progress bar - Zalando
Lorsque l’on commande un article sur Zalando, le menu progressif nous indique les étapes par lesquelles nous devrons passer pour finaliser notre commande. Les étapes sont plutôt claires, mais elles pourraient l’être encore plus et être cohérentes : Connexion, Livraison, Paiement, Validation.
