1. Eingabehilfen und Fehlermeldungen

Eingabehilfen und Fehlermeldungen sind essenziell wichtig, um die Benutzerfreundlichkeit eines Frontends zu erhöhen. Im folgenden Kapitel werden die Grundlagen zur erfolgreichen Gestaltung von Eingabehilfen und Fehlermeldungen erläutert.

1.1. Eingabehilfen

1.1.1. Korrekte Labels

Auch Labels gelten als Eingabehilfen. Klare und präzise Beschriftungen (Labels) sind für die Benutzerführung entscheidend, insbesondere für Benutzereingaben und Eingabefelder. Jedes Eingabefeld muss ein entsprechendes Label haben, das den Nutzenden genau sagt, welche Art von Information erwartet wird. Beispielsweise sollte ein Anmeldeformular separate Felder für "Anmeldename" und "Passwort" haben, jeweils mit deutlich sichtbaren Labels.

1.1.2. Gute Platzhaltertexte

Platzhaltertexte sind nützlich, um Nutzenden zusätzliche Hinweise oder Beispiele für die erwarteten Eingaben zu geben. Sie sollten jedoch nicht als Ersatz für Labels dienen. Idealerweise sollten Platzhaltertexte kurz und prägnant sein, um den Nutzenden zu helfen, die Anforderungen des jeweiligen Eingabefelds besser zu verstehen, ohne den Platz zu überladen oder den Fokus zu stören.

Beispiel 1: Es wird ein Nachname im Eingabefeld erwartet

Do: Nachname

Don’t: Dein Nachname

Beispiel 2: Es wird eine Telefonnummer erwartet

Do: +49 123 1234567

Don’t: Deine Telefon- oder Handynummer

Sobald die Nutzenden in das Eingabefeld klicken, wird der Platzhalter ausgeblendet und es besteht die Möglichkeit, eine Mask anzeigen zu lassen (siehe Kapitel Eingabefelder). Sie geben das gewünschte Eingabepattern vor und lassen sich fast vollständig frei gestalten.

Gute Hinweistexte zur Erläuterung bei Eingabefeldern und Fehlermeldungen:

Bei komplexeren Formularen oder spezifischen Eingabeanforderungen können Hinweistexte hilfreich sein, um den Nutzenden zusätzliche Anleitungen oder Kontext zu bieten. Diese Texte sollten in der Nähe des entsprechenden Eingabefelds platziert werden und sollten klar und präzise sein. Sie können beispielsweise erklären, welche Art von Informationen erwartet wird oder auf spezielle Formatierungsanforderungen hinweisen.

1.1.3. Autosuggestion

Autosuggestion ist eine Zusatzfunktion, die in Eingabefeldern ergänzt werden kann. Sie dient dazu, Eingaben durch Vorschläge zu vervollständigen und somit zu beschleunigen. Diese Eingabehilfe erscheint direkt unter dem Textfeld. Sie schließt sich, wenn Nutzende neben die Eingabehilfe klicken oder innerhalb der Eingabehilfe ihre Auswahl treffen.

Live-Beispiel Autosuggestion ansehen Öffnet das Beispiel zur Komponente in der Demo-Anwendung. Beispiel öffnen →

Sobald die Nutzenden mit der Eingabe beginnen, werden mögliche Werte, die mit der getätigten Eingabe beginnen, in einem Menü unterhalb des Textfelds angezeigt. Nutzende können nun weiter tippen oder direkt einen Wert aus dem Menü auswählen und somit ihre Eingabe verkürzen. Gibt es mehr als zehn mögliche passende Werte, so werden die ersten zehn Werte angezeigt, gefolgt von einer Information, dass mehr als zehn Einträge existieren.

1.1.4. Fortschrittsanzeige

Feedback-Konzepte für Ladezeiten sind ein sehr wichtiges Instrument, um eine gute User Experience zu erreichen. Für längere Operationen kann ein Fortschritts-Balken (Progress Bar) genutzt werden, der sich entsprechend dem Fortschritt des Vorgangs füllt. Für kürzere Vorgänge kann ein Fortschritts-Spinner (kreisrunde Fortschrittsanzeige) verwendet werden.

Live-Beispiel Progress Spinner ansehen Öffnet das Beispiel zur Komponente in der Demo-Anwendung. Beispiel öffnen →

Grundlegende Anwendungshinweise:

  • Generell sollten Vorgänge oder Operationen, die mehr als eine Sekunde in Anspruch nehmen, eine Rückmeldung in Form einer Fortschrittsanzeige an Nutzende geben.

  • Die Form der Fortschrittsanzeige richtet sich dabei nach der Länge des Vorgangs und dem Anwendungskontext.

  • Fortschrittsanzeigen werden in der Regel nur für Wartezeiten verwendet, die sich aus System-Operationen ergeben. Für Wartezeiten, die sich auf die Bedienung der Nutzenden zurückführen lassen, werden keine Fortschrittsanzeigen eingesetzt.

