Mouvement et narration
Comment créer des transitions entre les pages sans faire perdre les repères ?
Une transition entre pages est utile lorsqu'elle aide à comprendre la relation entre la vue quittée et la vue découverte. Une image peut devenir l'ouverture d'un projet, un panneau peut se refermer pour retrouver une liste ou un déplacement cohérent peut annoncer un changement de chapitre. L'effet doit aboutir à un état stable et identifiable.
L'essentiel.
Une transition entre pages doit expliquer le passage d’un contexte à l’autre. Elle peut conserver un élément commun ou une direction cohérente, mais doit laisser la nouvelle page identifiable et préserver les comportements ordinaires de navigation.
- Choisissez ce qui relie réellement les deux vues avant de dessiner le passage.
- Laissez la nouvelle page lisible et utilisable sans attendre un effet décoratif.
- Vérifiez le retour, les ouvertures directes et les changements rapides de destination.
- Préparez une navigation complète qui fonctionne aussi sans transition animée.
La transition ne doit pas faire oublier qu'une navigation a eu lieu. Le titre, l'adresse, le focus et les repères doivent rester cohérents avec la nouvelle page. La continuité visuelle devient un soutien à l'orientation, avec un comportement prévu lorsque l'animation est absente ou interrompue.
Identifier la relation à montrer
Deux pages peuvent partager un objet, une rubrique ou un contexte. Cette relation donne une matière à la transition. Dans un portfolio, la vignette d'un projet peut devenir sa grande image. Dans un catalogue, un retour peut retrouver l'élément sélectionné dans la liste.
Évitez d'inventer une continuité qui n'existe pas. Une transition complexe entre deux contenus sans rapport peut devenir un spectacle répété. Un changement direct, accompagné d'un titre et de repères clairs, peut être préférable.
Définissez également le sens du déplacement. Si les pages se succèdent dans un ordre, une direction peut traduire cette progression. Si la navigation est libre, une direction arbitraire risque de suggérer une organisation inexistante.
Concevoir l'état d'arrivée en premier
La nouvelle page doit être compréhensible lorsqu'elle est ouverte directement. Son titre, son introduction et ses commandes ne doivent pas dépendre d'une transition vue auparavant. Cette règle permet aussi de préparer la solution de repli.
La View Transition API permet de créer des transitions entre des vues et, dans les configurations prises en charge, entre des documents. Le choix technique doit être vérifié selon les navigateurs ciblés ; il ne dispense pas de concevoir les états de navigation.
| Situation | Repère à préserver | Test nécessaire |
|---|---|---|
| Liste vers détail | Relation avec l'élément choisi | Le détail est-il identifiable ? |
| Détail vers liste | Contexte de la sélection | Retrouve-t-on sa position utile ? |
| Ouverture directe | Titre et contexte autonomes | La page fonctionne-t-elle sans transition ? |
| Navigation rapide | Dernière intention du visiteur | L'ancienne animation s'annule-t-elle proprement ? |
| Animation indisponible | Fonction complète | Le changement reste-t-il clair ? |
Exemple fictif : un portfolio de scénographie
Un studio présente ses projets dans une grille d'images. Lorsqu'une personne ouvre une réalisation, la vignette peut se prolonger vers la grande image d'introduction. Le titre apparaît avec le nouveau contexte, puis les informations deviennent disponibles.
Une première version anime tous les éléments de la grille avant d'ouvrir la page. Ce mouvement masque la relation la plus utile : l'image choisie. Nous simplifions la transition autour de cet élément et laissons les autres disparaître sans attirer l'attention.
Au retour, le site retrouve la position pertinente dans la grille. Si le visiteur ouvre le projet dans un nouvel onglet ou depuis un lien partagé, la page apparaît directement avec son titre et son image. L'expérience reste complète ; la transition n'était qu'une manière de relier les deux vues.
Garder le lien avec le choix initial
- GrilleUne vignette précise est choisie par le visiteur.
- PassageCette image devient le repère principal de la transition.
- ProjetLe titre et le contenu fonctionnent aussi en ouverture directe.
- RetourLa liste retrouve un contexte et une position utiles.
Préserver les repères de navigation
Les menus et les commandes récurrents doivent rester prévisibles. Le critère WCAG de navigation cohérente encadre notamment l'ordre relatif des mécanismes répétés. Une transition expressive ne justifie pas de déplacer arbitrairement les accès habituels.
Vérifiez ce que devient le focus après le changement de vue, ainsi que le titre du document et l'historique. Ces points doivent être traités avec le mode de navigation utilisé par le site. Il ne suffit pas que l'image se déplace correctement pour considérer la navigation comme complète.
Les gestes ordinaires méritent aussi une recette : retour du navigateur, ouverture dans un nouvel onglet, lien direct et navigation au clavier. Le travail sur les liens d'un site immersif reste distinct du dessin de la transition, mais les deux doivent être validés ensemble.
Prévoir les retards et les interruptions
Une destination peut prendre du temps à devenir disponible. Ne lancez pas un passage vers un état vide sans stratégie. Décidez ce qui reste visible, ce qui signale l'attente et comment l'utilisateur peut revenir ou changer d'action.
Testez ensuite deux navigations rapides. La seconde intention doit être traitée de manière cohérente, sans laisser une ancienne animation imposer sa destination. Les transitions doivent pouvoir s'annuler et nettoyer leurs états temporaires.
Enfin, prévoyez une version réduite en mouvement. Le lien entre les pages peut être conservé par le cadrage, le titre et les repères, même lorsque le déplacement animé disparaît.
Questions fréquentes
Faut-il animer chaque changement de page ?
Non. Réservez les transitions élaborées aux relations qu'elles rendent plus claires ou aux moments importants du récit. Un effet identique répété partout peut ralentir la perception du site. La cohérence peut venir de quelques comportements simples, avec des exceptions justifiées.
Une transition doit-elle masquer le chargement ?
Elle peut accompagner une attente réelle, mais ne doit pas promettre une arrivée que le contenu ne peut pas assurer. Préparez un état explicite lorsque la destination tarde. Une animation ne remplace ni l'optimisation du chargement ni une gestion correcte des erreurs.
Peut-on conserver la même transition sur mobile ?
Seulement si les éléments et les relations restent comparables. Une grande image de grille peut changer de proportion ou de place sur un écran étroit. Il faut alors adapter la transition ou la simplifier, tout en conservant la relation entre le choix et le contenu ouvert.
Sources
Relier les pages avec LVX
Pour un projet LVX, nous proposons de choisir les transitions à partir des relations entre les contenus. Un prototype peut montrer le passage d'une liste vers un détail, son retour et une ouverture directe. Cette approche permet d'évaluer le mouvement avec les usages qui l'entourent, plutôt que comme un film indépendant. Les comportements retenus sont ensuite documentés avec leurs interruptions et leurs solutions de repli. L'objectif est une continuité visuelle qui renforce la marque tout en laissant la navigation fiable, compréhensible et utilisable dans des conditions variées. Découvrir notre approche.
