Choisis ta planète

Les réflexes du dispositif muséal. Un écran de veille qui invite en trois langues, un parcours de quatre écrans qu’on termine en une minute, des cibles de 64 px espacées de 24 px pour un doigt d’enfant ou une main pressée, un chiffre géant par fiche, trois faits de douze mots, un retour automatique à la veille quand personne ne touche l’écran. Rien à lire avant d’agir.

Une architecture qu’un responsable technique peut lire. Une machine à états explicite (six écrans, une fonction de transition), des contenus dans un fichier JSON plat par langue qu’un médiateur modifie sans développeur, un contraste renforcé pour l’éclairage d’exposition, un panneau de réglages exploitant mémorisé sur la machine et un service worker qui garde tous les fichiers en cache : la page fonctionne sans réseau.

La résistance au chaos. Deuxième pointeur ignoré pendant 300 ms, aucun geste autre que le tap, menu contextuel et sélection de texte bloqués, bandeau « Toujours là ? » prolongeable sans limite, retour à la veille désactivable par le visiteur.

Le contenu est volontairement banal — huit planètes que tout le monde connaît — pour que l’attention aille à l’interface : ce qu’on touche, où va le regard, ce qui se passe quand on ne fait rien. Le seul « effet » est le disque à l’échelle, parce qu’il porte la seule information que le texte ne peut pas donner.

Les écrans sont rendus côté serveur, en français, et masqués par l’attribut hidden ; le script se contente d’appliquer l’état. Changer de langue ne reconstruit rien : chaque texte porte la clé de sa traduction.

// src/lib/kiosk.ts — une seule fonction de transition : nouvel état + effets,
// jamais de DOM. Le contrôleur (kiosk-demo.ts) applique les effets : masquer
// les autres écrans, déplacer le focus, annoncer le titre, relancer la minuterie.
export function transition(state: KioskState, action: KioskAction): { state: KioskState; effects: Effects } {
  switch (action.type) {
    case 'toucher':
      return state.screen === 'veille' ? go(state, 'accueil') : same(state);
    case 'commencer':
      return state.screen === 'accueil' ? go(state, 'choix') : same(state);
    case 'choisir':
      return state.screen === 'choix' || state.screen === 'fiche'
        ? go(state, 'fiche', { planet: action.planet }) : same(state);
    case 'comparer':
      return state.screen === 'fiche' && state.planet ? go(state, 'comparer') : same(state);
    case 'autre':
      return state.screen === 'fiche' || state.screen === 'comparer' ? go(state, 'choix') : same(state);
    case 'terminer':
      return state.screen === 'fiche' || state.screen === 'comparer' ? go(state, 'fin') : same(state);
    case 'retour':                       // Échap : l'écran précédent
      return state.screen === 'veille' ? same(state) : go(state, PREVIOUS[state.screen]);
    case 'accueil':                      // depuis tout écran
      return state.screen === 'accueil' ? same(state) : go(state, 'accueil', { planet: null });
    case 'veille':                       // fin de visite ou inactivité
      return state.screen === 'veille' ? same(state) : go(state, 'veille', { planet: null });
    case 'langue':
      return action.lang !== state.lang
        ? { state: { ...state, lang: action.lang }, effects: { …announce: SCREEN_KEY[state.screen] } }
        : same(state);
    // contraste, debug : idem, sans changer d'écran
  }
}

function go(state, screen, patch = {}) {
  const next = { ...state, ...patch, screen };
  return { state: next, effects: { focusFirst: true, announceKey: SCREEN_KEY[screen],
                                   resetTimer: screen !== 'veille', scheduleSleep: screen === 'fin' } };
}

• src/lib/kiosk.ts — machine à états, échelles des disques, formats numériques par langue (testé).
• src/scripts/kiosk-demo.ts — contrôleur DOM : écrans, focus, annonces, minuteries, langues, contraste, mise à l’échelle, mode borne, réglages.
• src/data/kiosk-i18n.json — textes d’interface et fiches des huit planètes en français, anglais, espagnol.
• public/sw-kiosk.js — service worker : cache local des fichiers de la page, mise à jour au redémarrage.
• tests/kiosk.test.ts — toutes les transitions, langues, échelles et formats.

• Clavier — la borne est une région ; Tab parcourt les tuiles et les boutons (natifs), Entrée active, Échap revient à l’écran précédent ; le focus est déplacé sur le premier élément de chaque nouvel écran ; anneau de focus de 3 px, plus épais qu’ailleurs, pour la distance.
• Lecteur d’écran — le titre de chaque écran est annoncé dans une zone polie unique ; l’attribut lang suit la langue choisie pour une prononciation correcte.
• Mouvement réduit — aucune transition entre écrans, veille statique quelle que soit l’option exploitant.
• Contraste renforcé — texte blanc, boutons en aplat clair avec texte sombre, bordures de 2 px, textes agrandis de 15 %.
• Minuteries — retour automatique désactivable sous le cadre ; bandeau prolongeable sans limite (WCAG 2.2.1).
• Sans JavaScript — le poster de l’écran de veille ; le prototype nécessite JavaScript.
• Hors ligne — après une première visite, la page fonctionne sans réseau (test : couper le réseau, recharger).
• Reste à améliorer — alternatives audio et version « facile à lire et à comprendre » des fiches, hauteur d’écran et commandes à préconiser entre 0,90 m et 1,30 m pour un usage en fauteuil, test avec des visiteurs réels.

Procédure d’installation type

• PC Windows, mode kiosque — session utilisateur dédiée à ouverture automatique ; Chrome ou Edge lancé au démarrage avec --kiosk https://…/explorations/borne (tâche planifiée « à l’ouverture de session ») ; mise en veille et économiseur d’écran désactivés ; une seconde tâche relance le navigateur s’il n’est plus en cours d’exécution.
• Tablette Android — lanceur kiosque (mode « application dédiée » d’Android Enterprise ou lanceur tiers) verrouillé sur l’URL, barre système masquée, redémarrage programmé la nuit.
• iPad — Accès guidé (Réglages › Accessibilité) sur la page ouverte dans Safari, orientation verrouillée, luminosité fixe.
• Test avant livraison — quarante-huit heures en continu, coupure de réseau simulée, redémarrage électrique, vérification de la relance automatique.

Dans un muséum ou un centre de sciences, cette borne reçoit votre collection à la place des planètes : un fichier de contenus par langue, modifiable par vos médiateurs, et la même robustesse — veille, retour automatique, réglages exploitant.

Ce concept vous parle ? Il reste à l’adapter à votre lieu, votre public et vos contraintes. Parler de votre projet →