Ein Maskottchen, das dich nie böse anschaut
Ermutigung gestalten statt schlechtem Gewissen. Wie der Smiley von TaskAlarm, seine Farben, seine Texte, ein bisschen absichtliche Reibung und ein paar Federn eine To-do-App ergeben, die auf deiner Seite ist.
Der Smiley in TaskAlarm hat fünf Stimmungen, und vier davon sind fröhlich. In diesem Verhältnis steckt das komplette Briefing. Eine To-do-App schaust du an, wenn du hinterherhängst, müde bist oder etwas vor dir herschiebst. Die wichtigste Designfrage ist also, wie sie dich in genau diesen Momenten behandelt.
Die meisten Produktivitäts-Tools antworten darauf mit schlechtem Gewissen. Rote Badges, Zähler für Überfälliges, Streaks, die du gerade gerissen hast. Das hält ungefähr eine Woche. Danach öffnest du die App einfach nicht mehr, und das wollte nun wirklich keiner.
Fünf Gesichter, eine Regel
Das Gesicht wird im Code aus vier Zahlen gezeichnet: wie stark der Mund gebogen ist, wie weit er offen steht, wie sehr die Brauen sich sorgen und wie hoch die Augen sind. Jede Stimmung ist nur ein anderer Satz dieser vier Werte, und SwiftUI animiert dazwischen. Das Gesicht wechselt also nicht, es verwandelt sich.
Jubeln ist ein breites, offenes Grinsen mit zusammengekniffenen Augen. Aufgeregt heißt große Augen und offenes Lächeln, wenn gerade etwas fällig ist. Motiviert ist ein leicht geöffnetes Lächeln für „heute steht was an". Entspannt ist ein geschlossenes Lächeln für „alles erledigt". Und besorgt ist das einzige Gesicht mit hängenden Mundwinkeln und hochgezogenen Brauen.
Besorgt taucht in genau einer Situation auf: Du hast wirklich etwas verpasst. Nicht, wenn du zehn Aufgaben hast. Nicht, wenn in fünf Minuten etwas fällig ist. Erst, wenn die Deadline plus fünf Minuten Kulanz vorbei ist. Den Rest der Zeit liegt der Smiley irgendwo zwischen entspannt und völlig begeistert von dir.
Zwei weitere Regeln aus dem Brand Guide: Der Smiley hat immer Rouge und einen Glanzpunkt im Auge, und das Gesicht muss bei 16 Pixeln lesbar bleiben, so groß ist ein Icon in der Menüleiste. Feine Mimik funktioniert da nicht, also liegen die Stimmungen weiter auseinander, als es bei 1024 Pixeln natürlich wirkt. Dass bei „besorgt" das Rouge verschwindet, ist für vier rosa Pixel ein erstaunlich lautes Signal.
Farbe bedeutet etwas, oder gar nichts
Die Markenfarbe von TaskAlarm ist Violett, #7C5CFF. Sie steckt in Buttons, Fokusrahmen, Auswahl. Dazu kommen drei Statusfarben: Grün für alles erledigt, Gelb für fällig, Rot für verpasst.
Bei dieser Regel bin ich am strengsten: Statusfarben sind nur für Status da. Kein grünes Deko-Icon, kein gelber Akzent, weil er neben dem Violett hübsch aussah. Sobald Rot irgendwo zur Dekoration auftaucht, heißt Rot nicht mehr „verpasst", und wenn der Smiley rot wird, hat das kein Gewicht mehr. Wenn Farbe Information tragen soll, muss sie den Rest der Zeit arbeitslos bleiben.
Schreib so, wie ein Freund dir schreibt
Der Text-Guide ist eine Tabelle mit zwei Spalten: was wir sagen, was wir nicht sagen. Ein paar Zeilen daraus, in der App auf Englisch:
Aus „You have 3 pending items" wird „3 things for today, you've got this". Aus „ALERT: Task due" wird „It's time!". Aus „Confirm completion" wird „Is it really done?". Aus „You failed to complete…" wird „Missed, want to do it now or later?". Und aus „No remaining tasks" wird „All done. Go enjoy your day".
Keine dieser Varianten ist länger oder unklarer. Sie gehen nur davon aus, dass du ein Mensch bist und kein Ticket in einer Warteschlange. Mein Liebling ist die für Verpasstes: Sie spricht die unangenehme Tatsache aus und bietet sofort einen Ausweg an. So macht das ein guter Freund.
Mit schlechtem Gewissen kriegst du Leute einmal in die App. Mit Ermutigung kommen sie morgen wieder.
Reibung kann freundlich sein
Normalerweise geht es bei UX darum, Schritte wegzunehmen. TaskAlarm fügt absichtlich einen hinzu.
Wenn du eine Aufgabe abhakst, kann die App fragen: „Is it really done?" Das habe ich eingebaut, nachdem ich mich dabei erwischt habe, Dinge nur abzuhaken, damit die Erinnerung weg ist. Der zusätzliche Klick kostet fast nichts, der Smiley zeigt währenddessen sein Jubelgesicht, und plötzlich fühlt sich Ehrlichkeit nach einem Teil der Belohnung an statt nach einem Hindernis davor. Popups fragen immer, in der Liste kannst du es abschalten.
Diesen Unterschied finde ich wichtig. Reibung, die dich vor dir selbst schützt, ist ein Feature. Reibung, die die Firma vor dir schützt (Kündigungslabyrinthe, „Willst du wirklich verzichten?"), ist das Gegenteil.
Bewegung: klein, federnd, und sie hört auf
Die Animationen haben denselben Charakter. Buttons nutzen eine schnelle Feder mit Response 0,25 und Dämpfung 0,6 und werden beim Drücken auf 94 Prozent zusammengedrückt. Erinnerungskarten gleiten mit einer weichen Feder von oben rechts herein. Eine verpasste Aufgabe wackelt ein paarmal kurz, das Wackeln läuft aus, dann ist Ruhe.
Und nichts läuft endlos. Kein pulsierendes Badge, kein Dauerhüpfen. Eine Animation, die nie aufhört, ist die visuelle Version einer Stimme, die dich ständig anmeckert, und nach einer Stunde blendest du sie aus.
Die Marke ist vor allem Verzicht
Wenn ich mir die fertige App anschaue, besteht die meiste Markenarbeit aus Dingen, die ich nicht gemacht habe. Keine Verläufe, Badges oder Sticker in den Marketing-Bildern, nur echte Screenshots auf Schwarz. Keine Statusfarben als Deko. Keine Ausrufezeichen außer bei „It's time!", das hat sich eins verdient. Höchstens ein Emoji pro Nachricht.
Übrig bleibt ein kleines Gesicht, das sich freut, dich zu sehen, ein Violett, das „das hier ist TaskAlarm" heißt, und drei Farben, die jeweils genau eine Sache bedeuten. Es ist die freundlichste App, die ich je gebaut habe, und dafür musste ich zu fast allem Nein sagen, was Apps sonst freundlich wirken lässt.