Faustregeln für das Slider-Design

Einen präzisen Wert mit Hilfe eines Sliders auszuwählen, ist eine schwierige Aufgabe, die gute motorische Fähigkeiten voraussetzt – auch wenn der Slider gut gestaltet ist. Falls es für die Funktion der Nutzeroberfläche wichtig ist, einen genauen Wert auszuwählen, sollten Sie sich für ein alternatives UI-Element entscheiden.

 

by Aurora Bedford (deutsche Übersetzung) - 13.09.2015

 

Slider sind häufig die UI-Steuerungselemente erster Wahl, um Nutzer einen Wert oder Bereich aus einer Palette von festgelegten Optionen auswählen zu lassen. In der Praxis sind Slider aber schwer zu bedienen. Vor allem auf Touch-Nutzeroberflächen ist es einfach nicht realistisch, einen Slider so zu bedienen, dass man einen exakten Wert einstellen kann.

Definition: Ein Slider ist ein Steuerelement, welches ein Slide-Element enthält, das horizontal oder vertikal bewegt wird, um eine Variable, wie beispielsweise die Lautstärke eines Radios oder die Helligkeit eines Bildschirms zu kontrollieren.

Unpräzise Interaktionen

Beim Design einer nutzbaren Nutzeroberfläche müssen wir den Kontext berücksichtigen, in dem die Nutzeroberfläche verwendet wird. Besonders für mobile Designs gilt, dass Nutzer ihre Geräte häufig in einer Hand halten, während sie andere Aktivitäten durchführen – fernsehen, gehen oder sogar Auto fahren. In manchen Situationen kann es schwierig sein, auf ein Steuerungselement zu tippen und es an eine bestimmte Stelle zu ziehen. Slider unterliegen dem Steering Law, welches die Zeit beschreibt, die benötigt wird, um durch einen Tunnel zu fahren. Wie Sie sich vorstellen können, gilt: je länger und enger der Tunnel ist, desto länger dauert es, ihn zu durchfahren (das Steering Law gilt auch für Auswahlmenüs und horizontale Scrollleisten.) Da mobile Geräte – wie der Name verrät – mobil sind, ist es keine Überraschung, dass viele Nutzer versehentlich den Slider über den gewünschten Wert hinaus ziehen, während sie den Finger vom Bildschirm nehmen.

 

Die Kayak App verwendet mehrere Slider, um nach Flugzeit zu filtern. Die Slider Abflug und Ankunft enthalten nur stündliche Intervalle, während die Dauer-Slider Nutzer zwingen, einen minutengenauen Wert auszuwählen.

Eine weitere wichtige Überlegung beim Gestalten einer Touch-Oberfläche ist die Accessibility verschiedener Elemente der Nutzeroberfläche. Überlegen Sie, wie schwierig es für Nutzer mit motorischen Einschränkungen ist, mit einem Slider zu interagieren. Können diese überhaupt einen Wert auswählen, der in der Nähe des gewünschten Werts liegt? Wie viel Anstrengung und wie viele Versuche würden sie benötigen? Viele ältere Nutzer haben weniger ruhige Hände als jüngere Nutzer und daher Probleme damit, präzise Gesten auszuführen, um kleine Elemente der Nutzeroberfläche zu bewegen. Falls Sie verhindern möchten, dass diese Nutzer hilflos sind, ist ein Slider eventuell nicht die beste Wahl.

Ist ein exakter Wert notwendig?

Die Auswahl eines sehr spezifischen Werts zu erzwingen, ist häufig weder notwendig noch hilfreich für den Nutzer.

Slider funktionieren am besten, wenn der genaue Wert nicht wichtig ist, sondern ein ungefährer Wert ausreicht. Daher kann Kayak Slider für die Dauer bzw. die Ankunfts- bzw. Abflugzeiten verwenden, da den meisten Nutzern als Abflugzeit zum Beispiel „mittags“ ausreicht und der genaue Moment des Abflugs nicht ausschlaggebend ist. Wenn exakte Werte benötigt werden, sind Slider ungeeignet. Falls Sie zum Beispiel Dinge, wie Alter, Gewicht oder Größe in ein Formular eingeben müssen, sollte der Slider auf keinen Fall verwendet werden. 

