Concevoir une navigation intuitive

1. Objectifs

   • Expliquer ce qu'est une navigation intuitive
   • Répondre aux trois questions : où suis-je, où puis-je aller, comment revenir ?
   • Choisir les éléments de navigation adaptés au contenu et à l'appareil
   • Rédiger des libellés et des liens explicites
   • Organiser des contenus avec un plan des écrans et un tri par cartes
   • Tester une navigation avec le test du premier clic

1. Présentation

   • Qu'y a-t-il de plus frustrant que de savoir qu'une information existe sans parvenir à la trouver ? Quand la navigation est mal pensée, de bons contenus restent invisibles, et l'utilisateur peut penser que la fonction n'existe pas.
   • Une navigation est intuitive lorsque l'utilisateur peut se déplacer sans y penser. Cette dernière leçon du chapitre réunit ce que nous avons vu : l'ergonomie, la facilité, l'accessibilité et le guidage du regard.

• Nous continuons avec BiblioCampus. Pour les activités, créez le dossier 10-navigation/ dans votre dépôt GitHub ui-ux-design-bts.

1. Trois questions essentielles

   • À tout moment, une bonne navigation doit répondre à ces trois questions :

1. Les éléments de navigation

   • Il existe plusieurs éléments, qui ne s'excluent pas. Leur choix dépend de la quantité de contenu, de l'appareil et de la tâche :

1. Exemple 1 : montrer où l'on est

   • L'état actif du menu et le titre de la page confirment à l'utilisateur qu'il est au bon endroit :

1. Exemple 2 : le fil d'Ariane

   • Beaucoup de visiteurs arrivent directement sur une page depuis un moteur de recherche ou un lien partagé. Le fil d'Ariane leur montre où ils se trouvent :

1. Exemple 3 : les libellés

   • Un libellé doit permettre de prévoir ce qui se trouve derrière lui. Préférez les mots de vos utilisateurs à ceux de l'organisation :

1. Organiser les contenus

   • Avant de dessiner un menu, il faut organiser les contenus. Le plan des écrans, ou arborescence, montre les pages et leurs liens. Vous approfondirez l'architecture de l'information au chapitre 13.

1. Exemple 4 : la navigation mobile

   • Sur mobile, l'espace est limité. Pour trois à cinq destinations principales, une barre d'onglets est souvent adaptée, car elle reste visible et facile à atteindre.
   • Le menu masqué (« hamburger ») reste utile pour les options secondaires, ou lorsque les sections sont nombreuses.

1. Exemple 5 : revenir en arrière

   • Le bouton Retour de l'appareil ou du navigateur doit produire ce que l'utilisateur attend. Il ne doit pas lui faire perdre ce qu'il vient de saisir :

1. Exemple 6 : les étapes d'un parcours

   • Dans un parcours guidé, indiquez clairement les étapes :

1. Exemple 7 : les liens

   • Le texte d'un lien doit annoncer sa destination. C'est utile à tous, et notamment à ceux qui parcourent la liste des liens avec un lecteur d'écran :

1. Exemple 8 : la recherche

   • Lorsqu'un utilisateur sait ce qu'il cherche, la recherche est souvent le chemin le plus direct. Elle doit aussi gérer les fautes et l'absence de résultat :

1. Exemple 9 : la page d'erreur

   • Un lien cassé ne doit pas devenir une impasse :

1. Quelques règles à respecter

   • Rester cohérent: gardez le même menu au même endroit dans toute l'application.
   • Respecter les conventions: le logo mène à l'accueil et le lien du panier conduit au panier.
   • Rendre la navigation accessible: utilisez <nav>, de vrais liens et un accès au clavier.
   • Prévoir le mobile et le bureau: la présentation peut changer, mais les sections doivent rester les mêmes.

1. Découvrir comment les utilisateurs classent

   • Ne devinez pas comment organiser vos contenus. Le tri par cartes montre la logique des utilisateurs :

1. Tester la navigation

   • Le test du premier clic consiste à donner une tâche et à noter le premier élément choisi :

1. Activité 1 : répondre aux trois questions

   • Pour cet écran, indiquez où vous êtes, où vous pouvez aller et comment revenir :

• Vérifier : il est difficile de répondre. Le titre « Page » ne dit rien, le menu masqué s'ajoute à sept mots vagues, « Cliquez ici » n'annonce rien, « Suivant » n'indique pas la suite, et il n'y a aucun retour.
• Quelles sont vos trois premières corrections ?

1. Activité 2 : renommer un menu

   • Remplacez ces libellés par des mots plus clairs pour une application de bibliothèque : « Ressources », « Mon espace », « Outils », « Informations », « Assistance ».
   • Demandez ensuite à un camarade ce qu'il s'attend à trouver derrière chacun.
   • Vérifier : sa réponse correspond à votre intention. Sinon, cherchez un autre mot.

1. Activité 3 : réaliser un tri par cartes

   • Écrivez ces contenus sur des cartes. Demandez à trois personnes de les regrouper, puis de nommer chaque groupe :

• Vérifier : il n'existe pas de réponse unique. Notez les regroupements fréquents et les contenus qui divisent. Où placez-vous la bibliothèque ? Pourquoi ?

1. Activité 4 : dessiner un plan des écrans

   • À partir de vos résultats, dessinez le plan des écrans du portail étudiant : accueil, sections et sous-pages.
   • Vérifier : chaque contenu a une place claire, et on peut atteindre les plus utilisés sans parcours inutilement long.

1. Activité 5 : choisir la barre d'onglets

   • Pour une application mobile de ce portail, choisissez quatre ou cinq onglets et justifiez vos choix. Où placerez-vous les autres contenus ?
   • Vérifier : les onglets correspondent aux tâches fréquentes, avec un libellé court. Les fonctions rares se trouvent dans une page « Plus » ou « Compte ».

1. Activité 6 : écrire un fil d'Ariane

   • Écrivez le fil d'Ariane de ces pages :
     • la fiche du livre « Apprendre Flutter » ;
     • le formulaire de demande d'attestation du portail étudiant ;
     • une leçon du cours UI/UX sur le site apcpedagogie.com.
   • Vérifier : par exemple Accueil › Catalogue › Informatique › Apprendre Flutter. Chaque niveau, sauf le dernier, est un lien.

1. Activité 7 : réécrire des liens

   • Réécrivez ces phrases :
     • « Pour télécharger le formulaire, cliquez ici. »
     • « Nos horaires : voir plus. »
     • « Votre attestation est prête. Lien. »
     • « Pour nous écrire, c'est par là. »
   • Vérifier : le texte cliquable annonce seul la destination, par exemple Télécharger le formulaire d'inscription (PDF) ou Voir les horaires.

1. Activité 8 : concevoir une page 404

   • Dessinez la page d'erreur d'un portail étudiant ou de votre propre projet : message, recherche et trois liens utiles.
   • Vérifier : le message évite le vocabulaire technique, n'accuse pas l'utilisateur et propose une sortie évidente.

1. Activité 9 : tester le premier clic

   • Sur papier ou sur un site, proposez cinq tâches à trois personnes. Notez leur premier clic sans les aider, puis corrigez les libellés ou la structure.
   • Vérifier : vous présentez un tableau avec le clic attendu, les clics observés et une conclusion pour chaque tâche.

1. Activité 10 : déposer votre travail sur GitHub

   • Regroupez vos réponses dans 10-navigation/README.md et ajoutez les images de vos plans et de vos maquettes, puis envoyez le tout :

git add 10-navigation
git commit -m "Ajoute la leçon sur la navigation intuitive"
git push

• Vérifier : le fichier README.md et vos images apparaissent bien sur la page GitHub du dépôt.

1. Erreurs fréquentes

1. À retenir

   • Une navigation intuitive répond à trois questions : où suis-je, où puis-je aller, comment revenir ?
   • Plusieurs éléments se combinent : menu, onglets, fil d'Ariane, recherche, liens et pied de page.
   • Les libellés et les liens doivent annoncer clairement leur destination.
   • Le plan des écrans et le tri par cartes aident à organiser le contenu du point de vue de l'utilisateur.
   • Sur mobile, gardez visibles les destinations principales lorsque c'est possible.
   • Le test du premier clic permet de vérifier une navigation à partir de tâches réelles.

Une bonne navigation se remarque à peine : l'utilisateur pense à ce qu'il veut faire, pas au chemin pour y arriver.