Fitness-App-Design: Ein Home-Screen-Redesign, Vorher und Nachher

Der Home Screen einer Fitness-App hat eine einzige Aufgabe: zeigen, wie der Tag läuft, und einen klaren Weg zum Start anbieten. Der erste Entwurf unten hat alle richtigen Zahlen, reicht sie aber in vier engen Kacheln weiter, mit weißem Text auf einem unruhigen Foto und einem Diagramm, aus dem man nichts lesen kann. Die Korrektur behält jedes Feature und ändert, wie viel Arbeit jeder Teil dem Auge abverlangt.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links begegnet das Auge einem Header aus vier Elementen, dann vier Kacheln in vier Farben, dann einem Foto, zwei Buttons und einem Herz, einem Diagramm und einer zweiten Workout-Reihe, die von der Tab-Leiste abgeschnitten wird. Rechts sind es drei Karten und ein Header: wie der Tag läuft, was jetzt zu tun ist, wie die Woche aussieht.

Nichts wurde aus der Feature-Liste gestrichen, was jemand vermissen würde. Schritte, Kalorien, Wasser, Herzfrequenz, das Workout des Tages und die Wochenaktivität sind alle noch da. Sie sind in weniger, größere Formen umgezogen.

Fix 1: eine Karte mit Ringen statt vier Kacheln

Vorher

Nachher

Vier Pastellkacheln, jede mit Icon, Zahl, Beschriftung und dünnem Balken, gegen eine Karte mit drei Ringen, dem Ziel unter jeder Beschriftung und der Herzfrequenz als kleinem Chip.

Jede Kachel im Entwurf nennt eine Zahl und zeichnet einen dünnen Balken, aber nicht, woran der Balken misst. 8.432 Schritte können gut oder schlecht sein. Der Leser muss das Ziel daraus erraten, wie weit der Balken reicht, und die Balken sind dünn.

Die Ringe setzen das Ziel in Worte („von 10.000“, „von 600 kcal“, „von 2 l“) und in Form: Ein Ring ist voll oder er ist es nicht. Ein Blick beantwortet „Bin ich heute auf Kurs?“. Die Herzfrequenz ist ein Messwert, kein Ziel, also bekommt sie keinen Ring. Sie rutscht als Chip in die Ecke, was sagt, dass sie eine andere Art von Zahl ist.

Die Regel zum Wiederverwenden: Wenn eine Zahl ein Ziel hat, zeig das Ziel. Wenn nicht, verkleide sie nicht als Fortschritt.

Fix 2: ein Play-Button, ein Schatten hinter den Worten

Vorher

Nachher

Ein Abschnittstitel, ein NEU-Badge, 9-px-Text in Weiß auf dem Foto und drei Bedienelemente darunter, gegen ein beschriftetes Foto, größeren Text auf einem Schatten und einen Play-Button.

Weißer Text auf einem Foto ist nur dort lesbar, wo das Foto zufällig dunkel ist. Im Entwurf läuft die Detailzeile über den hellsten Teil des Bildes, einen Studioboden und ein graues Shirt, und bei 9 px verschwindet sie. Die Korrektur legt einen schwarzen Schatten über das Foto, der am unteren Rand 72 % erreicht, genau dort, wo die Worte stehen, und setzt sie größer.

Der Entwurf stellt außerdem eine Frage, bevor die Person handeln kann: Jetzt starten, oder Details, oder mit dem Herz speichern? Mit dem heutigen Workout gibt es eine Sache zu tun, nämlich es zu starten. Ein einzelner runder Play-Button sagt das ohne ein Wort. Die Details sind einen Tipp entfernt, wenn jemand sie will, konkurrieren aber nicht mehr mit der Hauptaktion.

Das „NEU“-Badge und der Abschnittstitel „Heutiges Workout“ sagten fast dasselbe doppelt. Die Korrektur behält ein Label, einen Chip auf dem Foto.

Fix 3: das Diagramm mit dem Gesamtwert anführen

Vorher

Nachher

Sieben gleiche orange Balken mit Dropdown und Legende, gegen den Wochenwert in großer Schrift, einen Trend-Chip und einen Balken in vollem Orange.

Ein Diagramm beantwortet eine Frage, und das Diagramm im Entwurf sagt nicht, welche. Sieben Balken im selben kräftigen Orange, keine Werte und eine Legende für die einzige Datenreihe, sodass der Leser selbst entscheiden muss, was er mitnimmt. Die Korrektur beantwortet die wahrscheinliche Frage zuerst in Worten: 4 h 12 min diese Woche, 18 % mehr als letzte Woche.

