Hotelbuchungs-App-Design: Ein Redesign des Startbildschirms, Vorher und Nachher

Der Startbildschirm einer Reise-App muss Lust machen, irgendwohin zu fahren, bevor er irgendetwas fragt. Der erste Entwurf unten macht das Gegenteil: Er beginnt mit einem Formular aus vier Feldern, listet Reiseziele als nackte Wörter auf und verteilt einen Preis auf sechs Zeilen. Die Lösung behält jede Funktion und ändert nur die Reihenfolge dessen, was man sieht.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links ist das Erste auf dem Bildschirm eine Aufgabe: Wohin, Check-in, Check-out, Gäste, dann ein Button mit Verlauf. Orte erscheinen erst nach dem Formular, als fünf graue Text-Pills. Rechts ist die Suche eine einzige Karte, und mehr als die Hälfte des Screens besteht aus Fotos von Orten und Unterkünften.

Jede Funktion ist erhalten geblieben. Du kannst weiterhin nach Ort, Daten und Gästen suchen, Reiseziele durchstöbern und Hotelpreise sehen. Die Lösung hat den Papierkram in eine kompakte Karte verschoben und den Platz dem Grund zurückgegeben, aus dem Menschen eine Reise-App öffnen.

Fix 1: Die Frage stellen, den Slogan streichen

Vorher

Nachher

„Entdecke die Welt, finde mit uns deine perfekte Unterkunft!“ neben einem Herz und einer Glocke, gegenüber „Wohin als Nächstes?“ neben einer Glocke mit Punkt.

Ein Slogan auf dem Startbildschirm ist für das Unternehmen geschrieben. Eine Frage ist für die Person geschrieben, die das Handy hält, und sie zeigt direkt auf die Suchkarte darunter. „Wohin als Nächstes?“ würde auch ein Freund fragen, und genau diesen Ton will eine Reise-App treffen.

Das Herz ist aus dem Header verschwunden, weil gespeicherte Orte schon einen eigenen Tab haben. Die Glocke ist geblieben, mit einem Punkt, wenn es etwas Neues gibt, denn ein Preisrückgang oder eine Buchungsänderung ist das Einzige, wofür sich eine Unterbrechung lohnt.

Fix 2: Eine Suchkarte, Daten und Gäste als Chips

Vorher

Nachher

Vier gestapelte Felder (Reiseziel, Check-in, Check-out, Gäste) und ein oranger Verlaufs-Button, gegenüber einem Zielfeld mit „14. bis 16. Nov“ und „2 Gäste“ als Chips und einem runden Pfeil-Button.

Das Formular mit vier Feldern verlangt von einer Person, jede Entscheidung zu treffen, bevor sie auch nur einen einzigen Ort gesehen hat. Die meisten, die die App öffnen, sind dazu nicht bereit: Sie stöbern. Ein Formular, das ein Drittel des Bildschirms einnimmt, ist für sie eine Mauer.

Daten und Gäste ändern sich zwischen Suchen selten, deshalb zeigt die Lösung sie als Chips mit sinnvollen Voreinstellungen, antippbar, wenn sie geändert werden müssen. Nur das Reiseziel muss getippt werden. Das Paar aus Check-in und Check-out wird zu einem Chip, „14. bis 16. Nov“, weil niemand einen Aufenthalt als zwei getrennte Daten denkt.

Fix 3: Orte zeigen, nicht Namen

Vorher

Nachher

„Lissabon, Kyoto, Kapstadt, Bali, Paris“ als graue Text-Pills, gegenüber Fotokacheln von Lissabon und Kyoto mit dem Land unter jedem Namen, die nächste Kachel lugt vom Rand herein.

Menschen wählen ein Reiseziel mit den Augen. Ein Wort wie „Kyoto“ verlangt vom Leser, sich den Ort vorzustellen; ein Foto einer Pagode in der Dämmerung erledigt das Vorstellen für ihn. Das ist die ganze Aufgabe dieses Abschnitts, und Text-Pills können sie nicht erfüllen.

