Car-Rental-App-Design: Redesign eines Mietwagen-Startscreens, vorher und nachher

Eine Miet-App hat auf ihrem Startscreen genau eine Aufgabe: jemanden zu einem Auto bringen, das er haben will. Der erste Entwurf unten hat alles, was ein Fahrer braucht, beginnt aber mit einem Formular aus fünf Feldern, brüllt 25% Rabatt in einem Banner, das auf nichts zeigt, und lässt die Autos bis zuletzt warten, mit 100 mal 60 Pixeln und Specs in 8-px-Schrift.

Die Korrektur behält jede Funktion und stellt die Autos an die erste Stelle. Sie folgt dem Layout von Turo: weißer Hintergrund, ein Suchfeld und Autokarten in voller Breite mit dem Preis unter dem Foto. Jede Änderung unten kannst du kopieren.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links sind die Autos das Kleinste auf dem Screen. Bevor ein Fahrer eines sieht, passiert er fünf Formularfelder, eine Checkbox, einen Button, ein Banner und drei Dropdowns. Jedes Auto ist ein 100-mal-60-Thumbnail mit 8-px-Specs und einem BUCHEN-Button.

Rechts liest sich der Screen in der Reihenfolge, in der ein Fahrer entscheidet: wo, welche Art, welches Auto. Die Suche ist ein einziges 48-px-Feld, die Autofotos sind 350 mal 190, und der Text läuft in 13 bis 18 px statt der 8 bis 15 px des Entwurfs.

Was sich geändert hat, gemessen

Fix 1: das Formular in ein Feld falten

Vorher

Nachher

Mietwagen finden mit Abholort, Rückgabeort, Abholdatum, Rückgabedatum, einer Checkbox fürs Fahreralter mit Ändern-Link, einem orangen Button „Autos suchen“ und einer Zeile Kleingedrucktem. Gegen ein abgerundetes Feld: eine Lupe, „Abholung am SFO“ und „8. bis 10. Nov.“ am rechten Rand.

Der Entwurf lässt den Fahrer ein Formular ausfüllen, bevor er ein einziges Auto zeigt. Die meisten Antworten sind schon bekannt: Die Rückgabe ist am Abholort, das Alter ist 25 plus, und das Datum ist dieses Wochenende. Das Formular fragt trotzdem alles ab, im gleichen Gewicht, sodass das Eine, was der Fahrer entscheiden muss, nicht mehr Aufmerksamkeit bekommt als die vier, die er nie anfasst.

Der reparierte Screen behält die zwei Antworten, die zählen, wo und wann, und packt sie in ein Feld. Das ist dasselbe Muster, das Uber für sein Zielfeld nutzt. Tippt man darauf, öffnet sich ein Sheet mit Rückgabe, Rückgabezeit und Fahreralter. Nichts wurde entfernt, nur einen Tap weiter weggeschoben.

Regel zum Mitnehmen: Zeig die Standardwerte, frag nur nach dem, was sich ändert.

Fix 2: das Angebot auf ein echtes Auto setzen

Vorher

Nachher

Ein oranges Banner in voller Breite: BIS ZU 25% RABATT DIESES WOCHENENDE!!! mit *AGB gelten rechts. Gegen eine hohe Autokarte: ein Tag „25% Rabatt“ auf dem Foto, Sport Coupe, 2 Sitze und Automatik, 89 $/Tag und durchgestrichene 119 $.

Ein Banner, das „bis zu 25% Rabatt“ sagt, sagt nicht, worauf. Der Fahrer muss scrollen und raten, für welches Auto es gilt, und die drei Ausrufezeichen und das „AGB gelten“ in 10-px-Schrift lesen sich eher wie eine Warnung als wie ein Angebot.

Auf dem reparierten Screen sitzt der Rabatt auf dem Auto, zu dem er gehört. Ein kleiner Tag auf dem Foto sagt 25% Rabatt, und die Preiszeile zeigt 89 $/Tag mit den alten 119 $ daneben. 119 $ minus 25% sind 89,25 $, die Zahl ist also ehrlich, und das Angebot hat endlich etwas zu verkaufen. Turo macht es genauso, mit dem Deal am Inserat statt darüber.

Regel zum Mitnehmen: Ein Angebot braucht ein Objekt. Häng es an das, was es vergünstigt.

Fix 3: drei Dropdowns gegen eine Reihe tauschen

Vorher

Nachher

Drei gleich große Dropdowns mit Typ, Preis und Sitze, jedes mit einem Chevron. Gegen eine Reihe Pill-Chips: Alle in Schwarz ausgewählt, dann Elektro, SUV, Coupé und Cabrio, die über den rechten Rand laufen.

Ein Dropdown versteckt seine Optionen, bis man tippt, der Fahrer muss also Typ öffnen, um zu erfahren, dass es Elektro, SUV und Coupé gibt. Drei nebeneinander geben außerdem Preis und Sitzen dasselbe Gewicht wie dem einen Filter, den Leute wirklich nutzen: der Art des Autos.

Die Chips zeigen die Optionen ohne Tap. Der gewählte Chip ist schwarz gefüllt, die Reihe wischt, und der letzte Chip wird vom Bildschirmrand abgeschnitten, was dem Fahrer sagt, dass es mehr gibt. Preis und Sitze gibt es weiterhin, sie öffnen sich jetzt über die Filter des Suchfelds.

Regel zum Mitnehmen: Hat ein Filter fünf oder weniger Werte, zeig sie. Versteck sie nicht hinter einem Menü.

