Inhaltsbereich Navigation Navigation Fußzeile

Stepper

Verwendung

Ein Stepper ist ein interaktives Element mit zwei Segmenten, mit denen Nutzende einen Wert inkrementell erhöhen oder verringern können. Sie bieten Benutzern eine intuitive und leicht zugängliche Möglichkeit, Werte einzugeben oder Default-Werte anzupassen, ohne dass eine manuelle Eingabe per Tastatur bzw. On-Screen Keyboard erforderlich ist.

Numerische Stepper werden häufig in Formularen, Eingabe- oder Einstellungsfeldern verwendet, in denen eine präzise numerische Eingabe erforderlich ist. Ihr Vorteil besteht darin, die genaue und effiziente Eingabe numerischer Werte zu ermöglichen, insbesondere innerhalb vordefinierter Grenzen oder Schrittgrößen und helfen, Eingabefehler zu vermeiden.

Stepper ändern Werte relativ zu einem voreingestellten Wert. Nutzende müssen also nur bewerten, ob der Wert geändert werden soll, und ob der Wert im Verhältnis zum aktuellen Stand steigen oder fallen soll.

Abgrenzung

Stepper eignen sich gut für kleine Änderungen an ursprünglich voreingestellten Werten, die nur eine geringe Anzahl an Taps oder Klicks erfordern.

  • Wenn die zu erwartenden Werte stark variieren können, dann sollte ein Feld zur direkten Eingabe bestimmter Werte ohne einen Stepper verwendet werden.
  • Wenn es lediglich einen sehr begrenzten Zahlenbereich zur Auswahl gibt (z. B. 1, 2, 3 oder 4), dann sollte ein Select verwendet werden.

Best Practices

  • Machen Sie den Wert deutlich, der durch den Stepper beeinflusst wird. Ein Stepper selbst zeigt keine Werte an. Stellen Sie daher sicher, dass die Benutzer wissen, welchen Wert sie ändern, wenn sie einen Stepper verwenden.
  • Erwägen Sie die Kombination eines Steppers mit einem Eingabefeld, wenn große Wertänderungen wahrscheinlich sind.
  • Legen Sie den am häufigsten ausgewählten Wert als Ausgangswert fest.
  • Verwenden Sie ausreichend große Schaltflächen sowohl für Desktop als auch für mobile Ansichten. Die Buttons müssen groß genug sein, um die verwendete Eingabemodalität zu unterstützen.
  • Horizontale Stepper, bei denen sich das Ausgabefeld des Wertes zwischen den Minus- und Plus-Buttons befindet sind in der Regel benutzbarer als solche mit vertikal angeordneten Buttons, da bei letzteren die Buttons aufgrund der begrenzten Zeilenhöhe oft zu nah beieinander stehen.

Beschriftung

Stepper erhalten zwingend ein sprechendes Text-Label, das den Zweck der Eingaben kommuniziert.

Tooltips

Stepper können ein zugeordnetes Tooltip erhalten, das entweder Bestandteil der Feldbeschriftung ist, oder programmatisch verknüpft nach dem Formularelement steht.

Do’s and Dont’s

So:

  • Das numerische Feld hat einen am häufigsten gewählten Wert und die wahrscheinlichsten Eingaben werden nicht unerheblich davon abweichen (z. B. Anzahl der Personen).
  • Der Wert muss um einen kleinen Betrag in eindeutigen Inkrementen angepasst werden.
  • Es gibt genügend Platz für großzügige Abstände der Stepper-Buttons.

So nicht:

  • Das numerische Feld kann Werte über einen großen Wertebereich annehmen (z. B. Alter), wobei kein Wert wahrscheinlich wesentlich häufiger eingegeben wird als andere.
  • Der Wert ist von der Anwendung nicht vorhersehbar, aber der genaue Wert ist wichtig.
  • Ein begrenzte Fläche für die Buttons würde dazu führen, dass diese zu klein werden und zu nah beieinander stehen.