Verwendung
Zur Unterstützung der Nutzenden bietet das Design System verschiedene Mittel, die je nach Kontext und Bedarf in der Anwendung zielgerichtet die jeweils richtigen Hilfen bieten.
1. Label
Idealerweise erschließt sich der Zweck eines Formularelements bereits aus dem eindeutig zugeordneten Label. Grundsätzlich sollen <label>-Elemente stets sichtbar sein, lediglich in begründeten Ausnahmefällen wie im begrenzten Raum von Datentabellen können sie visuell „versteckt“ werden.
In logisch zusammenhängenden Gruppen von Formularelementen können die Labels durch weitere (Meta-)Informationen aus der Legende eines Fieldsets ergänzt werden.
Labels können in begründeten Ausnahmefällen auch Hyperlinks enthalten, um weitere Sachverhalte wie z. B. Nutzungsbedingungen zu verlinken.
Bitte beachten Sie, dass Platzhalter in Formularelementen kein geeigneter Ersatz für fehlende Formular-Labels sind.
2. Hilfetexte
In Fällen, wo der Text eines Labels nicht ausreicht oder nicht selbsterklärend genug ist, kann zur Vermeidung von Falscheingaben ein weiterer Hilfetext unterhalb des Formularelements hinterlegt werden. Gestalterische Vorgaben, Positionierung und weitere Regeln finden sie bei den jeweiligen Formularelementen.
3. Tooltips
Optionale Tooltips geben eine erweiterte Kontext-spezifische Hilfestellung zu Inhalten und Funktionen. Sie werden eingesetzt, wenn zusätzliche Erklärungen für das Verständnis von bestimmten Feldern zwingend notwendig sind und es keine andere Möglichkeit gibt, diese Hilfen z. B. aus Platzgründen dauerhaft sichtbar zu platzieren.
4. Fußnoten
Wenn der in einem Tooltip sinnvolle und zur Verfügung stehende Platz nicht ausreicht, dann können bei besonders erläuterungsbedürftigen Inhalten und Funktionen, aber auch zur Kommunikation juristischer Sachverhalte und Vorgaben Fußnoten eingesetzt werden. Im Gegensatz zu Hilfetexten und Tooltips können diese auch weitere Strukturelemente enthalten und sind in ihrer Länge nicht begrenzt.
5. Hilfeseiten
Fachverfahren steht es frei, komplexere Sachverhalte auf eigenen Seiten im Hilfebereich des Zoll-Portals zu erklären. Da diese aber nur übergeordnete Themen und nicht einzelne Feldfunktionen erklären sollten, werden diese Hilfeseiten aus einem eigenständigen Bereich im Footer der Masken verlinkt.
6. Fehlerhinweise
Wenn trotz aller Hilfen ein Validierungs- oder anderer Fehler in einem Bearbeitungsschritt aufgetreten ist, der eindeutig einem Feld zuzuordnen ist, oder auch wenn ein Pflichtfeld nicht befüllt wurde, dann wird ein Fehlerhinweis am betroffenen Feld angezeigt. In der Regel ist dies der Fall, wenn ein Bearbeitungsschritt mit fehlenden Daten oder unzulässigen Eingabewerten durch die Nutzenden beendet werden soll.
Neben der Hervorhebung des jeweiligen Feldes durch Rahmenfarbe und -stärke (siehe hierzu die Fehlerzustände der jeweiligen Elemente) muss es einen zugeordneten aussagekräftigen Fehlertext unmittelbar am betroffenen Formularelement geben. In diesem wird knapp und prägnant auf den Fehler hingewiesen und es werden, sofern möglich, Lösungen zur Behebung des Fehlers in kurzer Form erklärt, z. B.: „[Feldname] ist ein Pflichtfeld und darf nicht leer sein.“
Dieser Fehlertext muss entfernt werden sobald die clientseitige Validierung erkennt, dass der Fehler behoben wurde.
Fehler, die nicht eindeutig einem Feld zugeordnet werden können, werden als Globale Fehlermeldung angezeigt.
Fehler in der Anwendung
Bei einem technischen Fehler oder wenn die Fehlerursache nicht nur einem einzelnen Feld zugeordnet werden kann wird eine Fehlermeldung und eine Verhaltensanweisung angezeigt (vgl. Abschnitte zu Modalen Dialogen sowie zu Hinweis- und Fehlermeldungen).
Serverseitige Anwendungsfehler werden Nutzenden durch die Verwendung einer entsprechenden Abfangseite der 50x-Serie kommuniziert.
Umgang mit Daten
Daten in fachlich nicht korrekt ausgefüllten Felder werden nicht verändert, um die Nutzenden anhand der Eingaben oder Auswahlen in Kombination mit der Fehlermeldung klar auf den Ist- und Soll-Zustand aufmerksam zu machen.
Falls ein Bearbeitungsschritt mit nicht ausgefüllten Pflichtfeldern durch die Nutzenden abgebrochen wird, dann entfällt die Pflicht der Eingabe und es wird keine Fehlermeldung angezeigt.
Label im mobilen Nutzungskontext
Ein Label im mobilen Kontext ist ein statischer Text, den Nutzende lesen und auch kopieren, aber nicht bearbeiten können. Labels zeigen Text auf der gesamten Oberfläche, in Buttons, Formular- und Menü-Elementen an und helfen den Nutzenden, den aktuellen Kontext zu verstehen und zu erkennen, was mögliche nächste Aktionen sind.
Abgrenzung
Unter dem Begriff Label versteht man im mobilen Entwicklungs-Kontext nicht editierbaren Text, der an verschiedenen Stellen erscheinen kann. Zum Beispiel:
- Innerhalb einer Schaltfläche gibt das Label an, was die Schaltfläche bewirkt, z. B. Bearbeiten, Abbrechen oder Senden.
- In Listen kann ein Label jedes Element beschreiben, oft zusammen mit einem Symbol oder einem Bild.
- Innerhalb einer Ansicht kann ein Label zusätzlichen Kontext bereitstellen, indem es ein Steuerelement einführt oder eine allgemeine Aktion oder Aufgabe beschreibt, die Nutzende in der Ansicht ausführen können.
Best Practices
- Verwenden Sie ein Label, um eine kleine Textmenge anzuzeigen, die nicht bearbeitet werden muss. Wenn Sie Nutzenden die Möglichkeit geben wollen, eine kleine Textmenge zu bearbeiten, verwenden Sie ein Textfeld. Wenn Sie eine große Textmenge anzeigen und diese optional bearbeiten lassen müssen, verwenden Sie eine Textarea.
- Ein Label kann einfachen oder formatierten Text anzeigen und muss aus Gründen der Barrierefreiheit Dynamic Type (sofern verfügbar) unterstützen. Wenn Sie den Stil eines Labels anpassen verwenden, achten Sie darauf, dass der Text in Gänze lesbar bleibt.
- Verwenden Sie vom Design System bereitgestellte Tokens für farbige Hervorhebungen, um die Wichtigkeit zu kommunizieren. Das Design System definiert Farb-Tokens um Ihnen dabei zu helfen, dem Text unterschiedliche visuelle Bedeutungsebenen zu verleihen. Weitere Hinweise finden Sie unter Farbschema.