Food-Delivery-App-Design: Ein Redesign des Home Screens, Vorher und Nachher

Ein Home Screen für Essenslieferungen hat genau eine Aufgabe: einen hungrigen Menschen in wenigen Sekunden zu einem Restaurant zu bringen. Der erste Entwurf unten scheitert daran, nicht weil ein einzelnes Element hässlich wäre, sondern weil jedes Element gleichzeitig Aufmerksamkeit verlangt. Die Lösung waren keine neuen Features und kein neuer Stil. Es hieß: Dinge wegnehmen, bis jedes Element nur noch eine Sache sagt.

Der ganze Screen, vorher und nachher

Entwurf eines Einsteigers

Repariert

Zähle, was das Auge verarbeiten muss, bevor es das erste Restaurant erreicht. Links: eine vollständige Straßenadresse, zwei Header-Icons, eine Suchleiste mit zwei weiteren Icons, ein Verlaufsbanner mit drei Zeilen Text und einem Button, Karussell-Punkte, fünf Ringe in fünf Farben, eine Abschnittsüberschrift mit Flammen-Icon und drei Badges auf einem Foto. Rechts: ein Ortsname, ein Warenkorb, eine Suchleiste, fünf Kacheln, ein Angebot und eine Karte.

Rechts fehlt kein Feature, das links vorhanden war. Adresse, Suche, Kategorien, Angebot und Restaurants sind alle noch da. Jedes davon hat nur aufgehört, mit den anderen zu konkurrieren.

Fix 1: Sag in einem Wort, wohin

Vorher

Nachher

Der Entwurf zeigt die vollständige Straßenadresse, 221B Baker Street, mitten im Wort abgeschnitten in kleiner Schrift neben einer Stecknadel. Die Lösung zeigt den Namen, den die Person dieser Adresse gegeben hat, „Zuhause“, groß, mit einem Chevron, der signalisiert, dass man ihn ändern kann.

Niemand öffnet eine Lieferapp, um die eigene Adresse zu lesen. Man will nur eines bestätigen: Geht das an den richtigen Ort? Ein selbst gewähltes Label wie Zuhause, Arbeit oder Mamas Wohnung beantwortet das schneller als ein Straßenname, und es bleibt bei jeder Länge lesbar, weil es ein Wort ist. Die vollständige Adresse gehört einen Tap entfernt auf den Screen, auf dem man sie bearbeitet.

Die Lösung entfernt außerdem das Profil-Icon aus dem Header. Der Entwurf hatte es doppelt, einmal oben und einmal als Tab „Konto“. Zwei Türen zum selben Raum lassen Leute rätseln, ob sie in verschiedene Räume führen.

Fix 2: Eine Form, ein Auswahlzustand

Vorher

Nachher

Vorher sitzt jede der 5 Kategorien in einem Kreis mit eigenem farbigen Ring: gelb, grün, blau, pink, lila. Nachher teilen sich die Kacheln eine Form und einen neutralen Rahmen, und nur die ausgewählte, Pizza, bekommt das Markenrot an Rand und Label.

Farbe in einer Oberfläche ist ein Signal, und fünf Farben senden fünf Signale. Wer die Reihe überfliegt, muss sich fragen, was Grün bedeutet und warum Sushi blau ist. Die Antwort lautet: nichts, und genau das ist das Problem: Dekoration, die wie Information aussieht.

Wird Farbe nur für eine Sache ausgegeben, bedeutet sie etwas. Eine einzelne rote Kachel sagt ohne ein Wort „Du bist hier“. Den Rest erledigen die Fotos, denn Essensfotos sind ohnehin das Farbigste auf dem Screen und brauchen keine Hilfe.

Fix 3: Ein Angebot, eine Botschaft

Vorher

Nachher

Das Banner im Entwurf stapelt „MEGA SALE!“, das Angebot, den Code, den Mindestbestellwert und „AGB gelten“ in winziger Schrift, dann einen Button. Die Lösung behält die 50% RABATT und sagt drei Dinge: wann (Nur heute), für wen (deine erste Bestellung über 20 $) und den Code, als Button zum Kopieren.

Das Angebot war nie das Problem. 50 % Rabatt sind ein guter Grund zu bestellen, und die Lösung behält es in derselben Größe.

Geändert hat sich alles drumherum. „MEGA SALE!“ und „50% RABATT“ sagten zweimal dasselbe. Das Kleingedruckte quetschte vier Fakten in eine Zeile mit 9 px, getrennt durch Striche. Der Button „Jetzt bestellen“ wusste nicht, wohin, denn es gibt noch kein einzelnes Restaurant, bei dem man bestellen könnte.

Der Code ist jetzt die Aktion. Ein Tap kopiert YUMMY50, das Einzige, was jemand von diesem Banner zur Kasse mitnehmen muss. Die Bedingungen wandern ebenfalls zur Kasse, wo sie gelten.

Auch das Bild hat sich geändert. Der Entwurf schneidet den Burger zu einem Kreis aus, der auf einem orangen Verlauf schwebt. Die Lösung fotografiert ihn auf dem Markenrot, sodass das Essen auf der Karte selbst liegt statt in einem Sticker obendrauf.

