Buchungsbuttons, die funktionieren: Text, Farbe und Platzierung

Ein unsichtbarer Buchungsbutton ist der teuerste Fehler auf einer Hotelwebsite. Nicht eine langsame Ladezeit, nicht schlechte Fotos, nicht fehlende Bewertungen. Ein Gast, der buchen möchte und nicht schnell sehen kann, wie das geht, geht zurück zu Booking.com. Diese Buchung kostet Sie 15 bis 25 Prozent Provision, und es war vermeidbar.

Warum der Buchungsbutton so oft schiefgeht

Die meisten Hotelwebsites werden mit Aufmerksamkeit auf Atmosphäre, Text und Fotos gebaut. Der Buchungsbutton wird später als technische Nachgedanke hinzugefügt. Das Ergebnis ist ein Button, der in der Menüleiste sitzt, in der gleichen Farbe wie der Rest der Navigation, mit Text wie "Reservieren" in einer Schriftart, die nicht hervorsticht.

Gäste suchen nicht. Sie scannen. Sie lassen ihren Blick über die Seite wandern und suchen nach etwas, das sie als "hier kann ich buchen" erkennen. Wenn es nicht sofort da ist, scrollen sie nicht weiter, sie schließen die Registerkarte.

Drei Dinge bestimmen, ob ein CTA (Call-to-Action, der Button, der zur Aktion auffordert) funktioniert: der Text, die Farbe und die Platzierung. Alle drei müssen richtig sein. Ein perfekter Text am falschen Ort bringt nichts. Eine auffällige Farbe mit vagem Text auch nicht.

Der Text: Was auf dem Button steht

Dies ist der Bereich, in dem die meisten Hotels am meisten gewinnen, weil Standard-Button-Texte auf Hotelwebsites fast universell schlecht sind.

"Verfügbarkeit prüfen" funktioniert so gut, weil es dem entspricht, was der Gast gerade tut: überprüfen, ob Ihr Hotel an seinen Daten verfügbar ist. Es fragt nichts, es bietet etwas an. Sobald der Gast im Buchungsmodul ist, übernimmt es.

"Direkt buchen und sparen" funktioniert nur, wenn Sie tatsächlich etwas im Gegenzug anbieten. Ein 5-prozentiger Rabatt ohne Steuern, ein Freigetränk bei der Ankunft oder flexible Stornierung, die die Plattform nicht anbietet. Wenn Sie "sparen" sagen, während der Preis gleich wie bei Booking.com ist, beschädigen Sie die Glaubwürdigkeit. Setzen Sie den Vorteil neben den Button. Wie Sie das glaubwürdig machen, erfahren Sie in Vertrauen und Dringlichkeit auf Ihrer Buchungsseite.

Vermeiden Sie generische Texte wie "Hier klicken" oder "Zur Buchungsseite". Diese Texte sagen dem Gast nicht, was er bekommt. Sie verlangsamen die Entscheidung, anstatt sie zu beschleunigen.

Die Farbe: Hervorstechen ohne zu schreien

Der Buchungsbutton sollte der einzige Ort auf Ihrer Seite sein, an dem die Akzentfarbe erscheint. Wenn diese Farbe auch in Ihrem Logo, in der Fußzeile und in Untertiteln auftaucht, ist sie nicht mehr auffällig.

Die Regeln sind einfach:

• Wählen Sie eine Farbe mit ausreichendem Kontrast zum Hintergrund. WCAG 2.1 erfordert ein Kontrastverhältnis von mindestens 4,5:1 für Text auf einem Button. Das ist keine ästhetische Wahl, sondern Lesbarkeit.
• Verwenden Sie die Akzentfarbe nur für den Buchungsbutton und möglicherweise eine Hervorhebung. Nicht für Überschriften, nicht für Links im Text.
• Dunkle Websites: helle Buttons (Weiß, Gelb, Orange). Helle Websites: dunkle oder helle Buttons (Grün, Rot, Dunkelblau).
• Stellen Sie sicher, dass der Text auf dem Button selbst lesbar ist. Weißer Text auf einem hellgelben Button ist unlesbar.

Orange konvertiert auf vielen Websites gut, aber nicht weil Orange von selbst funktioniert. Es konvertiert, weil die meisten Hotelwebsites eine neutrale oder kühle Farbpalette haben, und Orange als einzige warme Farbe sticht dort hervor.

Die Platzierung: Über der Falte und dann wieder

Über der Falte liegt das, was der Besucher ohne Scrollen sieht. Auf einem durchschnittlichen Laptop-Bildschirm ist das etwa 600 bis 700 Pixel hoch. Auf Mobilgeräten weniger. Wenn der Buchungsbutton nur nach dem Scrollen erscheint, ist er für einen großen Teil Ihrer Besucher unsichtbar.

Der Button sollte an drei Orten erscheinen:

1. In der Navigationsleiste, immer sichtbar. Klebrige Navigation (die mitscrollt) hält den Button konstant in Sicht. Der Button in der Navigation kann etwas kleiner sein, muss aber immer noch durch Farbe hervorstechen.
2. Über der Falte, auf dem ersten Bildschirm. Nicht versteckt in einer Ecke, sondern zentral oder prominent rechts, auf oder gerade unter den Stimmungsbildern.
3. Nach jeder Zimmerbe schreibung oder Preisabschnitt. Der Gast, der ein Zimmer gelesen hat, das zu ihm passt, möchte in diesem Moment buchen. Wenn der Button dann nicht sichtbar ist, scrollt er weiter und verliert den Impuls.

