Creare una guida interattiva per le app

I team di supporto spesso hanno difficoltà con le app che non hanno mai installato.

Un PDF con screenshot è la soluzione standard. La maggior parte delle persone non legge i PDF. Volevo costruire qualcosa di meglio. Volevo una guida che sembrasse l'app reale. Vedi la schermata iniziale, clicchi un pulsante e appare la schermata successiva.

Ho creato una guida interattiva utilizzando screenshot reali e hotspot cliccabili.

Come funziona

Ho usato Firebase Storage per le immagini e vanilla JavaScript per la logica. Nessuna libreria esterna.

  • Ogni schermata è un'unica immagine intera.
  • Posiziono dei rettangoli invisibili, chiamati hotspot, sopra l'immagine.
  • Questi hotspot utilizzano le percentuali invece dei pixel. Questo permette di mantenerli allineati quando la dimensione della finestra cambia.
  • Una semplice macchina a stati gestisce la navigazione. Ogni schermata ha un ID, un'immagine e un elenco di hotspot.

L'editor

Misurare le coordinate a mano è lento. Ho costruito un editor HTML standalone per velocizzare il processo.

  • Carica uno screenshot.
  • Trascina il mouse per disegnare un hotspot.
  • Collega l'hotspot a una schermata di destinazione.
  • Esporta il codice direttamente.

Scelte di design

Non tutte le schermate hanno una navigazione completa. Per evitare confusione, ho aggiunto un bagliore blu pulsante alle aree cliccabili. Questo mostra agli utenti esattamente dove possono toccare.

Lezioni tecniche chiave

  • Firebase Storage: Non costruire gli URL manualmente. Usa il metodo SDK getDownloadURL. Questo include il token di autenticazione necessario per bypassare le regole di sicurezza.
  • CSS Flexbox: Se usi flex: 1 in un layout a colonna, il genitore deve avere un'altezza esplicita. Imposta min-height: 0 sul figlio per prevenire l'overflow.
  • Performance: Chiamare Firebase ad ogni clic aggiunge ritardo. Ho implementato una cache in memoria e ho precaricato tutte le immagini all'apertura della modale. Questo rende la navigazione istantanea.
  • Scaling: Usa la proprietà CSS transform: scale(). Questo assicura che l'immagine e gli hotspot rimangano perfettamente allineati indipendentemente dalla dimensione dello schermo.

Il risultato

  • 20 schermate navigate come un vero telefono.
  • 52 hotspot con segnali visivi.
  • Caricamento istantaneo tramite precaricamento e caching.
  • Design responsive che si adatta a qualsiasi dimensione della modale.

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