Entwurf · Issue fc30f7f
Der Kontoblock im Sidebar-Fuß
Entwurf zu Issue fc30f7f, Meilenstein 2 von docs/plans/fc30f7f-account-block.md. Jede Variante unten ist eine gebaute Komponente aus denselben Atomen wie der Fuß selbst — nichts davon ist gezeichnet. Was der Baukasten nicht bauen kann, steht deshalb auch nicht zur Wahl.
Der Fuß hält heute zwei Zeilen: darüber Guthaben und Zap, darunter das Konto mit dem Abmelden-Knopf. Beide sind für sich richtig gebaut, aber nichts sagt, dass sie zusammengehören — das Auge liest zwei Streifen, nicht ein Konto. Die Frage dieses Entwurfs ist deshalb nicht, welche Funktionen der Block trägt, sondern welche Form sie zusammenhält.
01Der Stand heute
Zum Vergleich, und weil eine Variante nur gegen etwas besser sein kann. Die Trennung fällt am ehesten auf, wenn man die Zeilen einzeln abdeckt: jede für sich wirkt vollständig.
heute
Guthaben und Zap oben, Konto und Abmelden unten. Zwei Höhen, zwei Ausrichtungen, keine gemeinsame Kante.
02Drei Wege, den Block zu binden
Die drei unterscheiden sich darin, was die Zusammengehörigkeit trägt: eine Fläche, die Ausrichtung, oder der Avatar. Sie sind absichtlich nicht gleich stark — der mittlere Weg ist der leiseste, der erste der lauteste.
A · Fläche
Eine gekappte Karte mit eigener Kante, wie der abgemeldete Fuß sie schon trägt. Klarste Trennung vom Navigationsbereich — aber ein Rahmen mehr in einer Spalte, die schon Rahmen hat.
B · Ausrichtung
Kein Rahmen. Die Guthabenzeile rückt auf die Kante des Namens ein und liest sich dadurch als dessen Fortsetzung. Am wenigsten Material — und am ehesten übersehbar.
C · Anker
Ein größerer Avatar über beide Zeilen. Er bindet, ohne eine Linie zu ziehen, und sagt am deutlichsten WER hier angemeldet ist. Kostet Höhe und macht den Fuß schwerer.
03Die Anzeigewährung — ein echter Widerspruch
Das Ticket will jede Einstellung im Menü. Im Code steht die ausdrückliche Gegenentscheidung: die Zahl ist der Weg zu ihrer eigenen Einstellung — keine Einstellungsseite für eine einzige Vorliebe. Beides zugleich geht nicht, also gehört das hierher und nicht in einen Diff.
an der Zahl
Klick auf das Guthaben öffnet die Währungswahl. Kürzester Weg, aber die Klickbarkeit muss man erst entdecken — hier angedeutet durch die gepunktete Linie.
im Menü
Alle Einstellungen an einem Ort, auffindbar ohne Entdeckung. Dafür drei Klicks statt einem, und die Zahl verliert ihre Funktion.
- Die Währung wird selten geändert — meist genau einmal. Das spricht für das Menü.
- Sie wird aber an der Zahl geändert, weil man dort merkt, dass sie falsch steht. Das spricht für den Klick.
- Beides zugleich wurde erwogen und verworfen: zwei Wege zu demselben Popover sind redundant, und der Menüeintrag zeigt auf etwas, das genau dort schon steht, wo man es braucht. Der Code hatte damit von Anfang an recht, das Ticket nicht.
04Abmelden — innen oder außen
Das Ticket schiebt das Abmelden ausgeklappt ins Menü, lässt es in der Icon-Leiste aber als eigenen Knopf. Damit steht dieselbe Funktion je nach Breite an einem anderen Ort. Das ist der Punkt, an dem ich zögere.
außen
Immer sichtbar, an jeder Breite am selben Ort. Kostet einen Knopf neben dem Namen — das ist die dritte Sache in einer Zeile.
im Menü
Aufgeräumter, und Abmelden ist nichts, was man versehentlich treffen sollte. Ausgeklappt eine Ebene tiefer, eingeklappt weiter außen — dieselbe Funktion an zwei Orten.
05Die Entscheidung
- Form: A (Fläche), B (Ausrichtung) oder C (Anker).
- Währung: an der Zahl, im Menü, oder beides.
- Abmelden: außen bleiben, oder ausgeklappt ins Menü.
Gebaut wurde C · an der Zahl · außen.
- C, weil der Avatar ohnehin das Element ist, das in der eingeklappten Leiste allein stehen bleibt — er ist dort schon der Anker, und ausgeklappt dieselbe Rolle zu geben, macht beide Breiten zu einer Sache statt zu zweien.
- An der Zahl, ohne Menüeintrag. Mein Vorschlag hier war „beides", und er war falsch: ein zweiter Weg zu demselben Popover nimmt zwar nichts weg, fügt aber auch nichts hinzu — und ein Menüeintrag, der auf etwas zeigt, das eine Handbreit daneben schon klickbar ist, macht das Menü länger, nicht nützlicher. Damit bleibt die Entscheidung stehen, die der Code schon getroffen hatte, und das Ticket ist an dieser Stelle überstimmt.
- Außen, ebenfalls entgegen dem Ticket, aus demselben Grund wie bei C: der Ort einer Funktion sollte nicht davon abhängen, wie breit die Sidebar gerade ist.
Die verworfenen Varianten bleiben oben stehen — eine Entscheidung ohne das Verworfene ist nicht nachvollziehbar. Und eine Sache war in keiner Skizze zu sehen, sondern erst am gebauten Ding: dass zwei Wege zur Währung den Popover in kontrollierten Zustand zwingen und damit Aufwand kosten für etwas, das sich beim Anschauen als überflüssig herausstellt. Genau dafür ist dieses Kapitel da.