Task-App-Design: Redesign eines Heute-Screens, vorher und nachher

Eine Task-App muss sich wie Hilfe anfühlen. Der erste Entwurf unten weiß genau, was heute fällig ist, und sagt es dann mit einem roten Datum in jeder Zeile, farbigen Chips für jede Priorität und einem Button, der auf der letzten Aufgabe parkt. Das liest sich wie ein Alarm. Der Fix behält jede Aufgabe und jeden Fakt und senkt den Alarm auf das Niveau einer ruhigen Liste.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links trägt jede Aufgabe eine Beschreibung, bis zu drei Tags, ein rotes Datum und einen Stapel Gesichter. Rechts ist jede Aufgabe anderthalb Zeilen lang, und die Liste ist das Erste, worauf das Auge fällt.

Zähl mal, was das Auge verarbeiten muss. Der Entwurf hat eine getönte Fortschrittsbox, fünf Filter-Chips in fünf Farben und bei jeder Aufgabe eine Beschreibung, farbige Tags, ein rotes Fälligkeitsdatum und oft eine Gruppe von Avataren. Der reparierte Screen hat einen Ring, einen dreiteiligen Schalter und eine Liste.

Fix 1: Fortschritt als Ring und ein Satz

Vorher

Nachher

Ein Bruch, eine Prozentzahl mit zwei Nachkommastellen, ein Balken und ein Anfeuerungsruf, gegen einen Ring und einen Satz.

Der Entwurf sagt dasselbe dreimal: „1/5“, „20,00 %“ und einen Balken, der zu einem Fünftel gefüllt ist. Die zwei Nachkommastellen verraten alles: „20,00 %“ ist eine Zahl, die ein Programm ausgedruckt hat, keine, die ein Mensch braucht. Und die Zeile darunter ist klein, grau und endet mit zwei Ausrufezeichen.

Der Fix wählt ein Bild, einen Ring bei 20 %, und einen Satz mit den zwei wichtigen Fakten: eine von fünf erledigt, vier offen. Der Satz endet mit dem Nützlichen, „als Nächstes um 16:00 Uhr“, und sagt dem Nutzer, was als Nächstes zu tun ist, statt ihn anzufeuern.

Der Ring ist im Markenrot gezeichnet, demselben Rot wie die Hinzufügen-Zeile und der aktive Tab.

Fix 2: nach Zeitpunkt filtern, nicht nach Farbe

Vorher

Nachher

Fünf Chips für Priorität und Status in fünf Farben, gegen drei Wörter in einem Schalter.

Die Chips des Entwurfs mischen zwei Fragen. Hoch, Mittel und Niedrig fragen, wie wichtig eine Aufgabe ist, Erledigt fragt nach ihrem Zustand und Alle (5) fragt nach allem. Die fünf Chips nutzen fünf Farben mit zwei Eckenradien, nicht einmal die Formen sind sich einig.

Um sie zu benutzen, muss ein Nutzer erst lernen, dass Rot dringend heißt, Orange mittel und Grün niedrig, und

Der Fix stellt eine Frage, die, die Leute an eine To-do-Liste stellen: wann. Alle, Heute und Anstehend sind drei Wörter in einem einzigen Schalter, der sich als ein Bedienelement mit einem gewählten Zustand liest und zu den Tabs darunter passt: dem Tab Heute, dem Tab Anstehend. Die Priorität ist nicht verschwunden. Sie ist in die Zeilen gewandert, als kleiner Punkt (Fix 3).

Fix 3: eine Aufgabe ist anderthalb Zeilen lang

Vorher

Nachher

Titel, Beschreibung, Tags, rote Fälligkeitszeile und Avatare bei jeder Aufgabe, gegen einen Titel, eine Uhrzeit und eine Liste.

Jede Aufgabe im Entwurf kann fünf Arten von Information tragen: eine Beschreibung, bis zu drei farbige Tags, ein rotes „Fällig: 24.10.2026 17:00“, eine Gruppe Avatare und eine Checkbox. „Dringend!!“ erscheint als Tag bei einer Aufgabe, die in der Fälligkeitszeile schon rot ist. Jede Aufgabe ist heute fällig, und jedes Fälligkeitsdatum ist rot, also bedeutet Rot nicht mehr „überfällig“, sondern „es gibt eine Aufgabe“.

Der Fix gibt jeder Aufgabe einen Titel und eine graue Zeile: die Uhrzeit und die Liste, zu der sie gehört. „17:00, Arbeit“. Das Datum ist weg, weil die Kopfzeile schon sagt, welcher Tag heute ist.

