Das Problem: drei Formulare, drei Verhalten
Ein Kontaktformular, eine Newsletter-Anmeldung und ein Bewerbungsformular sollen im selben Webauftritt gleich wirken. Nach wenigen Wochen haben sie unterschiedliche Feldhöhen, zwei Fehlermeldungsstile und eine Checkbox, die nur in einem Browser sauber sitzt. Das ist kein seltenes Einzelproblem, sondern ein typisches Symptom gewachsener Webprojekte: Jede Seite wird als eigenes kleines Produkt behandelt, obwohl sie dieselben Bausteine nutzt. Besonders teuer wird es, wenn dieselbe Abweichung bei jeder neuen Landingpage erneut geprüft werden muss.
Die Ursache: fehlende Regeln für Wiederholbares
Design, Entwicklung und Redaktion arbeiten mit unterschiedlichen Begriffen. Der eine nennt es „Button“, die andere „CTA“, im Code heißt es dann „btn-primary“. Gemeint ist dasselbe, gepflegt wird es dreimal. Besonders deutlich wird das bei Formularen: Ein Feld ist nicht nur ein Kasten mit Rahmen. Es hat Zustände für Fokus, Fehler, Pflichtfeld und deaktivierte Ansicht. Fehlen dafür verbindliche Regeln, entstehen Abweichungen nicht aus Nachlässigkeit, sondern aus Zeitdruck. Jede neue Seite erbt die Unklarheit der vorherigen. Wer erst im Bugfixing merkt, dass ein Pflichtfeld keine sichtbare Fehlermeldung hat, zahlt doppelt: einmal für den Einbau, einmal für die Korrektur.
Die Lösung: ein Komponenten-Katalog als gemeinsame Sprache
Bei twindor beginnt die Arbeit an solchen Projekten deshalb nicht mit dem nächsten Screen, sondern mit einem Komponenten-Katalog. Er beschreibt Bausteine nicht als Screenshots, sondern als lebende Muster mit allen Zuständen. Ein Eingabefeld existiert dort einmal – mit Label, Hilfe-Text, Fehlerausgabe und Fokusmarkierung. Die Redaktion sieht, was sie einsetzen darf; die Entwicklung sieht, was sie erweitern muss. Der Katalog ist kein Dokument für die Schublade, sondern ein Vertrag zwischen den Gewerken.
Was konkret festgelegt wird
- Abstände: Feldabstände und Innenräume folgen einer kleinen Skala statt Einzelwerten.
- Zustände: Fokus, Fehler und deaktiviert werden vor dem ersten Einsatz gestaltet.
- Barrierefreiheit: Labels, Fehlermeldungen und Tastaturreihenfolge sind Teil der Komponente, nicht Nacharbeit.
- Verantwortung: Eine Person pflegt den Katalog, Änderungen werden versioniert.
Das Ergebnis: weniger Abstimmung, mehr Prüfbarkeit
Der Effekt zeigt sich nicht in einer einzelnen schönen Seite, sondern im dritten und vierten Formular. Wenn ein neues Feld dazukommt, wird es zuerst im Katalog ergänzt und erst danach eingebaut. Dadurch sinken Rückfragen im Alltag, und Tests lassen sich auf wenige Muster konzentrieren. Ein Formular, das auf allen Seiten gleich reagiert, wirkt unspektakulär – genau das ist der Punkt. Gute Webentwicklung macht Wiederholbares verlässlich, damit Zeit für die Aufgaben bleibt, die wirklich neu sind.