Schieberegler (Designgrundlagen)

Mit einem Schieberegler können Benutzer aus einem fortlaufenden Wertebereich auswählen. Ein Schieberegler verfügt über eine Leiste, die den Bereich und einen Indikator anzeigt, der den aktuellen Wert anzeigt. Optionale Teilstriche zeigen Werte an.

Ein typischer Schieberegler.

Ist dies das richtige Steuerelement?

Verwenden Sie einen Schieberegler, wenn Ihre Benutzer in der Lage sein sollen, definierte, zusammenhängende Werte (z. B. Lautstärke oder Helligkeit) oder einen Bereich diskreter Werte (z. B. Bildschirmauflösungseinstellungen) festzulegen.

Ein Schieberegler ist eine gute Wahl, wenn Sie wissen, dass Benutzer den Wert als relative Menge und nicht als numerischen Wert betrachten. Benutzer denken z. B. darüber nach, ihre Audiolautstärke auf "niedrig" oder "mittel" festzulegen , nicht über das Festlegen des Werts auf 2 oder 5.

Berücksichtigen Sie die folgenden Fragen, um sich zu entscheiden:

• Scheint die Einstellung wie eine relative Menge zu sein? Wenn dies nicht der Fall ist, verwenden Sie Optionsfelderoder eine Dropdownliste oder mit einer Auswahl.
• Ist die Einstellung ein exakter, bekannter numerischer Wert? Verwenden Sie in diesem Falls ein numerische Textfelder.
• Würde ein Benutzer von sofortigem Feedback zu den Auswirkungen von Einstellungsänderungen profitieren? Wenn ja, verwenden Sie einen Schieberegler. Beispielsweise können Benutzer eine Farbe einfacher auswählen, indem sie sofort die Auswirkungen von Farbton-, Sättigungs- oder Leuchtdichtewerten sehen.
• Verfügt die Einstellung über einen Bereich von vier oder mehr Werten? Wenn nicht, verwenden Sie Optionsfelder.
• Kann der Benutzer den Wert ändern? Schieberegler dienen der Benutzerinteraktion. Wenn ein Benutzer den Wert nicht ändern kann, verwenden Sie stattdessen ein schreibgeschütztes Textfeld.

Wenn ein Schieberegler oder ein numerisches Textfeld möglich ist, verwenden Sie ein numerisches Textfeld, wenn:

• Der Bildschirmbereich ist eng.
• Ein Benutzer bevorzugt wahrscheinlich die Verwendung der Tastatur.

Verwenden Sie einen Schieberegler, wenn:

• Benutzer profitieren von sofortigem Feedback.

Leitlinien

• Verwenden Sie eine natürliche Ausrichtung. Wenn der Schieberegler beispielsweise einen realen Wert darstellt, der normalerweise vertikal angezeigt wird (z. B. Temperatur), verwenden Sie eine vertikale Ausrichtung.

• Orientieren Sie den Schieberegler, um die Kultur Ihrer Benutzer widerzuspiegeln. Beispielsweise lesen westliche Kulturen von links nach rechts, also für horizontale Schieberegler das niedrige Ende des Bereichs links und das hohe Ende auf der rechten Seite. Für Kulturen, die von rechts nach links gelesen werden, führen Sie das Gegenteil aus.

• Größe des Steuerelements, damit ein Benutzer den gewünschten Wert ganz einfach festlegen kann. Stellen Sie für Einstellungen mit diskreten Werten sicher, dass der Benutzer mit der Maus auf einfache Weise einen beliebigen Wert auswählen kann.

• Erwägen Sie die Verwendung einer nicht linearen Skala, wenn der Wertebereich groß ist und Benutzer wahrscheinlich Werte an einem Ende des Bereichs auswählen. Beispielsweise kann der Zeitwert 1 Minute, 1 Stunde, 1 Tag oder 1 Monat betragen.

• Geben Sie sofort Feedback, wenn oder nachdem ein Benutzer eine Auswahl getroffen hat. Beispielsweise zeigt die Microsoft Windows-Lautstärkeregelung den Signalton an, um die resultierende Audiolautstärke anzugeben.

• Verwenden von Bezeichnungen zum Anzeigen des Wertebereichs.

  Ausnahme: Wenn der Schieberegler vertikal ausgerichtet ist und die obere Beschriftung "Maximum", "Hoch", "Mehr" oder "Gleichwertig" lautet, können Sie die anderen Beschriftungen weglassen, da die Bedeutung eindeutig ist.

  

  In diesem Beispiel macht die vertikale Ausrichtung des Schiebereglers die Bereichsbeschriftungen unnötig.

• Verwenden Sie Teilstriche, wenn Benutzer den ungefähren Wert der Einstellung kennen müssen.

• Verwenden Sie Teilstriche und eine Wertbeschriftung, wenn Benutzer den genauen Wert der von ihnen ausgewählten Einstellung kennen müssen. Verwenden Sie immer eine Wertbezeichnung, wenn ein Benutzer die Einheiten kennen muss, um die Einstellung zu verstehen.

  

  In diesem Beispiel wird eine Beschriftung verwendet, um den ausgewählten Wert eindeutig anzugeben.

• Platzieren Sie bei horizontal ausgerichteten Schiebereglern Teilstriche unter dem Schieberegler. Platzieren Sie bei vertikal ausgerichteten Schiebereglern Teilstriche rechts für westliche Kulturen; für Kulturen, die von rechts nach links gelesen werden, führen Sie das Gegenteil aus.

• Platzieren Sie die Wertbeschriftung vollständig unter dem Schieberegler-Steuerelement, damit die Beziehung klar ist.

  Falsch:

  

  In diesem Beispiel wird die Wertbeschriftung nicht unter dem Schieberegler ausgerichtet.

• Wenn Sie einen Schieberegler deaktivieren, deaktivieren Sie auch alle zugehörigen Bezeichnungen.

• Verwenden Sie nicht sowohl einen Schieberegler als auch ein numerisches Textfeld für dieselbe Einstellung. Verwenden Sie nur das geeignetere Steuerelement.

  Ausnahme: Verwenden Sie beide Steuerelemente, wenn der Benutzer sowohl sofortiges Feedback als auch die Möglichkeit benötigt, einen exakten numerischen Wert festzulegen.

• Verwenden Sie keinen Schieberegler als Statusanzeige.

• Ändern Sie nicht die Größe der Schieberegleranzeige von der Standardgröße.

  Falsch:

  

  In diesem Beispiel wird eine Größe verwendet, die kleiner als die Standardeinstellung ist.

  Richtig:

  

  In diesem Beispiel wird die Standardgröße verwendet.

• Kennzeichnen Sie nicht jedes Teilstrich.

Empfohlene Größenanpassung und Abstand

Empfohlene Größenanpassung und Abstand für Schieberegler.

Etiketten

Schiebereglerbeschriftungen

• Verwenden Sie eine statische Textbeschriftung, die mit einem Doppelpunkt oder einer Gruppenfeldbeschriftung ohne endende Interpunktion endet.
• Weisen Sie jeder Bezeichnung eine eindeutige Zugriffstaste zu. Anleitungen zu Aufgaben finden Sie unter Tastatur-.
• Verwenden Sie großgeschriebene Sätze.
• Positionieren Sie die Schiebereglerbeschriftung entweder links vom Schieberegler oder über dem linken Rand des Schiebereglers (oder dessen linker Bereichsbezeichner, falls vorhanden).

Bereichsbeschriftungen

• Beschriften Sie die beiden Enden des Schiebereglerbereichs, es sei denn, eine vertikale Ausrichtung macht dies unnötig.
• Verwenden Sie nach Möglichkeit nur ein Wort für jede Beschriftung.
• Verwenden Sie keine interpunktionsende Interpunktion.
• Stellen Sie sicher, dass diese Bezeichnungen beschreibend und parallel sind. Beispiele: Maximum/Minimum, More/Less, Low/High, Soft/Laut.
• Verwenden Sie großgeschriebene Sätze.
• Weisen Sie keine Zugriffstasten zu.

Wertbeschriftungen

• Wenn Sie eine Wertbeschriftung benötigen, zeigen Sie sie unterhalb des Schiebereglers an.

• Zentrieren Sie den Text relativ zum Steuerelement, und schließen Sie die Einheiten (z. B. Pixel) ein.

  

  In diesem Beispiel wird die Wertbeschriftung unter dem Schieberegler zentriert und enthält die Einheiten.

Dokumentation

Beim Verweisen auf Schieberegler:

• Verwenden Sie den exakten Beschriftungstext, einschließlich der Groß-/Kleinschreibung, und fügen Sie den Wortschieberegler ein. Schließen Sie nicht den Unterstrich oder den Doppelpunkt der Zugriffstaste ein.
• Verwenden Sie "Verschieben", um die Benutzerinteraktion zu beschreiben.
• Formatieren Sie die Beschriftung nach Möglichkeit mit fett formatiertem Text. Platzieren Sie andernfalls die Beschriftung nur dann in Anführungszeichen, wenn dies erforderlich ist, um Verwirrung zu vermeiden.

Beispiel: Um die Bildschirmauflösung zu erhöhen, verschieben Sie die Bildschirmauflösung Schieberegler nach rechts.

Verwandte Themen

Glossar-