Formulare und App-Oberflächen

Eine interne App soll Menschen durch eine Aufgabe führen: den richtigen Fall finden, nötige Angaben verstehen, eine Aktion ausführen und deren Ergebnis erkennen. Planen Sie die Oberfläche vom Arbeitsweg aus.

Den Arbeitsweg sichtbar machen

Skizzieren Sie für eine typische Aufgabe den Weg vom Öffnen eines Falls bis zum Ergebnis. Bei einer Materialanforderung könnte eine Person Artikel und Menge erfassen und eine andere den Fall prüfen. Entscheiden Sie für jeden Schritt:

Lange Formulare lassen sich nach logischen Gruppen in sinnvolle Schritte gliedern, statt der internen Datenstruktur zu folgen. Bei mehrseitigen Vorgängen sollten grundlegende Anweisungen auf jeder Seite wiederkehren. Ein Fortschrittshinweis kann zeigen, welcher Schritt gerade ansteht und welche Schritte bereits erledigt sind.

Bereits ausgefüllte Schritte sollten nach Möglichkeit erneut aufrufbar sein, damit Angaben geprüft werden können; dabei müssen die zuvor eingegebenen Werte erhalten bleiben. Optionale Schritte sollten klar als solche erkennbar und überspringbar sein.

Eingaben und Rückmeldungen verständlich halten

Feldnamen sollen die Bedeutung einer Angabe erklären. „Benötigte Menge“ ist für eine Anforderung hilfreicher als ein technischer Spaltenname. Kennzeichnen Sie Pflichtangaben und nötige Formate dort, wo sie eingegeben werden. Bei Webformularen müssen Beschriftungen, zusammengehörige Felder und Hinweise auch technisch richtig zugeordnet sein.

Wenn eine Eingabe nicht verwendbar ist, soll die Meldung den Fehler erklären und eine Korrektur ermöglichen. Bereits eingegebene Werte sollten erhalten bleiben. Eine Prüfung im Browser gibt früh Rückmeldung; die Regel muss zusätzlich am tatsächlichen Schreibweg durchgesetzt werden, bevor ein ungültiger Wert verbindlich gespeichert wird.

Unterscheiden Sie Entwurf, gespeichert und fachlich erledigt. Eine Speicherbestätigung darf keine abgeschlossene Prüfung behaupten, wenn noch jemand entscheiden muss. Ist das Speicherergebnis unklar, zeigen Sie keinen bestätigten Erfolg an.

Fragen Sie nur Angaben ab, die für den jeweiligen Vorgang erforderlich sind. Das W3C weist darauf hin, dass überflüssige oder übermäßige Eingaben dazu führen können, dass Menschen ein Formular abbrechen. Kurze Formulare sind deshalb nicht nur leichter zu überblicken, sondern passen auch besser zum Arbeitsziel.

Verwandte Felder sollten als Gruppe erkennbar sein, etwa durch eine gemeinsame Überschrift. Ergänzen Sie Hinweise, wenn sie das Ausfüllen erleichtern; sie sollten sowohl für das gesamte Formular als auch für einzelne Felder verständlich sein. So erhalten Menschen Orientierung, ohne dass jede Information in den Feldnamen gepackt werden muss.

Bei einer erfolgreichen Aktion sollte erkennbar sein, welcher Arbeitsschritt abgeschlossen wurde. Das hilft besonders dann, wenn mehrere Personen am selben Vorgang arbeiten und eine Person den Stand der vorherigen Aktion nachvollziehen muss.

Eine verständliche, technisch zugeordnete Beschriftung hilft verschiedenen Nutzungsweisen: Screenreader können Feld und Bedeutung zusammen vermitteln, und Menschen, die Spracheingabe verwenden, können Beschriftungen zum Ansteuern nutzen. Auch gut erreichbare Bedienelemente erleichtern die Bedienung, etwa bei eingeschränkter Feinmotorik.

Wege zwischen Aufgaben planen

Eine App mit mehreren wiederkehrenden Aufgaben kann eine Navigation brauchen. Einträge wie „Anfragen erfassen“ und „Meine Prüfungen“ beschreiben Tätigkeiten besser als interne Tabellennamen. Ein einzelner geführter Vorgang kommt möglicherweise mit einer klaren Schrittfolge aus. Wiederkehrende Wege und gleichartige Aktionen sollten konsistent bezeichnet sein.

Ob eine dauerhafte Navigation nötig ist, hängt auch davon ab, ob Menschen die App wiederholt nutzen und zwischen mehreren Aufgaben wechseln. Sind die Aufgaben nicht in einer festen Reihenfolge angeordnet, können passende Navigationswege Orientierung geben. Bei einem klaren Ablauf vom Anfang bis zum Ende sollte zuerst geprüft werden, ob eine Schritt- oder Aufgabenliste genügt, statt zusätzliche Navigationslinks einzuführen.

Vereinfachen Sie den Arbeitsweg, bevor Sie weitere Navigationselemente ergänzen. Eine Oberfläche mit wenigen, auf die aktuelle Aufgabe bezogenen Wegen kann unnötige Entscheidungen vermeiden. Die Navigation sollte deutlich machen, in welchem Bereich der App sich die Person befindet und wie sie zu einer anderen wiederkehrenden Aufgabe gelangt.

Mobile Nutzung an Aufgaben prüfen

Auf einem schmalen Bildschirm müssen Fall, wichtige Angaben und Hauptaktion weiterhin auffindbar sein. Prüfen Sie bei Webansichten auch Umbruch und Bedienelemente bei Vergrößerung. Die WCAG nennen dafür Kriterien mit Ausnahmen; aus den Kriterien folgt keine Aussage über die Zugänglichkeit einer konkreten App.

Für die Durchführung eines Aufgabentests siehe den vertiefenden Beitrag.

Für Webinhalte beschreibt die WCAG unter anderem den sogenannten Reflow: Bei einer Breite von 320 CSS-Pixeln sollen Inhalte grundsätzlich ohne Informations- oder Funktionsverlust und ohne zweidimensionales Scrollen dargestellt werden. Ausnahmen gelten für Inhalte, deren Bedeutung oder Nutzung tatsächlich ein zweidimensionales Layout erfordert, etwa bestimmte Tabellen oder Karten. Das Kriterium allein bestätigt nicht, dass eine konkrete Oberfläche barrierefrei ist.

Auch die Größe und der Abstand von Bedienelementen beeinflussen die mobile Bedienbarkeit. Die WCAG nennt für Zeigerbedienung als Mindestziel eine Fläche von 24 × 24 CSS-Pixeln; kleinere Ziele können unter bestimmten Bedingungen zulässig sein, wenn genügend Abstand zu anderen Zielen besteht. Größere, gut voneinander getrennte Schaltflächen können versehentliche Aktivierungen erschweren, besonders auf Touchscreens.

WCAG-Kriterien für mobile Nutzung