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

Eine Meditations-App hat ein einziges Versprechen: Der Screen macht dich ruhiger, als du gekommen bist. Der erste Entwurf unten will genau das und untergräbt es dann mit neun Farben, weißen Wörtern auf einem blassen Foto und einem Absatz, wo eigentlich Zahlen stehen sollten. Der Fix behält jede Funktion und dreht die Lautstärke herunter.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Der linke Screen ist freundlich und laut. Der rechte ist dasselbe Produkt bei geringerer Lautstärke, und die geringere Lautstärke ist das Feature.

Zähl, was das Auge auf jeder Seite sortieren muss. Der Entwurf zeigt fünf Stimmungsfarben und vier Kachelfarben, dazu eine pfirsichfarbene Box und ein Foto mit Text darauf, bevor jemand ein Wort liest. Der reparierte Screen hat ein einziges Marken-Salbeigrün, #4F7A5A, und eine pfirsichfarbene Flamme, #E0784A, reserviert für das eine, was Serie bedeutet.

Fix 1: Die Stimmungsfrage einmal stellen, in einer Farbe

Vorher

Nachher

Fünf farbige Kreise mit je einem Wort darunter, gegen eine Frage, fünf ruhige Gesichter und eine gewählte Antwort.

Ein Stimmungscheck ist eine Frage mit fünf Antworten. Im Entwurf hat jede Antwort ihre eigene Farbe, also sieht die Reihe schon beantwortet aus, bevor der Nutzer etwas gewählt hat, und nichts zeigt, was ausgewählt ist. Farbe übernimmt hier den Job der Dekoration, nicht den der Information.

Der Fix zeichnet alle fünf Gesichter im selben Grau und füllt nur das gewählte im Markengrün, mit seinem Wort in einem Chip neben der Frage: „Ruhig“. Jetzt bedeutet Farbe genau eine Sache: Das ist der aktuelle Zustand. Die Wörter unter den Gesichtern sind aus der Reihe verschwunden, weil der Chip das Wort für das gewählte Gesicht nennt, einmal.

Das Prinzip gilt für jede App mit einer Bewertung oder Auswahl: Wenn jede Option farbig ist, sagt Farbe dem Nutzer nichts. Halte Optionen neutral und gib den Akzent für die Auswahl aus.

Fix 2: Das Foto oben, die Wörter darunter

Vorher

Nachher

Weiße Wörter und vier winzige Tags auf einem blassen Strandfoto, gegen ein Foto mit Titel, Dauer und einem Play-Button darunter.

Der Entwurf setzt einen weißen 17-px-Titel und vier 8-px-Tags direkt auf hellen Sand und Meer. Weiß auf einem blassen Foto ist die schwächste Paarung überhaupt, und die Tags sind der kleinste Text auf dem Screen, genau dort, wo der Nutzer entscheidet, was er abspielt. Text auf einem Foto ändert sich außerdem mit jedem Foto: An dem Tag, an dem ein dunkleres Bild kommt, liest sich das Layout anders.

Der Fix verlegt jedes Wort auf die Karte, unter das Foto, in dunklem Text auf einer einfarbigen Fläche. Das Foto ist jetzt nur noch ein Foto. Vier Tags schrumpfen zu einer Meta-Zeile, „Daily Calm, 10 min, Sleep“, und die Play-Pille in der Ecke wird zu einem runden Button am Zeilenende, wo ohnehin schon ein Daumen liegt. Dieselbe Session hat jetzt einen Titel, eine Dauer und eine Aktion.

Die Regel zum Wiederverwenden: Wenn die Wörter wichtig sind, gib ihnen eine eigene Fläche. Text über einem Foto ist die Entscheidung, in Kauf zu nehmen, dass manche Fotos ihn kaputtmachen.

Fix 3: Zwei Fotokarten statt vier farbiger Kacheln

Vorher

Nachher

Vier Pastellkacheln mit je einem Icon, gegen zwei Fotokarten, die zeigen, wie sich die Session anfühlt.

Die Kacheln sehen nach nichts aus. Eine lila Box mit einem Mond sagt „Schlaf“ auf dieselbe flache Weise, wie eine blaue Box mit Lungen „Atmen“ sagt, und die vier Farben kosten den Screen seine Ruhe. Die Fotos zeigen die Sache selbst: einen Nachthimmel für eine Schlaf-Session, einen nebligen See für eine am Morgen. In einer Meditations-App ist das Bild Teil des Produkts, weil es die Stimmung setzt, noch bevor das Audio es tut.

