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
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

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