Fehlermeldungen und Labels im UI/UX-Design leiten Nutzer, verhindern Fehler und verbessern die Verständlichkeit. Klare, präzise Formulierungen und visuelle Hervorhebungen steigern die Nutzerfreundlichkeit und reduzieren Frustration.
Inhalt
Präsentation
Präsentation von Florian Rogl und Tobias Sudy
Checklist
Das wichtigste an einem Punkt
Labels und Fehlermeldungen sollten konsistent im Design und leicht verständlich sein.
Verwendung von Farben: Farben für Fehlermeldungen sollten klar von anderen UI-Elementen unterscheidbar sein und Kontraste bieten.
Kompakte Texte: Unterstützende und Fehlermeldungen sollten nach Möglichkeit auf einer Zeile bleiben, um visuelle Unordnung zu vermeiden.
Design für Barrierefreiheit:
- Labels und Fehlermeldungen sollten barrierefrei gestaltet sein, einschließlich ausreichendem Farbkontrast und Unterstützung für Screenreader.
Interaktive Elemente:
- Fehlermeldungen können mit Icons kombiniert werden, um zusätzliche visuelle Hinweise für den Fehlerstatus zu geben.
Verhaltensweisen bei Validierung:
- Fehlermeldungen sollten in Echtzeit angezeigt werden, wenn dies für den Kontext sinnvoll ist, um Benutzer zeitnah zu unterstützen.
Position und Sichtbarkeit: Labels sollten mit dem Eingabetext ausgerichtet sein und jederzeit sichtbar bleiben. Beim Auswählen des Feldes bewegt sich das Label an den oberen Rand des Containers.
Inkonsistenz bei Labels: Labels sollten nicht innerhalb eines UI-Bereichs fehlen, es sei denn, ein angrenzendes, klares Label ist vorhanden.
Kürze und Prägnanz: Labels sollten kurz, klar und vollständig sichtbar sein (keine Trunkierung oder mehrzeilige Labels).
Angabe von Pflichtfeldern: Zeige durch ein Sternchen (*) an, welche Felder erforderlich sind. Unterstützenden Text nutzen, um dies zu erklären.
