UI-Justiz

Auswahlfeld, Mehrfach (Multi Select Picker)

Ein Mehrfachauswahlfeld ermöglicht es Nutzenden aus einer vorgegebenen Auswahl von Einträgen einen oder mehrere zu wählen.

Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:

#2527; #1789; #1190

Aufbau

  1. Feldlabel
  2. [Ausgewählter Eintrag]
  3. Listeneinträge
  4. Checkbox
  5. Hinweistext

Verhalten

Pflichtfelder sind mit “*” (Sternchen”) nach dem Label markiert. Bei Read-Only-Feldern gibt es keine visuelle Pflichtfeldauszeichnung, auch wenn diese im Backend ggf. als Pflichtfelder geprüft werden.

Die Auswahlfeldbezeichnung sollte so kurz und präzise wie möglich formuliert sein. Sollte ein Label dennoch länger sein müssen, so bricht es um und wird mehrzeilig.

Neben einer Checkbox zur Auswahl eines Eintrags kann jeder Eintrag einer Auswahlliste bestehen aus: 

  • Text: Einzelwert bzw. Einzelbegriff.
  • Icon mit Text: Die Funktion des Eintrags muss eindeutig aus dem angezeigten Text hervorgeht und die Grafik hat nur gestalterischen Charakter. Die Bildmarke muss als Layoutgrafik deklariert sein.
  • Avatar mit Text: Die Funktion des Eintrags muss eindeutig aus dem angezeigten Text hervorgeht und die Grafik hat nur gestalterischen Charakter. Die Bildmarke muss als Layoutgrafik deklariert sein.
  • Primär- und Sekundärtext (Beispiel Raumauswahl: Angezeigt wird die Bezeichnung des Raumes in Zeile 1; Die Gebäudeart und Straße in Zeile 2).
  • Primär- und ggf. Sekundärtext mit zusätzlicher Bildmarke (Beispiel: Icon oder Personen mit Avatar oder Foto; daneben Nachname und Vorname in erster Zeile, Amts-/Dienstbezeichnung in zweiter Zeile). Die Funktion des Eintrags muss eindeutig aus dem angezeigten Text hervorgeht und die Grafik hat nur gestalterischen Charakter. Die Bildmarke muss als Layoutgrafik deklariert sein.

Nach getätigter Auswahl von mehreren Werten werden diese mit Semikolon voneinander getrennt im Auswahlfeld dargestellt (siehe Schriften: Trennzeichen bei Listung mehrerer Werte) Beispiele:

  • Registerzeichen: O; T; AR
  • Justizpersonen: Witt, Emma; Singer, Fritz

Dabei wird bei Dropdowninhalten mit primärer und sekundärer Information immer nur die Primärinformation beachtet.

Anzeigereihenfolge der selektierten Werte

Die Anzeigereihenfolge der Werte innerhalb des Auswahlfeldes entspricht der Reihenfolge, in der die Werte ausgewählt wurden. Diese Reihenfolge wird auch nach Verlassen des Feldes nicht geändert. Nach Speichern/Anlegen des Formulars und erneutem Aufruf darf die Anzeigereihenfolge zu alphabetischer oder in Userstory definierter Anzeigereihenfolge geändert werden.

Sobald mehr als ein Eintrag ausgewählt ist und deren Texte summiert eine Zeichenzahl von 24 überschreiten (inkl. Komma, Semikolon und Leerzeichen) bzw. ab 18 Zeichen, wenn die Einträge Bildmarken enthalten, so werden diese im Auswahlfeld nicht mehr komplett ausgeschrieben. Statt dessen wird dort der Text “[Anzahl] ausgewählt” angezeigt. Dies gilt sowohl bei geschlossener, als auch bei geöffneter Ausklappliste, jedoch nur bei editierbaren Feldern. 
Wenn nur ein Eintrag ausgewählt ist, wird der Eintragstext ausgeschrieben. Wenn der Eintragstext eine Zeichenzahl von 24 überschreitet (inkl. Komma, Semikolon und Leerzeichen) bzw. ab 18 Zeichen, wenn der Eintrag eine Bildmarke enthält, so wird dieser nach den 24 bzw. 18 Zeichen mit “...” abgekürzt.

Die wirkliche Wertänderung im Formular findet bei Mehrfachauswahlfeldern immer erst bei Schließen der Ausklappliste statt (beispielsweise via Escape/Tab oder Mausklick außerhalb des Ausklappliste), nicht während der Auswahl. In der Auflistung im Feld werden die neu ausgewählten bzw. abgewählten Werte jedoch schon während der Änderung angezeigt bzw. ausgeblendet.

Wird das Dropdown nach getätigter Auswahl und Schließen erneut geöffnet, so befinden sich die ausgewählten Einträge am Anfang der Liste (ganz oben).

Alle auswählen

In Mehrfachauswahlfeldern wird vor dem ersten Eintrag immer die Alle-Auswählen-Option angeboten. Dafür trägt die erste Checkbox die Bezeichnung “Alle Einträge auswählen” und darunter wird eine graue Linie angezeigt. Diese dient nur zur visuellen Darstellung.

Wird die Checkbox im Alle-auswählen-Eintrag aktiviert, so werden alle im Dropdown enthaltenen anderen Einträge automatisch auf “Ausgewählt” gesetzt. Wird die Checkbox wieder deaktiviert, so werden alle im Dropdown enthaltenen Elemente auf “Nicht ausgewählt” gesetzt. Wurden alle Werte selektiert, so wird im Auswahlfeld (egal ob Ausklappliste geöffnet oder geschlossen) das Wort “Alle” angezeigt, anstatt jeden Einzelwert zu listen. Dies gilt jedoch nur für bearbeitbare Felder.