Die am rechten Rand angeschnittene Kachel ist Absicht. Sie zeigt dem Leser, dass die Reihe scrollt, ohne Pfeile oder Punkte, und dass es mit einem Wisch mehr Orte zu entdecken gibt.

Fix 4: Ein Preis pro Aufenthalt

Vorher

Nachher

Ein kleines Vorschaubild mit einem -30%-Badge, fünf Sternen, der Stadt, einem durchgestrichenen 320 $, 224 $ pro Nacht, „+38 $ Steuern und Gebühren“ und zwei grünen Extras, gegenüber einem großen Foto mit einer Bewertung von 4,8, dem Namen, „224 $ Nacht“ und „Lissabon, Kostenlose Stornierung“.

Die Karte im Entwurf zeigt den Preis gleich auf vier Arten: den alten Preis, den neuen Preis, die Einheit und die Zusatzgebühren, plus ein Rabatt-Badge auf dem Foto, das ihn ein fünftes Mal nennt. Der Leser muss rechnen, bevor er entscheiden kann, ob ihm das Hotel gefällt.

Die Lösung zeigt eine Zahl und ein Detail. Das Foto ist größer, weil das Foto den Aufenthalt verkauft. Das Detail ist das, das die meisten Sorgen nimmt, die kostenlose Stornierung, und die Bewertung ersetzt fünf gezeichnete Sterne durch eine Zahl, die man vergleichen kann.

Die kleineren Fixes

• Vier Tabs, nicht fünf. Entdecken, Gespeichert, Reisen und Profil. Start und Entdecken wurden zu einem Tab, Entdecken, weil der Startbildschirm der Ort ist, an dem entdeckt wird.
• Wörter, die Menschen benutzen. „Wunschliste“ wurde zu „Gespeichert“ und „Buchungen“ wurde zu „Reisen“, den Wörtern, die Reisende wirklich sagen.
• Ein Akzent. Der Entwurf nutzte einen orangen Verlauf für den Button, Grün für Extras und Rot für Rabatte. Die Lösung nutzt Schwarz für Aktionen und lässt die Fotos die Farbe liefern.
• Kürzere Namen. „Grand Riviera Resort & Spa“ wurde auf der Karte zu „Grand Riviera Resort“, damit der Name neben dem Preis in eine Zeile passt.

Prüfe deine eigene Reise-App

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens als Komponenten, jeden Fix als Vorher-Nachher-Paar, die Farbvariablen und die iOS-Textstile.

Kostenlose Figma-Datei

Startbildschirm für Hotelbuchung, vorher und nachher

Beide Screens und jeder reparierte Teil als Figma-Komponenten. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte der Startbildschirm einer Hotelbuchungs-App zuerst zeigen?

Eine kurze Frage, ein Suchfeld und Fotos von Orten. Daten und Gäste können als editierbare Chips in der Suchkarte sitzen, sodass das Stöbern vor jedem Formular kommt.

Wie sollten Hotelpreise in einer App dargestellt werden?

Ein klarer Preis pro Aufenthalt, mit einem unterstützenden Detail wie kostenloser Stornierung. Wo verpflichtende Gebühren anfallen, gehören sie in den Hauptpreis.

Sollte eine Reise-App Reiseziele als Fotos oder als Text zeigen?

Als Fotos. Menschen wählen Orte visuell, und eine am Bildschirmrand angeschnittene Kachel zeigt, dass die Reihe ohne zusätzliche Bedienelemente scrollt.

Wie viele Tabs sollte eine Buchungs-App haben?

Vier oder fünf. Führe zwei Tabs zusammen, die an denselben Ort führen, und benenne Tabs mit den Wörtern, die Reisende benutzen, wie Gespeichert und Reisen.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen.
• Fotos via Unsplash von Vali Sachadonig, Zion C, Asher Pardey, Roberto Nickson und Travis Chen.
• FTC-Regel zu unfairen oder irreführenden Gebühren, gilt für Kurzzeitunterkünfte, in Kraft seit dem 12. Mai 2025.
• Zuerst als Karussell auf App Brainy veröffentlicht.