GUI-Grundelemente und Container

Interaktionselemente (Controls) und Informationselemente (Views)

Eine grafische Benutzeroberfläche (GUI) lässt sich grob in zwei Kategorien von Bausteinen unterteilen, die unterschiedliche Aufgaben erfüllen:

• Interaktionselemente (Controls/Widgets): Diese Elemente dienen der Eingabe und Steuerung. Sie fordern die Nutzenden aktiv zum Handeln auf.
  • Buttons: Lösen Befehle aus (z. B. "Senden", "Löschen").
  • Textfelder (Input Fields): Erlauben die Eingabe von Freitext.
  • Auswahlelemente: Checkboxen, Radio-Buttons oder Dropdown-Listen ermöglichen Entscheidungen zwischen vorgegebenen Optionen.
• Informationselemente (Views): Diese Elemente dienen der Ausgabe. Sie visualisieren Daten oder den Systemstatus, ohne dass eine direkte Eingabe erwartet wird.
  • Labels: Zeigen Text an, der nicht bearbeitet werden kann (z. B. Feldbezeichnungen oder Fehlermeldungen).
  • Progress Bars: Visualisieren Ladebalken oder Fortschritte.
  • Icons/Images: Dienen der schnellen visuellen Erfassung von Inhalten oder Status (z. B. ein grünes Häkchen für "Erfolg").

Der Zustand von Elementen (States)

GUI-Elemente sind nicht statisch; sie kommunizieren durch ihren Zustand, was gerade möglich ist oder wo der Fokus liegt. Dies ist essenziell für eine gute User Experience:

• Enabled vs. Disabled (Aktiviert/Deaktiviert):
  • Ein Element ist enabled, wenn es normal bedienbar ist.
  • Ein Element ist disabled (oft ausgegraut), wenn eine Interaktion aktuell nicht möglich ist.
  • Beispiel: Der "Weiter"-Button in einem Installationsassistenten bleibt so lange disabled, bis die Lizenzbedingungen akzeptiert wurden. Dies verhindert Fehlbedienungen.
• Visible vs. Hidden (Sichtbar/Versteckt):
  • Elemente können dynamisch ein- oder ausgeblendet werden, um die Oberfläche übersichtlich zu halten.
  • Beispiel: Ein Eingabefeld für "Kreditkartennummer" ist hidden und wird erst visible, wenn als Zahlungsart "Kreditkarte" gewählt wurde.
• Focused (Fokussiert):
  • Der Fokus zeigt an, welches Element gerade Eingaben (z. B. von der Tastatur) empfängt. Visuell wird dies oft durch einen farbigen Rahmen oder einen blinkenden Cursor markiert.
  • Beispiel: Beim Ausfüllen eines Formulars springt der Fokus mit der Tab-Taste zum nächsten Feld. Nur das fokussierte Feld verarbeitet deine Tastatureingaben.

Welches Element passt zu welchem Datentyp?

Die Wahl des richtigen GUI-Elements hängt maßgeblich vom zugrundeliegenden Datentyp ab, um die Bedienung so intuitiv wie möglich zu gestalten:

• Boolean (Wahr/Falsch):
  • Checkbox: Ideal für unabhängige Optionen (z. B. "Newsletter abonnieren").
  • Toggle Switch: Ideal für sofort wirksame Einstellungen (z. B. "Bluetooth an/aus" auf dem Smartphone).
• String (Zeichenkette):
  • Textfeld (Single Line): Für kurze Eingaben wie Namen oder PLZ.
  • Text Area (Multi Line): Für lange Texte wie Feedback oder Beschreibungen.
  • Dropdown/Combobox: Wenn der String aus einer definierten Liste stammen muss (z. B. Länderauswahl).
• Integer (Ganzzahlen) & Float (Gleitkommazahlen):
  • Slider: Wenn der genaue Wert weniger wichtig ist als das Verhältnis oder die Tendenz (z. B. Bildschirmhelligkeit).
  • Spinbox (Stepper): Wenn ein exakter numerischer Wert schrittweise angepasst werden soll (z. B. Anzahl der Exemplare beim Drucken).