Die Balken sind jetzt Kontext, nicht die Botschaft. Fünf sind ein blasser Ton der Markenfarbe, und heute, Samstag, ist in vollem Orange, sodass das Auge dort landet, wo die Person in der Woche steht. Der Sonntag bleibt ein kurzer Stummel, damit die Woche von links nach rechts bis heute gelesen wird. Das Dropdown „Diese Woche“ und die Legende „Aktive Minuten“ sind entfallen, weil der Titel beides schon sagt.

Die Regel zum Wiederverwenden: Setz die Zahl, für deren Erklärung das Diagramm eine Minute bräuchte, nach oben, und lass die Balken den Rest tun.

Fix 4: ein Button im Header

Vorher

Nachher

Ein Avatar, eine Begrüßung mit Ausrufezeichen, eine zweite Zeile mit noch zwei weiteren und drei Icons, gegen das Datum, eine Begrüßung und einen Benachrichtigungs-Button.

Der Header im Entwurf trägt sieben Dinge, bevor irgendein Inhalt kommt: einen Avatar, zwei Begrüßungszeilen und drei Icons. Der Avatar führt zum Konto der Person, und die App hat bereits einen Profil-Tab, also streicht die Korrektur ihn aus dem Header. Die Icons für Suche und Einstellungen gehen mit, was Platz für die Begrüßung schafft.

Die Korrektur behält das eine, das die obere Ecke verdient: Benachrichtigungen, mit einem Punkt, wenn es etwas Neues gibt. Die Begrüßung wird zu Datum und Name in großer Schrift, was dem Leser sagt, zu welchem Tag die heutigen Zahlen gehören, ohne Ausrufezeichen.

Die kleineren Korrekturen

• Vier Tabs, nicht fünf. Home, Workouts, Fortschritt und Profil. Statistik und Community wichen einem Tab Fortschritt.
• Ein Rand. Der Entwurf nutzte 14 px links und 12 px rechts, sodass Karten leicht aus der Mitte wirkten. Die Korrektur nutzt 20 px auf beiden Seiten und 16 px zwischen den Karten.
• Eine Farbe für Aktion. Der Entwurf nutzte Kacheln in Pfirsich, Gelb, Rosa und Blau plus Orange. Die Korrektur nutzt Orange für Aktion und behält Bernstein und Blau nur bei zwei der Ringe, wo sie die Ringe unterscheidbar machen.
• Eine echte Typo-Skala. Der Text ging von 8 bis 16 px auf die iOS-Textgrößen von 11 bis 28 pt, sodass nichts auf dem Screen kleiner ist als die kleinste Bildunterschrift des Systems.
• Keine Empfohlen-Reihe. Die zweite Fotoreihe des Entwurfs wurde von der Tab-Leiste abgeschnitten. Die Korrektur beendet den Home Screen nach dem Diagramm.
• Ruhigere Begrüßung. „Let's crush today's goals!!“ wurde zum Datum über dem Namen.

Prüfe deine eigene Fitness-App

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens als Komponenten, jede Korrektur als Vorher-Nachher-Paar, die Farbvariablen und die iOS-Textstile.

Kostenlose Figma-Datei

Fitness-Home-Screen, vorher und nachher

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

In Figma öffnen

FAQ

Was sollte ein Fitness-App-Home-Screen zuerst zeigen?

Wie der Tag läuft: Schritte, Kalorien und Wasser gegen ihre Ziele, in einer Karte. Setz das Workout des Tages direkt darunter mit einem klaren Weg zum Start.

Sind Fortschrittsringe in einer Fitness-App besser als Fortschrittsbalken?

Bei einigen Tageszielen ja. Ein Ring ist auf einen Blick lesbar, zeigt voll oder nicht voll ohne Skala und nimmt in der Mitte eine Zahl auf. Lass die Herzfrequenz aus den Ringen heraus, denn sie ist ein Messwert und hat kein Ziel, das sich füllen ließe.

Wie macht man weißen Text auf einem Workout-Foto lesbar?

Leg einen dunklen Schatten hinter die Worte, am stärksten dort, wo der Text sitzt, und setz den Text in einer lesbaren Größe. Verlass dich nicht darauf, dass das Foto an der richtigen Stelle dunkel ist.

Wie sollte ein Fitness-Aktivitätsdiagramm gestaltet sein?

Führ mit dem Gesamtwert und dem Trend in Worten an, zeig dann die Balken in einem weichen Ton, mit dem aktuellen Tag in der Markenfarbe. Streich Legenden und Dropdowns, die der Titel schon abdeckt.

Wie viele Tabs sollte eine Fitness-App haben?

Vier oder fünf. Fass Tabs mit verwandten Zahlen, wie Statistik und Community, an einem Ort wie Fortschritt zusammen.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen.
• Fotos über Pexels von pessoas uem, Julia Larson, Tima Miroshnichenko und Vitaly Gariev.
• Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten Screen.
• Zuerst als Karussell auf App Brainy veröffentlicht.