Was UI-Design ist, an einem einzigen Formular erklärt

UI-Design entscheidet, was man sieht und was man tun kann

UI steht für User Interface, auf Deutsch Benutzeroberfläche. Gemeint ist alles, was jemand liest, anklickt oder ausfüllt. Die Gestaltung endet dabei nicht beim Aussehen in Ruhe. Jeder Baustein hat mehrere Zustände, und jeder davon braucht eine eigene Entscheidung.

• Leer, bevor jemand etwas eingibt
• Lädt, während im Hintergrund etwas passiert
• Falsch, wenn eine Eingabe nicht passt
• Erledigt, wenn alles geklappt hat

Viele Entwürfe zeigen nur den ersten und den letzten Zustand. Im Alltag entscheiden die dazwischen, ob jemand ans Ziel kommt. Zu UX-Design ist die Grenze schnell gezogen. UX ordnet die Abfolge der Schritte, UI gestaltet den einzelnen Schritt.

Unser Formular steht auf der Kontaktseite neben dem Kalender für ein Erstgespräch. Wir wollten neben dem Termin einen leichteren ersten Schritt anbieten. Beide stehen nebeneinander und nicht hinter einem Umschalter, denn ein Umschalter versteckt immer einen der beiden.

Ein leeres Feld sagt selbst, was fehlt

Wer das Formular ohne Namen abschickt, sieht keinen roten Rahmen. Stattdessen ändert sich der graue Hinweistext im Feld. Aus „Name“ wird „Name fehlt.“ Im Nachrichtenfeld steht hinter „Was habt ihr vor?“ plötzlich „Ein paar Sätze reichen.“

Der Hinweis erscheint genau dort, wo der Blick ohnehin hingeht. Eine Fehlerzeile unter dem Formular müsste man erst suchen. Danach müsste man sie noch dem richtigen Feld zuordnen.

Bis dahin gab es mehrere Fassungen. Zwei zeigten einen Ring um das Feld, eine dritte färbte den Hinweis orange. Alle drei haben wir verworfen. Die Fehlerfarbe ist jetzt die dunkelste Textfarbe der Seite, weil die hellen Farben auf Weiß zu schwach lesbar sind.

Dazu schüttelt sich der Text im Feld einmal kurz. Nur der Text bewegt sich, der Rahmen bleibt still. Die Felder teilen sich ihre Trennlinien, und ein wackelnder Rahmen würde sie optisch auseinanderreißen.

Wer mit der Tastatur arbeitet, landet danach direkt im ersten fehlenden Feld. Auf dem Handy passiert das bewusst nicht. Dort würde der Sprung die Bildschirmtastatur öffnen und die halbe Seite verschieben.

Was jemand geschrieben hat, bleibt stehen

Anders liegt der Fall, wenn etwas im Feld steht, das nicht passt. Typisch ist eine Mailadresse, der noch die Endung fehlt. Das Formular löscht sie nicht und ersetzt sie auch nicht durch einen Hinweis. Der Text bleibt stehen, und die feine Linie unter dem Feld wird kräftiger.

Es ist dieselbe Linie wie vorher, nur dunkler und etwas breiter. Ein zweiter Rahmen darüber wäre lauter, aber nicht klarer. Wer die Adresse korrigiert, ergänzt nur das fehlende Stück.

Dahinter steht eine Regel, die für jede Oberfläche gilt. Sie nimmt niemandem weg, was er schon getippt hat. Ein Feld, das nach einem Fehler leer ist, kostet die Eingabe ein zweites Mal. Meistens kostet es auch die Geduld.

Ein gedämpfter Knopf muss trotzdem reagieren

Solange nicht alle drei Felder gültig sind, wirkt der Knopf „Nachricht senden“ blasser. Gesperrt ist er trotzdem nicht. Der Klick muss ankommen, denn erst er löst die Prüfung aus. Ohne ihn könnten die Felder nie sagen, was ihnen fehlt.

Jeder Knopf braucht deshalb mehrere Fassungen. Er sieht in Ruhe anders aus als mit dem Mauszeiger darüber. Gedrückt sieht er wieder anders aus.

Ein gesperrter Knopf hätte noch einen Nachteil. Er fiele aus der Reihenfolge, in der man mit der Tabulatortaste durch die Seite springt. Wer ohne Maus arbeitet, käme gar nicht erst zu ihm.

Wie blass der Knopf sein darf, ist eine Frage der Lesbarkeit. Die weiße Schrift muss sich genug von der Fläche abheben. Wir haben das gemessen.

• Auf halbe Deckkraft gedämpft, läge der Kontrast bei rund 2,8 zu 1
• Bei 70 Prozent Deckkraft liegt er gemessen bei 5,0 zu 1
• Die Richtlinie WCAG verlangt für normalen Text mindestens 4,5 zu 1

Mit 70 Prozent ist der Knopf also deutlich zurückgenommen. Lesbar bleibt er trotzdem, auch für Menschen, die schlechter sehen.

Der Erfolg steht am Knopf, nicht anstelle des Formulars

Nach dem Klick ändert sich nur die Beschriftung des Knopfs. Sie wechselt in drei Schritten.

1. 01Nachricht senden
2. 02Wird gesendet…
3. 03Danke, wir melden uns.

Mit der letzten Beschriftung wird der Knopf grün. Die Felder bleiben dabei stehen, mit allem, was darin steht. Ändern lassen sie sich nicht mehr. So sieht jemand im Moment des Absendens noch, was er geschrieben hat.

Ein Formular kann den ganzen Inhalt auch durch eine Bestätigung ersetzen. Dann verschwindet die eigene Nachricht genau in dem Moment, in dem man sie noch einmal lesen möchte.

Eine sichtbare Fehlerzeile gibt es nur in einem Fall. Sie erscheint, wenn der Versand selbst scheitert. Dann ist kein Feld schuld, und ein Hinweis am Feld würde in die Irre führen. Die Zeile nennt deshalb unsere Mailadresse als zweiten Weg.

In einer Software sind es dieselben Fragen, nur hundertmal

Schon drei Felder und ein Knopf verlangen viele kleine Entscheidungen. In einer Software stellen sich dieselben Fragen bei Tabellen, Filtern und Meldungen. Und zwar auf jeder einzelnen Ansicht.

Wer sie jedes Mal neu beantwortet, bekommt ein Produkt, in dem jede Ansicht ein wenig anders funktioniert. Deshalb legt man Knöpfe, Felder und Meldungen für alle Ansichten nur einmal fest.

Bei Produkten ist genau das unsere Arbeit im Product Design. Abläufe, Ansichten und Bausteine entstehen dort zusammen.

Gutes UI-Design fällt dabei selten auf. Man merkt es daran, dass niemand überlegen muss, was als Nächstes zu tun ist.