Umschalter sind Steuerelemente einer grafischen Benutzeroberfläche (GUI). Hauptsächlich dienen sie dazu, zwei Zustände („an“ und „aus“) abzubilden. Es existieren allerdings auch Implementierungen mit einem zusätzlichen neutralen Zustand.

Umschalter sind eng verwandt mit Kontrollkästchen. Bei Kontrollkästchen hat deren Betätigung in der Regel keine unmittelbare Auswirkung auf das Verhalten der Anwendung. Wirksam wird die Zustandsänderung in der Regel erst durch die Betätigung einer Schaltfläche (z. B. „OK“, „Übernehmen“ oder „Speichern“).

Im Wesentlichen existieren zwei weit verbreitete Arten von Umschaltern:

• Umschalter, Toggle Switch oder einfach nur Schalter bzw. Switch:
  Dieses Steuerelement ist das Äquivalent zu physischen Kipp- oder Wippschaltern. Diese Art von Steuerelement setzte sich erst durch die Verbreitung von Touchscreens und mobilen Endgeräten durch. Dort werden sie insbesondere zur Änderung von Einstellungen verwendet. Auch unter modernen Desktopbetriebssystemen wie beispielsweise Windows 10 oder 11 werden sie inzwischen an vielen Stellen eingesetzt.
• Umschaltfläche auch Toggle Button oder selten Flip-Flop-Button:
  Bei dieser Variante handelt es sich um eine Schaltfläche, deren Zustandsänderung nach dem Anklicken erhalten bleibt. Umschaltflächen waren bereits in sehr alten Komponenten-Frameworks und Betriebssystemen mit einer grafischen Benutzeroberfläche enthalten. Abgesehen von Schaltern in Symbolleisten, oder Menüs, werden diese in modernen Anwendungen allerdings kaum noch verwendet.

Beide Arten von Schaltern eignen sich zur digitalen Echtzeitsteuerung von technischen Anlagen. Im privaten Bereich lassen sich im Smart Home beispielsweise Lampen, Steckdosen oder Sicherheitssysteme aktivieren oder deaktivieren. Verfügt ein Gerät über mehrere Intensitätsstufen (z. B. die Helligkeit von dimmbaren Lampen oder die Richttemperatur von Klimaanlagen), eignen sich Schieberegler besser.

Erscheinungsbild

Zweidimensionale Schalter für Touchscreens wurden bereits Anfang der 1990er Jahre bezüglich deren Gestaltung, Handhabung und psychologischer Auswirkungen untersucht. Die wichtigsten Aspekte sind dabei:

• Den Nutzern muss der aktuelle Zustand des Schalters klar ersichtlich sein.
• Den Nutzern muss klar sein, dass sie den Zustand durch eine Eingabe verändern können.
• Den Nutzern muss eine sichtbare Rückmeldung nach der Zustandsänderung gegeben werden.

Um die ersten beiden Kriterien zu erfüllen, sollte die Darstellung minimalistisch, aber aussagekräftig sein.

Bei Umschaltern werden die beiden Zustände „an“ und „aus“ durch die beiden Enden des Schalters repräsentiert. Für einige GUI-Frameworks existieren allerdings auch Implementierungen mit einem zusätzlichen neutralen Zustand. Der neutrale Zustand wird in diesem Fall durch die Mittelposition repräsentiert.

Bei Umschaltflächen wirken sich Zustandsänderungen auf die Art der Umrandung, die Farbgestaltung und den Dargestellten Inhalt aus. Beispielsweise kann ein klassischer Schalter mit 3D-Effekt zwischen den beiden Zuständen „erhoben“ (aus) und „vertieft“ (an) wechseln.

Für Symbolleisten und Menüs können einzelne Schaltflächen bzw. Menüeinträge als Schalter definiert werden. Zustandsänderungen dieser Elemente wirken sich auch hier direkt auf das Erscheinungsbild und Verhalten der Anwendung aus. Ein häufiges Beispiel stellen Umschaltflächen in Symbolleisten zur Formatierung von Textabschnitten („Fett“, „Kursiv“ und „Unterstrichen“) dar. Die Betätigung einer dieser Schaltflächen hat unmittelbare Auswirkungen auf den gerade markierten Text. Umgekehrt wird der dargestellte Zustand der Schaltfläche von dem gerade markierten Text beeinflusst.

