CockpitOS Digital Signage Content-Guide

Spezieller Leitfaden für Touchscreen-Inhalte

---

Inhaltsverzeichnis

1. Digital Signage Grundlagen
2. Content-Erstellung für Touchscreens
3. Interaktive Elemente
4. Wegfindung und Navigation (inkl. AR-Navigation (Beta))
5. QR-Code Integration
6. Performance-Optimierung
7. Best Practices

---

1. Digital Signage Grundlagen

Was ist Digital Signage im CockpitOS?

Digital Signage umfasst alle interaktiven Touchscreen-Displays im Shopping Center:

• Wegfindungs-Terminals an Eingängen und zentralen Punkten
• Shop-Information-Displays vor Geschäften
• Event-Screens für Veranstaltungsankündigungen
• Service-Terminals für Kundeninformationen

Zusätzlich gibt es den DOOH-Modus (Digital Out-of-Home): In Idle-Phasen, in denen der Kiosk nicht bedient wird, laufen Playlists (Videos, Bilder, Slideshows) oder Local Hero-Inhalte (hervorgehobene Shops, News, Events, Angebote). Details siehe DOOH-Modus im Kiosk und Local Hero & Rundumsorglos-Paket.

Besonderheiten von Touchscreen-Content

Technische Unterschiede:

• Hochformat: 9:16 statt 16:9 (1080x1920px)
• Touch-Optimierung: Große, gut erreichbare Buttons
• Schnelle Ladezeiten: Max. 3 Sekunden pro Seite
• Robuste Navigation: Einfache, intuitive Bedienung

Nutzerverhalten:

• Kurze Aufmerksamkeitsspanne: 10-30 Sekunden
• Stehende Bedienung: Ergonomische Überlegungen
• Öffentlicher Raum: Datenschutz und Privatsphäre
• Verschiedene Nutzergruppen: Barrierefreiheit wichtig

---

2. Content-Erstellung für Touchscreens

2.1 Bildoptimierung

Optimale Bildgrößen:

• Vollbild-Hintergrund: 1080x1920px
• Content-Bereiche: 800x1400px
• Buttons und Icons: 120x120px minimum
• Logos: 200x200px für gute Erkennbarkeit

Technische Anforderungen:

• Format: JPG für Fotos, PNG für Grafiken
• Auflösung: Mindestens 150 DPI
• Dateigröße: Max. 1MB pro Bild
• Kontrast: Hoher Kontrast für gute Lesbarkeit

Farbrichtlinien:

• Hintergrund: Helle, neutrale Farben
• Text: Dunkle Schrift auf hellem Grund
• Akzente: Corporate Design Farben sparsam einsetzen
• Warnsignale: Rot nur für wichtige Hinweise

2.2 Typografie

Schriftgrößen:

• Überschriften: Mindestens 48px
• Fließtext: Mindestens 32px
• Buttons: Mindestens 28px
• Hinweise: Mindestens 24px

Schriftarten:

• Primär: System-Schrift für beste Lesbarkeit
• Sekundär: Corporate Design Schrift für Überschriften
• Vermeiden: Verschnörkelte oder zu dünne Schriften

Textgestaltung:

• Zeilenlänge: Max. 8-10 Wörter pro Zeile
• Zeilenabstand: 1.5x der Schriftgröße
• Absätze: Kurz und prägnant
• Listen: Bullet Points für bessere Struktur

2.3 Layout-Prinzipien

Bildschirmaufteilung:

• Header: 15% für Logo und Navigation
• Content: 70% für Hauptinhalt
• Footer: 15% für Aktionen und QR-Codes

Touch-Bereiche:

• Mindestgröße: 44x44px (11mm)
• Abstand: Mindestens 8px zwischen Elementen
• Position: Wichtige Buttons in Reichweite (60-140cm Höhe)

Informationshierarchie:

• Wichtigstes zuerst: Oben und mittig platzieren
• Scanbare Struktur: F-Pattern berücksichtigen
• Visuelle Gewichtung: Größe und Kontrast nutzen

---

