Was bedeutet GUI? Definitionen, Elemente und Vorteile der grafischen Benutzeroberfläche
10. August 2021
Gängige Geräte wie Smartphones, Computer und Tablets verfügen über eine visuelle Komponente, die als grafische Benutzeroberfläche (GUI) bezeichnet wird. In diesem Artikel geben wir einen Überblick darüber, was eine grafische Benutzeroberfläche ist, einschließlich ihrer Elemente und Vorteile.
Was ist eine GUI?
GUI ist ein Akronym für Graphical User Interface, eine Schnittstelle, die es Benutzern ermöglicht, über grafische Elemente mit elektronischen Geräten wie Computern, Laptops, Smartphones und Tablets zu interagieren. Es ist ein wertvoller Bestandteil der Anwendungsprogrammierung in der Mensch-Computer-Interaktion und ersetzt textbasierte Befehle durch benutzerfreundliche Aktionen. Ziel ist es, dem Benutzer Entscheidungspunkte zur Verfügung zu stellen, die leicht zu finden, zu verstehen und zu verwenden sind. Mit anderen Worten: Über eine grafische Benutzeroberfläche können Sie das Gerät mit einer Maus, einem Stift oder sogar Ihrem Finger steuern.
Die GUI wurde erstellt, weil textbasierte Befehlszeilenschnittstellen komplex und schwer zu erlernen waren. Der GUI-Prozess ermöglicht es Ihnen, auf ein kleines Bild, ein sogenanntes Symbol oder Widget, zu klicken oder darauf zu zeigen, um einen Befehl oder eine Funktion auf Ihren Geräten zu öffnen, z. B. Registerkarten, Schaltflächen, Bildlaufleisten, Menüs, Symbole, Zeiger und Fenster. Es ist heute der Standard für benutzerzentriertes Design in der Anwendungsprogrammierung.
Programme, die eine grafische Oberfläche verwenden, werden „grafische Schnittstellenprogramme“ genannt. Das Programm erstellt kleine Bilder von Aufgaben oder Funktionen und wartet darauf, dass der Benutzer mit ihnen interagiert. Der Benutzer steuert, wann und wie sie verwendet werden. Zur Auswahl von Funktionen können Benutzer je nach Gerät eine Tastatur, ein Zeigegerät wie eine Maus, ein Touchpad oder einen Touchscreen verwenden.
GUI-Elemente
Eine GUI verwendet Strukturelemente, die zusammen das Erscheinungsbild der Benutzeroberfläche definieren. Die GUI umfasst Elemente aus vier Hauptgruppen, darunter:
1. Eingabesteuerung
Hier sind Beispiele für GUI-Eingabesteuerelemente:
Schaltflächen: Schaltflächen sind Kreise, mit denen Sie sofort Entscheidungen treffen und Aktionen ausführen können. Optionsschaltflächen sind in Gruppen gruppiert, in denen jeweils nur eine Schaltfläche ausgewählt werden kann. Beschriftungsschaltflächen enthalten Text. Wenn Sie mehr als eine Option auswählen möchten, sollten Sie die Verwendung eines Kontrollkästchens in Betracht ziehen.
Kontrollkästchen: Kontrollkästchen sind quadratische Kästchen in einer Liste mit einer oder mehreren Optionen. Wenn Sie auf ein Feld klicken, bleibt es ausgewählt. Sie werden am besten als vertikale Liste dargestellt. Ein Kontrollkästchen kann ein einzelnes Feld sein, beispielsweise eine Genehmigungsbestätigung, oder eine Liste verwandter Elemente, beispielsweise eine Einkaufsliste.
Datumsauswahl. Mit der Datumsauswahl können Sie ein Datum und/oder eine Uhrzeit auswählen. Der Ersteller kann einen Kalender oder eine Fülloption auswählen. Dadurch wird sichergestellt, dass ein einheitliches Format verwendet wird, beispielsweise „Tag, Monat, Jahr“.
Dropdown-Liste: Mit der Dropdown-Liste können Sie jeweils ein Element auswählen. Mehrere Elemente können kompakt eingebunden werden. Erwägen Sie das Hinzufügen von Anweisungen wie „Wählen Sie eine aus“, damit der Benutzer weiß, was er tun muss. Der Ersteller kann Elemente hinzufügen oder entfernen, um die Liste aktuell zu halten.
Listen. Mit Listen können Sie mehrere Elemente aus einer kompakten Liste auswählen. Verwenden Sie diese GUI-Funktion, wenn der Benutzer eine lange Liste von Optionen berücksichtigen muss. Es gibt vier Listenoptionen: Einzelzeile, Mehrfachauswahl, Mehrfachauswahl mit Kontrollkästchen und Mehrfachauswahl-Doppelliste.
Textfeld: Text ist ein Feld, in das Sie Text eingeben können. Der Ersteller kann steuern, wie viel Text erlaubt ist.
Umschalten: Eine Umschalttaste ermöglicht Einstellungsänderungen, typischerweise in Form von Aus-/Ein-Zuständen.
2. Navigationskomponenten
Hier sind Beispiele für GUI-Navigationselemente:
Breadcrumbs: Breadcrumbs bieten einen anklickbaren Pfad ausgehender Seiten. Sie bieten Ihnen eine visuelle Karte der Seiten zur einfacheren Navigation.
Symbole. Ein Symbol ist ein kleines Bild, das als Symbol dient und Ihnen bei der Navigation im System hilft. Sie werden normalerweise verwendet, um eine Anwendung, einen Ordner, eine Datei oder einen Webbrowser anzugeben. Mithilfe eines Symbols können Sie schnell Dokumente öffnen und Programme starten. Darüber hinaus haben alle Dateien, die Sie in derselben Anwendung erstellen, das Anwendungssymbol und dieselbe Erweiterung.
Bildkarussell Mit dem Bildkarussell können Sie durch eine Reihe von Bildern scrollen und das Bild auswählen, das Sie vergrößern möchten. Das Karussell enthält normalerweise Miniaturbilder, bei denen es sich um Hyperlinks handeln kann.
Seitennummerierung. Die Paginierung unterteilt den Inhalt in Seiten und ermöglicht es Ihnen, zwischen ihnen zu navigieren oder ihnen der Reihe nach zu folgen.
Suchfeld. Im Suchfeld können Sie ein Schlüsselwort oder eine Phrase eingeben, um im Index nach relevanten Ergebnissen zu suchen. Dabei handelt es sich in der Regel um einzeilige Textfelder mit einer Suchschaltfläche.
Schieberegler: Der Schieberegler verfügt über einen Balken und ein darüber gleitendes Häkchen. Der Ersteller kann die Größe des Balkens und der Unterteilungen, den Rand des Balkens und seine Ausrichtung steuern.
Stichworte Mit Tags können Sie Inhalte in derselben Kategorie finden. Zu den Optionen gehört, dass der Benutzer dem System eigene Tags hinzufügen kann.
Tabs. Eine Registerkarte ist ein kleines Feld, das einen Namen oder ein Grafiksymbol anzeigt, das einem bestimmten Fenster zugeordnet ist. Wenn Sie eine Registerkarte auswählen, werden in diesem Fenster bestimmte Steuerelemente und Informationen angezeigt. Wenn Sie beispielsweise mehrere Seiten in einem Webbrowser öffnen, werden oben im Browserfenster verschiedene Registerkarten angezeigt.
3. Informationskomponenten
Hier sind Beispiele für GUI-Informationselemente:
Nachrichtenfenster. Ein Meldungsfeld ist ein kleines Fenster mit Informationen wie Richtlinien oder Haftungsausschluss. Dies erfordert, dass Sie Maßnahmen ergreifen, bevor Sie fortfahren.
Benachrichtigungen. Eine Benachrichtigung ist ein Nachrichtenfeld. Typischerweise werden sie verwendet, um Alarme, Fehlermeldungen oder den Abschluss einer Aufgabe anzuzeigen.
Pop-ups: Bei einem Pop-up oder modalen Fenster müssen Sie mit ihm interagieren, bevor Sie zum System zurückkehren können.
Fortschrittsanzeige. Ein Fortschrittsbalken zeigt an, wo Sie sich im Prozess befinden. Normalerweise sind Fortschrittsbalken nicht anklickbar. Beispielsweise kann ein Fortschrittsbalken den Status Ihrer Pizzabestellung anzeigen, während diese bestellt, zubereitet und geliefert wird.
Tooltips: Ein Tooltip bietet Ihnen weitere Informationen, wenn Sie mit der Maus über ein Element fahren. Beispielsweise können Sie Definitionen und Anwendungsbeispiele abrufen, wenn Sie mit der Maus über ein Wort oder eine Phrase fahren.
4. Container
Hier ist ein Beispiel für ein GUI-Containerelement:
Akkordeon: Ein Akkordeon ist eine gestapelte Liste von Elementen mit Ein- und Ausblendfunktionen. Wenn Sie auf eine Beschriftung klicken, wird die Liste auf die volle Größe erweitert.
Interaktive GUI-Elemente
Die grafische Oberfläche enthält neben Strukturelementen auch Interaktionselemente wie:
Cursor: Der Cursor zeigt die Stelle an, an der das System die nächste Eingabe akzeptiert. Dies kann entweder ein Zeiger sein, der den Bewegungen eines Zeigegeräts wie einer Maus folgt, oder ein Textcursor, der den Fokuspunkt im aktuellen Textfeld anzeigt.
Auswahl: Auswahl bezieht sich auf die Liste der Elemente, auf die der Benutzer eine Operation anwenden wird. Der Benutzer wählt einen Textabschnitt zum Ausschneiden, Kopieren und Einfügen aus. Mit Bildbearbeitungsanwendungen können Benutzer mithilfe der Zauberstab- oder Lasso-Auswahlwerkzeuge bestimmte Bereiche eines Bildes auswählen und ändern.
Einstellknopf: Der Knopf dient als Anzeige für den Ziehvorgang. Wenn der Benutzer mit der Maus über den Griff fährt, um den Ziehvorgang zu starten, ändert sich seine Form in ein Symbol, das die Drag-and-Drop-Funktion darstellt.
Was sind die Vorteile einer GUI?
Ältere Desktop-Betriebssysteme wie MS-DOS und viele moderne Programmiersprachen verwenden Befehlszeilenschnittstellen, die die Eingabe langer Codezeilen in die Befehlszeile erfordern, um auf Systemfunktionen zuzugreifen. Sie müssen die verfügbaren Systembefehle kennen und wissen, wie Sie diese im richtigen Format eingeben. Dies bedeutet, dass kleine Fehler wie etwa falsche Schreibweisen oder falsche Abstände die Ausführung der Funktion verhindern.
Die GUI verwendet visuelle Elemente, um diese nun verborgenen Befehle darzustellen. Sie wählen einfach eine Schaltfläche oder ein Symbol aus, um die entsprechende Funktion aufzurufen. Die einfache Nutzung grafischer Oberflächen ermöglicht es jedem, unabhängig von Erfahrung oder Wissen, auf alle Arten von Systemen für den täglichen Gebrauch zuzugreifen.
Die Verwendung einer GUI bietet viele weitere Vorteile. Hier sind einige der häufigsten:
1. Einfach zu bedienen
Da Daten durch Symbole, Formen und Icons dargestellt werden, können Benutzer Parameter leicht erkennen, kategorisieren und durch sie navigieren. Ein einfacher Klick genügt, um die Funktion zu aktivieren. Aufgrund ihrer Benutzerfreundlichkeit und Verständlichkeit ist die grafische Benutzeroberfläche zur bevorzugten Schnittstelle für Computer und mobile Geräte geworden.
2. Leicht verständlich
Visuelle Darstellungen von Daten werden schneller erkannt als Text. Die GUI ist auch für Nicht-Programmierer einfach zu bedienen, da keine Erfahrung mit Rechenbefehlen erforderlich ist. Sie müssen sich nicht um das Schreiben oder Debuggen von Code kümmern. Daher empfinden Benutzer die grafische Benutzeroberfläche als leicht zu erlernende Benutzeroberfläche.
3. Attraktivität
Die GUI verfügt über optisch ansprechende Funktionen und ist nicht mit Befehlszeilencodes überladen. Visuelle Bilder können Emotionen, Kommentare und Situationen mithilfe langer Computersprachen darstellen. Bilder und Ähnliches sind leicht zu verstehen und haben oft eine universelle Bedeutung.
4. Verknüpfungen
Die GUI ermöglicht Benutzern die Verwendung von Tastaturkürzeln, um die Anzahl der Anschläge zu minimieren. Die Kombination von zwei Tasten anstelle mehrerer Aktionen spart dem Benutzer Zeit und verbessert die Produktivität. Beispielsweise könnte eine Call-to-Action-Schaltfläche ein Formular, eine vorausgefüllte E-Mail oder eine Liste mit Kontaktinformationen aufrufen. Diese einzige Schaltfläche erspart Ihnen die Suche nach denselben Informationen.
5. Multitasking
Mit der grafischen Benutzeroberfläche können Benutzer zwei oder mehr Programme gleichzeitig bearbeiten und anzeigen. Sie können beispielsweise eine Streaming-Präsentation ansehen, während Sie mit einem Webbrowser im Internet suchen. Sie können das Video ansehen, während Sie Ihre Präsentationsrezension schreiben, indem Sie die Suchmaschine in einem anderen Tab verwenden.