Umschalter (Steuerelement)

Umschalter sind Steuerelemente einer grafischen Benutzeroberfläche (GUI). Hauptsächlich dienen sie dazu, zwei Zustände („an“ und „aus“) abzubilden.^[1] 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“).^[2][3]

Im Wesentlichen existieren zwei weit verbreitete Arten von Umschaltern:

• Umschalter^[1], Toggle Switch^[4] oder einfach nur Schalter^[5] bzw. Switch^[6]:
  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^[7] auch Toggle Button^[8] oder selten Flip-Flop-Button^[9]:
  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[Bearbeiten | Quelltext bearbeiten]

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:^[10]

• 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.^[11]

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.^[12] 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[Bearbeiten | Quelltext bearbeiten]

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.^[2][3]

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^[13][14], 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.^[15]

Implementierungen[Bearbeiten | Quelltext bearbeiten]

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.

Microsoft Windows (Systemkomponente)[Bearbeiten | Quelltext bearbeiten]

Unter Windows können Kontrollkästchen über den Fensterstil BS_PUSHLIKE als versenkbare Schaltfläche (Toggle Button) dargestellt werden^[16], allerdings gibt es keine native Repräsentation als Umschalter (Toggle Switch). Um diese Lücke zu schließen, gibt es jedoch entsprechende ActiveX-Komponenten von Drittanbietern. Zudem besteht unter Windows die Möglichkeit, über das sogenannte Owner-Draw-Prinzip, die Oberfläche eines Kontrollkästchen selbst (in Form eines Schiebeschalters) zu zeichnen.

Microsoft .NET[Bearbeiten | Quelltext bearbeiten]

Windows Forms[Bearbeiten | Quelltext bearbeiten]

Für Windows Forms existiert keine Komponente, die einen Umschalter darstellt. Es können jedoch Kontrollkästchen als versenkbare Schaltfläche dargestellt werden. Intern wird dabei die Systemkomponente und deren Verhalten genutzt. Deshalb kann auch hier das Owner-Draw-Prinzip bei Bedarf genutzt werden, um die optische Darstellung zu verbessern. Von Drittanbietern existieren diverse Implementierungen von Schaltern. Ebenso können ActiveX-Komponenten von Drittanbietern auch in Windows Forms Anwendungen mit Hilfe eine Wrapper-Klasse eingebunden werden. Unter Visual Studio existiert ein Assistent, der eine solche Wrapper-Klasse automatisch erstellen kann.

Windows Presentation Foundation (WPF)[Bearbeiten | Quelltext bearbeiten]

Für WPF existiert keine native Implementierung, allerdings gibt es auch hier viele kommerzielle und freie Implementierungen von Drittanbietern.

Universal Windows Platform (UWP)[Bearbeiten | Quelltext bearbeiten]

Für UWP-Apps existiert die Komponente Windows.UI.Xaml.Controls.ToggleSwitch.^[4]

Xamarin[Bearbeiten | Quelltext bearbeiten]

Auch Xamarin stellt Entwicklern ein Steuerelement für Schalter an, nämlich die Komponente Xamarin.Forms.Switch.^[17]

Microsoft Fluent UI Web Components[Bearbeiten | Quelltext bearbeiten]

In der Komponentenbibliothek Microsoft Fluent UI Web Components sind Schalter ebenfalls von Haus aus enthalten.^[18]

Embarcadero Delphi und C++[Bearbeiten | Quelltext bearbeiten]

Visual Component Library (VCL)[Bearbeiten | Quelltext bearbeiten]

Die Visual Component Library von Embarcadero Technologies enthält für die integrierten Entwicklungsumgebungen (IDE) bzw. Programmiersprachen Embarcadero Delphi und C++Builder die Klasse Vcl.WinXCtrls.TToggleSwitch. Für eigene Implementierungen existiert die Basisklasse Vcl.WinXCtrls.TCustomToggleSwitch.

Ein sehr häufiger Anwendungsfall für Umschalter ist das Aktivieren oder Deaktivieren des dunklen Modus auf Webseiten oder in (mobilen) Anwendungen. Das folgende Beispiel ändert das Design einer Anwendung in Abhängigkeit der Position eines Schalters.

Gegeben sei eine Delphi 10.2 VCL-Anwendung mit einem Formular der Basisklasse Vcl.Forms.TForm namens „MainForm“. Auf dem Formular befindet sich eine Instanz der Klasse Vcl.WinXCtrls.TToggleSwitch namens „StyleSwitch“. Ist dieser Schalter eingeschaltet, nutzt die Anwendung das dunkle Design „Obsidian“, ansonsten wird standardmäßig das helle Design „Luna“ verwendet. Beide Designs sind im Lieferumfang von Delphi standardmäßig enthalten.