3. Interaktive Elemente

3.1 Navigation

Hauptnavigation:

• Startseite-Button: Immer sichtbar und erreichbar
• Zurück-Button: Konsistente Position (oben links)
• Breadcrumbs: Orientierung in tiefen Strukturen
• Suchfunktion: Prominent platziert

Menü-Struktur:

• Flache Hierarchie: Max. 3 Ebenen tief
• Kategorien: Logisch und verständlich
• Icons: Unterstützend, nicht allein stehend
• Beschriftung: Eindeutig und kurz

3.2 Buttons und Aktionen

Button-Design:

• Größe: Mindestens 60x60px
• Form: Abgerundete Ecken für moderne Optik
• Farbe: Kontrastreich zum Hintergrund
• Zustand: Hover/Active-Effekte für Feedback

Call-to-Action:

• Eindeutig: "Wegfindung starten", "Mehr erfahren"
• Handlungsorientiert: Verben verwenden
• Prominent: Auffällige Platzierung und Gestaltung
• Begrenzt: Max. 2-3 CTAs pro Bildschirm

3.3 Formulare und Eingaben

Eingabefelder:

• Große Tasten: Virtuelle Tastatur optimiert
• Autovervollständigung: Für häufige Eingaben
• Validierung: Sofortiges Feedback bei Fehlern
• Datenschutz: Keine persönlichen Daten speichern

Suchfunktion:

• Autocomplete: Vorschläge während der Eingabe
• Kategoriefilter: Schnelle Eingrenzung
• Rechtschreibtoleranz: Fuzzy Search implementiert
• Ergebnisdarstellung: Übersichtlich und sortiert

---

4. Wegfindung und Navigation

Unterpunkte: Karten-Integration · Shop-Verzeichnis · Routenführung · AR-Navigation (Beta)

4.1 Karten-Integration

Kartentypen:

• Übersichtskarte: Gesamtes Center mit Orientierungspunkten
• Etagenpläne: Detaillierte Ansicht pro Stockwerk
• Routenplanung: Schritt-für-Schritt Navigation
• 3D-Ansicht: Für komplexe Gebäudestrukturen
• AR-Ansicht (Beta): Kamera-Livebild mit Richtungspfeil und Shopfront-Erkennung (Companion)

Kartenelemente:

• Standort-Marker: "Sie sind hier" deutlich markieren
• Ziel-Marker: Destination hervorheben
• Route: Farblich markierter Weg
• Orientierungspunkte: Aufzüge, Treppen, Eingänge
• AR-Overlay: Shop-Informationen bei erkannter Ladenfront (Name, Angebote, Events)

4.2 Shop-Verzeichnis

Darstellung:

• Alphabetische Liste: Mit Sprungmarken A-Z
• Kategorien: Nach Branchen sortiert
• Suchfunktion: Name und Kategorie durchsuchbar
• Favoriten: Häufig gesuchte Shops prominent

Shop-Informationen:

• Name und Logo: Gut erkennbar
• Kategorie: Eindeutige Zuordnung
• Standort: Etage und Bereich
• Öffnungszeiten: Aktuell und vollständig
• Kontakt: Telefon und Website optional

4.3 Routenführung

Route berechnen:

• Startpunkt: Automatisch aktueller Standort
• Zielpunkt: Shop, Service oder Ausgang
• Routenoptionen: Kürzester Weg, barrierefrei
• Zeitschätzung: Gehzeit in Minuten

Routendarstellung:

• Schritt-für-Schritt: Einzelne Wegpunkte
• Richtungsangaben: Links, rechts, geradeaus
• Landmarken: "Vorbei am Café", "Richtung Aufzug"
• Distanz: Meter-Angaben zu Wegpunkten

4.4 AR-Navigation (Beta)

Die Companion-App (NOW!) bietet einen AR-Modus als Alternative zur klassischen Kartenansicht:

Funktionsweise:

• Plan/AR-Toggle: Nutzer wechselt in der Wayfinding-Ansicht zwischen 3D-Karte und AR-Kamera
• Richtungspfeil: Auf dem Kamera-Livebild zeigt ein Pfeil die Richtung zum Ziel
• Dead Reckoning: Gyroskop + Schritterkennung schätzen Position und Richtung
• Map Matching: Position wird auf bekannte Korridore projiziert (Drift-Korrektur)
• Re-Kalibrierung: Per QR-Scan oder automatisch bei Shopfront-Erkennung

Shopfront-Erkennung (Image Tracking):

• MindAR.js: Browser-basiertes Image Tracking -- keine native App nötig
• Shopfront-Bilder: Fotos der Ladenfronten werden im Dashboard als AR-Marker hinterlegt
• AR-Overlay: Bei erkanntem Geschäft erscheinen Name, Kategorie, Angebote und Events
• Automatische Kalibrierung: Erkannte Ladenfronten korrigieren die Positionsschätzung

Einrichtung im Dashboard:

1. Shopfront-Bilder für Waypoints im Routen-Editor unter "AR-Navigation (Beta)" hinterlegen
2. Button "AR-Marker" kompiliert alle Bilder zu einer .mind-Datei (MindAR-Format)
3. .mind-Datei-URL in den Center-Optionen konfigurieren

Hinweis: Das Feature ist als Beta gekennzeichnet und kann pro Center aktiviert/deaktiviert werden. Weitere Details im Premium AI Template.

4.5 Premium-AI-Kiosk: neue Module und UI-Updates

Für das Template Premium AI wurden zusätzliche, pro Center schaltbare Module ergänzt:

• Neue Basis-Quicklinks (standardmäßig aus): Verkehr, Social Feed, ÖPNV-Monitor
• Alternative Namen pro Icon: z. B. individuelle Bezeichnungen für Shops, Services, Verkehr
• Erweiterte Kiosk-UI: modernisierte Slideups (Shops/Gastro/Services/News/Highlights), harmonisierte Abstände, bis zu 5 Karten pro Zeile in Landscape/XL
• Barrierefreies Routing: Routen berücksichtigen Modus-abhängig Treppenvermeidung/Aufzug-Präferenz

Konfiguration und technische Details siehe Premium AI Template.

---

5. QR-Code Integration

5.1 QR-Code Generierung

Automatische Generierung:

• Shop-Informationen: Direktlink zu Details
• Wegfindung: Route auf Smartphone übertragen
• Angebote: Direkter Zugang zu Aktionen
• Events: Kalendereintrag erstellen
• Kontakte: vCard für Adressbuch

QR-Code Design:

• Größe: Mindestens 3x3cm für gute Scanbarkeit
• Kontrast: Schwarz auf weißem Hintergrund
• Fehlerkorrektur: Level M (15%) für Robustheit
• Branding: Logo in der Mitte möglich

5.2 Companion App Integration

Funktionen:

• Nahtlose Übertragung: Vom Touchscreen zum Smartphone
• Offline-Verfügbarkeit: Karten und Infos speichern
• Personalisierung: Individuelle Empfehlungen
• Loyalty-Programm: Punkte für Interaktionen

Datenübertragung:

• Session-ID: Eindeutige Sitzungskennung
• Verschlüsselung: Sichere Datenübertragung
• Zeitlimit: QR-Codes nach 5 Minuten ungültig
• Anonymität: Keine persönlichen Daten erforderlich

---

6. Performance-Optimierung

6.1 Ladezeiten

Zielwerte:

• Startseite: Max. 2 Sekunden
• Navigation: Max. 1 Sekunde
• Inhaltsseiten: Max. 3 Sekunden
• Kartenansicht: Max. 5 Sekunden

Optimierungsmaßnahmen:

• Bildkompression: WebP-Format verwenden
• Caching: Häufig genutzte Inhalte vorhalten
• Lazy Loading: Bilder bei Bedarf nachladen
• Minimierung: CSS und JavaScript komprimieren

6.2 Offline-Funktionalität

Verfügbare Funktionen:

• Grundnavigation: Immer funktionsfähig
• Karten: Lokal gespeichert
• Shop-Verzeichnis: Basis-Informationen
• Notfall-Informationen: Ausgänge, Sicherheit

Synchronisation:

• Automatisch: Bei Internetverbindung
• Inkrementell: Nur Änderungen übertragen
• Fallback: Lokale Daten bei Verbindungsproblemen
• Update-Intervall: Alle 15 Minuten

---

7. Best Practices

7.1 Benutzerführung

Onboarding:

• Willkommensbildschirm: Kurze Einführung
• Hauptfunktionen: Übersicht der Möglichkeiten
• Touch-Hinweise: Erste Interaktion erklären
• Timeout: Nach 30 Sekunden Inaktivität zurück zum Start

Feedback:

• Visuell: Buttons reagieren auf Touch
• Akustisch: Dezente Bestätigungstöne
• Haptisch: Vibration bei verfügbaren Geräten
• Zeitlich: Sofortige Reaktion auf Eingaben

7.2 Barrierefreiheit

Sehbehinderungen:

• Hoher Kontrast: WCAG AA Standard erfüllen
• Große Schriften: Skalierbare Darstellung
• Screenreader: Alt-Texte für alle Bilder
• Farbkodierung: Nicht allein für Information nutzen

Motorische Einschränkungen:

• Große Touch-Bereiche: Mindestens 44px
• Lange Touch-Zeit: 3 Sekunden für Bestätigung
• Alternative Eingaben: Sprachsteuerung wo möglich
• Höhenverstellbarkeit: Verschiedene Nutzergruppen

7.3 Wartung und Updates

Content-Aktualisierung:

• Automatisch: Synchronisation mit CMS
• Zeitgesteuert: Updates außerhalb der Stoßzeiten
• Versionierung: Rollback bei Problemen möglich
• Monitoring: Überwachung der Funktionsfähigkeit

Technische Wartung:

• Fernwartung: Updates ohne Vor-Ort-Service
• Monitoring: 24/7 Überwachung der Systeme
• Backup: Tägliche Sicherung der Konfiguration
• Support: Schnelle Reaktion bei Ausfällen

---

Checkliste für Digital Signage Content

Vor der Veröffentlichung prüfen:

Design:

• Hochformat-Layout (9:16) verwendet
• Schriftgrößen mindestens 32px
• Hoher Kontrast zwischen Text und Hintergrund
• Touch-Bereiche mindestens 44x44px
• Corporate Design eingehalten

Inhalt:

• Texte kurz und prägnant
• Rechtschreibung und Grammatik korrekt
• Aktualität der Informationen geprüft
• Call-to-Actions eindeutig formuliert
• Barrierefreiheit berücksichtigt

Technik:

• Bilder optimiert (max. 1MB)
• Ladezeiten unter 3 Sekunden
• Navigation funktionsfähig
• QR-Codes scanbar
• Offline-Funktionalität getestet

Rechtliches:

• Bildrechte geklärt
• Datenschutz beachtet
• Impressum und Kontakt verfügbar
• Barrierefreiheit gewährleistet

---

Weitere Themen

• Kiosk, Companion & NOW! App – Begriffe, Nutzung, Use Cases für Besucher (Route mitnehmen, Session teilen, Parkplatz) und Nutzen für das Center
• Premium AI Template – Technische Struktur des Premium-AI-Templates (Kiosk + Companion)
• Concierge – KI-Assistent: Inhalte, Technik und Tutorial für Redaktion und Support
• Reserve & Collect – Produkt-Reservierung, Abholcode, Einstiege (QR, Kiosk, Social-Shop)
• Local Hero & Rundumsorglos-Paket – Konzept zur Stärkung der „kleinen“ in der Mall: Produkt → Website → Hot Pick → DOOH → Mieter-Auswertung
• DOOH-Modus im Kiosk – Playlists, Local Hero, Idle-Slot: Video/Bild/Kampagne auf den Screens

---

Dieses Handbuch ist Teil der CockpitOS Dokumentation und wird regelmäßig aktualisiert.

Version: 1.0
Stand: Dezember 2024