Je breiter oder präziser der Bereich ist, der mit einem Slider ausgewählt werden muss, desto schwieriger ist es, einen genauen Wert auszuwählen. Die Delectable App bittet Nutzer, Wein auf einer Skala von 6-10 zu bewerten – auf den Zehntelpunkt genau. Nicht nur die ungewöhnliche Skala ist verwirrend, die Auswahl des präzisen Werts (zum Beispiel 9,5 vs. 9,3) ist eine motorische Herausforderung. Sie könnten vielleicht argumentieren, dass es Nutzern egal ist, ob sie den Wein mit 9,3 statt 9,5 bewerten, da die Werte ähnlich sind. Doch warum sollte man dann überhaupt Zehntelpunkte anbieten, anstatt sich für eine einfachere Skala mit 5 Punkten zu entscheiden?

Links: Die Delectable App verwendet einen Slider, um eine Flasche Wein mit einem sehr spezifischen Wert zu bewerten. Rechts: Die Amazon App verwendet gängigere und leichter auswählbare, antippbare Sterne, um ein Produkt zu bewerten.

Weightbot, eine App zur Gewichtskontrolle, begeht gleich zwei Fehler: (1) sie verwendet einen Slider (ein unpräzises Steuerungselement) für Dinge, die präzise angegeben werden müssen, (Gewicht) und (2) der Slider bewegt sich in sehr kleinen Schritten (0,1 Pfund). Außerdem ist der Anfangswert zufällig ausgewählt: versuchen Sie, den Slider anzupassen, falls Sie 120 oder 210 Pfund wiegen!

Denken Sie an den Daumen

Falls die Verwendung eines Sliders angemessen ist, stellen Sie sicher, dass das visuelle Design des Elements seine Usability nicht beeinträchtigt. Überlegen Sie sich für Touchscreens, wo auf dem Bildschirm sich die Finger des Nutzers befinden– und welche Bereiche des Bildschirms dadurch abgedeckt werden – während der Slider bewegt wird. Obwohl sich Beschriftungen direkt unter dem Slider für Desktop-Designs und eine Maus eignen, funktioniert dieselbe Platzierung der Beschreibung nicht für mobile Geräte und andere Touchscreen-Designs, da der Text durch die Finger des Nutzers verdeckt wird, während diese das Steuerungselement bedienen.

Links: Die Slider auf BrilliantEarth.com wurden mit Slider-Intervallen beschriftet, welche sich direkt unter dem Slider befinden. Dort werden sie während der Bedienung des Elements durch den Daumen des Nutzers verdeckt. Rechts: AirBnB.com zeigt die Slider-Werte richtig über dem UI-Element an, damit sie auch während der Benutzung sichtbar bleiben.

Um während der Nutzung sichtbar zu bleiben, müssen Bezeichnungen, die den Slider oder den derzeit ausgewählten Wert beschreiben, neben oder über beiden Daumen erscheinen: dem Daumen des Nutzers und dem Daumen des Sliders (auch als Schieberegler oder Hebel bekannt).

Schlussfolgerung

Verwenden Sie nur dann einen Slider, wenn der präzise Wert für den Nutzer nicht wichtig ist und ein ungefährer Bereich ausreicht. Stellen Sie sicher, dass die Nutzer den Bereich korrekt wählen können, ohne mühsam versuchen zu müssen, einen präzisen Wert zu erreichen. Außerdem müssen die Bezeichnungen des Sliders über oder neben dem Slider – statt darunter – platziert werden, damit diese auch dann sichtbar sind, während der Nutzer einen Wert auswählt. Denken Sie alternativ über ein anderes UI-Element nach, das es Nutzern ermöglicht, auf ihre Auswahl zu tippen oder diese sogar einzugeben, anstatt sich auf „tippen und ziehen“ Gesten verlassen zu müssen.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.