Fix 4: Ein Badge, zwei Fakten

Vorher

Nachher

Vorher trägt das Foto drei Badges (Gratis-Lieferung, 20% RABATT, Beworben) und der Text darunter listet Küchen, Lieferzeit, Gebühr, Preisniveau, Mindestbestellwert und Öffnungszeiten auf. Nachher: ein Badge, der Name, die Bewertung und zwei Fakten: wie lange und wie viel.

Eine Restaurantkarte in einer Liste wird in etwa einer Sekunde gelesen, und in dieser Sekunde entscheidet man zwei Dinge: Will ich dieses Essen, und ist es die Wartezeit und die Gebühr wert? Die reparierte Karte beantwortet genau das. Das Foto beantwortet das Erste. „25 bis 35 Min., 2,99 $ Lieferung“ beantwortet das Zweite.

Alles andere auf der alten Karte ist echte Information, nur keine Information für den ersten Blick. Die Liste der Küchen sieht man schon im Foto. Der Mindestbestellwert von 15 $ und die Schließzeit um 23 Uhr zählen erst, wenn man gewählt hat, also gehören sie auf die eigene Seite des Restaurants.

„Beworben“ ist für das Unternehmen, nicht für die Kundschaft, und drei Badges nebeneinander heben sich gegenseitig auf. Ein Badge, nach Priorität gewählt, wird gelesen.

Fünf kleinere Fixes

Die vier Teile oben sind die großen. Diese fünf Änderungen sind genauso bewusst:

• Ein Rand. Der Entwurf nutzte 12 px links und 16 px rechts, also fluchtete nichts mit irgendwas. Die Lösung nutzt 20 px auf beiden Seiten, und jede Kante auf dem Screen sitzt auf dieser Linie.
• Ein Typografiesystem. Der Entwurf hatte Text von 9 bis 30 px ohne Stufen dazwischen. Die Lösung nutzt die iOS-Textstile, von 11 bis 22 pt, sodass jede Größe eine Rolle hat und nichts zu klein zum Lesen ist.
• Eine ruhigere Suchleiste. Die Suche im Entwurf hatte ein Mikrofon und ein Filter-Icon in sich und einen Platzhalter, der so lang war, dass er abgeschnitten wurde. Die Lösung behält ein Icon und einen kürzeren Prompt: „Gerichte, Restaurants oder Küchen“.
• Keine Karussell-Punkte. Punkte unter einem Banner versprechen weitere Banner. Die meisten wischen nie, und die Punkte sind ein weiteres Ding zum Anschauen. Ein Angebot braucht keine Punkte.
• Vier Tabs, nicht fünf. Favoriten haben die Tab-Leiste verlassen. Gespeichert wird weiterhin über das Herz auf jeder Karte, und vier Tabs geben jedem mehr Platz und ein leichteres Ziel.

Prüfe deinen eigenen Home Screen

Halte den Home Screen deiner App neben diese Checkliste. Jedes „Nein“ ist ein Teil, das schreit.

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

Food-Delivery-Home-Screen, vorher und nachher

Beide Screens und jedes reparierte Element als Figma-Komponenten. Kostenlos, nur ansehen, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte der Home Screen einer Food-Delivery-App zuerst zeigen?

Wohin die Bestellung geht, eine Suchleiste, die Kategorien und ein Angebot, dann Restaurants. Jede Restaurantkarte braucht ein Foto, den Namen, die Bewertung, die Lieferzeit und die Liefergebühr.

Wie viele Badges sollte eine Restaurantkarte haben?

Eines. Drei Badges nebeneinander heben sich gegenseitig auf; wähle das, was der Kundschaft am wichtigsten ist, etwa Gratis-Lieferung.

Sollte eine Food-App für jede Kategorie eine andere Farbe nutzen?

Nein. Gib jeder Kategorie dieselbe Form und einen neutralen Rahmen und setze die Markenfarbe nur für die ausgewählte ein, damit die Farbe „Du bist hier“ bedeutet.

Wie gestaltet man ein Promo-Banner, das konvertiert?

Nenne ein Angebot einmal: den Rabatt, für wen er gilt und den Code. Mach den Code zur Aktion, per Tap kopierbar, und verlege die Bedingungen zur Kasse.

Wie viele Tabs sollte eine Food-Delivery-App haben?

Höchstens vier oder fünf. Hier gaben vier (Start, Suche, Bestellungen, Konto) jedem Tab mehr Platz, wobei das Speichern über das Herz auf jeder Karte läuft.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die Maße in der Tabelle stammen aus den Figma-Dateien.
• Essensfotos über Unsplash von Fernando Andrade, sina piryae, Mahmoud Fawzy, Anna Pelzer, Alana Harris, Thimotius Timmy und Poul Hoang. Promo-Burger von Elements Interactive auf Pexels, dessen Studiohintergrund per Farbe, ohne KI, durch das Markenrot ersetzt wurde.
• iOS-Textgrößen aus Apples Human Interface Guidelines, Typography.
• Zuerst als Karussell auf App Brainy veröffentlicht.