Gestalten für die Menüleiste
Was ich gelernt habe, als ich zwei Apps für einen Streifen gebaut habe, der etwa 22 Punkte hoch ist. Ein Icon trägt den ganzen Zustand, Overlays lassen deine Klicks durch, und die schwierigste Entscheidung ist, wann man überhaupt etwas fragt.
In der Menüleiste hast du ungefähr 22 Punkte Höhe und vielleicht 20 Punkte Breite, bevor du jemand anderem den Platz wegnimmst. Das ist dein ganzes Schaufenster. Ich habe inzwischen zwei Apps gebaut, die da oben wohnen: meetre für Meeting-Transkripte und TaskAlarm für Erinnerungen. Beide haben mir dasselbe beigebracht, nur von verschiedenen Seiten: Je kleiner die Fläche, desto mehr muss jeder Pixel für seine Miete arbeiten.
Eine Website bekommt eine Hero-Sektion. Eine Menüleisten-App bekommt ein einziges Zeichen. Und das muss eine Frage beantworten, die du dir hundertmal am Tag stellst, ohne es zu merken: Ist alles okay?
Ein Icon für alles
Bei meetre ist das Status-Icon der einzige Ort, an dem Farbe auf einen Blick etwas bedeuten darf. Im Leerlauf ist es ein einfarbiges Funkeln, das sich wie jedes andere Template-Icon an die Menüleiste anpasst. Während der Aufnahme wird es zum roten Aufnahme-Symbol mit laufendem Timer daneben. Beim Verarbeiten nimmt es die Farbe des aktuellen Schritts an (blau fürs Transkribieren, orange, wenn es rausfindet, wer gesprochen hat) und zeigt sowas wie "Transcribing 42%". Ist es fertig, steht da fünf Sekunden lang ein grüner Haken mit "Done", dann verschwindet er leise. Ist etwas schiefgegangen, bleibt ein gelbes Warndreieck stehen, bis du das Popover aufmachst und nachschaust.
Fünf Zustände, und jeden kannst du quer durchs Zimmer erkennen. Die Regel dahinter ist strenger, als sie aussieht. Das farbige Symbol ist ein festes Bild, der Text daneben bleibt aber Template, damit er weiter zu deiner hellen oder dunklen Menüleiste passt. Und das Aufnahme-Rot taucht sonst nirgends in der ganzen App auf. Kein Löschen-Button, keine Fehlermeldung. Wenn du dieses Rot siehst, wirst du aufgenommen. Ich will, dass diese Verbindung so langweilig und verlässlich ist, dass nie jemand darüber nachdenken muss.
TaskAlarm macht denselben Job mit einem Gesicht. Der Smiley in der Menüleiste ist grün, wenn alles erledigt ist, gelb, wenn was ansteht, und rot, wenn du was verpasst hast. Rot ist auch das einzige Mal, dass er aufhört zu lächeln. Sonst ist er immer auf deiner Seite.
In einer Menüleisten-App ist das Icon keine Deko. Es ist die komplette Oberfläche für die neunundneunzig Male, in denen du nicht draufklickst.
Feste Breite, ehrliche Höhe
Wenn du doch klickst, ist das Popover von meetre exakt 360 Punkte breit. Immer. Die Höhe passt sich dem Inhalt an, bis maximal 560. Die feste Breite ist Absicht. Ein Popover, das zwischen zwei Zuständen breiter oder schmaler wird, zwingt dein Auge, alles neu zu vermessen. Genau diese Mini-Irritation soll die App ja vermeiden.
Die Regel dazu heißt bei mir "eine eindeutige Aktion pro Fläche". Im Popover ist das der Aufnahme-Button, ein Kreis mit 56 Punkten, klar das größte Ding im ganzen Panel. Sprache, Sprecheranzahl und Systemaudio sitzen darunter als kleine Menüs, und zwar nur im Leerlauf. Sobald die Aufnahme läuft, sind sie weg. Mitten im Meeting gibt es da nichts Sinnvolles umzustellen, und drei Dropdowns neben einem laufenden Timer laden nur zum Rumspielen ein.
Overlays, durch die deine Maus einfach durchgeht
Am meisten Runden hat das Live-Transkript gebraucht. Das ist ein schwebendes Panel oben rechts, 440 Punkte breit, 14 Punkte vom Bildschirmrand. Das Problem mit jedem schwebenden Panel während eines Calls merkst du in der ersten Sekunde: Es liegt genau über dem Fenster, in das du gerade klicken willst.
Also lässt das Panel Klicks durch. Sie fallen einfach auf das, was darunter liegt, außer über den Buttons in der Kopfzeile. Damit das klappt, nimmt das Panel Mausereignisse nur an, solange der Zeiger wirklich über dem Pfeil zum Einklappen schwebt. Überall sonst ist es Luft.
Und es startet eingeklappt. Standardmäßig siehst du nur diesen schmalen Streifen, 46 Punkte hoch. Ein Klick, und es geht auf 300 auf. Ich war da lange unentschlossen, weil die ausgeklappte Version eindeutig der schönere Screenshot ist. Die eingeklappte ist aber das bessere Produkt. Die meisten wollen ihrem eigenen Meeting nicht beim Scrollen zusehen. Sie wollen wissen, dass es mitgeschrieben wird, und dafür reicht ein Streifen, der genau das sagt. Der Zustand wird gespeichert. Wer es lieber offen hat, hat es also auch beim nächsten Mal offen.
Die Overlays sind immer dunkel, egal welches Erscheinungsbild dein System hat, damit sie über jedem Hintergrund lesbar bleiben. Sie blenden in 0,35 Sekunden ein und in 0,6 aus. Sie gleiten nie rein. Wenn mitten im Kundengespräch etwas vom Bildschirmrand reinfährt, fühlt sich das an wie eine Benachrichtigung, die Aufmerksamkeit will. Ein Fade fühlt sich an, als wäre es schon immer da gewesen.
Das Schwierigste: wissen, wann man fragt
meetre merkt, wenn ein Teams-Call startet (ein Teams-Prozess greift aufs Mikro zu), und fragt, ob du aufnehmen willst. Das ist wirklich praktisch und gleichzeitig sehr leicht zu versauen. Eine Frage im falschen Moment ist einfach nur ein Pop-up.
Deshalb ist die Abfrage klein, hängt am Status-Icon und hat zwei Buttons mit klaren Verben: "Not now" und "Record". Ignorierst du sie, passiert nichts.
Das Ende vom Call war kniffliger. Wenn der Call vorbei ist, fragt meetre, ob es stoppen und transkribieren soll. Antwortest du nicht, nimmt es weiter auf. Klingt erstmal verkehrt, bis du überlegst, warum jemand nicht antwortet: Er redet noch, er ist direkt im nächsten Call, oder er läuft gerade in die Küche. Das Ende eines Meetings zu verlieren, weil man nicht rechtzeitig geklickt hat, wäre der schlimmste Fehler für ein Tool, dessen einziger Job das Erinnern ist. Eine Minute Stille am Ende einer Aufnahme kostet nichts. Und wenn du die Aufnahme anders beendest oder der Call weitergeht, schließt sich die Frage von selbst.
TaskAlarm hat dieselbe Spannung mit Alarmen. Eine verpasste Aufgabe bekommt fünf Minuten Schonfrist, dann wird sie rot, spielt ein weiches Ding-Dong und wackelt einmal. Danach meldet sie sich alle paar Minuten, bis du dich drum kümmerst. Hartnäckig, aber keine Sirene. Eine Erinnerungs-App, die in Panik gerät, bringt dir nur bei, sie zu ignorieren.
Ruhe muss man verteidigen
Das erste Prinzip im Design-Regelbuch von meetre heißt "Quiet until needed". Das Einzige, was endlos pulsieren darf, ist der rote Aufnahmepunkt, weil das der eine Zustand ist, den du nie vergessen darfst. Alles andere animiert einmal und ist dann ruhig.
Das aufzuschreiben war leicht. Es durchzuhalten war schwerer, vor allem gegen mich selbst. Jedes neue Feature kommt an und will ein Badge, ein Banner, einen kleinen Hüpfer, damit man merkt, dass es da ist. Die meisten kriegen keins. Mein Test ist simpel: Würde ich wollen, dass das passiert, während ich einem Kunden meinen Bildschirm teile? Wenn nicht, bewegt es sich nicht.
Ich gestalte den ganzen Tag Websites, die angeschaut werden sollen. Und das Befriedigendste, was ich dieses Jahr gebaut habe, ist ein Icon, das du am besten vergisst.