Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Toggle

Definition: Ein Toggle (auch: Toggle Switch, Switch, On/Off-Switch) ist ein UI-Steuerelement das eine binäre Einstellung zwischen zwei Zuständen – ein und aus – schaltet; dem physischen Lichtschalter nachempfunden; die Schiebe-Mechanik (Thumb bewegt sich von links nach rechts) kommuniziert den Zustandswechsel intuitiv. Toggle-Charakteristika: Sofortige Wirkung (ohne Formular-Submit-Button); der Zustandswechsel ist unmittelbar und reversibel; visueller Zustand kommuniziert aktuellen Status (Position des Thumbs + Hintergrundfarbe); Label beschreibt die Funktion/Einstellung nicht den Zustand selbst. Toggle vs. Checkbox: Toggle = sofortige Wirkung; für System-Einstellungen; für Ein/Aus-Zustände die unmittelbar aktiv werden; einzeln verwendet; Checkbox = Auswahl in einem Formular das erst durch Submit abgeschickt wird; für mehrstufige Formular-Felder; kann mehrere gleichwertige Optionen enthalten; Luke Wroblewski (Mountain View; CA; lukeW.com; «Web Form Design», Rosenfeld Media, 2008) formulierte die Grundregel: «Use a toggle switch if the options are yes/no or on/off, use checkboxes if the options are independent choices that are saved as a whole.» Toggle-Zustands-Visualisierung: Position (links = aus; rechts = ein; linguistisch-kulturell für LTR-Layouts); Hintergrundfarbe (grau/neutral = aus; Primärfarbe/grün = ein); Thumb-Position als sekundärer Signifier; optionale Textlabels «AN»/«AUS» auf dem Track für Farb-unabhängige Erkennung (wichtig für Farbenblindheit); Mindest-Touch-Target: 44×44pt nach Apple HIG; Toggle-Spur und Thumb zusammen.

Erläuterung

Das moderne Toggle-Switch-Pattern in digitalen Interfaces ist maßgeblich durch iOS geprägt: Loren Brichter (Apple; Cupertino; CA; später Autor von Tweetie das zu Twitter für iOS wurde) und das iPhone-OS-Designteam unter Scott Forstall (Apple Senior VP iOS Software) führten den Toggle Switch mit iPhone OS 2.0 (11. Juli 2008; erste Version mit Settings-App) als UISwitch-Komponente ein; das physisch-analoge Schiebeschalter-Design (Skeuomorphismus) kommunizierte intuitiv Ein/Aus-Zustände auf einem Touch-Interface; UISwitch wurde zur Standard-Komponente in iOS-Settings-Apps und definierte das visuelle Vokabular für Toggles weltweit. Jony Ive (Apple; Cupertino; CA; Senior Vice President of Design) flachte das Design mit iOS 7 (18. September 2013) ab: der UISwitch verlor seine 3D-Erscheinung (Glanzeffekte; Texturen) wurde aber als funktionaler Pattern beibehalten; Farbe (grün für aktiv; grau für inaktiv) + Position als Dual-Signifier blieben erhalten. Luke Wroblewski (damals Yahoo; dann Google; Principal Designer) analysierte Form-Design-Patterns systematisch in «Web Form Design: Filling in the Blanks» (Rosenfeld Media; 2008) und «Designing Mobile Web Forms» (A List Apart; 2010): Wroblewski identifizierte den fundamentalen UX-Unterschied zwischen Toggle und Checkbox: Nutzer assoziieren Toggle mit «Lichtschalter» – sofortige Wirkung; «Ich drücke; es passiert»; Checkbox assoziieren Nutzer mit «ich bestätige; submit notwendig»; wenn ein Toggle ohne sofortige Wirkung verwendet wird (erst nach Formular-Submit) bricht dies mentale Modelle und erzeugt Verwirrung. Die WAI-ARIA Spezifikation (W3C WAI; ARIA 1.0 März 2014; ARIA 1.2 Juni 2023) definiert role=«switch» als semantische Rolle für Toggle-Controls: role=«switch» + aria-checked=«true/false» kommuniziert Screen-Readern den binären Zustand; Screen-Reader kündigt Zustandsänderung an wenn aria-checked sich ändert; HTML-Implementierung ohne native <input type=«checkbox»>: <button role=«switch» aria-checked=«false» id=«notifications-toggle»> mit JavaScript-Handler der aria-checked toggled; alternative native Implementierung: <input type=«checkbox» role=«switch»> – Chrome/Firefox unterstützen role=«switch» auf Checkbox-Element; Tastatur-Bedienung: Space-Taste toggled Zustand; Enter activates (wie Button); Matías Duarte und das Material-Design-Team (Google; Mountain View; CA; Material Design 2014; M3 2021) nannten das Pattern in Material Design «Switch» (nicht «Toggle»): M3-Switch hat erweiterte Varianten: Switch ohne Icon; Switch mit On-Icon; Switch mit Off-Icon; Switch mit beiden Icons; der Material-Design-Switch entspricht UISwitch-Funktionalität mit Google-Designsprache; 48×48dp Touch-Target.

Toggle-Design, Label-Formulierung und Accessibility

Toggle-Anwendungsfälle und Anti-Patterns

Praxistipp: Zwei Regeln die Sie für jeden Toggle prüfen sollten: (1) Passiert nach dem Umschalten sofort etwas? Wenn ja: Toggle richtig. Wenn nein (erst nach Submit): Checkbox nehmen. (2) Kommuniziert Ihr Toggle seinen Zustand ohne Farbe? Prüfen Sie durch Graustufen-Screenshot (Chrome DevTools: Rendering → Emulate Vision Deficiencies → Achromatopsia): ist noch erkennbar ob der Toggle an oder aus ist? Wenn nicht: Position des Thumbs allein muss ausreichen – und optional: «AN»/«AUS»-Textlabel auf der Track hinzufügen. Das Label daneben sollte die aktivierte Funktion beschreiben («Dark Mode»; «E-Mails empfangen») – nicht eine Frage stellen («Dark Mode aktivieren?»).