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

Eine Rezept-App beginnt mit dem besten Kapital, das ein Screen haben kann: Essen, das gut aussieht. Der erste Entwurf unten hat echte Rezepte und gute Fotos und erdrückt sie dann mit einem Suchfeld, das vier Dinge aufzählt, einem Regenbogen aus Kategorien, kleinen Versalien auf dem Hauptfoto und drei Icons in jeder Zeile. Der Fix behält den gesamten Inhalt und gibt dem Essen den Raum.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Korrigiert

Der linke Screen hat viel zu bieten und erzählt dir alles auf einmal. Rechts kommen dieselben Rezepte in der Reihenfolge, in der ein Koch sie sucht: finden, filtern, auswählen, dann stöbern.

Zähl, was ein Mensch lesen muss, bevor er das Abendessen wählt. Im Entwurf: eine Begrüßung mit Unterzeile, ein Suchfeld, ein Filterbutton, eine Glocke, Kategorie-Chips in sechs Farben, ein Titel auf einem Foto, eine Zeile mit fünf Fakten in Versalien, zwei Buttons auf dem Foto und dann drei Icons in jeder von vier Zeilen. Der korrigierte Screen verlangt bei jedem Schritt weniger, und die Zahlen belegen es.

Fix 1: Die Suche sagt, was sie findet

Vorher

Nachher

Ein Platzhalter, der vier Dinge aufzählt und keinen Platz mehr hat, gegen zwei Dinge und einen Filter.

Der Platzhalter im Entwurf lautet "Rezepte, Zutaten, Küchen, ch suchen..." und ist mitten im vierten Wort abgeschnitten. Ein Platzhalter ist der eine Satz, den ein Suchfeld sagen darf, also sollte er sagen, was das Feld tut, und er sollte passen. Die Liste im Entwurf passt nicht, und ein abgeschnittener Hinweis wirkt wie ein Fehler.

Der Fix nennt die zwei Dinge, die Leute wirklich eintippen: Rezepte oder Zutaten. Alles andere, etwa Küche oder Ernährungsform, ist Sache des Filterbuttons daneben.

Der Filterbutton wurde außerdem von einem gefüllten Terrakotta-Quadrat zu einem weißen. Ein gefüllter Button ist das Lauteste in der Zeile, und das war der Filter, nicht die Suche. Die Glocke ist aus dieser Zeile zur Begrüßung nach oben gewandert, sodass die Zeile nur noch aus Suche und einem Button besteht.

Fix 2: Ein Stil für jede Kategorie

Vorher

Nachher

Fünf Kategorien in fünf Farben mit je einem Icon, gegen einen Stil und einen gefüllten Chip.

Wenn jede Kategorie ihre eigene Farbe hat, bedeuten die Farben nichts mehr. Frühstück ist pfirsichfarben, Mittag grün, Abendessen lila. Nichts davon sagt einem Koch, welche Kategorie aktiv ist, und der Entwurf hat gar keinen Auswahlzustand.

Im Fix ist jeder Chip weiß und schlicht, und der ausgewählte, "Alle", ist im Marken-Terrakotta gefüllt. Farbe trägt jetzt eine einzige Information: was aktiv ist.

Die Chips sind außerdem größer, also leichter zu treffen, und die Reihe blendet am rechten Rand aus, wo sie scrollt. Im Entwurf ist die Reihe einfach am Bildschirmrand abgeschnitten, "Vegan" in der Mitte durchgesägt. Ein Ausblenden sagt "da ist mehr, wisch weiter". Ein harter Schnitt sagt gar nichts.

Fix 3: Die Fakten kommen unter das Foto

Vorher

Nachher

Ein Titel und fünf Fakten in Versalien auf einem hellen Teller, gegen einen Titel und drei Fakten mit Icons auf der Karte darunter.

Der Entwurf setzt einen 15-px-Titel und eine Zeile aus 9-px-Versalien in Weiß auf einen hellen Teller und einen hellen Tisch. Der Teller ist der ganze Sinn des Fotos, und der Text liegt obendrauf, in der einzigen Farbe, die davor verschwindet. Die Zeile enthält die Fakten, die ein Koch zum Entscheiden braucht: Zeit, Schwierigkeit und Portionen. Sie sind der am schwersten lesbare Teil des Fotos.

Der Fix verlegt den Text auf eine Karte unter dem Foto, in dunkler Schrift. Die drei Fakten, die entscheiden, ob heute gekocht wird, behalten ihren Platz, jeweils mit Icon: eine Uhr für 30 Min, ein Balkendiagramm für Einfach und zwei Personen für 4 Portionen. Man lernt die Icons einmal und liest die Zeile dann auf einen Blick. Die korrigierte Karte lässt Kalorien und Bewertung weg, die auf der Rezeptseite stehen können.