Die zunehmende Verbreitung von Touchscreens und mobilen Endgeräten führten in den letzten Jahren zu einem Paradigmenwechsel bezüglich der Gestaltung und dem Verhalten von grafischen Benutzeroberflächen. Die klassischen Standardschaltflächen „OK“, „Übernehmen“ und „Abbrechen“ wurden in Dialogfenstern teilweise abgeschafft, da die einzelnen Einstellungen sofort bei einer Zustandsänderung (durch den Benutzer) umgesetzt werden. Eine explizite Bestätigung der Modifikationen ist in diesem Fall überflüssig. Unter Windows wird dieses Prinzip vor allem in UWP-Apps umgesetzt.

Alternativen

Die häufigste Alternative zu Schaltern stellen Kontrollkästchen dar. Im Gegensatz zu Schaltern, sind Kontrollkästchen praktisch in sämtlichen Betriebssystemen mit einer grafischen Benutzeroberfläche nativ implementiert. Sie existierten bereits zu Zeiten der zeichenorientierten Benutzeroberflächen (TUI). Von der Funktionsweise her sind beide Steuerelemente sehr ähnlich. Der Unterschied beruht hauptsächlich auf dem Zeitpunkt, zu dem sich die Zustandsänderung des Steuerelements auf die Anwendung auswirkt.

Obwohl die Richtlinien der meisten namhaften Anbieter (darunter auch Microsoft, Apple und Google) für die Gestaltung von grafischen Benutzeroberflächen den Unterschied zwischen Schaltern und Kontrollkästchen explizit hervorheben, halten sich nicht alle Softwareentwickler daran.

Ebenso ist es möglich, pro Anwendungsfall, eine Gruppe aus zwei Optionsfeldern ( an | aus) anzubieten. Sehr selten trifft man auch auf Kombinationsfelder mit zwei oder drei Einträgen für die Zustände: „Standard“, „Aktiviert“ und „Deaktiviert“.

Schieberegler sollten nicht für binäre Werte verwendet werden.

Implementierungen

Umschalter sind Steuerelemente, die vor allem durch Anwendungen für mobile Endgeräte und Touchscreens in den letzten Jahren weit verbreitet wurden. Ein Großteil der modernen Betriebssysteme und Komponenten-Frameworks enthalten Umschalter.

unit MainUnit;

interface

//Erforderliche Bibliotheken einbinden.
uses
  System.Classes,
  Vcl.Forms,
  Vcl.Controls,
  Vcl.WinXCtrls,
  Vcl.Themes;

