Design / Layout
Hat der Gast einen Zeitraum für die Buchung ausgewählt, erscheint das Angebot in der Booking Engine. Hier werden Zimmerinformationen, Bilder und Buchungsdetails angezeigt. Das Erscheinungsbild kann in den Space-Einstellungen der Booking Engine individuell angepasst werden. Dies geschieht durch die Zimmerbeschreibung mit Bildern → Siehe Korrespondenz-Änderungen, sowie durch die Farbeinstellungen in den jeweiligen Design-Token, welche im folgenden Abschnitt erklärt werden.
Allgemeiner Hinweis zur Auswirkung auf das Space‑Layout
- Die gewählten Farben bestimmen Sichtbarkeit, Kontrast, Hervorhebung von Aktionen (CTAs), Lesbarkeit von Texten und die Wahrnehmung von Flächen (Hintergrund vs. Karten).
- Achte auf ausreichenden Kontrast (Lesbarkeit, Barrierefreiheit) und teste Hover/Disabled‑Zustände in relevanten Komponenten.
- Änderungen sind möglicherweise nicht sofort in der Booking Engine sichtbar, der Ladevorgang kann etwas dauern.
Layout / Design‑Tokens
Design-Tokens bestimmen das Erscheinungsbild der Booking Engine. Sie sind nach Bereichen gruppiert und legen fest, welche Farb- und Stilwerte die Buchungsseite (Space) verwendet. Zu jedem Token findest Du eine kurze Erklärung, welche UI-Elemente und Zustände (z. B. Standard, Hover, deaktiviert) dadurch beeinflusst werden.
Layout
Hier bestimmst du, wo Logo und Auswahl-Elemente bzw. die Suchleiste auf der Startseite des Booking Engine Space platziert sind.
- Position des Logos – Legt fest, wo das Hotel-Logo auf der Startseite der Booking Engine angezeigt wird. Aktuell eingestellt auf Oben in der Mitte.
- Startposition der Auswahl – Bestimmt, wo die Auswahl-Elemente bzw. die Suchleiste auf der Startseite positioniert sind. Aktuell eingestellt auf Unten.
- Teaser-Text einfügen – Aktivierung eines Einführungstextes auf der Startseite.
- Teaser-Text – Wird eingeblendet, wenn die obige Checkbox aktiv ist. Hier kann ein kurzer Einführungstext für Gäste hinterlegt werden, der im Buchungsprozess angezeigt wird. Der Text ist mehrsprachig pflegbar (Deutsch / English). Aktuell hinterlegter Text: Ihr Aufenthalt zum besten Preis!
Der Teaser-Text passt sich der Platziereung der Suchleiste an und erscheint z.B. unten, wenn die Suchleiste in der Mitte positioniert wird bzw. umgekehrt.
Standardtexte überschreiben
Dieser Abschnitt ermöglicht es, die Meldungen und Beschriftungen anzupassen, die den Gästen während der Buchung angezeigt werden, einschließlich der Angaben zu Belegung und Verfügbarkeit.
- Klicke auf Text hinzufügen und wähle die gewünschte Vorlage aus.
- Passe den jeweiligen Text nach Bedarf an.
Über den Button Text hinzufügen können folgende Texte individuell überschrieben werden:
- Meldung zu ausgebuchten Zeiträumen – Wird angezeigt, wenn der vom Gast gewählte Zeitraum ausgebucht ist und kein Angebot gefunden werden kann.
- Warenkorb bereits abgelaufen – Wird angezeigt, wenn der Gast die Funktion Warenkorb (Optionsbuchung) verwendet und die im Warenkorb gespeicherte Buchung in der Zwischenzeit abgelaufen ist.
- Meldung Zimmer nicht verfügbar – Wird angezeigt, wenn ein bestimmter Zimmertyp für den gewählten Zeitraum oder die gewählte Belegung nicht verfügbar ist.
- Einheit typ label (Zimmer) – Hier kann der Name der Unterkunft geändert werden (z. B. Zimmer, Appartement, Haus ...). Dieser wird direkt auf der Startseite in der Suchleiste sowie während des gesamten Buchungsprozesses für den Gast angezeigt.
Da die Bezeichnung der Unterkunft an verschiedenen Stellen im Kontext erscheint, ist auch die Angabe der Pluralform jeweils wichtig!
Hintergrund
Die Hintergrundfarbe bestimmt die Grundfläche der Buchungsseite und beeinflusst die Gesamthelligkeit sowie den Kontrast zu Karten und Eingabefeldern. Klickst du auf das Feld, öffnet sich der Farbwähler; dort kannst du entweder eine Farbe wählen oder direkt einen RGB‑Code eingeben.
Vordergrund
- primary foreground / foreground / foreground-muted / foreground-highlighted
- Steuert Haupttextfarbe, sekundäre (muted) Texte und hervorgehobene Texte. Bestimmt Lesbarkeit und Informationshierarchie (z. B. Überschriften vs. Beschreibungen).
Beispiel (grün/rot):
heroSection
Hier kann die Farbe für den Teaser-Text auf der Startseite angepasst werden.
Karte
- card / card-foreground / card-foreground-muted / card-foreground-highlighted
- Definiert Hintergrund und Textfarbe von Karten/Boxen (z. B. Angebots- oder Reservierungs‑Fenster). Beeinflusst visuelle Trennung von Content‑Bereichen.
Beispiel (card-foreground pink):
Rahmen
- border / border-highlighted
- Legt Farbe von Trennlinien und Rahmen fest (z. B. Kartenränder, Input‑Borders, Grid‑Trennlinien). Highlighted wird für aktive oder fokussierte Rahmen genutzt.
Beispiel:
Eingabe
- input-icon
- Bestimmt Farben für Eingabefelder (Symbolik/Icons in Inputs). Wirkt auf Sichtbarkeit von Eingabe‑Icons und ggf. Platzhalter/Label.
Overlay
- overlay
- Farbe/Deckkraft des Overlays (z. B. Modal‑Backdrop). Steuert, wie stark der Hintergrund abgedunkelt wird und wie stark der Fokus auf dem Modal liegt.
Abgeschwächt
- muted
- Für dezente Informationen und deaktivierte Zustände (z. B. inaktive Buttons, Platzhaltertexte). Reduziert visuelle Priorität.
Primär
- primary / primary-foreground / primary-foreground-muted / primary-hover / primary-foreground-hover
- Hauptmarkenfarbe für Call‑to‑Action‑Elemente, primäre Buttons, Links und aktive Status. Foreground‑Varianten regeln Textfarbe auf primärer Fläche; Hover steuert Interaktionsfeedback.
Fehler
- destructive / destructive-foreground / destructive-foreground-muted / destructive-hover / destructive-foreground-hover
- Farbe für Fehler- und Warnzustände sowie destruktive Aktionen (z. B. Lösch‑Buttons, Validierungsfehler). Foreground‑Varianten für Text/Icons auf der destruktiven Fläche; Hover für Interaktion.
Kalender
- calendar-foreground / calendar-foreground-muted / calendar-muted / calendar-available / calendar-available-muted / calendar-highlighted / calendar-highlighted-muted
- Steuert Darstellung der Kalenderelemente: Standardtext, deaktivierte Tage (muted), verfügbare Tage, hervorgehobene/ausgewählte Tage. Verwendet unterschiedliche Nuancen für Statuskennzeichnung (verfügbar, gebucht, ausgewählt).
Beispiel:
Empfehlungen zur praktischen Anwendung
- Primärfarbe: Verwende für CTA‑Buttons, aktiven Navigationseintrag und markierte Elemente. Sorge dafür, dass primary-foreground deutlich lesbar ist.
- Karten vs. Hintergrund: Wähle Kartenfarbe mit ausreichendem Kontrast zum Seitenhintergrund, damit Inhalte klar abgegrenzt sind.
- Rahmen & Fokus: border-highlighted für Focus/Active‑Zustand verwenden (Input‑Fokus, aktive Karte).
- Overlay: Deckkraft so wählen, dass Fokusobjekt lesbar bleibt und Hintergrund abgeschwächt wird.
- Muted‑Varianten: Für sekundäre Informationen, kleine Hilfstexte und disabled States einsetzen.
- Kalenderfarben: Eindeutige, semantische Zuordnung (z. B. grün = verfügbar, gelb = eingeschränkt, rot = nicht verfügbar) und konsistente Muted‑Varianten für inaktive Tage.
- Fehlerfarben: Destructive‑Farbvarianten nur für Fehler/irreversible Aktionen nutzen, damit Warnungen sofort erkennbar sind.
Checkliste vor dem Rollout
- Kontrastprüfung (Text vs. Hintergrund) für alle Kombinationen (normal, hover, disabled).
Beispiel (Stornobedingungen kaum lesbar):
Vordergrund > foreground = gelb, Vordergrund > foreground-muted = lila:
- Test auf verschiedenen Bildschirmgrößen (Karten‑Kontrast bleibt konsistent).
- Interaktive Zustände prüfen (hover, focus, active, disabled).
- Kalenderstatus mit echten Buchungsszenarien testen (farbliche Legende klar verständlich).
Im folgenden Beispiel findet sich z. B. eine Kombination aus Karte > card-foreground (pink) und Vordergrund > foreground-highlighted (türkis)
Beispiel:
Es empfiehlt sich, verschiedene Farbkombinationen zu testen, um eine passende Abstimmung auf die CI des Betriebs zu finden und somit das Layout der Booking Engine entsprechend für das Hotel anzupassen. Über Klick auf Zur Booking Engine kann jederzeit im Browser geprüft werden, wie die Ansicht für den Gast wirkt. Falls Änderungen nicht sofort sichtbar sind, kann die Seite im Browser mit STRG + F5 aktualisiert werden.