Escape game numérique Genially : boutons de navigation (4/6) Apprenez à ajouter et relier des boutons de navigation dans Genially pour guider les joueurs entre les scènes d'un escape game numérique. Dans cette étape 4/6 de la série Geek Junior, on se concentre sur les boutons de navigation.
Dans cette étape 4/6 de la série Geek Junior, on se concentre sur les boutons de navigation. L’objectif est clair: permettre au joueur de se déplacer d’une scène à l’autre dans votre escape game numérique Genially. Voici comment faire, étape par étape, avec des explications concrètes et des conseils pratiques pour éviter les erreurs courantes.
Ajouter le premier bouton
Pour démarrer, ouvrez Genially et votre jeu. Dans la colonne de gauche, allez dans Éléments interactifs, puis sélectionnez Boutons et choisissez Text button. Placez le bouton au centre de l’écran et renommez-le Entrer. Cette étape donne une porte d’entrée claire à la navigation. Pensez aussi à nommer les boutons de manière simple et cohérente, car cela facilitera les connexions entre scènes sur la suite.
À présent, vérifiez que le bouton est bien accessible sur toutes les résolutions. Genially propose des repères de placement, mais un aperçu rapide sur mobile reste recommandé pour éviter les collisions avec d’autres éléments.
Activer le bouton et définir la destination
Sélectionnez le bouton que vous venez de créer et ouvrez l’onglet Interactivité. Dans la colonne de droite, sous Navigation, choisissez Aller à la page et cliquez sur Ajouter. Dans la fenêtre qui s’ouvre, sélectionnez la page de destination (par exemple SCÈNE 0) puis cliquez sur Enregistrer. Le bouton est alors opérationnel et dirigera le joueur vers la scène choisie.
Évitez les destinations ambiguës et privilégiez des noms clairs (par exemple SCÈNE 0, SCÈNE 1, Salle de cours). Tester régulièrement la navigation permet de repérer rapidement des erreurs de lien ou des pages manquantes.
Relier la première scène et planifier les connexions
Reportez-vous à votre schéma de game design pour déterminer quelles pièces relier à la scène d’accueil. Sur la SCÈNE 0 (Hall d’accueil), prévoyez des boutons menant vers les pièces clés: Accueil, Salle de cours, Bureau du proviseur, Salle des profs, CDI. Sur chaque scène, créez les boutons correspondants et reliez-les à leurs pages cibles. Testez le fonctionnement en cliquant sur l’icône œil en bas à droite pour prévisualiser et ajuster le positionnement si nécessaire.
Cette étape est cruciale: un plan de navigation clair évite les boucles involontaires et les routes absentes qui brisent l’immersion. Une bonne pratique consiste à encoder la destination directement dans le nom du bouton et de vérifier que chaque scène possède au moins une sortie.
Relier toutes les scènes et personnaliser l’interface
Répétez l’opération sur chaque scène. Vous pouvez modifier la couleur, la taille de la police et d’autres paramètres via le bandeau d’édition pour rendre les boutons lisibles et cohérents visuellement. Testez régulièrement la maquette pour garantir une navigation fluide: si une scène n’a pas de sortie claire, l’expérience peut sembler bloquée.
Pour une expérience utilisateur plus riche, exploitez les états des boutons: par exemple, un bouton peut changer de couleur au survol ou lorsqu’il est actif. Veillez toutefois à rester lisible et accessible, en privilégiant des contrastes suffisants et des libellés explicites.
Pour terminer
Avec ces boutons en place, la navigation entre les scènes est opérationnelle et contribue fortement à l’immersion. Cette étape prépare le terrain pour les prochaines tutoriels, qui aborderont des éléments comme le code secret et les mécanismes d’évasion du lieu imaginé.
