Sollte ein Toggle-Button seinen aktuellen Zustand anzeigen oder den Zustand, in den er wechseln wird? (2010)

Sollte ein Toggle-Button seinen aktuellen Zustand anzeigen oder den Zustand, in den er wechseln wird?

• Ein Toggle-Button sollte auch dazu dienen, dem Nutzer den aktuellen Zustand mitzuteilen.
• Wenn ein Toggle-Button im Zustand „Ein“ „Aus“ anzeigt, kann das Verwirrung stiften.
• Die Verwendung von Flip-Flop-Controls in Buttons oder Menüs sollte vermieden werden.

Ein Toggle-Switch kann sowohl den aktuellen Zustand als auch den Zustand nach der Änderung anzeigen

• Eine Möglichkeit ist, Text außerhalb des Buttons zu platzieren, um sowohl den aktuellen Zustand als auch den Zustand nach der Änderung anzuzeigen.
• Zum Beispiel zeigt das iOS-Switch-Design den Zustand „Ein“ blau an, während „Aus“ dies nicht tut.
• Das OS-X-Switch-Design ist nicht mehrdeutig, und der Nutzer kann den aktuellen Zustand klar erkennen.

Die Verwendung von Toggle-Buttons wie bei Twitter sollte vermieden werden

• Der Toggle-Button von Twitter liefert Informationen beim Mouseover, kann auf Touchscreens jedoch verwirrend sein.

Im Englischen können "on" und "off" sowohl Adverbien als auch Adjektive sein

• Es ist besser, dem Button mit Verben oder Adjektiven klare Labels zu geben.
• Beispiele: „Aktivieren/Deaktivieren“, „Starten/Stoppen“

Es ist wichtig, Zustand und Aktion zu unterscheiden

• Wenn ein Toggle eine Aktion darstellt (z. B. Wiedergabe/Pause), sollte er die Aktion anzeigen, die beim Klicken ausgeführt wird.
• Wenn ein Toggle eine Option darstellt (z. B. Zufallswiedergabe/normale Wiedergabe), sollte er den aktuellen Zustand anzeigen.

Die Verwendung von Checkboxen kann in Betracht gezogen werden

• Wenn sich ein Zustandswechsel als „Ja/Nein“-Frage zusammenfassen lässt, kann eine Checkbox geeignet sein.

Statt eines Toggle-Buttons eine Methode verwenden, die sowohl Zustand als auch Aktion anzeigt

• Im deaktivierten Zustand wird der Button nicht hervorgehoben; im aktivierten Zustand wird er hervorgehoben, um den Zustand anzuzeigen.

Es kann sinnvoll sein, ganz auf Toggle-Buttons zu verzichten

• Zum Beispiel kann man bei Zufallswiedergabe/normaler Wiedergabe eine Checkbox mit der Beschriftung „Zufallswiedergabe“ verwenden.

Der „Gefällt mir“-Button von Facebook ist ein gutes Beispiel für einen gelungenen Toggle-Button

• In der Facebook-Android-App wird der „Gefällt mir“-Button im deaktivierten Zustand grau und im aktivierten Zustand blau dargestellt.

Am klarsten ist es, sowohl den aktuellen Zustand als auch die Aktion anzuzeigen

• Es ist empfehlenswert, ein Label für den deaktivierten Zustand zusammen mit einem anklickbaren Button bereitzustellen, mit dem der aktivierte Zustand umgeschaltet werden kann.

GN⁺-Meinung:

• Das Design von Toggle-Buttons kann großen Einfluss auf die User Experience haben, und es ist wichtig, den aktuellen Zustand und den Zustand nach der Änderung klar darzustellen.
• Das Switch-Design von OS X ist ein gutes Beispiel dafür, weil es Nutzer nicht verwirrt und ihnen erlaubt, den aktuellen Zustand intuitiv zu verstehen.
• Dieser Beitrag kann Softwareentwicklern helfen, eine bessere User Experience zu schaffen, indem er wichtige Aspekte aufzeigt, die beim Entwurf von Benutzeroberflächen berücksichtigt werden sollten.

[GN⁺]

Hacker-News-Kommentare

