CockpitOS Digital Signage Content-Guide
Spezieller Leitfaden für Touchscreen-Inhalte
Inhaltsverzeichnis
- Digital Signage Grundlagen
- Content-Erstellung für Touchscreens
- Interaktive Elemente
- Wegfindung und Navigation
- QR-Code Integration
- Performance-Optimierung
- 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
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
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
Kartenelemente:
- Standort-Marker: "Sie sind hier" deutlich markieren
- Ziel-Marker: Destination hervorheben
- Route: Farblich markierter Weg
- Orientierungspunkte: Aufzüge, Treppen, Eingänge
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
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
Dieses Handbuch ist Teil der CockpitOS Dokumentation und wird regelmäßig aktualisiert.
Version: 1.0
Stand: Dezember 2024