Fortschritts-Balken (Progress Bar):

  • Fortschritts-Balken werden in der Regel für Ladevorgänge mit bestimmbarer Gesamtlänge verwendet.

  • Ein Balken zeigt den Grad der Zielerreichung an. Dabei füllt sich der Balken von links (0 %) nach rechts (100 %).

Fortschritts-Spinner (kreisrunde Fortschrittsanzeige):

  • Fortschritts-Spinner werden für Ladevorgänge verwendet, deren Gesamtlänge unbekannt ist.

  • Für die Dauer der Operation dreht sich der Fortschritts-Spinner und signalisiert Nutzenden damit, dass sich ein Prozess in Gang befindet. Der Fortschritts-Spinner empfiehlt sich aufgrund seiner geringen Maße insbesondere in Situationen, in denen Platzbedarf von großer Bedeutung ist.

1.1.5. System-Meldungen

Beim Verfassen von System-Benachrichtigungen - wie beispielsweise Fehlermeldungen - muss auf eine verständliche und konsistente Formulierung geachtet werden. Neben Fehlermeldungen, die am Eingabeobjekt auftreten, kann zusätzlich ein zusammenfassender Hinweis angezeigt werden.

Dynamisch nachgeladene Meldungen müssen auch für Screenreader wahrnehmbar sein, damit alle Nutzenden die Hinweise erfassen können. Nicht blockierende Benachrichtigungen müssen eine Schließen-Aktion anbieten. Um die Barrierefreiheit einzuhalten, muss die Benachrichtigung dauerhaft eingeblendet bleiben, bis sie von den Nutzenden geschlossen wird, siehe WCAG 2.1 SC 1.4.13.

Folgende Meldungsarten können als nicht blockierende Benachrichtigung verwendet werden:

  • Warnung

  • Hinweis

  • Fehler

  • Erfolg

Live-Beispiel System-Meldung ansehen Öffnet das Beispiel zur Komponente in der Demo-Anwendung. Beispiel öffnen →

Hinweisdialoge und -popups

Siehe Meldungsdialoge, Benachrichtigungen und Container und Overlays.

Dos

  • Allgemeinverständliche und positive Sprache

    • Inkorrekt: „Soll das Objekt gelöscht werden?“

    • Besser: „Wollen Sie das gewählte Objekt XY löschen?“

  • Verwenden einer einfachen und konsistenten Satzstruktur

  • Präzise Formulierungen:

    • Inkorrekt: „Nichts selektiert“

    • Besser: „Bitte selektieren Sie ein Objekt in der Liste“

  • Positive Formulierungen:

    • Inkorrekt: „Illegale String-Länge aufgetreten.“

    • Besser: „Es wurden zu viele Zeichen eingegeben. Es sind maximal 20 Zeichen möglich.“

  • Es soll nicht nur das Problem geschildert, sondern auch eine mögliche Lösung mitgeliefert werden.

Don’ts

  • Vermeidung von redundanten Informationen

  • Vermeidung von mehrdeutigen Beschreibungen

1.2. Fehlermeldungen

Fehlermeldungen sind unvermeidlich, aber wie sie präsentiert werden, kann einen großen Unterschied für die Benutzererfahrung bedeuten. Fehlermeldungen sollten gut sichtbar und in verständlicher Sprache verfasst sein sowie klare Anweisungen zur Behebung des Fehlers enthalten. Idealerweise sollten Fehlermeldungen in unmittelbarer Nähe von betroffenen Objekten platziert werden (siehe als Beispiel: Eingabefelder - Fehlermeldung), um Nutzenden sofortiges Feedback zu geben und sie bei der Fehlerbehebung zu unterstützen. Neben Fehlermeldungen, die am Eingabeobjekt auftreten, kann zusätzlich ein zusammenfassender Hinweis, wie im Kapitel System-Meldungen beschrieben, angezeigt werden.

Ein häufig gemachter Fehler ist dabei die Verwendung von negativ anmutenden Formulierungen, die Benutzende demotivieren können. Die folgende Liste zeigt einige negative Bezeichnungen und ihre neutralen Äquivalente:

Negativer Begriff Neutraler Begriff

Illegal

Nicht korrekt

Fehler

Problem

Fehlschlagen („Speichern ist fehlgeschlagen“)

Nicht können („Es konnte nicht gespeichert werden“)