Bei längeren Seiten (mit mehreren Zimmertypen, Paketangeboten oder Arrangements) kann der Button vier- oder fünfmal erscheinen. Das ist keine Spam, das ist durchdachtes Design.

Mobilgeräte: Größer als Sie denken

Auf Mobilgeräten klickt niemand mit einer Maus, sondern mit einem Daumen. Die Touch-Zone eines durchschnittlichen Daumens ist groß, aber seine Präzision ist gering. Ein Button, der auf dem Desktop gut aussieht, ist auf dem Telefon oft zu klein oder sitzt zu nah an anderen Buttons.

Folgen Sie diesen Minimalen:

• Minimale Button-Höhe: 48 Pixel
• Minimale Button-Breite: 120 Pixel, vorzugsweise breit bis zum Rand des Bildschirms
• Abstand zu anderen anklickbaren Elementen: mindestens 8 Pixel

Überprüfen Sie auch, ob der Button in Ihrer mobilen Navigation noch sichtbar ist. Auf vielen Websites verschwindet der Buchungsbutton auf Mobilgeräten in einem Hamburger-Menü. Dann muss der Gast zweimal tippen, um ihn zu finden: einmal, um das Menü zu öffnen, einmal auf dem Button. Jeder zusätzliche Schritt kostet Buchungen.

Häufige Fehler in einer Reihe

• Button in gleicher Farbe wie die Navigation. Der Gast sieht kein Aktionselement, nur einen zweiten Menülink.
• Text "Reservieren" oder "Jetzt buchen" ohne Kontext. Zu definit für Gäste, die sich noch umsehen.
• Button nur am unteren Ende der Seite. Die Hälfte Ihrer Gäste scrollt nicht so weit.
• Auf Mobilgeräten verschwindet der Button im Hamburger-Menü. Die Sichtbarkeit nimmt stark ab.
• Button-Farbe ändert sich beim Überfahren nicht. Ein Button, der sich beim Überfahren ändert, bestätigt, dass er anklickbar ist. Ohne diesen Effekt sieht es manchmal wie ein flaches Design aus.
• Unterschiedliche Button-Texte auf der ganzen Seite. "Jetzt buchen" oben, "Reservieren" in der Mitte, "Verfügbarkeit prüfen" unten verwirren den Gast. Wählen Sie einen Text und bleiben Sie dabei.

A/B-Tests auf einer kleinen Website

Formales A/B-Testen, bei dem zwei Varianten gleichzeitig verschiedenen Besuchern gezeigt werden, erfordert viel Traffic. Für die meisten kleinen Hotelwebsites sind das Tausende von Besuchern pro Variante, pro Variante separat. Das werden Sie wahrscheinlich nicht schaffen.

Was Sie tun können: einen sequenziellen Test. Verwenden Sie zwei Wochen Variante A (aktueller Button-Text und -Farbe), dann zwei Wochen Variante B (geänderter Text oder Farbe), und vergleichen Sie den Prozentsatz der Besucher, die zum Buchungsmodul durchklicken. Kein statistischer Nachweis, aber es gibt Ihnen eine Richtung. Wenn Variante B konsistent besser schneidet, behalten Sie sie.

Verbessern Sie Ihre Chancen auf ein faires Ergebnis, indem Sie jeweils nur eine Sache ändern. Text oder Farbe, nie beides im gleichen Test.

Der Button ist ein Teil, nicht die Lösung

Ein guter Buchungsbutton erhöht Ihre Direktbuchungen, aber er steht nicht allein. Der Gast muss zunächst glauben, dass das Buchen bei Ihnen sicherer und günstiger ist als über die Plattform, dann muss er ein Formular durchlaufen, das ihn nicht abschreckt. Ein perfekter Button über einer Seite voller Zweifel bringt wenig.

Sehen Sie Ihre Website also als eine Kette. Die Fotos und das Preisversprechen bringen den Gast zum Klicken, der Button erfasst diesen Impuls, das Formular vervollständigt ihn. Wenn ein Link ausfällt, verläuft die Buchung immer noch zu Booking.com. Das Ändern des Button-Texts von "Verfügbarkeit prüfen" in "Direkt buchen und sparen" hilft nicht, wenn der Gast mitten in einem langsamen Formular abbricht oder kein Vertrauen hat.

Um die ganze Kette statt einzelner Elemente anzugehen, beginnen Sie mit Conversion-Optimierung für Ihre Hotelwebsite. Dort sehen Sie, wie Button, Vertrauen, Formular und Preis zusammen Ihren Buchungsanteil festlegen, und welche Reihenfolge den meisten Gewinn bringt.

Was Sie jetzt tun können

Gehen Sie auf Ihre Website und überprüfen Sie drei Dinge: Ist der Buchungsbutton ohne Scrollen sichtbar? Hat er eine Farbe, die nirgends sonst auf der Seite erscheint? Und hat er einen Text, der einlädt, statt abzuschrecken?

Wenn einer der drei nicht richtig ist, haben Sie eine konkrete Verbesserung, die Sie heute machen können.

Möchten Sie tiefer gehen: Lesen Sie die fünf Fehler auf 80 Prozent der niederländischen Hotelwebsites für das größere Bild, oder überprüfen Sie neun Fehler in Ihrem Buchungsformular für das, was passiert, nachdem der Gast auf den Button klickt. Möchten Sie Ihre gesamte Website überprüfen, was funktioniert und was nicht, was eine Hotelwebsite mindestens braucht hilft Ihnen dabei. Ein Überblick über alle Artikel rund um Direktbuchungen ist im Website-Conversion-Hub. Berechnen Sie, was bessere Conversion mit dem Sparrechner bringt, oder lassen Sie es über Website-Erstellung implementieren.