Gemäß der Intention von Schaltern, hat die Betätigung dieses Schalters unmittelbare Auswirkungen auf das Erscheinungsbild der Anwendung.

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. 

FireMonkey (FMX)[Bearbeiten | Quelltext bearbeiten]

Für plattformübergreifende Anwendungen existiert die FireMonkey-Komponente FMX.StdCtrls.TSwitch. Für eigene Implementierungen existiert die Basisklasse FMX.StdCtrls.TCustomSwitch.

Java[Bearbeiten | Quelltext bearbeiten]

Java Swing[Bearbeiten | Quelltext bearbeiten]

Unter Java Swing existiert die Komponente javax.swing.JToggleButton. Diese kann über den Look and Feel Mechanismus an das Design des Betriebssystems angepasst werden. Umschalter sind zwar nicht enthalten, allerdings kann (ähnlich wie unter Windows) die Oberfläche selbst gezeichnet werden – beispielsweise in Form eines Schalters. Dies geschieht über die Methode „paintComponent“, die unter Swing für jede Komponente bereitgestellt wird und von Entwicklern bei Bedarf überschrieben werden kann.

JavaFX[Bearbeiten | Quelltext bearbeiten]

In JavaFX existieren nur Toggle Buttons, die allerdings so formatiert werden können, dass sie wie ein Schalter aussehen. Die Funktion selbst ist in jedem Fall ohnehin identisch. Es gibt aber auch Frameworks von Drittanbietern, die Schalter als eigenständiges Steuerelement bereitstellen. Ein Beispiel dafür ist die weit verbreitete Open Source Komponentenbibliothek ControllsFX.

JavaServer Faces (JSF)[Bearbeiten | Quelltext bearbeiten]

Manche Komponenten-Frameworks für JavaServer Faces beinhalten Schalter. Dazu zählen unter anderem BootsFaces^[19] und PrimeFaces^[20].

Android[Bearbeiten | Quelltext bearbeiten]

Unter Android leiten sich Umschalter (android.widget.Switch)^[6] und Umschaltflächen (android.widget.ToggleButton)^[8] von der abstrakten Klasse android.widget.CompoundButton ab und sind bezüglich ihrer Kernfunktion identisch.^[21] Beide Komponenten unterscheiden sich praktisch nur in der visuellen Darstellung. Während Umschaltflächen bereits seit der ersten Version von Android enthalten sind, stehen Umschalter erst seit Android Ice Cream Sandwich (API Level 14) zur Verfügung.

Apple macOS und iOS[Bearbeiten | Quelltext bearbeiten]

Für macOS wird die Komponente NSSwitch angeboten.^[22] Eine Besonderheit dieser Implementierung besteht darin, dass nicht nur der boolesche Wert des Schalters abgefragt werden kann, sondern auch dessen aktuelle Position während der Betätigung. Das ermöglicht beispielsweise sanfte Übergänge zwischen optischen Veränderungen an der Benutzeroberfläche. Dadurch kann der Benutzer auch den Zustandswechsel abbrechen, falls das erwartbare Endergebnis nicht auf Gefallen stößt. Für iOS und SwiftUI existiert die Komponente UISwitch.^[23]

HTML 5 und CSS 3[Bearbeiten | Quelltext bearbeiten]

Umschalter sind in keinem bisherigen HTML Standard als eigenständiger Typ für Formularfelder enthalten. In aktuellen Browsern kann jedoch mit Hilfe von CSS die Darstellung von gewöhnlichen Kontrollkästchen so manipuliert werden, dass sie wie Schalter aussehen.^[24][25] Über das „onchange“-Ereignis ist es möglich, mit Hilfe einer Skriptsprache (z. B. JavaScript), eine richtlinienkonforme Aktion auszuführen, sobald sich der Zustand des Schalters ändert.

In (webbasierten) Dokumentationen werden häufig Piktogramme von Schaltern ( an | aus) verwendet. Einige moderne Symbolschriftarten (z. B. Font Awesome) enthalten derartige Piktogramme. Alternativ existieren sehr viele Vektor- und Rastergrafiken die Schalter repräsentieren.

Einzelnachweise[Bearbeiten | Quelltext bearbeiten]

1. ↑ ^{a b} Jim Walker, Theano Petersen: Microsoft Docs > Windows App Entwicklung > Umschalter. Microsoft, 16. April 2022, abgerufen am 13. Mai 2022. 
2. ↑ ^{a b} Anthony Tseng: When to Use a Switch or Checkbox. UX Movement, 3. August 2016, abgerufen am 4. März 2022 (englisch). 
3. ↑ ^{a b} Anthony Tseng: Stop Misusing Toggle Switches. UX Movement, 5. August 2019, abgerufen am 4. März 2022 (englisch). 
4. ↑ ^{a b} 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. ↑ ^{a b} 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. ↑ ^{a b} 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).