• Verwirrung rund um die Stummschalten-Schaltfläche in Microsoft Teams

  • In der Teams-App zeigt die Stummschalten-Schaltfläche ein durchgestrichenes Mikrofon, was bedeutet, dass das Mikrofon ausgeschaltet ist, wenn Stummschalten aktiviert ist.
  • In Telefon-Apps zeigt dasselbe Symbol dagegen an, dass nicht stummgeschaltet ist; ein gefüllter Hintergrund markiert dort den Stummzustand.
  • Daran, dass die Schaltfläche den aktuellen Zustand anzeigt, ist nichts grundsätzlich falsch, aber man muss wissen, wie sie nach einer Zustandsänderung aussehen wird.
  • Diese Verwirrung könnte ein Problem des „Flat UI“-Designs sein, bei dem Gestaltungselemente ohne Bezug zur realen Welt verstanden werden müssen.

• Inkonsistente Toggle-Buttons in der Tesla-Fahrzeug-UI

  • Die Schaltflächen des HVAC-Systems reagieren je nach Art und Dauer der Berührung unterschiedlich.
  • Wenn man während der Fahrt nur kurz auf den Bildschirm schauen kann, können kleine Touch-Fehler zu unbeabsichtigten Bedienungen führen.
  • Teslas Bluetooth-Verbindungs-UI ist sehr verwirrend gestaltet, was während der Fahrt noch problematischer ist.

• Der Mechanismus zur Zustandsrückmeldung bei NASA-Drucktastern

  • Wenn der Schalter aus ist, sind alle Lichter aus; beim Drücken des Schalters geht ein gelbes Licht an, und wenn das gewünschte Gerät tatsächlich eingeschaltet ist, geht das gelbe Licht aus und ein grünes Licht an.
  • Das liefert sowohl eine Bestätigung des Tastendrucks als auch eine Bestätigung der tatsächlichen Ausführung.

• Bedauern über das Verschwinden von Checkboxen

  • Checkboxen waren perfekt und unmissverständlich, wurden von Smartphone-Designern aber nicht bevorzugt.

• Verwirrendes Design der Tesla-Dashboard-Screen-UI

  • Eine mit „Open“ beschriftete Anzeige macht zwar klar, dass der betreffende Teil geöffnet ist, aber Nutzer können nicht erkennen, dass es sich tatsächlich um eine Schaltfläche zum Öffnen des Bauteils handelt.

• Probleme von Toggle-Buttons und mögliche Lösungen

  • Toggle-Buttons vereinen den Systemzustand und die Aktion zu seiner Änderung in einem Element, was verwirrend sein kann.
  • Ein angezeigtes „ON“ kann als aktueller Zustand in Wirklichkeit die Aktion bedeuten, auf „OFF“ umzuschalten.
  • Die Lösung besteht darin, Zustand und Aktion zu trennen, etwa durch Beschriftungen außerhalb der Schaltfläche oder indem das Icon gleich bleibt und andere Eigenschaften der Schaltfläche verändert werden.

• Das Asynchronitätsproblem von Toggle-Buttons

  • Nach dem Drücken einer Schaltfläche ändert sich der Systemzustand möglicherweise nicht sofort, sodass man mehrmals drücken muss, um den gewünschten Zustand sicher zu erreichen.
  • Gibt es für jeden Zustand eine eigene Schaltfläche, ist mehrfaches Drücken unproblematisch.

• Vorteile von Apples Slider-Toggle-Design

  • Apples Slider-Toggle zeigt sowohl den aktuellen Zustand als auch den Zustand nach der Änderung klar an.
  • Aktivierte Funktionen werden durch einen blauen Hintergrund, deaktivierte Funktionen durch einen grauen Hintergrund unterschieden.

• Notwendigkeit einer klaren Anzeige von aktuellem und geändertem Zustand bei Toggle-Buttons

  • Es muss klar sein, was der aktuelle Zustand ist und in welchen Zustand der Toggle beim Umschalten wechselt.
  • Die Wiedergabe/Pause-Schaltfläche folgt physischen Vorbildern, und weil klar ist, ob Medien abgespielt werden oder nicht, verstehen Nutzer sie auch dann, wenn sich das Symbol nicht ändert.
  • Die Farbe eines Toggles leicht zu verändern hilft nicht viel; es braucht eine Beschriftung.