Kaffee-App-Design: Redesign eines Bestell-Startbildschirms, Vorher und Nachher
Ein Startbildschirm zum Kaffeebestellen mit einer 54 Zeichen langen Filialzeile, einem lauten Punkte-Banner, acht Tabs, die über den Rand laufen, und einem ADD-Button unter jedem Foto, und derselbe Screen repariert. Jede Änderung im Vergleich, der Grund dahinter und die kostenlose Figma-Datei.
Ein Mensch öffnet eine Kaffee-App, um eine einzige Sache zu tun: ein Getränk bestellen und abholen. Der erste Entwurf unten hat die richtigen Dinge drauf, aber er sagt sie alle gleichzeitig: eine lange Filialzeile, ein Banner, das über Punkte brüllt, acht Tabs und einen ADD-Button unter jedem Foto. Die Lösung behält Filiale, Punkte und Menü und gibt jedem davon einen einzigen, ruhigen Platz.
Der ganze Screen, vorher und nachher
Junior-Entwurf
Repariert
Links begegnen einem Menschen eine Begrüßung, eine Filialzeile, ein Punkte-Banner, eine Tab-Leiste und ein Raster aus Buttons, alles gleich laut. Rechts gibt es pro Block eine Sache zu lesen und pro Zeile eine Aktion.
| Junior-Entwurf | Repariert | |
|---|---|---|
| Filiale | Eine Zeile mit 54 Zeichen in einem umrandeten Kasten | Eine Abholkarte mit Ändern-Link |
| Punkte | Ein Banner mit drei Ausrufezeichen | Eine Fortschrittskarte: 250 Punkte bis zum Gratisgetränk |
| Kategorie-Tabs | 8, über den Rand laufend | 4 Chips, einer ausgewählt |
| Artikel | Ein 2-mal-3-Raster aus Karten | Zeilen mit 60-px-Foto |
| Hinzufügen-Buttons | Ein breites butterfarbenes ADD unter jedem Foto | Ein runder Button pro Zeile |
| Tabs in der Leiste | 5 | 4 |
| Seitenrand | 14 px links, 12 px rechts | 20 px, mit 16 px zwischen den Blöcken |
| Textgrößen | 9 bis 18 px | 11 bis 28 pt |
Fix 1: Sag einmal, wo
Vorher
Nachher
Eine in einen Kasten gepresste Filialzeile gegen eine Abholkarte.
Der Entwurf packt die Filiale in eine Zeile: „Downtown Store - 123 Main St (0.3 mi) - Open until 9PM", 54 Zeichen in kleiner Schrift in einem umrandeten Kasten mit Chevron am Ende. Name, Straße, Entfernung und Öffnungszeiten wiegen alle gleich viel, also liest das Auge die ganze Zeile, um die eine Information zu finden, die es braucht.
Die Lösung macht aus der Zeile eine Abholkarte. „Pickup at Downtown" ist der Titel, „0.3 mi · Open until 9 pm" ist eine graue Zeile darunter, und „Ändern" steht rechts im Markenblau als echte Aktion. Die Straßenadresse gehört nicht auf den Startbildschirm. Die Begrüßung wuchs zu einem großen „Good morning, Leo", und die Ausrufezeichen sind weg.
Die Regel zum Wiederverwenden: Teile eine lange Zeile in einen Titel, ein Detail und eine Aktion. Ein Kasten mit Chevron sagt weniger klar „tipp mich an" als ein Wort, das „Ändern" sagt.
Fix 2: Punkte als Fortschritt
Vorher
Nachher
Ein schreiendes Banner gegen einen Fortschrittsbalken.
Das Banner im Entwurf verläuft von Blau zu Buttergelb, und sein weißer Text sitzt am gelben Ende, wo er am schwersten zu lesen ist. Es sagt „You have 1,250 points! Redeem now for FREE drinks!!!", und die Redeem-Now-Pille darunter ist weiß mit blassgelbem Text. Es sagt, dass man Punkte hat, aber nicht, wie nah man an irgendetwas ist.
Die Lösung ist eine tiefblaue Karte. „Rewards" und „1,250 points" stehen oben, und die große Zeile lautet „250 points to a free drink". Ein butterfarbener Fortschrittsbalken darunter ist zu 83 % gefüllt, das sind 1.250 von 1.500, und die kleine Zeile sagt, wo das Gratisgetränk liegt. Der Mensch sieht die Distanz, und das ist die interessante Zahl.
Die Regel zum Wiederverwenden: Ein Punktestand ist eine Zahl, Fortschritt ist eine Geschichte. Zeig die Geschichte und lass die Zahl am Rand stehen.
Fix 3: Vier Chips, einer ausgewählt
Vorher
Nachher
Acht Tabs, die über den Rand laufen, gegen vier Chips.
Der Entwurf hat acht Kategorien: Coffee, Tea, Cold Drinks, Seasonal, Bakery, Breakfast, Merch und Gift Cards. Sie laufen über den rechten Rand, also wird „Merch" zu „Mer" abgeschnitten, und man muss seitlich scrollen, um zu erfahren, dass es mehr gibt. Die ausgewählte Kategorie ist durch eine dünne Unterstreichung markiert.
Die Lösung zeigt vier Chips: Alle, Coffee, Cold drinks und Bakery. Alle ist im Café-Blau gefüllt und die anderen sind weiß, sodass die Auswahl auf einen Blick klar ist. Die anderen Kategorien sind nicht auf diesem Screen; eine echte App würde sie im Menü-Tab ablegen, einen Tipp entfernt.
Die Regel zum Wiederverwenden: Eine Filterzeile sollte auf den Bildschirm passen. Wenn sie seitliches Scrollen braucht, um ihre eigene Liste zu zeigen, zeig weniger.
Fix 4: Eine Zeile pro Artikel
Vorher
Nachher
Ein Raster aus Karten mit butterfarbenem Button unter jeder, gegen drei Zeilen.
Der Entwurf zeigt Artikel als Raster aus Karten: ein großes Foto, ein Name, ein Preis und ein butterfarbener „ADD +"-Button in Großbuchstaben. Zweieinhalb Kartenreihen füllen den Bildschirm unter den Tabs, das Butter auf den Buttons wiederholt sich unter jedem Foto, und der Link „View Menu" ist blassgelb auf Weiß.
Die Lösung macht jeden Artikel zu einer Zeile mit 60-px-Foto, Namen, einer grauen Zeile und dem Preis sowie einem runden blauen „+" rechts. Drei Zeilen passen in eine Karte, wo das Raster zweieinhalb Karten zeigte, und der einzige Button in jeder Zeile ist der Hinzufügen-Button. „Full menu" steht im Markenblau.
Die Regel zum Wiederverwenden: Wenn jeder Artikel dieselbe Aktion hat, sollte die Aktion klein und ausgerichtet sein, damit das Auge Namen und Preise an einer Kante entlang liest.
Die kleineren Fixes
- Eine linke Kante. Die Ränder im Entwurf waren 14 px links und 12 px rechts. Die Lösung nutzt 20 px auf beiden Seiten und 16 px zwischen den Blöcken.
- Eine echte Typo-Skala. Der Text ging von 9 bis 18 px auf iOS-Größen von 11 bis 28 pt.
- Vier Tabs, nicht fünf. Home, Menu, Order, Rewards und Account wurden zu Home, Menu, Rewards und Account. Der Order-Tab verließ die Leiste.
- Eine Palette aus vier Farben. Café-Kobalt #2342A8, Tiefblau #15276B, Butter #F3C77A und Creme #F5EFE4 ersetzen einen Verlauf und einen grauen Grund.
Prüfe deinen eigenen Bestell-Screen
| Frage | Warum es wichtig ist |
|---|---|
| Kann man die Abholfiliale auf einen Blick lesen? | Es entscheidet, ob man überhaupt bestellen kann |
| Zeigen Prämien Fortschritt oder nur einen Stand? | Die Distanz ist die interessante Zahl |
| Passt die Kategoriezeile ohne seitliches Scrollen? | Ein abgeschnittener Tab verbirgt, was es noch gibt |
| Wiederholt jeder Artikel einen breiten Button? | Ein kleiner Hinzufügen-Button pro Zeile reicht |
FAQ
Was sollte der Startbildschirm einer Kaffee-Bestell-App zuerst zeigen?
Die Abholfiliale auf einer Karte mit Ändern-Link, dann den Prämienfortschritt, dann die Kategorien und die beliebten Artikel. Der Mensch sollte sehen, wo er bestellt, bevor er sieht, was.
Wie gestaltet man einen Treuepunkte-Bereich?
Zeig die Distanz zur nächsten Prämie als Fortschrittsbalken und als schlichte Zeile, etwa „250 points to a free drink", und stell den Kontostand an den Rand.
Wie viele Kategorie-Tabs sollte ein Menü haben?
So viele, wie ohne seitliches Scrollen auf den Bildschirm passen, meist vier. Den Rest legst du in den Menü-Tab, einen Tipp entfernt.
Sollte ein Menü ein Raster oder eine Liste nutzen?
Eine Liste aus Zeilen funktioniert zum Bestellen besser, weil Namen und Preise an einer Kante fluchten und jede Zeile nur einen kleinen Hinzufügen-Button braucht. Ein Raster eignet sich zum Stöbern in Fotos.
Wie groß sollte ein Hinzufügen-Button sein?
Mindestens 44 mal 44 Punkte zum Antippen, auch wenn der sichtbare Kreis kleiner ist. Der reparierte Screen nutzt einen runden blauen Button pro Zeile.
Quellen
- Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die Filiale, ihre Adresse, die Preise und die Punkte sind erfunden.
- Menü-Fotos über Pexels von Duc Nguyen, Melissa Jansen van Rensburg, Marcelo Verfe, Juan Pablo Serrano, Skyler Ewing und Vinícius Vieira ft.
- Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten Screen.
- Apple Human Interface Guidelines: Accessibility, für die Touch-Zielgröße von 44 pt.
- Kivetz, Urminsky und Zheng, The Goal-Gradient Hypothesis Resurrected, Journal of Marketing Research, 2006, dazu, dass Kunden häufiger kaufen, wenn sich eine Treuekarte füllt.
- Zuerst als Karussell veröffentlicht auf App Brainy.
Want this for your own app? Our team redesigns ordering apps like this one, from the first audit to the finished components.
Get Started
