Sich zurechtfinden — die Navigation bekommt ein Fundament

Foto: Vintage RS · StockSnap (CC0 1.0), via Openverse

Beim letzten Mal hat der Dev-Log ein Zuhause bekommen — eine eigenständige Blog-Engine, sauber in die Website integriert. Diesmal war die App selbst an der Reihe, und zwar an einer Stelle, die man erst vermisst, wenn sie fehlt: der Orientierung. Xircuit ist eine Plattform über sieben Branchen hinweg, und dieselbe Person kann zugleich Mitglied im Gym, Trainerin im Studio und Inhaberin einer Praxis sein. Wer so viele Hüte trägt, braucht jederzeit eine Antwort auf drei Fragen: Wo bin ich gerade? Wie wechsle ich woanders hin? Und wie komme ich wieder zurück? Diese Phase hat aus einzelnen, über die Zeit gewachsenen Antworten ein zusammenhängendes System gemacht — und dabei einen Fehler ans Licht geholt, der genau dort saß, wo niemand hinsah.

Ein Balken, der weiß, wo man ist

Der Anfang war die obere Leiste. Sie trug bislang zu viel und sagte zu wenig: mehrere Bedienelemente nebeneinander, aber keine klare Auskunft darüber, in welcher Organisation man sich gerade befindet. Also habe ich sie neu gedacht. Das Logo sitzt jetzt zentriert und ruhig in der Mitte, und die Leiste färbt sich nach der Art der aktiven Organisation — ein Gym bekommt einen anderen Akzent als eine Praxis oder ein Verein, sodass die Farbe allein schon signalisiert, in welcher Welt man unterwegs ist. Der Markenname trägt diese Zugehörigkeit im Klartext weiter: aus „Xircuit" wird „Xircuit | Gym", je nach Kontext. Und die Einstellungen, die vorher als eigenes Icon um Platz konkurrierten, sind dorthin gewandert, wo man sie erwartet — ins Profilmenü. Weniger Knöpfe, mehr Aussage.

Ein Schalter für den Kontext

Die eigentliche Arbeit steckte eine Ebene darunter. Über die Monate waren zwei rivalisierende Umschalter entstanden — einer, um die aktive Organisation zu wechseln, ein anderer, um zwischen Mitglieds- und Verwaltungssicht zu springen. Beide lösten einen Teil des Problems, keiner das ganze, und zusammen stifteten sie mehr Verwirrung als Klarheit. An ihre Stelle tritt jetzt ein einziges Bedienelement in der App-Leiste: die Kontext-Steuerung. Sie beantwortet die erste und die zweite Frage in einem Aufwasch — sie zeigt, wo man ist, und sie ist zugleich der Ort, an dem man woanders hinwechselt. Die Einträge sind nach Organisation gruppiert, mit lokalisierten Überschriften, und jeder Umschaltpunkt ist eindeutig adressierbar — wichtig, damit die automatisierten Tests genau den einen richtigen Wechsel ansteuern und nicht zufällig einen ähnlich benannten. Zwei halbe Antworten sind einer ganzen gewichen.

Der Weg zurück — und Brotkrumen

Bleibt die dritte Frage: der Weg zurück. Hier lag der peinlichste blinde Fleck. Mehrere Detailseiten — die Ansicht eines einzelnen Mitglieds, einer Trainerin, eines Patienten — hatten schlicht keine Rückkehr-Möglichkeit. Man kam hinein, aber nicht ohne Umweg wieder hinaus. Ich habe die zerstreuten, mehrfach kopierten „Zurück zur App"-Fragmente zu einem einzigen, wohldefinierten Baustein zusammengezogen und die Detailseiten damit versehen. Ein netter Nebeneffekt der Aufräumarbeit: Vier reine Icon-Schaltflächen hatten gar keinen zugänglichen Namen — für einen Screenreader also stumme Knöpfe. Auch das ist jetzt behoben.

Auf den tieferen Seiten kommt eine zweite Ebene hinzu: Brotkrumen. Wo die Routen wirklich drei Stufen tief gehen — etwa von der Mitgliederliste zu einem einzelnen Mitglied — zeichnet eine Brotkrumen-Spur den Weg nach: „Gym › Mitglieder › «Name»". Jede Seite deklariert ihre Spur selbst, damit die Beschriftungen — auch dynamische wie ein Personenname — von vornherein stimmen. Auf dem Telefon, wo eine volle Spur zu breit wäre, schrumpft sie auf einen einzigen Eltern-Link zusammen — dieselbe Rückkehr-Schaltfläche, die man ohnehin schon kennt. Ein Affordance in zwei Breiten, nicht zwei konkurrierende Muster.

Foto: Image Catalog · Flickr (CC0 1.0), via Openverse

Der Fehler unter der Navigation

Beim Aufräumen der Wege stieß ich auf den lehrreichsten Fund der ganzen Phase — einen Fehler, der genau unter der Navigation saß. Die App leitet aus dem ersten Segment eines Pfades ab, zu welcher Branche er gehört. Diese Zuordnung war an mehreren Stellen verstreut und, schlimmer noch, sie glich ohne Verankerung ab: Der Vergleich prüfte, ob ein Pfad mit einem Segment beginnt, nicht ob er ihm entspricht. Der Effekt war tückisch. /gym und /gyms teilen sich dieselben ersten vier Zeichen — und so wurde eine Route der einen Branche stillschweigend der anderen zugeschlagen. Alles kompilierte, alles sah richtig aus, und trotzdem landete man gelegentlich im falschen Kontext.

