GUI (Graphical User Interface)
Eine GUI (Graphical User Interface) ist eine bildschirmbasierte Benutzerschnittstelle, die grafische Elemente wie Fenster, Icons, Menüs, Schaltflächen und Dialogfelder verwendet, um die Interaktion zwischen Mensch und Computer zu ermöglichen. Im Gegensatz zu rein textbasierten Schnittstellen (CLI) erlaubt eine GUI dem Nutzer, Aktionen mittels Mausklicks, Touch‑Gesten oder Drag‑&‑Drop auszuführen, wobei die zugrunde liegende Logik meist durch Ereignis‑basiertes Programmieren (Event‑Handling) gesteuert wird.
Kernkomponenten
- Fenster (Windows): Container für Inhalte, die verschoben, skaliert und minimiert/maximiert werden können.
- Steuerelemente (Widgets): Buttons, Checkboxes, Radio‑Buttons, Textfelder, Slider, Dropdown‑Listen etc.
- Icons & Symbole: Visuelle Repräsentationen von Dateien, Aktionen oder Systemmitteln.
- Menüs & Toolbars: Hierarchische oder flache Strukturen zum Aufrufen von Befehlen.
- Dialoge: Modale oder nicht‑modale Fenster für Eingaben, Bestätigungen oder Fehlermeldungen.
Technologien & Frameworks
- Desktop‑Umgebungen: Win32/API (Windows), Cocoa (macOS), GTK +, Qt (Linux), WPF (Windows).
- Web‑GUI: HTML + CSS + JavaScript, Bibliotheken/Frameworks wie React, Angular, Vue, Svelte, Bootstrap, Material‑Design.
- Mobile‑GUI: Native SDKs (Android XML/Java/Kotlin, iOS UIKit/SwiftUI), plattformübergreifende Frameworks (Flutter, React Native, Xamarin).
- Embedded‑GUI: LVGL, Qt Embedded, Touch‑Screen‑Bibliotheken für Geräte mit begrenzten Ressourcen.
Design‑Prinzipien
- Konsistenz: Einheitliche Darstellung und Verhalten über die gesamte Anwendung hinweg.
- Feedback: Visuelle Rückmeldungen (Hover‑Effekte, Disabled‑Zustände, Lade‑Animationen).
- Affordance: Elemente sollen intuitiv ihre Verwendung andeuten (z. B. ein Button sieht „drückbar“ aus).
- Minimale kognitive Belastung: Klare Informationshierarchie, reduzierte Anzahl von Optionen.
- Responsive Design: Anpassung an verschiedene Bildschirmgrößen und Auflösungen (Desktop, Tablet, Smartphone).
Barrierefreiheit
- Screen‑Reader‑Kompatibilität: ARIA‑Attribute (Accessible Rich Internet Applications) im Web.
- Tastatur‑Navigation: Fokus‑Management und Tab‑Reihenfolge.
- Hoher Kontrast & Skalierbarkeit: Unterstützt Sehbehinderungen.
- Alternative Texte: Beschreibungen für Icons und Bilder.
Entwicklungsprozess
- Anforderungsanalyse: Zielgruppe, Anwendungsfall und Funktionsumfang definieren.
- Wireframing & Prototyping: Skizzen oder interaktive Mock‑ups (Figma, Sketch, Adobe XD).
- Usability‑Testing: Nutzerfeedback einholen, iterativ verbessern.
- Implementierung: Auswahl des passenden UI‑Frameworks, Codierung der Komponenten, Event‑Binding.
- Qualitätssicherung: UI‑Tests (Selenium, Cypress), Performance‑Profiling, Barrierefreiheits‑Audit.
Beispiele
- Desktop‑GUI: Microsoft Office Ribbon, macOS Finder.
- Web‑GUI: Gmail‑Interface, Amazon‑Produktseite.
- Mobile‑GUI: Instagram‑App‑Layout, iOS Settings‑App.