Die reparierte Reihe zeigt zwei Karten, und jede trägt Name, Länge und Kategorie in zwei Zeilen. Zwei Karten lassen jedem Foto genug Breite, um lesbar zu sein. Die Kacheln Breathe und Focus Music sind nicht auf diesem Screen, und der Abschnitt heißt statt „Recommended For You“ jetzt „For you“, denn eine Liste auf einem Home-Screen ist ohnehin für dich.

Fix 4: Drei Zahlen statt eines Absatzes

Vorher

Nachher

Ein Satz, in dem dieselben drei Fakten vergraben sind, gegen die drei Fakten als Zahlen mit Labels.

Beide Versionen sagen dasselbe: sieben Tage in Folge, insgesamt zwei Stunden fünfunddreißig Minuten, dreiundzwanzig Sessions. Der Entwurf packt sie in einen Satz mit zwei Ausrufezeichen und einem „so far, amazing!“. Wer die Zahl sucht, muss den ganzen Satz lesen, und eine Zahl lässt sich nicht auf einen Blick vergleichen, wenn sie in einem Nebensatz steckt.

Der Fix gibt jedem Fakt seine eigene Spalte: eine große Zahl und ein kleines Label. Die Flamme in Pfirsich steht neben der Serie, weil die Serie die Zahl ist, die Leute morgen wiederkommen lässt. Jetzt prüft ein Nutzer seinen Fortschritt in der Zeit, die ein Blick dauert.

Die kleineren Fixes

• Vier Tabs, nicht fünf. Today, Explore, Sleep und Profile ersetzen Home, Sleep, Meditate, Music und Profile. Meditate und Music haben keine eigenen Tabs mehr.
• 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 Karten.
• Eine sauberere Begrüßung. „How are you feeling today???“ ist aus dem Header verschwunden, weil die Stimmungskarte es fragt, einmal, mit einem Fragezeichen.
• Eine Header-Aktion. Die Glocke bleibt und bekommt einen kleinen Punkt. Der Avatar ist aus dem Header verschwunden, und Profile bleibt ein Tab.
• Eine echte Typografie-Skala. Der Text ging von 8 bis 18 px auf die iOS-Größen von 11 bis 28 pt, damit der kleinste Text lesbar ist und der Titel klar ein Titel.
• Ruhige Abschnittslinks. „View all >“ wurde zu „See all“, dieselben Wörter in jedem Abschnitt.

Auditiere deine eigene Wellness-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

Meditations-App-Home-Screen, vorher und nachher

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

In Figma öffnen

FAQ

Was sollte ein Home-Screen einer Meditations-App zeigen?

Eine Begrüßung, eine Stimmungsfrage, die heutige Session als einzelne Fotokarte mit einem Play-Button, eine kurze Reihe mit Vorschlägen und den Fortschritt des Nutzers. Alles andere kann einen Tap entfernt warten.

Wie sollte ein Stimmungs-Check-in in einer App aussehen?

Fünf gleichwertige, ruhige Optionen mit einer Frage darüber. Färbe nur die Option, die der Nutzer wählt, und nenne ihr Wort einmal. Wenn jedes Gesicht seine eigene Farbe hat, zeigt nichts dem Nutzer, was ausgewählt ist.

Ist es in Ordnung, Text auf ein Foto in einer App zu setzen?

Nur wenn der Text auf einem kontrollierten Bereich sitzt, etwa einem dunklen Overlay, und den Mindestkontrast erfüllt. Bei einem hellen, wechselnden Foto setze die Wörter stattdessen auf eine einfarbige Fläche unter dem Bild.

Wie zeigt man Serien und Fortschritt in einer Wellness-App?

Als wenige Zahlen mit Labels, etwa Tage-Serie, Gesamtzeit und Sessions. Eine Serie verdient einen kleinen Akzent, etwa eine Flamme. Ein ermutigender Satz ersetzt die Zahl nicht.

Wie viele Tabs sollte eine Meditations-App haben?

Vier oder fünf. Wenn zwei Tabs zur selben Bibliothek führen, fasse sie zusammen. Der reparierte Screen ging von fünf Tabs auf vier.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Der Nutzer, die Sessions und die Zahlen sind für die Übung erfunden.
• Fotos über Pexels von Татьяна Танатова, olia danilevich, Felipe Barboza und Jean-Daniel Francoeur.
• Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten 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.