Die Reparatur war, die Auflösung an eine einzige, verankerte Stelle zu ziehen und exakt statt nach Präfix zu vergleichen. Der eigentlich beunruhigende Teil war aber nicht der Fehler, sondern sein Umfeld: Eine ganze Test-Suite mit achtundzwanzig Fällen war grün, während der Fehler in Produktion lief. Der Grund ist eine Lektion für sich — jeder Test fragte „funktioniert die richtige URL?", keiner fragte „matcht eine ähnliche URL fälschlich mit?". Ein Netz, das nur den erwarteten Weg abläuft, fängt den Fehltritt daneben nicht. Die neuen Tests prüfen jetzt ausdrücklich die Verwechslungsgefahr — inklusive einer bewusst negativen Zusicherung, dass die falsche Branche eben nicht matcht.

Entwickler, die ihre eigene App bewohnen

Ein Umzug, der nichts mit der Navigation zu tun zu haben scheint und doch derselben Haltung folgt: Entwickler-Organisationen sind jetzt vollständig eingerichtet und vor-onboarded. Bisher bekam ein Entwickler beim Anmelden eine reiche Fixtur an Organisationen — je eine pro Branche und Tarif — nur um bei jeder einzelnen sofort in den Onboarding-Assistenten umgeleitet zu werden, weil der Beitritts-Zeitpunkt fehlte. Jede member-seitige Route führte in denselben Willkommens-Trichter. Das ist jetzt vorbei: Die Fixtur setzt den Onboarding-Zeitpunkt, ein eng auf die Entwickler-Nutzer begrenzter Nachtrag repariert die bereits bestehenden Organisationen, ohne echten Neu-Mitgliedern ihr Onboarding zu nehmen, und jede Branche bekommt ein plausibel gefülltes Aufnahmeprofil — Trainingsziel, Erfahrung, ein paar Werte —, damit die member-seitigen Seiten mit echtem Inhalt erscheinen statt mit leeren Zuständen. Wer seine eigene App täglich bewohnt, merkt solche Reibung sofort — und behebt sie deshalb.

Wenn die Sicherheitsampel angeht

Zwischendurch schlug die Sicherheitsprüfung Alarm: eine gemeldete Schwachstelle in einer Bibliothek tief im Abhängigkeitsbaum — ein mXSS-Problem in einem HTML-Parser, den wir nur indirekt und ausschließlich über einen Sanitizer nutzen. Xircuit behandelt Gesundheitsdaten, und die Regel im Haus ist streng: Schwachstellen-Warnungen brechen den Build. Der Reflex wäre, einfach zu aktualisieren. Nur: Die aktuellste Version des Sanitizers pinnt genau die betroffene Parser-Version fest — es gibt schlicht keine Aufwärtslösung, die den Quellcode reparieren würde. Statt die Warnung wegzuklicken, habe ich sie bewusst abgewogen und dokumentiert: Der Angriffsweg verlangt ein bestimmtes eingeschleustes Element, und an jeder Stelle, an der wir den Parser überhaupt erreichen, ist die Eingabe entweder vertrauenswürdig oder wird vorher als reiner Text entschärft — der Vektor ist nicht erreichbar. Die Ausnahme trägt einen Kommentar mit der vollständigen Begründung und einen Auftrag, sie zu entfernen, sobald der Sanitizer auf einer geflickten Parser-Version erscheint. Eine Sicherheitsampel darf man überfahren — aber nur mit offenen Augen und einem Protokoll.

Drei Fehler, die das Netz fing

Zum Schluss ein vertrautes Muster: Ich habe Sentry und die offenen Tickets durchgegangen, und aus dem Rauschen — erwartete Ablehnungen der Berechtigungsschicht, Ratenbegrenzungen von Fremddiensten, gutmütig abgefangene Fehler — schälten sich drei echte Produktionsfehler heraus. Der erste steckte in der täglichen Aggregation der Website-Statistik: Läuft sie auf zwei gleichzeitig gestarteten Instanzen an, wollen beide dieselbe Tageszeile einfügen und stolpern über den eindeutigen Index — was den ganzen Durchlauf abbrach. Er versöhnt jetzt den Konflikt, statt aufzugeben. Der zweite war ein Wettlauf beim Schließen: Ein Hinweis-Banner griff nach dem Aufräumen noch auf eine bereits freigegebene Ressource zu, wenn man mitten in einer Prüfung wegnavigierte. Der dritte warf beim Neuladen des Dashboards eine Ausnahme, weil ein Render nicht auf dem richtigen Thread ausgelöst wurde. Alle drei sind gefixt, mit Tests, die den Fehler vor der Reparatur rot färben — und alle drei eint dieselbe Moral wie beim letzten Mal: Ein Testnetz beweist seinen Wert nicht dadurch, dass es grün leuchtet, sondern dadurch, dass es an der richtigen Stelle reißt.

Was kommt als Nächstes?

Navigation ist die Art Arbeit, die niemand lobt, wenn sie stimmt, und die jeder spürt, wenn sie fehlt. Die App weiß jetzt durchgehend, wo man ist, bietet einen einzigen Ort zum Wechseln und einen verlässlichen Weg zurück — und der Fehler, der einen zuvor leise in die falsche Branche schickte, ist samt seiner Test-Lücke geschlossen. Was als Nächstes kommt, weiß ich noch nicht genau. Aber die Wege stehen jetzt, und auf denen lässt sich weiterbauen.