Die Tags sind im Listennamen aufgegangen. Die Priorität wurde ein kleiner Punkt rechts, rot bei der ersten Aufgabe und orange bei der zweiten, und kein Punkt, wo es nichts zu markieren gibt. Die erledigte Aufgabe bleibt in der Liste, durchgestrichen und mit „Erledigt“ beschriftet, mit einem gefüllten Haken im Markenrot.

Die Aufgaben sitzen in einer weißen Karte mit dünner Trennlinie dazwischen, damit sich die Liste als ein Ganzes liest.

Fix 4: „Aufgabe hinzufügen“ am Ende der Liste

Vorher

Nachher

Ein schwebender Button, der die letzte Aufgabe verdeckt, gegen eine Zeile am Ende der Liste.

Ein schwebender Button folgt dem Nutzer und verdeckt, was unter ihm liegt. Im Entwurf sitzt er auf der letzten Aufgabe, schneidet die Avatare rechts in der Zeile ab und ist das schwerste Objekt auf dem Screen: 56 px, gesättigtes Rot, mit Schatten.

Der Fix macht, was eine Liste macht: Sie endet mit dem, was man ihr hinzufügen kann. „Aufgabe hinzufügen“ sitzt in einer Zeile genau dort, wo die letzte Aufgabe endet, mit einem kleinen Plus und demselben Rot wie die anderen Aktionen. Es gibt keinen Schatten, und nichts wird verdeckt. Wer eine Liste scrollt, schaut ohnehin auf ihr Ende, also findet man die Hinzufügen-Aktion dort, wo das Auge stehen bleibt.

Die kleineren Fixes

• Vier Tabs statt fünf. Heute, Anstehend, Stöbern und Profil ersetzen Heute, Anstehend, Projekte, Suche und Profil.
• Ein Rand. Der Entwurf nutzte 14 px links und 12 px rechts. Der Fix nutzt 20 px auf beiden Seiten.
• Eine echte Kopfzeile. „Meine Aufgaben“ mit vollem Datum wurde zu einem kleinen „Samstag, 24. Okt.“ über einem großen „Heute“, und der Avatar wurde zu einer Glocke.
• Ein Rot. Das Markenrot #E5484D deckt Ring, Hinzufügen-Icon und aktiven Tab ab. Roter Text nutzt ein dunkleres #D92D20, damit er lesbar bleibt.
• Eine echte Typo-Skala. Der Text ging von 8 bis 20 px auf die iOS-Größen von 11 bis 28 pt.

Prüfe deine eigene Task-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

Heute-Screen einer Task-App, vorher und nachher

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

In Figma öffnen

FAQ

Was sollte der Heute-Screen einer Task-App zeigen?

Den heutigen Fortschritt, eine Möglichkeit, zwischen Alle, Heute und Anstehend zu wechseln, die Liste der Aufgaben mit ihren Uhrzeiten und eine Aktion „Aufgabe hinzufügen“. Beschreibungen und lange Daten können bis zur Aufgabendetailseite warten.

Wie sollte eine Task-App den Fortschritt zeigen?

Als Ring oder Balken plus ein Satz, etwa „1 von 5 erledigt“. Drucke nicht dieselbe Zahl als Bruch, als Prozentwert und als Balken. Wenn du einen Prozentwert zeigst, runde ihn.

Wie sollte eine Task-App die Priorität zeigen?

Mit einem kleinen Punkt oder einer Flagge in den Zeilen, die es brauchen, nicht mit farbigen Tags bei jeder Aufgabe. Priorität kann auch ein Filter oder eine Sortierung sein, muss aber nicht die wichtigste sein.

Sollte eine To-do-App einen schwebenden Hinzufügen-Button nutzen?

Ein schwebender Button ist üblich, kann aber auf einem Listenscreen den letzten Eintrag verdecken. Eine Zeile „Aufgabe hinzufügen“ am Ende der Liste verdeckt nichts und sitzt dort, wo das Auge stehen bleibt.

Wie sollten die Filter einer To-do-App aussehen?

Wie die Fragen, die Leute stellen: alle, heute und anstehend. Eine Frage pro Bedienelement, und mische keinen Prioritätsfilter mit einem Statusfilter in derselben Reihe.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die Aufgaben, die Personen und der Kunde sind für die Übung erfunden. 1 von 5 erledigten Aufgaben sind 20 %.
• Fotos über Pexels von pessoas uem, Iphanyi Ezemenari und Ajan Yogi.
• Apple Human Interface Guidelines: Typography, für die iOS-Textgrößen im reparierten Screen.
• Apple Human Interface Guidelines: Color, dazu, sich nicht allein auf Farbe zu verlassen, um Bedeutung zu tragen.
• Zuerst als Karussell veröffentlicht auf App Brainy.