Ride-App-Design: Ein Ride-Hailing-Startscreen, vorher und nachher
Ein Ride-Hailing-Startscreen eines Juniors mit sechs Kartensteuerungen, einem Promo-Banner und zwei Adressfeldern, und derselbe Screen repariert. Jede Änderung im direkten Vergleich, der Grund dahinter und die kostenlose Figma-Datei.
Wer eine Ride-App öffnet, steht meist irgendwo und will woanders hin. Der erste Entwurf unten funktioniert, verlangt den Leuten aber vor dem ersten Tap eine Menge ab: eine Karte mit sechs schwebenden Steuerelementen und einem gelben Banner, ein Sheet mit zwei Adressfeldern, sechs Services in sechs Farben und eine Reihe Chips. Die Lösung behält jede Funktion, die zählt, und stellt eine einzige Frage.
Der ganze Screen, vorher und nachher
Entwurf vom Junior
Repariert
Links ist die Karte mit Steuerelementen zugepflastert und das Sheet ein Formular. Rechts ist die Karte eine Karte, und das Sheet hat ein Feld, vier Zeilen und vier Services. Die Karte wurde außerdem kürzer, von 380 px auf 270 px Höhe, damit das wichtige Sheet höher beginnt.
| Entwurf vom Junior | Repariert | |
|---|---|---|
| Kartensteuerung | 6, in vier Formen | 2 |
| Adressfelder | 2 und ein Tausch-Button | 1, „Wohin?“ |
| Services | 6, auf sechs getönten Flächen | 4, in einem Stil |
| Promo | Gelbes Banner in Großbuchstaben | Eine Zeile, „Code NEWRIDE“ |
| Letzte Orte | 2, volle Adressen in einer Zeile | Zeilen mit Name und kurzer Adresse |
| Tabs | 5 | 4 |
| Seitenrand | 14 px links, 12 px rechts | 20 px auf beiden Seiten |
| Textgrößen | 9 bis 12 px | 13 bis 17 pt |
Fix 1: zwei Buttons auf der Karte
Vorher
Nachher
Sechs Steuerelemente in vier Formen und ein Banner, gegen ein Menü und einen Standort-Button.
Der Entwurf legt ein Menü-Quadrat, einen Suchkreis, ein Ebenen-Quadrat, eine Traffic-Pille, einen Zoom-Stapel und einen grünen Standortkreis über die Straßen, dazu ein Promo-Banner in Großbuchstaben quer über den oberen Rand. Alles davon könnte ein Fahrgast wollen. Nichts davon ist das, was er tun wollte, und zusammen verdecken sie die Karte, die er lesen will.
Die Lösung behält zwei 44-px-Buttons: das Menü und deinen Standort. Der Suchkreis war ein zweiter Weg in dieselbe Suche, die das Sheet schon hat. Das Banner ist als eine Zeile ins Sheet gewandert.
Ebenen, Traffic und der Zoom-Stapel sind nicht auf diesem Screen, und dieses Redesign zeigt nicht, wo sie wohnen, also braucht eine echte App ein Zuhause für sie. Pinch-Zoom auf einer Karte braucht keine zwei Buttons.
Die Regel zum Mitnehmen: Setze nur die Steuerelemente auf die Karte, die verändern, was man gerade sieht, und gib dem Rest ein anderes Zuhause.
Fix 2: eine Frage statt zwei Feldern
Vorher
Nachher
Zwei Adressfelder und ein Tausch-Button, gegen ein Feld, das fragt: Wohin?
Der Entwurf öffnet ein Formular: ein Abholfeld mit grünem Punkt, ein Zielfeld mit schwarzem Punkt und ein Tauschpfeil. Auf der Karte darüber zeigt schon ein blauer Punkt, wo der Fahrgast ist, also fragt das erste Feld nach etwas, das der Screen längst sagt.
Die Lösung fragt „Wohin?“ in einem 52-px-Feld. Rechts sitzt ein Chip „Jetzt“, dort wohnt die Zeit: Wer später fahren will, ändert sie, alle anderen lesen sie nie. Der Tausch-Button ist mit dem Abholfeld verschwunden.
Die Regel zum Mitnehmen: Frage das Eine, das du nicht weißt, und mach aus dem, was du erraten kannst, einen Chip, der sich ändern lässt.
Fix 3: vier Services in einem Stil
Vorher
Nachher
Sechs Services auf sechs Farben, gegen vier auf einem Grau mit einem Grün.
Wenn jeder Service seine eigene Farbe hat, bedeutet Farbe nichts mehr. Die sechs Kacheln des Entwurfs sind grün, orange, blau, lila, pink und cyan, und jedes Icon wiederholt die Farbe seiner Kachel, bei 9 bis 12 px Text. Nichts in der Reihe sagt, welchen Service ein Fahrgast meistens will.
Die Lösung zeichnet vier Services, Ride, Package, Reserve und Rental, als große Kacheln auf einem sanften Grau mit Icons im Markengrün #16A34A. Sie sind breit genug, um sie zu treffen und gleichzeitig zu lesen. Moto und XL sind nicht auf diesem Startscreen, ein Tausch, den dieses Redesign nicht versteckt, denn es zeichnet nicht, wohin sie wandern.
Die Regel zum Mitnehmen: Lass eine Markenfarbe bedeuten „das ist die App“, und lass Form und Icon die Auswahl unterscheiden.
Fix 4: gespeicherte Orte als Zeilen, mit Adresse
Vorher
Nachher
Chips ohne Adressen und zwei lange Zeilen für Zuletzt, gegen Zeilen mit Name, Adresse und Tap-Fläche.
Ein Chip, der „Zuhause“ sagt, verrät dem Fahrgast nur dann, wohin es geht, wenn er ihm traut. Die Chips des Entwurfs zeigen keine Adresse, und die letzten Orte darunter sind lange Zeilen wie „Ferry Building, The Embarcadero, San Francisco, CA 94111“, bis zur Postleitzahl geschrieben, in 12 px.
Die Lösung macht aus jedem eine Zeile: ein Icon, der Name fett und darunter eine kurze Adresse, „Zuhause, 24 Hayes St“. Ferry Building ist ein letzter Ort, mit „The Embarcadero“ darunter, und Stadt und Postleitzahl sind weg, weil der Fahrgast ohnehin in dieser Stadt ist. Die 30 % Rabatt wurden zur vierten Zeile, mit grünem Tag und „Code NEWRIDE“ darunter, in derselben Größe wie die Orte.
Das Angebot ist noch da. Es schreit nur nicht mehr über die Karte.
Die Regel zum Mitnehmen: Eine Abkürzung sollte zeigen, wohin sie führt, und eine Promo kann eine Zeile sein.
Die kleineren Fixes
- Eine linke Kante. Das Sheet des Entwurfs nutzte 14 px links und 12 px rechts. Die Lösung nutzt 20 px auf beiden Seiten.
- Ein Akzent. Der Entwurf nutzte Gelb für das Banner, Grün für den Standort-Button und sechs Töne für Services. Die Lösung nutzt das Markengrün für den aktiven Tab, die Service-Icons und das Angebots-Tag, und Grau für den Rest.
- Eine echte Typografieskala. Der Text ging von 9 bis 12 px auf iOS-Größen von 13 bis 17 pt.
- Vier Tabs, nicht fünf. Start, Fahrten, Wallet, Angebote und Konto wurden zu Start, Aktivität, Wallet und Konto. Angebote ist weg, weil das Angebot jetzt eine Zeile auf dem Start ist.
- Eine kürzere Karte. Die Karte ging von 380 px auf 270 px Höhe, damit die Frage höher sitzt.
Prüfe deine eigene Ride-App
| Frage | Warum es zählt |
|---|---|
| Wie viele Steuerelemente sitzen auf der Karte? | Jedes verdeckt eine Straße |
| Fragst du den Fahrgast nach etwas, das der Screen schon weiß? | Ein Abholfeld wiederholt den blauen Punkt |
| Bedeutet jede Service-Farbe etwas? | Wenn nicht, nimm eine Farbe |
| Zeigt jede Abkürzung ihre Adresse? | Ein Chip, der versteckt, wohin er führt, ist geraten |
| Ist die Promo eine Zeile oder ein Banner? | Ein Banner verdeckt die Karte |
| Ist die Zeit ein Chip? | Die meisten Fahrten sind jetzt |
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
Startscreen einer Ride-App, vorher und nachher
Beide Screens und jedes reparierte Teil als Figma-Komponenten. Kostenlos, nur ansehen, dupliziere sie in deine Entwürfe.
FAQ
Was sollte der Startscreen einer Ride-Hailing-App zeigen?
Eine Karte mit zwei Buttons, ein einziges Feld „Wohin?“ und ein paar Abkürzungen darunter. Services, gespeicherte Orte und Angebote gehören ins Sheet, nicht auf die Karte.
Wie viele Steuerelemente sollte ein Kartenscreen haben?
Zwei reichen auf dem Startscreen: das Menü und dein Standort. Ebenen, Traffic und Zoom können woanders wohnen, denn Karten zoomt man mit dem Pinch.
Wie gestaltet man das Suchfeld „Wohin“?
Mach es zu einem großen Feld mit der Frage darin und einem Chip „Jetzt“ rechts für die Zeit. Frag nicht zuerst nach dem Abholort, wenn die Karte schon zeigt, wo die Person ist.
Wie sollte eine Ride-App Services wie Ride, XL und Package zeigen?
In einem Stil, als große Kacheln, mit Icons in der Markenfarbe. Vier passen auf den Startscreen; der Rest braucht einen eigenen Platz.
Wie zeigt man Promo-Codes in einer Ride-App?
Als eine Zeile im selben Stil wie die Orte, mit kurzem Titel und dem Code darunter. Ein Banner auf der Karte verdeckt das, was Fahrgäste lesen wollten.
Welche Schriftgröße sollte eine Ride-App verwenden?
Die Textskala der Plattform. Der reparierte Screen nutzt iOS-Größen von 13 bis 17 pt, mit 44-px-Kartenbuttons.
Quellen
- Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die Karte ist unsere eigene Vektorzeichnung aus Straßen, einem Park und einem Bach. Ferry Building und Oracle Park sind öffentliche Wahrzeichen von San Francisco; die Adressen für Zuhause und Arbeit sind erfunden. Keine Fotos.
- Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten Screen.
- Apple Human Interface Guidelines: Accessibility, für die Größe der 44-pt-Touch-Fläche.
- Zuerst als Karussell auf App Brainy veröffentlicht.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
