Skip to main content

Button

Mit dem Button-Element führst du Spielende per Tap zur nächsten Szene – klassisch für „Weiter“, Auswahl­optionen, Abzweigungen oder Bonus-Aktionen. Oben im Dialog siehst du eine Live-Vorschau deiner aktuellen Einstellungen.

grafik.pngFelder

Text
Beschriftung des Buttons (z. B. „Weiter“, „Zur Aufgabe“, „Norden wählen“).
Tipp: Kurze Verben + Nutzen („Öffnen“, „Lösen starten“).

Zielszene
Die Szene, die beim Tippen geöffnet wird.

  • Üblich ist, hier immer eine Szene zu wählen.

  • Wenn du bewusst ohne Ziel speicherst, verhält sich der Button wie ein „stummer“ UI-Button und löst keine Navigation aus (nur sinnvoll für Speziallogik).

Hintergrundfarbe
Hex-Wert für die Buttonfläche, z. B. #68bfdd (Brand Color).

Textfarbe
Hex-Wert für die Beschriftung, z. B. #ffffff.

grafik.pngVerhalten in der App

  • Tap auf den Button öffnet sofort die gewählte Zielszene.

  • Mehrere Buttons in einer Szene werden automatisch untereinander (mobilfreundlich) gerendert; die Reihenfolge entspricht der Reihenfolge im Editor.

  • Buttons reagieren direkt; es ist kein GPS/Scan nötig (anders als bei Wegpunkten/QR/NFC).

Einsatzmuster

  • Lineares Weiter: „Weiter“ → nächste Szene.

  • Entscheidungen/Abzweigungen: Mehrere Buttons mit unterschiedlichen Ziel­szene(n) („Tür A“, „Tür B“).

  • Optionale Inhalte: „Mehr erfahren“, „Hinweis anzeigen“, „Zur Karte“.

  • Rücksprung: „Zur Übersicht“/„Zurück zur Karte“.

Gestaltungs- & UX-Tipps

  • Kontrast sicherstellen: Helle Schrift auf dunklem Hintergrund oder umgekehrt (AA-Kontrast ≥ 4.5:1 anstreben).

  • Konsistenz: Primäre Aktion (z. B. „Weiter“) immer gleiche Farbe; sekundäre Aktionen in neutralen Tönen.

  • Größe/Touch-Ziel: Genug Platz (mind. ~44 px Höhe) und Abstand zwischen mehreren Buttons.

  • Icon-Hilfe: Du kannst vor dem Text Emoji nutzen (z. B. 🔍 „Suchen“, 🧭 „Zur Karte“).

  • Deaktivierte Logik: Wenn ein Button erst nach Bedingung aktiv sein soll, blende ihn vorher aus oder ersetze ihn durch Hinweistext (statt „toter“ Buttons).

Kombinationen

  • Mit Wegpunkten: Button erst nach Erreichen eines Wegpunkts anzeigen (Story-Gating).

  • Mit QR/NFC: Button bietet Wahl: „Scannen“ oder „Überspringen (Hinweis)“.

  • Mit Dialogen/Medien: Unter Text, Bild, Audio oder Video als klare Call-to-Action platzieren.

Kurz-Checkliste

  1. Text setzen (klar & kurz).

  2. Zielszene auswählen.

  3. Farben (Brand) wählen, Kontrast prüfen.

  4. Vorschau checken → Speichern.

Fertig – der Button führt die Spielenden zuverlässig zur nächsten Station deiner Story.

Back to top