Jedes Panel braucht eine URL: Seitenleiste statt Modal

gemeinsame Ausgaben

In den meisten Ausgaben-Apps zahlst du einen kleinen, ständigen Preis – und irgendwann merkst du gar nicht mehr, dass du ihn zahlst.

Du gehst eine Liste mit vierzig Ausgaben von einer Reise durch und gleichst jede mit deinem Kontoauszug ab. Du klickst eine an. Die App bringt dich auf einen anderen Bildschirm. Du prüfst den Betrag, drückst auf Zurück und landest wieder ganz oben in der Liste – vierzig Zeilen über der Stelle, an der du warst, und ohne jede Ahnung, welche du gerade erledigt hast. Und das Ganze mal vierzig.

Die Lösung ist keine schnellere Seite. Die Lösung ist, gar nicht erst wegzugehen.

Was eine Detailansicht wirklich leisten muss

Öffnest du eine Rechnung aus einer Liste, müssen vier Dinge gleichzeitig stimmen – die meisten Umsetzungen schaffen zwei davon:

  1. Du bleibst, wo du warst. Die Liste bleibt, wo sie war, genauso weit gescrollt, und die Zeile, die du geöffnet hast, ist markiert, damit du siehst, wo du bist.

  2. Zurück tut das Naheliegende. Es schließt, was du geöffnet hast, statt den Bildschirm zu verlassen.

  3. Was du ansiehst, hat eine Adresse. Lädst du neu, ist es immer noch da. Schickst du jemandem die Adresse, sieht die Person dasselbe wie du.

  4. Du kannst einem Faden folgen. In einer Rechnung steht eine Person, und diese Person hat weitere Rechnungen. Dieser Kette zu folgen, sollte dich nicht aus der Liste werfen, die du gerade gelesen hast.

Ein modaler Dialog schafft die ersten beiden, schlecht, und die dritte nie. Eine eigene Seite schafft die dritte und opfert dafür die erste. Du willst beides, und der Weg dahin: aufhören, „was gerade offen ist“ als etwas zu behandeln, das sich die App heimlich merkt.

Ab in die Adressleiste

In HiBill steht alles, was in der Seitenleiste offen ist, in der URL der Seite – eine Transaktion als ?peek=, eine Person als ?person=. Daran ist nichts raffiniert. Es ist nur die Beobachtung, dass die offene Seitenleiste Teil davon ist, wo du gerade bist – und wo du gerade bist, gehört in die Adressleiste.

Alles Angenehme folgt aus dieser einen Entscheidung, ganz von selbst:

  • Sie übersteht das Neuladen. Keine Rekonstruktion, keine Schätzung. Dieselbe Rechnung, in derselben Liste, an derselben Scrollposition.

  • Der Link ist ein Link. Kopier die Adresse, schick sie der Person, mit der du dir den Flug geteilt hast, und sie öffnet genau die Rechnung, die du gerade angesehen hast. An den Zugriffsrechten ändert das nichts – wer nicht an der Transaktion beteiligt ist, sieht weiterhin nichts. Um eine Rechnung jemandem ohne Konto zu schicken, gibt es deshalb nach wie vor das öffentliche Teilen.

  • Zurück heißt zurück. Nicht „Seite verlassen“. Der Browser führt ohnehin einen Stapel von allem, was du geöffnet hattest, also geht der Zurück-Button ihn Schritt für Schritt hinunter, eine Rechnung nach der anderen, und verlässt die Seite erst, wenn der Stapel leer ist.

Genau deshalb hat die Seitenleiste auch einen eigenen Zurück-Button, ganz vorne in ihrer Kopfzeile. Er tut nichts anderes als der Zurück-Button des Browsers. Er ist da, weil am Laptop deine Hand auf dem Trackpad liegt und die Seitenleiste rechts ist – und Leute bis zur Leiste des Browsers wandern zu lassen, damit sie etwas rückgängig machen, das sie in der App getan haben, ist eine kleine Unhöflichkeit.

Eine Transaktion in der Seitenleiste geöffnet, neben der Liste unter Aktivität

Einer Kette folgen, ohne die Liste zu verlassen

Die vierte Anforderung ist die spannende.

Öffne ein Abendessen unter Aktivität. Die Aufteilung zeigt vier Namen. Klick auf einen, und statt zu schließen und dich irgendwo anders hinzuschicken, wird die Seitenleiste zu dieser Person: ihr Saldo, eure gemeinsamen Transaktionen. Klick auf eine davon, und die Seitenleiste wird zu dieser Rechnung.

Max Keller in der Seitenleiste geöffnet, neben der Liste unter Personen

Du kannst drei oder vier Schritte in diese Kette hineingehen – eine Rechnung, jemand darauf, eine weitere Rechnung dieser Person –, und die Liste, von der du gestartet bist, hat sich kein Stück bewegt. Dann Zurück, Zurück, Zurück, und du bist genau da, wo du warst, mit der Antwort auf die Frage, wegen der du losgegangen bist. Das ist das ganze Feature. Alles andere ist Verzierung.

Die Verzierung lohnt sich trotzdem. Ist eine Transaktion offen, hat die Kopfzeile der Seitenleiste die Pfeile Vorherige Transaktion und Nächste Transaktion, die durch die Liste laufen, aus der du sie geöffnet hast, in der angezeigten Reihenfolge. Die Tasten ↑ und ↓ tun dasselbe. Einen Monat Ausgaben durchzusehen heißt dann: Taste gedrückt halten und lesen – so, wie Durchsehen sein sollte. Und am Desktop ist der linke Rand der Seitenleiste ein Ziehgriff, denn 520 Pixel passen für ein zweizeiliges Abendessen, aber nicht für einen Beleg mit dreißig Positionen – deine Breite wird fürs nächste Mal gespeichert.

Warum es kein Modal ist

Ein Modal wäre weniger Arbeit gewesen. Wir haben keins genommen, aus zwei Gründen.

Ein Modal legt die Liste lahm. Abgedunkelt, nicht scrollbar, nicht klickbar. Dabei ist die Liste der Kontext – oft willst du die offene Rechnung mit den drei daneben vergleichen oder weiterscrollen und etwas anderes öffnen. Hier gibt es keine abdunkelnde Ebene. Die Liste darunter bleibt lebendig, und ein Klick darauf knallt die Seitenleiste nicht zu.

Ein Modal sperrt die Tastatur ein. Esc darf in einem Modal nur eine Sache bedeuten, und meistens heißt das „alles wegwerfen“. In der Seitenleiste holt dich Esc, während du einen Kommentar tippst, aus dem Feld und schließt die Seitenleiste erst beim zweiten Drücken. Esc in einem Filterfeld auf der Seite dahinter lässt die Seitenleiste völlig in Ruhe. Kleine Regeln, aber an ihnen hängt, ob eine Tastatur nützlich ist oder eine Gefahr.

Der einzige Ort, an dem ein Modal richtig ist, ist das Handy, wo kein Platz für zwei Dinge nebeneinander ist. Auf dem Handy nimmt die Seitenleiste deshalb den ganzen Bildschirm ein – und die Adresse trägt trotzdem, was offen ist. Ein Link, den du vom Handy schickst, öffnet auf dem Laptop von jemand anderem also dasselbe.

Selbst ausprobieren

Es ist ab sofort für alle da: auf dem Dashboard, unter Aktivität, unter Personen und auf der Seite einer Person. Klick einfach irgendwas an.

Die Mechanik steht in Transaktionen und Personen in der Seitenleiste öffnen, und wenn du neu hier bist, ist So funktioniert HiBill der größere Rundgang.

Weiterlesen