Fix 4: jedem Auto ein Foto in voller Breite geben

Vorher

Nachher

Vier Zeilen unter Beliebte Autos, jede mit einem 100-mal-60-Foto, einem Namen, einer Spec-Zeile in 8 px, einem Preis und einem orangen BUCHEN-Button. Gegen zwei Karten in voller Breite: ein 350-mal-190-Foto mit einem Herz, dann Name und Preis in einer Zeile und eine Detailzeile darunter.

Das ist das Produkt, und der Entwurf gibt ihm am wenigsten Platz. Bei 100 mal 60 ist ein Auto eine farbige Form. Die Spec-Zeile quetscht Sitze, Getriebe, Kraftstoff, 0-60-Zeit, Versicherung und eine Bewertung in 8 px, sodass nichts lesbar ist und alles mit dem Preis konkurriert.

Die reparierte Karte gibt dem Auto ein 350-mal-190-Foto mit abgerundeten Ecken und setzt Name und Tagespreis in eine Zeile. Darunter steht eine 13-px-Detailzeile mit Sitzen und Getriebe. Der BUCHEN-Button ist weg, denn die ganze Karte ist der Button: Tippt man darauf, zeigt die Seite des Autos die Specs, die Bewertungen und Buchen.

Regel zum Mitnehmen: Eine Produktliste ist eine Liste von Fotos. Alles, was nicht Foto, Name oder Preis ist, kommt einen Tap tiefer.

Die kleineren Korrekturen

• Eine Markenfarbe. Orange (#FF5A1F) markiert den Tag „25% Rabatt“ und sonst nichts. Der Entwurf nutzt es für das Banner, den Suchbutton, die Checkbox, den Ändern-Link, vier BUCHEN-Buttons und den aktiven Tab.
• Ein größerer Rand. 20 px auf beiden Seiten statt 14 links und 12 rechts, mit 14 zwischen den Blöcken.
• Ein ruhigerer Header. Herz und Glocke des Entwurfs sitzen neben dem Schriftzug. Der reparierte Header behält die Glocke, und das Herz ist jetzt der Tab Gemerkt.
• Eine schwebende Tab-Leiste. Vier Tabs (Entdecken, Reisen, Gemerkt, Profil) in einer schwebenden 62-px-Leiste, und das dritte Auto läuft darunter durch, was sagt, dass die Seite weitergeht.
• Ein Icon-Stil. Gefüllte und Outline-Icons waren in der Tab-Leiste des Entwurfs gemischt, jetzt sind alle Outline.
• Namen, die zu Aufgaben passen. Buchungen wurde zu Reisen, und Suche wurde das Feld oben.
• Gekürzter Text. „Auto der Woche“ und die 0-60-Zeile sind weg, denn beides hat niemandem bei der Autowahl geholfen.

Prüfe deine eigene Miet-App

Hol dir die Figma-Datei

Die kostenlose Datei enthält den Junior-Entwurf, den reparierten Screen und jedes Teil als Komponente.

Kostenlose Figma-Datei

Redesign eines Mietwagen-Startscreens, vorher und nachher

Beide Screens und jedes Teil als Figma-Komponente. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Wie sollte der Startscreen einer Mietwagen-App gestaltet sein?

Beginne mit einem Suchfeld mit Abholort und Datum, dann eine Reihe Fahrzeugtypen, dann Autokarten in voller Breite mit Name und Preis unter jedem Foto. Halte Rückgabe, Rückgabezeit und Fahreralter einen Tap hinter dem Suchfeld.

Wie viele Felder sollte die Suche einer Mietwagen-App haben?

So wenige, wie der erste Screen braucht: wo und wann. Rückgabe, Rückgabezeit und Fahreralter behalten meist ihre Standardwerte, sie können also in einem Sheet sitzen, das sich über das Suchfeld öffnet.

Wohin gehört ein Mietwagen-Rabatt?

Auf das Auto, für das er gilt. Ein Tag auf dem Foto und der alte Preis durchgestrichen neben dem neuen, etwa 119 $ und 89 $/Tag, sagt dem Fahrer, was vergünstigt ist und um wie viel. Ein Banner, das auf nichts zeigt, tut das nicht.

Sollten Fahrzeugtypen Dropdowns oder Chips sein?

Chips, wenn es etwa fünf sind. Eine wischbare Reihe zeigt Alle, Elektro, SUV, Coupé und Cabrio ohne Tap, und ein vom Bildschirmrand abgeschnittener Chip zeigt, dass es mehr gibt.

Wie groß sollten Autofotos in einer Miet-App sein?

Volle Breite der Spalte, auf dem Handy etwa 350 mal 190 Pixel. Ein 100-mal-60-Thumbnail macht aus einem Auto eine farbige Form, die ein Fahrer nicht beurteilen kann.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die App Torque, die Preise und die Specs sind erfunden, und es wird keine Marke und kein Modell genannt. Das Layout folgt Turo: weißer Hintergrund, ein Suchfeld und Autokarten in voller Breite mit dem Preis unter dem Foto. Die Ein-Feld-Suche folgt dem Zielfeld bei Uber.
• 119 $ minus 25% sind 89,25 $, dargestellt als 89 $/Tag.
• Icons stammen von Phosphor (MIT). Die Statusleiste ist nach einem vermessenen echten iPhone-Screenshot gezeichnet.
• Fotos sind von Pexels: Dextar Studio, Jae Park, miata7 MX-5, Furkan Ceylan und Can AGBULUT.
• Zuerst als Karussell auf App Brainy veröffentlicht.