Die Buttons auf dem Foto sind von zwei, Herz und Teilen, auf einen geschrumpft: Speichern. Das ist die Aktion, die ein Koch von einer Rezeptkarte will, denn Speichern ist der Weg, wie ein Rezept später gekocht wird.

Fix 4: Eine Zeile ist ein Rezept, eine Zeit und ein Level

Vorher

Nachher

Vier Zeilen mit Koch-Credit und je drei Icons, gegen drei Zeilen mit Zeit, Level und zwei leisen Icons.

Jede Zeile im Entwurf trägt ein Vorschaubild, einen Namen, eine Zeile mit Zeit, Schwierigkeit und "von Koch Anna" sowie drei Icons: Herz, Lesezeichen und Teilen. Herz und Lesezeichen sind zwei Arten, "gefällt mir" zu sagen, und eine Liste mit vier Zeilen druckt diese Wahl zwölfmal.

Im Fix hat jede Zeile ein größeres Foto, den Namen und eine Zeile mit Zeit und Schwierigkeit. Rechts stehen zwei Icons, Teilen und Speichern, in einem hellen Grau, das nicht im Weg ist, bis man sie braucht. Das erste Rezept zeigt, wie ein gespeicherter Zustand aussieht: Das Lesezeichen füllt sich im Marken-Terrakotta, derselben Farbe wie die ausgewählte Kategorie. Der Titel "Beliebte Rezepte" wird zu "Beliebt", denn die App dreht sich ohnehin um Rezepte.

Die korrigierte Liste zeigt drei statt vier Rezepte, damit die Karte über der Tab-Leiste Luft hat.

Die kleineren Fixes

• Vier Tabs, nicht fünf. Start, Suche, Gespeichert und Profil ersetzen Start, Suche, Gespeichert, Planer und Profil.
• Ein Rand. Der Entwurf nutzte 14 px links und 12 px rechts. Der Fix nutzt 20 px auf beiden Seiten und 14 px zwischen den Blöcken.
• Eine kürzere Begrüßung. "Hi Maya! Was möchtest du heute kochen?" wurde zu "Was kocht Maya?".
• Eine Markenfarbe. Das Terrakotta, #C8553D, markiert den ausgewählten Chip, das gespeicherte Lesezeichen, den aktiven Tab und die kleinen Labels. Sonst ist nichts gefärbt.
• Eine echte Typo-Skala. Der Text ging von 8 bis 18 px auf die iOS-Größen von 11 bis 22 pt.

Prüfe deine eigene Rezept-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 einer Rezept-App, vorher und nachher

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

In Figma öffnen

FAQ

Was sollte der Startbildschirm einer Rezept-App zeigen?

Ein Suchfeld, das sagt, was es findet, eine Reihe Kategorien, ein hervorgehobenes Rezept mit Zeit, Schwierigkeit und Portionen und eine kurze Liste beliebter Rezepte. Kalorien, Bewertungen und Koch-Credits können auf der Rezeptseite stehen.

Was sollte die Suchleiste einer Rezept-App sagen?

Sag, was das Feld findet, in so wenigen Worten wie möglich: "Rezepte oder Zutaten suchen". Eine lange Liste von allem, was es finden könnte, wird abgeschnitten, und der Rest gehört in einen Filter.

Wie sollten Kategorie-Chips in einer Rezept-App aussehen?

Ein Stil für alle, wobei der ausgewählte Chip in der Markenfarbe gefüllt ist. Lass die Reihe scrollen und am Rand ausblenden, damit man sieht, dass es mehr gibt.

Wohin gehören Zeit und Schwierigkeit eines Rezepts?

Unter das Foto, in eine Zeile mit je einem kleinen Icon: eine Uhr für die Zeit, ein Level für die Schwierigkeit und Personen für die Portionen. Text auf einem Food-Foto ist schwer zu lesen und verdeckt das Gericht.

Wie viele Icons sollte eine Zeile in einer Rezeptliste haben?

Zwei oder weniger. Speichern und Teilen reichen, und ein leises Grau verhindert, dass sie mit dem Gericht konkurrieren.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die Nutzerin, die Köche und die Rezeptliste sind für die Übung erfunden.
• Fotos über Pexels von Tamra Creatives Agency, Willians Huerta, Kei Scampa, Ana Palade, adrian vieriu und Surendra Shrestha.
• Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im korrigierten Screen.
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), für Text auf Bildern und Hintergründen.
• Zuerst als Karussell auf App Brainy veröffentlicht.