Usage et efficacité
Comment conserver les liens directs, le bouton Retour et le partage dans un site immersif ?
Les transitions d’un site immersif doivent accompagner une navigation dont les adresses et les étapes restent compréhensibles. Une scène peut évoluer sans recharger toute la page, mais le visiteur doit toujours pouvoir partager le contenu présent, revenir au précédent et retrouver une information depuis un lien extérieur.
L'essentiel.
Un site immersif reste un site web : une personne doit pouvoir rejoindre une scène précise, la partager et revenir à l’étape précédente. Cette continuité se prépare dans le modèle de navigation, avant le choix des transitions.
- Donner une adresse stable aux contenus que l’on souhaite retrouver ou partager.
- Réserver les étapes de l’historique aux changements significatifs du parcours.
- Vérifier qu’une adresse fonctionne lorsqu’elle est ouverte directement, sans visiter l’accueil.
- Restaurer le contenu, les repères et le focus de manière cohérente lors des retours.
Ces comportements ne se réparent pas en ajoutant un bouton de partage à la fin du projet. Ils dépendent d’une question de conception : quels changements représentent un nouveau contenu, et lesquels sont simplement des variations momentanées de son affichage ? Cette distinction permet de préserver à la fois la liberté créative et les habitudes du Web.
Décider ce qui mérite une adresse
Une page produit, un chapitre documentaire ou une réalisation peuvent exister de façon autonome. Ils ont donc intérêt à disposer d’une adresse identifiable. Une rotation momentanée de caméra ou la position d’une particule ne représente généralement pas une destination utile.
Écrivez les situations de partage attendues. Un architecte souhaite envoyer un espace précis d’une visite virtuelle. Une marque veut faire découvrir une couleur de produit. Un journaliste doit pouvoir ouvrir le passage cité dans son article. Ces besoins définissent le modèle d’adresses avant les détails d’animation.
| Élément du parcours | Adresse ou état conseillé | Raison |
|---|---|---|
| Projet ou chapitre autonome | Adresse stable | Accès direct, référence et partage |
| Variante utile à comparer | Paramètre lisible si nécessaire | Retrouver une sélection explicite |
| Angle de caméra provisoire | État local de l’interface | Éviter un historique encombré |
| Donnée personnelle saisie | Ne pas placer dans l’adresse | Éviter son exposition lors du partage |
Cette table constitue une méthode de conception, pas une règle technique absolue. Une œuvre interactive peut avoir besoin de partager un point de vue exact. Dans ce cas, l’adresse doit représenter cet état volontairement, avec une limite raisonnable de complexité et une stratégie en cas de contenu modifié.
Faire correspondre l’historique aux attentes du visiteur
Dans une application qui change de contenu sans rechargement complet, l’historique du navigateur doit être géré explicitement. MDN décrit le rôle de pushState, replaceState et de l’événement popstate pour ajouter, modifier et restaurer ces étapes.
Le choix éditorial reste essentiel. Ouvrir un nouveau projet peut créer une étape. Corriger un paramètre temporaire peut remplacer l’état courant. Enregistrer chaque mouvement du curseur créerait au contraire une navigation pénible : il faudrait revenir de nombreuses fois pour quitter une seule scène.
Définissez également le comportement d’une transition interrompue. Si le visiteur appuie sur Retour pendant un déplacement de caméra, quel contenu doit rester actif ? La scène visuelle et l’adresse doivent converger vers le même état. Une animation ne devrait pas laisser un titre de projet associé à l’adresse d’un autre.
Exemple pédagogique : une exposition que l’on peut citer
Imaginons un musée fictif présentant une exposition en quatre salles. Une première proposition technique conserve la même adresse pendant toute la visite. Le bouton de partage renvoie donc à l’entrée, même lorsqu’une personne voulait montrer une œuvre particulière.
La conception révisée attribue une destination à chaque salle et à chaque œuvre. Le décor et la transition restent immersifs, mais une personne arrivant directement sur une œuvre voit immédiatement son titre, sa description et les commandes permettant de rejoindre la salle. Elle n’a pas à rejouer l’introduction pour comprendre où elle se trouve.
Trois niveaux de navigation
- DestinationUn projet, une œuvre ou un chapitre possède une adresse stable.
- État temporaireAngle, mouvement et progression visuelle restent des variations locales.
- RestaurationRetour et lien direct rétablissent le contenu et ses repères utiles.
Le protocole de réception comprend trois parcours : entrée depuis l’accueil, entrée depuis un lien profond et retour après consultation d’une autre œuvre. La conception prévoit aussi une œuvre retirée : l’adresse affiche une explication et des destinations pertinentes plutôt qu’une scène vide. L’expérience devient ainsi utilisable comme ressource, au-delà de la première découverte.
Restaurer des repères, pas seulement des pixels
Le retour doit retrouver un contexte intelligible. Selon le parcours, il peut s’agir du projet sélectionné, du chapitre ouvert ou de la position dans une liste. Revenir systématiquement au sommet d’une longue page peut obliger la personne à recommencer une exploration déjà effectuée.
Il faut aussi définir le focus clavier et le titre du document. Lorsqu’un changement constitue une véritable navigation, le visiteur doit pouvoir comprendre le nouveau contexte. Une simple mise à jour locale demande un traitement différent. Le critère WCAG relatif aux messages d’état concerne certains messages qui doivent pouvoir être annoncés sans prendre le focus ; il ne remplace pas une stratégie complète de navigation.
Pour contrôler le système, ouvrez chaque destination dans un nouvel onglet, rechargez-la et utilisez successivement Retour puis Avancer. Vérifiez le partage d’une variante, l’absence d’état sauvegardé et le fonctionnement après une interruption réseau. Répétez le parcours au clavier. Les erreurs découvertes à ce stade concernent souvent le modèle de navigation lui-même, et doivent être corrigées avant de polir les transitions.
Questions fréquentes
Toutes les scènes doivent-elles devenir des pages indépendantes ?
Non. Une scène peut rester une partie d’un même contenu. L’adresse devient utile lorsqu’une personne peut vouloir retrouver, citer ou transmettre cette destination. Définissez les contenus autonomes et les variations internes, puis choisissez la structure la plus simple qui respecte ces besoins.
Une adresse avec un paramètre est-elle forcément mauvaise ?
Non. Un paramètre peut représenter une variante ou une sélection légitime. Il faut cependant prévoir les valeurs absentes ou incorrectes, conserver une destination compréhensible et éviter d’y placer des informations sensibles. La multiplication des paramètres doit correspondre à un besoin réel de restauration ou de partage.
Le bouton de partage natif suffit-il ?
Il fournit un moyen de transmettre une adresse, mais ne garantit pas que cette adresse représente le bon contenu. Il faut d’abord valider l’ouverture directe, le titre affiché et l’état initial. Une fonction de copie de lien peut compléter le partage lorsqu’il n’est pas disponible dans le contexte utilisé.
Sources
LVX : construire des expériences que l’on peut retrouver
LVX peut intégrer le modèle de navigation à la conception de l’expérience, dès le choix des chapitres et des interactions. L’objectif est de relier chaque moment fort à une destination utile : un contenu que l’on peut partager, revoir et comprendre sans mode d’emploi. Les transitions sont ensuite travaillées avec ces contraintes explicites, puis vérifiées sur les parcours d’entrée et de retour. Cette démarche préserve la mise en scène tout en donnant au site une valeur durable de présentation, de consultation et de discussion commerciale. Discuter du projet avec LVX.