Falls Nutzende händisch alle im Dropdown enthaltenen Checkboxen selektieren, so wird die Checkbox “Alle Einträge auswählen” automatisch aktiviert. Falls die Checkbox bei “Alle Einträge auswählen” aktiviert ist und händisch eine Checkbox in einem darunterliegenden Eintrag entfernt wird, so wird die Checkbox bei “Alle Einträge auswählen” wieder deaktiviert.

Besonderheit zur Wertanzeige im Feld (nur bei bearbeitbaren Feldern): Wurden alle Werte selektiert, so wird im Auswahlfeld “Alle ([Anzahl ausgewählter Einträge])” angezeigt (egal ob die Ausklappliste geöffnet oder geschlossen ist). Ausnahme: Enthält die Auswahlliste nur einen Wert (zusätzlich zur “Alle-auswählen-Option”) und dieser ist ausgewählt, so wird der Wert im Feld immer direkt genannt an Stelle der Formulierung “Alle (1)”.

Ist ein Mehrfachauswahlfeld nicht bearbeitbar (read-only), so werden immer alle ausgewählten Werte im Feld ausgeschrieben, so dass Nutzende die Auswahl wahrnehmen können. Auch, wenn alle verfügbaren Einträge gewählt sind, werden im Feld die Einzelwerte angezeigt statt “Alle ([Anzahl ausgewählter Einträge])”. Werden die ausgewählten Inhalte zu lang, um in einer Zeile dargestellt zu werden, so werden sie abgekürzt (siehe Eingabefeld: Verhalten). In der Read-Only-Ansicht werden keine Grafiken (z. B. Personen-Icons) mit angezeigt, sondern nur reiner Text.

Fehlerfälle / Validierung

Bei fehlerhaften oder fehlenden Eingaben (siehe Formular: Ablauf Front-/Backend-Validierung) erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe Akustische Signale)

Details zur Anwendung der Standardfehlermeldungen sind im Meldungskonzept beschrieben (siehe Meldungskonzept: Standard-Meldungen für Formular-Validierungsfehler). Bei anderen Fehlermeldungen sind die Formulierungsregeln für Formular-Valididierungsfehler zu beachten (siehe Meldungskonzept: Formulierungsregeln für Formular-Validierungsfehler).

Responsives Verhalten

Verhalten der Ausklappliste bei kleiner Bildschirmhöhe (siehe Eingabe und Auswahlfelder: Ausklapplisten bei kleiner Bildschirmhöhe).

Zustände

Barrierefreiheit

Wird das Mehrfachauswahlfeld fokusiert, so wird vom Screenreader der Text "Mehrfachauswahl möglich" ausgegeben. Der Text ist wie ein Tooltip verknüpft, wird aber nicht visuell angezeigt, sondern nur im Screenreader ausgegeben. Dadurch können Screenreadernzutzende Einfach- und Mehrfachauswahlfeld voneinander unterscheiden.

Beim Navigieren durch die Liste gibt der Screenreader die Checkboxen nicht als solche aus, sondern stattdessen den Status "Ausgewählt" und "Nicht ausgewählt".

Bedienung

Tastaturbedienung

  • Mit der Tab-Taste wird das Multiselect-Element fokussiert. 
  • Leertaste, ALT+Pfeil unten und Pfeil unten öffnen das Dropdown mit den Auswahloptionen.
  • Falls vorher kein Eintrag ausgewählt war, ist beim Öffnen der erste Eintrag im Dropdown fokussiert. 
  • Falls vorher bereits einer oder mehrere Einträge gewählt waren, ist der Erste davon beim Öffnen des Dropdowns fokussiert.
  • Sollte der selektierte Eintrag eingeklappt sein, wird der erste Eintrag fokussiert.
  • Pfeiltasten nach unten/oben wechseln zur nächsten/vorherigen Auswahloption.
  • Bei Drücken eines oder mehrerer Buchstaben, wird der nächste Eintrag fokussiert, dessen Primärtext mit der entsprechenden Zeichenkette beginnt (ausgehend vom aktuell fokussierten Eintrag). Nach 1 Sekunde wird die Zeichenkette zurück gesetzt.
  • Enter oder Leertaste wählt den fokussierten Eintrag aus und der Fokus bleibt auf dem Eintrag. Erneutes Drücken der Enter oder Leertaste wählt den Eintrag wieder ab (default state).
  • Drücken der Home-Taste bei geöffneter Ausklappliste verschiebt die visuelle Hervorhebung auf das erste Element in der Liste.
    Drücken der End-Taste bei geöffneter Ausklappliste verschiebt die visuelle Hervorhebung auf das letzte Element der Liste.
  • Mit der Esc-Taste kann das Dropwdown geschlossen werden und die ausgewählten Werte werden übernommen. Das Select-Element ist wieder fokussiert.
  • Mit Tab-Taste kann das Dropdown-Element ebenfalls geschlossen werden, die ausgewählten Werte werden übernommen und das nächste interaktive Element ist fokussiert.

Mausbedienung

  • Klick mit linker Maustaste auf das Select-Element öffnet es (open). 
  • Falls vorher bereits ein Eintrag gewählt war, ist dieser hervorgehoben (selected).
  • Klick mit linker Maustaste auf einen der Dropdown-Einträge wählt diesen aus. Erneutes Klicken mit linker Maustaste auf das gleiche Element wählt ihn wieder ab.
  • Mit einem Klick mit linker Maustaste auf das Dreieck-Symbol im Feld oder Klick an eine beliebige Stelle außerhalb der Ausklappliste kann diese wieder geschlossen werden.

Weitere Themen: