Entwicklung eines interaktiven App-Guides

Support-Teams haben oft Schwierigkeiten, wenn sie Apps verwenden, die sie selbst nie installiert haben. Ein PDF-Handbuch ist eine schlechte Lösung, da es niemand liest.

Ich habe ein Tool entwickelt, mit dem Nutzer direkt im Browser mit echten App-Screenshots interagieren können. Es fühlt sich an wie die Nutzung des eigentlichen Telefons. Man klickt auf einen Button in einem Screenshot, und der nächste Bildschirm erscheint.

So funktioniert es

Ich habe Firebase Storage für die Bilder und Vanilla JavaScript für die Logik verwendet. Ich habe auf externe Bibliotheken verzichtet, um das Tool schlank zu halten.

Das Geheimnis liegt in der Verwendung von prozentbasierten Hotspots. Anstatt fester Pixel definiere ich anklickbare Bereiche mithilfe von Koordinaten von 0 bis 100. So bleiben die Buttons auch bei einer Änderung der Fenstergröße korrekt ausgerichtet.

Das System nutzt eine einfache State Machine. Jeder Bildschirm hat:

  • Eine Bild-ID
  • Eine Liste von Hotspots
  • Ein Ziel (Target Destination)

Die Tools, die ich entwickelt habe

Koordinaten per Augenmaß zu bestimmen, ist mühsam. Ich habe einen eigenständigen HTML-Editor gebaut, um den Prozess zu beschleunigen.

  • Einen Screenshot auf ein Canvas hochladen.
  • Mit der Maus ein Rechteck ziehen.
  • Der Editor berechnet die prozentualen Koordinaten automatisch.
  • Den Bereich über ein Dropdown-Menü mit einem anderen Bildschirm verknüpfen.
  • Das fertige Objekt direkt in den Code exportieren.

Um den Nutzern zu helfen, habe ich einen pulsierenden blauen Schein für anklickbare Bereiche hinzugefügt. Dies zeigt genau an, wo sie tippen können.

Wichtige technische Erkenntnisse

  1. Firebase-Sicherheit: Erstellen Sie Storage-URLs nicht manuell. Verwenden Sie die getDownloadURL-Methode des SDKs. Diese enthält den erforderlichen Auth-Token. Ohne diesen werden Bilder nicht geladen, ohne dass eine Fehlermeldung angezeigt wird.

  2. Layout-Fixes: Legen Sie in einem Flex-Column-Layout eine explizite Höhe für das Elternelement fest. Setzen Sie min-height auf 0 für die Kindelemente. Dies verhindert Layout-Zusammenbrüche und Overflow-Probleme.

  3. Skalierung: Verwenden Sie die CSS-Eigenschaft transform: scale. Dies ermöglicht es, dass das Bild und die Hotspots gemeinsam skaliert werden. So bleibt alles unabhängig von der Bildschirmgröße proportional.

  4. Geschwindigkeit: Das sequentielle Abrufen von URLs verursacht Verzögerungen. Ich habe einen In-Memory-Cache und eine Hintergrund-Preload-Funktion implementiert. Alle Bilder werden parallel geladen, sobald das Modal geöffnet wird. Das sorgt für eine verzögerungsfreie Navigation.

Das Ergebnis

  • 20 Bildschirme mit vollständiger Navigation.
  • 52 interaktive Hotspots.
  • Keine Scrollbalken dank Auto-Scaling.
  • Sofortige Übergänge durch Preloading.

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