5 UX Tipps Toggle Buttons richtig zu verwenden, damit sie verstanden werden

Wenn es um den Einsatz von Toggle Buttons geht, gibt es sehr viele, teilweise sehr unterschiedliche Meinungen und Vorlieben. Meistens streiten sich hier Menschen mit verschiedenen Erfahrungen und Vorlieben. Daher muss erstmal erschloßen werden, wer der Nutzer ist, welche Apps und Software er nutzt und wie gut er mit speziellen Elementen wie den Toggle Buttons zurecht kommt.

Was sind Toggle Buttons?

Ein Toggle Button ist ein digitaler An- und Aus- Schalter. Der Nutzer sieht den aktuellen Status und wählt durch Betätigen des Buttons den anderen Zustand aus. Die Zustände schließen sich aus.

Wo werden Toggle Buttons eingesetzt?

Herkömmlich wurden Toggle Buttons stets in der Hadware verwendet, um Dinge an- oder auszuschalten. Sie haben gut funktioniert, solange ihr Feedback unmittelbar durch das Betätigen sichtbar wurde. Beispiel: Licht in einem Raum, indem man sich befindet, anzuschalten. Sobald das Feedback nicht direkt sichtbar war (z.B. wenn sich zwischen dem Lichtschalter und dem betroffenen Raum eine geschlossene Tür befindet) war weder der Status des Schalters noch der Status des Lichts “ersichtlich”. Ist im betroffenen Raum das Licht ausgegangen, könnte ein lautes “Eyyyy, besetzt!” das erforderliche Feedback gebracht haben.

Später wurden sie gerne in Smartphones eingesetzt. Ihre Beliebtheit verdanken sie u.a. dadurch, dass sie platzsparend eingesetzt werden können weil durch ein Toggle direkt zwei Optionen mit nur einem Element angeboten werden kann. Auch entsteht ein optisch abgeschloßenes Bild, wenn auf der linken Seite das Wort steht und rechts der Togglebutton (was bei Checkboxen zu einem Flattersatz führt).

Die 7 Richtlinien für gute Toggle Buttons

1. Muss es das Toggle Button Element sein?

Der Toggle Button gehört nicht zu den intuitiven UI Elementen. Meistens können Checkboxen genauso gut für den Zweck geeignet sein. Wenn Sie unsicher sind, skizzieren Sie zunächst die verschiedenen Möglichkeiten (Toggle Button, Radio Buttons, Checkboxes) auf, um besser abzuwägen zu können, welches Element die höchste Eindeutigkeit in Ihrer Interaktion aufweist.

Eine kurze Übersicht zu den Unterschieden

Toggle ButtonRadio Buttoneinzelne Checkboxmehrere Checkboxen
wieviele Auswahlmöglichkeiten sind vorhanden?min. 1, max 1min. 1, max. 1min. 0, max. 1min. 0, max. mehrere
wieviele Optionen stehen zur Verfügung?2 (an/aus)
min. 1 von mehreren0 bis 10 bis mehrere
gibt es einen Default-Modus?jajaneinnein
wie können die Auswahlmöglichkeiten beschrieben werden?schließen sich gegenseitig ausunabhängig voneinander, nicht kombinierbarkann man auswählen, muss man aber nichtunabhängig voneinander, kombinierbar




2. Die Farben grün und grau haben sich bewährt

Der Toggle Button muss einen aktiven und inaktiven Zustand haben. Hier eignen sich graue (aber nicht ausgegraute, nicht verfügbare) Farben. Der aktive Zustand muss sich auf jeden Fall farblich zum Grau abheben. Im europäischen Raum ist die Farbe Grün gängig, wahrscheinlich weil in diesen Kulturkreisen ein Ampelsignal assoziiert wird. Meiden Sie daher andere Farben, um nicht erklären zu müssen, was die Toggle Funktion bewirkt bzw. bewirken soll.

3. Bei Betätigung das Feedback erhöhen

Ein angeschalteter Zustand muss nicht nur im Button selbst bemerkbar machen, sondern zeigt seine Auswirkung auch im restlichen Interface oder der Umgebung. Dies erhöht die Eindeutigkeit, sollte der Nutzer nicht zuordnen können, ob der Button den aktuellen Status oder die aktuelle Option aufzeigt. Verändert sich durch den Toggle Button etwas an einem anderem Ort, fügen Sie eine Beschreibung unter die Option ein.  

4. An- oder ausschalten

Benutzen Sie Schlüßelworte und bennen Sie die Option nach dem Objekt was an- oder ausgeschaltet werden sollte. Verwenden sie beim Einsatz solcher Toggle Buttons das mentale Modell eines Lichtschalters. Bsp: Licht (an- oder ausschalten), Signal (an- oder ausschalten), Gerät (an- oder ausschalten), Modus (an- oder ausschalten)

Sobald das Schlüßelwort alleine nicht eindeutig genug ist und Sie ein Verb einsetzen möchten oder wenn die Funktion erklärt werden muss, sollten Sie überlegen, ob hier ein Toggle Button das Richtige ist. Denn das Verb sollte lauten “anschalten” oder “ausschalten” ohne es hinschreiben zu müssen. Checkboxen oder Radio Buttons können eine bessere Alternative darstellen.

Sollten Sie um einen Verb nicht rum kommen, weil z.B. die Styleguidelines dies nicht zulassen, denken Sie sich trotzdem noch das Verb “anschalten” oder “ausschalten” hinter die gewählte Formulierung. Funktioniert die Aussage dann noch insgesamt?

5. Negative Formulierungen vermeiden

