Table des matières
A – AA
Durée : 6 minutes
Testez-vous !
Principe
Pour garantir une expérience fluide et accessible, il est essentiel d’organiser le parcours en jalons clairs : intro, objectifs, sections, quiz, synthèse, etc.
Ce point concerne la structuration du parcours et la création de repères qui guident l’apprenant, quelle que soit la solution technique utilisée. C’est au cœur du métier de l’ingénierie pédagogique.
Explication audio (transcription disponible)
Transcription
Navigation et repères, c’est vraiment votre cœur de métier : il s’agit de structurer le contenu et de donner des points de repère à l’apprenant.
L’essentiel, c’est d’anticiper la présentation de chaque type de contenu, et de créer une charte graphique simple pour que chacun s’y retrouve : sommaire, contenu, activité, synthèse…
Ainsi, l’apprenant saura naturellement où trouver le titre, ou où apparaît le feedback après un quiz. Variez les formats, mais gardez une cohérence : cela facilite l’orientation et l’apprentissage.
N’hésitez pas à donner quelques consignes de navigation au début : même si l’interface paraît intuitive, un petit tutoriel ou une aide rapide est toujours utile.
Enfin, en accessibilité, offrir plusieurs façons d’accéder à l’information (menu, sommaire cliquable, liens internes…) reste essentiel. Même dans un parcours guidé, il est important de proposer des repères clairs et la possibilité d’explorer librement le module.
À vérifier
- Structurer le module en grandes parties clairement identifiées et visuellement distinctes (ex. : intro, objectifs, sections, conclusion…)
- Ajouter plusieurs points d’entrée vers un contenu (menu, sommaire, liens internes)
- Expliquer la navigation au début du module
- Afficher des repères temporels ou de progression (ex. : durée estimée, nombre d’étapes)
- Appliquer une charte graphique minimale (couleurs, icônes, gabarits) pour aider à l’orientation
- Harmoniser la position, le style et le nom des éléments de navigation (boutons, liens, menus) sur tout le module
Pour qui ?
- Tous les utilisateurs, y compris ceux qui découvrent le module ou utilisent des aides techniques (clavier, lecteur d’écran, troubles cognitifs…).
Pourquoi c’est important ?
Des repères constants et une navigation cohérente facilitent l’apprentissage implicite et limitent la désorientation.
L’utilisateur comprend vite où se trouve chaque élément et n’a pas à tout réapprendre à chaque module.
Comment réussir
- Concevez une structure et des repères dès la phase de storyboard.
- Gardez la même logique de présentation pour chaque type de contenu.
- Expliquez les consignes clés en début de module.
- Proposez plusieurs accès à la navigation lorsque c’est possible : menu, sommaire, liens internes… Cela facilite l’orientation pour tous les utilisateurs. Généralement, le sommaire est à intégrer manuellement pour les interfaces (Storyline, Rise…), et généré automatiquement à partir des titres pour les documents (Word, PDF…).
- Testez la navigation du point de vue d’un nouvel utilisateur.
WCAG
Astuce avancée : repères graphiques et organisationnels
Une cohérence à l’échelle du parcours
La structuration de la navigation ne s’arrête pas à un seul module. L’enjeu réel est de garantir une expérience apprenante cohérente tout au long du parcours.
D’un module à l’autre, l’utilisateur doit retrouver ses repères visuels, structurels et de navigation. Cela facilite l’apprentissage, l’autonomie, et favorise l’accessibilité.
Quelques bonnes pratiques à adopter dès le départ
- Créez une charte graphique simple et réutilisable (couleurs, icônes, typographies, styles d’encadrés)
- Définissez des modèles d’écrans récurrents (introduction, objectifs, activités, quiz, synthèses)
- Documentez vos choix en interne, surtout si plusieurs concepteurs interviennent.
Adapter sa structuration à l’outil
Chaque outil auteur a ses contraintes et ses possibilités. L’enjeu n’est pas de faire partout pareil, mais d’adapter votre structuration, tout en gardant une logique claire et constante.
Outil Web guidé
Dans un outil guidé comme Rise360, la personnalisation avancée est limitée, mais vous pouvez optimiser la structuration grâce aux éléments disponibles.
- Jouez sur la mise en page (styles de blocs et de titres) pour bien distinguer les grandes parties.
- Utilisez des séparateurs visuels simples (traits horizontaux, fonds colorés, images) pour structurer les contenus.
Exemple d’introduction dans Rise 360 :
Ici, la page de bienvenue de chaque module commence par un titre principal (niveau 1), une image d’illustration, la durée à droite, un bloc « Objectif » et le sommaire sous forme de liste.
Un bloc « Navigation » séparé par un trait précise à l’apprenant que la navigation se fait via les boutons de navigation situés en haut (précédent) et en bas (suivant) des chapitres. L’utilisateur peut explorer le menu à tout moment.
Outil avancé
Avec un outil plus avancé comme Storyline, vous disposez de beaucoup plus de liberté pour structurer et personnaliser graphiquement votre module.
- Choisissez une structure régulière (par exemple : la consigne en haut, le feedback à droite d’une question, le bouton valider en bas à droite …)
- Créez des masques à réutiliser dans différents modules.
- N’hésitez pas à esquisser des maquettes avant de vous lancer (papier, PowerPoint, etc.), et à créer éventuellement des maquettes graphiques plus abouties (Canva, Affinity, Adobe…) que vous pouvez valider avec le commanditaire.
Exemple Storyline
Dans cet exemple, on définit pour chaque module un écran affichant un titre principal, un bloc « Objectif » et le sommaire sous forme de tuiles cliquables. Un bandeau est ajouté pour marquer l’en-tête et peut être personnalisé en fonction des écrans (ici, la durée du module est affichée à droite du bandeau).
La navigation entre les écrans se fait via les boutons du lecteur Précédent/Suivant en bas à droite (un écran explique avant comme fonctionne la navigation au tout début du module). L’utilisateur peut explorer le menu.
En bref
- Adaptez la structuration à l’outil, mais gardez des repères constants (titres, boutons, bandeaux…).
- Pensez en “couches graphiques” : commencez par la structure, puis enrichissez avec un style graphique cohérent (couleurs harmonieuses, styles de blocs…).
- Clarté et cohérence priment sur la personnalisation excessive. Une charte graphique simple évite bien des débats et du bricolage.
Pour aller plus loin
Documenter l’accessibilité en phase de design ! par Stéphanie walter
Suivre ma progression :
Ce point est lu & terminé.