Richtlinien für Listenfelder (oder Auswahl)

Ein Listenfeld (auch als Auswahl bezeichnet) bietet dem Benutzer die Möglichkeit, in einer Liste mit Elementen ein einzelnes Element oder mitunter mehrere Elemente manuell auszuwählen. Für die Elemente in einem Listenfeld kann ein Bildlauf durchgeführt werden, wenn der Platz nicht ausreicht, um alle Elemente anzuzeigen.

Beispiel

Ist dies das richtige Steuerelement?

Verwenden Sie ein Listenfeld, wenn die Elemente so bedeutend sind, dass sie gut sichtbar präsentiert werden sollen. Ein Listenfeld sollte den Benutzer bei einer wichtigen Entscheidung bzw. Auswahl auf alle Alternativen aufmerksam machen. Legen Sie die Größe eines Listenfelds möglichst so fest, dass für die Liste der zugehörigen Elemente keine Verschiebung und kein Bildlauf erforderlich sind. Der optimale Bereich für ein Listenfeld liegt zwischen drei und neun Elementen. Zudem funktioniert ein Listenfeld dann gut, wenn die Elemente darin dynamisch variieren können.

Die Faktoren, die gegen die Verwendung eines Listenfelds sprechen, lauten wie folgt:

• Die Anzahl Elemente ist sehr gering. Ein Einzelauswahl-Listenfeld, das immer zwei identische Optionen beinhaltet, sollte besser in Form von Optionsfeldern dargestellt werden. Ziehen Sie die Verwendung von Optionsfeldern auch dann in Erwägung, wenn drei oder sogar vier statische Elemente vorhanden sind.
• Das Listenfeld ist eine Einzelauswahl und enthält immer die gleichen zwei Optionen, wobei eine als „nicht die andere Option“ impliziert werden kann (beispielsweise „Ein“ und „Aus“). Verwenden Sie ein einzelnes Kontrollkästchen oder einen Umschalter.
• Die Anzahl Elemente ist sehr hoch. Bessere Optionen für lange Listen sind Rasteransicht und Listenansicht. Für sehr lange Listen mit gruppierten Daten wir der semantische Zoom bevorzugt.
• Bei den Elementen handelt es sich um zusammenhängende numerische Werte. Ziehen Sie einen Schieberegler in Erwägung.
• Die Auswahlelemente sind im Fluss Ihrer App von sekundärer Bedeutung, oder für die meisten Benutzer wird in den meisten Situationen die Standardoption empfohlen. Verwenden Sie stattdessen eine Dropdownliste.

Empfehlungen

• Stellen Sie sicher, dass der Zweck des Listenfelds und die momentan ausgewählten Elemente klar sind.
• Reservieren Sie visuelle Effekte und Animationen für das Feedback für die Fingereingabe und für den ausgewählten Zustand von Elementen.
• Beschränken Sie den Text von Listenfeldelementen auf eine einzelne Zeile. Wenn es sich bei den Elementen um visuelle Objekte handelt, können Sie die Größe anpassen. Wenn ein Element mehrere Textzeilen oder Bilder enthält, verwende Sie stattdessen eine Rasteransicht oder Listenansicht.
• Wenn die Größe des Listenfelds automatisch festgelegt wird und die darin enthaltenen Elemente dynamisch sind, denken Sie darüber nach, wie die Größe des Listenfelds geändert wird und was mit visuellen Objekten um das Listenfeld herum geschieht. Die Größe eines Listenfelds mit fester Größe und dynamischen Elementen wird zwar nicht geändert, es sind jedoch Bildläufe zulässig.
• Verwenden Sie die Standardschriftart, sofern Ihre Markenrichtlinien nicht eine andere Schriftart vorschreiben.
• Sortieren Sie die Elemente in einem Listenfeld in einer logischen Reihenfolge. Gruppieren Sie verwandte Optionen, wobei Sie die am häufigsten verwendeten Optionen ganz oben platzieren, oder verwenden Sie die alphabetische Reihenfolge. Sortieren Sie Namen in alphabetischer Reihenfolge, Nummern in numerischer Reihenfolge und Datumsangaben in chronologischer Reihenfolge.
• Verwenden Sie ein Listenfeld nicht zum Ausführen von Befehlen oder zum dynamischen Anzeigen oder Ausblenden anderer Steuerelemente.

Weitere Hinweise zur Verwendung

Darstellung und Interaktion

Ein Listenfeld ist immer offen (im Gegensatz zu einer Dropdownliste). Bei den zugehörigen Elementen kann es sich um Textzeichenfolgen oder numerische Werte handeln. Sie können auch angepasst werden, sodass es sich um andere visuelle Objekte handelt. Seien Sie kreativ. Benutzer mögen es, direkt mit dem Inhalt einer App zu interagieren. Sie sollten also die tatsächlich angebotenen Inhalte anzeigen, beispielsweise Zeichnungen oder Fotos von Produkten. Denken Sie daran, dass ein Element grundsätzlich visuelles Feedback liefern sollte, wenn der Benutzer darauf tippt. Zudem sollte die Auswahl eines Elements visuell nachvollziehbar sein.

In einem Listenfeld wird die Liste der zugehörigen Elemente standardmäßig vertikal angezeigt. Wenn Sie die Elemente horizontal darstellen möchten (insbesondere dann, wenn es sich bei den Elementen um Grafiken oder Fotos handelt), können Sie das Layout der Listenfeldelemente anpassen. Wenn Sie Elemente in einem horizontalen oder vertikalen Umbruchraster anordnen möchten, so ist auch das möglich. Sie können auch einfach eine Rasteransicht verwenden, in der die Elemente standardmäßig auf diese Art und Weise angeordnet werden.

Wenn der Benutzer mit ihnen interagiert, liefern die Elemente Feedback, indem sie den Zustand und somit die Darstellung ändern. Normal, gedrückt, Auswahl aufgehoben, ausgewählt und deaktiviert sind Beispiele für Zustände von Listenfeldelementen.

Beim Tippen auf ein Element wird es ausgewählt. Tippt der Benutzer im Mehrfachauswahlmodus auf ein ausgewähltes Element, wird die Auswahl aufgehoben. Tippt der Benutzer im Einzelauswahlmodus auf ein anderes Element, wird die Auswahl auf dieses Element übertragen. Durch eine vertikale Streifbewegung mit dem Finger wird ein träger Bildlauf der Liste nach oben oder unten ausgeführt. Ein Listenfeld enthält eine Bildlaufleiste, deren Position die relative Position des Benutzers innerhalb der Elementliste und deren Größe das Mengenverhältnis der Elemente in der Ansicht angibt. Die Bildlaufliste ist nur während eines Bildlaufs sichtbar.

Verwandte Themen

Für Designer

Richtlinien für Dropdownlisten

Richtlinien für Kontrollkästchen

Richtlinien für Umschalter

Richtlinien für Rasteransichten und Listenansichten

Richtlinien für semantischen Zoom

Richtlinien für Schieberegler

Richtlinien für Optionsfelder

Gestalten der Benutzeroberfläche

Für Entwickler (XAML)

ListBox class

Hinzufügen von Kombinationsfeldern und Listenfeldern

Für Entwickler (HTML)

select element | select object

Hinzufügen von Auswahlsteuerelementen