//Hauptfenster und dessen Bestandteile deklarieren.
type
  TMainForm = class(TForm)
    StyleSwitch: TToggleSwitch;
    procedure StyleSwitchClick(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure UpdateStyle;
  end;

//Eine Instanz des Hauptfensters deklarieren.
var
  MainForm: TMainForm;

implementation

{$R *.dfm}

procedure TMainForm.FormCreate(Sender: TObject);
begin
  //Schalterposition auf "aus" setzen.
  StyleSwitch.State := tssOff;
  UpdateStyle;
end;

procedure TMainForm.StyleSwitchClick(Sender: TObject);
begin
  //Wenn die Schalterposition geändert wird,
  //soll das Design entsprechend geändert werden.
  UpdateStyle;
end;

procedure TMainForm.UpdateStyle;
begin
  //Design in Abhängigkeit der Schalterposition setzen.
  if StyleSwitch.State = tssOn then
  begin
    //Dunkles Design verwenden.
    TStyleManager.TrySetStyle('Obsidian', true);
  end
  else
  begin
    //Helles Design verwenden.
    TStyleManager.TrySetStyle('Luna', true);
  end;
end;

end.

Einzelnachweise

1. 1 2 Jim Walker, Theano Petersen: Microsoft Docs > Windows App Entwicklung > Umschalter. Microsoft, 16. April 2022, abgerufen am 13. Mai 2022. 
2. 1 2 Anthony Tseng: When to Use a Switch or Checkbox. UX Movement, 3. August 2016, abgerufen am 4. März 2022 (englisch). 
3. 1 2 Anthony Tseng: Stop Misusing Toggle Switches. UX Movement, 5. August 2019, abgerufen am 4. März 2022 (englisch). 
4. 1 2 Microsoft Docs > Windows App Development > Windows Runtime API > ToggleSwitch Class. Microsoft, abgerufen am 3. April 2022 (englisch). 
5. ↑ Microsoft Docs > Xamarin > Schieberegler, Schalter und segmentierte Steuerelemente in Xamarin.iOS. Microsoft, 10. Mai 2022, abgerufen am 13. Mai 2022. 
6. 1 2 Android Developers > Docs > Reference > Switch. Google Developers, 17. März 2022, abgerufen am 5. April 2022 (englisch). 
7. ↑ Microsoft Docs > Office-Add-Ins > Umschaltfläche-Steuerelement. Microsoft, 11. April 2022, abgerufen am 13. Mai 2022. 
8. 1 2 Android Developers > Docs > Reference > ToggleButton. Google Developers, 17. März 2022, abgerufen am 5. April 2022 (englisch). 
9. ↑ Alan Cooper, Robert Reimann, David Cronin: About Face 3: The Essentials of Interaction Design. Wiley Publishing, Indianapolis 2007, ISBN 978-0-470-08411-3, S. 445 (englisch, 610 S., WordPress [PDF; 6,2 MB; abgerufen am 8. April 2022]). 
10. ↑ Catherine Plaisant, Daniel Wallace: Touchscreen toggle switches: push or slide? Design issues and usability study. (PDF) Human-Computer Interaction Laboratory, University of Maryland, November 1990, abgerufen am 3. April 2022 (englisch). 
11. ↑ Anthony Tseng: The Confusing State of Toggle Switches. UX Movement, 25. Juli 2019, abgerufen am 4. März 2022 (englisch). 
12. ↑ Hongyu Guo, Amjad Nusayr, Wen-Chen Hu: Analysis and Resolution of Semantic Ambiguity of Toggle Buttons by Standardizing the Design in Software GUI and Mobile Apps. In: International Journal of Handheld Computing Research (IJHCR). Band 8, Nr. 2. IGI Global, 2017, ISSN 1947-9158, S. 1–18, doi:10.4018/IJHCR.2017040101. 
13. ↑ Human Interface Guidelines > Switches. Apple, abgerufen am 4. April 2022 (englisch). 
14. ↑ Jim Walker, Theano Petersen: Microsoft Docs > Windows App Development > Toggle Switches. Microsoft, 4. Oktober 2021, abgerufen am 4. April 2022 (englisch). 
15. ↑ Microsoft Docs > Sliders (UWP). Microsoft, abgerufen am 10. Januar 2022 (englisch). 
16. ↑ Jim Walker, Drew Batchelor, David Coulter, John Kennedy, Mike Jacobs, Michael Satran: Button Control Reference > Button Styles. Microsoft, 22. März 2021, abgerufen am 4. März 2022 (englisch). 
17. ↑ Microsoft Docs > Xamarin.Forms > Switch Class. Microsoft, abgerufen am 3. April 2022 (englisch). 
18. ↑ Brook Durant: Fluent UI Web Components > fluent-switch. Microsoft, 1. November 2021, abgerufen am 4. April 2022 (englisch). 
19. ↑ BootsFaces > Switch. Abgerufen am 24. März 2022 (englisch). 
20. ↑ PrimeFaces > ToggleSwitch. Abgerufen am 24. Januar 2022 (englisch). 
21. ↑ Android Developers > Docs > Reference > CompoundButton. Google Developers, 17. März 2022, abgerufen am 5. April 2022 (englisch). 
22. ↑ Documentation > AppKit > Views and Controls > NSSwitch. Apple, abgerufen am 29. März 2022 (englisch). 
23. ↑ Documentation > UIKit > Views and Controls > UISwitch. Apple, abgerufen am 31. März 2022 (englisch). 
24. ↑ CSS Toggle Switch With Text. Tutorials Tonight, abgerufen am 30. März 2022 (englisch). 
25. ↑ How To > Toggle Switch. W3Schools, abgerufen am 30. März 2022 (englisch).