Verzichten Sie unbedingt auf negative Formulierungen wie “nicht”, “nie”, “weg”, “keine” etc. weil damit eine doppelte Verneinung entsteht, wenn der Toggle ausgeschaltet werden muss. Bitte vermeiden Sie auch “an” oder “aus” hinter den Schlüßelbegriff zu setzen. Dies führt schnell zum “mentalen Knoten” in den Denkprozessen ihrer Nutzer.

Beispiele für schlecht Formulierungen:

Limitationen von Toggle Buttons

Aufgrund ihres platzsparenden und angesagtem Designs finden Toggle Buttons viele Liebhaber. Sie haben ein modernes Erscheinungsbild, sind aber aus der Usability Perspektive eher schwierig. Warum eigentlich? Im digitalen erlernte der Mensch, dass das worauf er klickt ihn auch dorthin führen würde. Wenn er den Navigationspunkt “Kontakt” anklickt, erwartet er auch Kontaktdaten angezeigt zu bekommen. Sobald der Navigationspunkt “Kontakt” geklickt ist, kann er nicht nochmal geklickt werden, weil er bereits ausgewählt ist. Bei Toggle Buttons ist das genau umgekehrt. Sie stellen ihren aktuellen Zustand dar und ändern diesen, sobald sie angeklickt werden, ins Gegenteil. Das erfüllt nicht die Erwartung des Nutzers.


Nutzerstudien

Eine Studie {1} aus dem Jahr 1992 untersuchte verschiedene Toggle Buttons. Das Ergebnis kommt den heutigen Toggle Buttons sehr nahe: Der Status des Toggle Option wird nur durch Wort und Farbe angezeigt. Ist die Option an, steht mit schwarzer Schrift “on” auf dem Feld und der Hintergrund des Felds ist Gelb (“als würde er leuchten”). Wenn User den Button betätigen, wird die Hintergrundfarbe Dunkelgrau und zeigt “Off” in Hellgrau an. Auch hier weisen die Autoren darauf hin, dass ein Toggle Button für manche Benutzer zunächst nicht als eine Option sondern viel mehr nur als Status erkennbar sein könnte. Eine von den Autoren empfohlene Alternative dazu bildet ein Toggle Button, der wie ein beschrifteter und gekippter Schalter aussieht.

In einer für unseren Kunden durchgeführten Studie hatten wir ein Aha-Erlebnis. Dies diente uns als gutes Beispiel, warum man sich das mit den Toggle Buttons gut überlegen sollte.

Das Projekt handelte von einer Software, in der Toggle Buttons eingesetzt wurden. Die Zielgruppe waren größenteils Nutzer im Alter von 50-65 Jahren. Hier konnten wir wunderbar beobachten, was passiert, wenn man Dinge aus der realen Welt ins digitale einfach überträgt. Einige Personen dieser Zielgruppe haben den Toggle Button mit der Maus geschoben. Und das auf dem Touchpad ihres Laptops (siehe Bild), wo Klick- und Mausbewegungs-bereich getrennt bedient werden müssen. Das bedeutet: sie klickten die linke obere Mauspad Taste, hielten diese fest und gleichzeitig bewegten sie den Toggle auf dem Mauspad mit der anderen Hand gerade nach rechts. Sie sind nicht einmal auf die Idee gekommen, dort nur einmal hinzuklicken. Sie dachten wirklich, sie müssen ihn schieben.  Und das alles in einer Situation, in der sie viel sprechen müssen. Darüber hinaus berichteten einige dieser User, ihnen sei unklar, ob nun die Option auswählbar oder bereits ausgewählt ist, wenn der Switch leuchtet.

Fazit

Toggle Buttons sind nicht besonders intuitiv bis hin zu verwirrend. Es ist natürlich von der anvisierten Nutzergruppe abhängig zu machen, ob man sie benutzen kann oder nicht. Versuchen Sie sie nicht als erste Option heran zu ziehen und wägen sie die anderen Möglichkeiten gegeneinander ab. Wenn Sie einen Toggle Button benutzen müssen, stellen Sie bitte sicher, dass dieser so wenig Interpretationsspielraum bei ihrer Nutzergruppe bietet wie nur möglich.

Dieser Artikel soll Ihnen helfen, die bessere Entscheidung zu treffen, um anfängliche Prototypen zu generieren, die die Eindeutigkeit von Toggle Buttons erhöhen und den Interpretationsspielraum verringern. Bitte testen Sie immer ihre Entwürfe, um der idealen Lösung näher zu kommen, da sich Nutzergruppen aufgrund ihrer Erfahrung und dem Anwendungskontext unterscheiden. Leider liegen uns hier keine aktuellen Studien vor. Wenn man Foren durchforstet und Kollegen fragt, merkt man, dass es hier auch keine Übereinstimmung gibt. Daher überlegen wir eine Studie dazu durchzuführen.

Ihre Meinung zu Toggle Buttons

Haben Sie Erfahrungen mit Toggle Buttons? Oder kennen Sie gute und schlechte Toggle Button Verwendungen? Aus Nutzer- oder Entwickler-Sicht? Wir freuen uns über Ihre Meinung und Bilder zu dem Thema.

Vertiefende Themen-Links

{1} erwähnte Studie (englisch) http://www.cs.umd.edu/hcil/trs/90-08/90-08.pdf

Forumsdiskussion zu Toggle Button States (englisch) https://ux.stackexchange.com/questions/1318/should-a-toggle-button-show-its-current-state-or-the-state-to-which-it-will-chan

Beitrag der NNG über Toggle Switches (englisch)https://www.nngroup.com/articles/toggle-switch-guidelines/