Créer un guide d'application interactif

Les équipes de support ont souvent du mal avec des applications qu'elles n'ont jamais installées.

Un PDF avec des captures d'écran est la solution standard. Mais la plupart des gens ne lisent pas les PDF. Je voulais construire quelque chose de mieux. Je voulais un guide qui ressemble à la véritable application. Vous voyez l'écran d'accueil, vous cliquez sur un bouton, et l'écran suivant apparaît.

J'ai conçu un guide interactif utilisant de véritables captures d'écran et des zones cliquables (hotspots).

Comment ça marche

J'ai utilisé Firebase Storage pour les images et du JavaScript pur pour la logique. Aucune bibliothèque externe.

  • Chaque écran est une image complète.
  • Je place des rectangles invisibles, appelés hotspots, par-dessus l'image.
  • Ces hotspots utilisent des pourcentages plutôt que des pixels. Cela permet de les maintenir alignés lorsque la taille de la fenêtre change.
  • Une simple machine à états gère la navigation. Chaque écran possède un ID, une image et une liste de hotspots.

L'éditeur

Mesurer les coordonnées à la main est lent. J'ai conçu un éditeur HTML autonome pour accélérer le processus.

  • Téléchargez une capture d'écran.
  • Faites glisser la souris pour dessiner un hotspot.
  • Liez le hotspot à un écran cible.
  • Exportez le code directement.

Choix de conception

Tous les écrans n'ont pas une navigation complète. Pour éviter toute confusion, j'ai ajouté une lueur bleue pulsante sur les zones cliquables. Cela montre aux utilisateurs exactement où ils peuvent appuyer.

Leçons techniques clés

  • Firebase Storage : Ne construisez pas les URL manuellement. Utilisez la méthode getDownloadURL du SDK. Cela inclut le jeton d'authentification nécessaire pour contourner les règles de sécurité.
  • CSS Flexbox : Si vous utilisez flex: 1 dans une mise en page en colonne, le parent doit avoir une hauteur explicite. Définissez min-height: 0 sur l'élément enfant pour éviter les débordements (overflow).
  • Performance : Appeler Firebase à chaque clic crée de la latence. J'ai implémenté un cache en mémoire et préchargé toutes les images à l'ouverture de la fenêtre modale. Cela rend la navigation instantanée.
  • Mise à l'échelle (Scaling) : Utilisez la propriété CSS transform: scale(). Cela garantit que l'image et les hotspots restent parfaitement alignés, quelle que soit la taille de l'écran.

Le résultat

  • 20 écrans navigables comme sur un vrai téléphone.
  • 52 hotspots avec des indices visuels.
  • Chargement instantané grâce au préchargement et à la mise en cache.
  • Design responsive qui s'adapte à toutes les tailles de fenêtres modales.

Source : https://dev.to/androve2k/building-an-interactive-app-guide-with-clickable-hotspots-on-real-screenshots-o9e