Graphical User Interface (GUI)

Wenn du mit Software interagierst, tust du das vermutlich über ein Graphical User Interface (GUI). Solche grafischen Benutzerschnittstellen sind die am häufigsten eingesetzte Interaktionsmöglichkeit zwischen Menschen und Maschinen.

Doch was macht ein GUI aus? Aus welchen Elementen kann es bestehen und worauf sollte bei der Gestaltung eines GUI geachtet werden?

simpleclub hilft dir weiter!

Graphical User Interface einfach erklärt

Ein Graphical User Interface (Grafische Benutzeroberfläche, kurz GUI) ist eine Benutzerschnittstelle, welche visuelle Elemente wie Fenster, Schaltflächen und Menüs verwendet. Diese werden dem User auf einem Bildschirm dargestellt und erlauben die Interaktion mit Software über verschiedene Interaktionsinstrumente, wie bspw. Maus und Tastatur, Touchpad oder über einen Touchscreen.

Auf einem oder mehreren Fenstern kann der sichtbare Teil einer Anwendung auf dem Bildschirm dargestellt werden. Diese werden in der Regel mit Schaltflächen, Menüs und Dialogen versehen.

Über einen Klick auf eine Schaltfläche kann ein User eine Aktion ausführen, bspw. das Öffnen einer Datei.

In Menüs werden verschiedene Funktionen hinterlegt. Hier wird bspw. zwischen Haupt-, Kontext- oder Dropdown-Menü unterschieden.

Dialoge werden verwendet, um dem User Eingaben zu ermöglichen oder diesen zu bitten, eine Entscheidung zu treffen. Ein Beispiel dafür ist eine Bitte um Bestätigung, falls der User eine Aktion ausführt, die nicht rückgängig gemacht werden kann oder gewisse Risiken mit sich bringt.

Bei der Gestaltung von GUIs gilt die Zielsetzung, die Schnittstelle und die Bedienung möglichst ergonomisch, also an den Anwender angepasst und möglichst benutzerfreundlich, oder besser gebrauchstauglich (usable) umzusetzen.

Graphical User Interface Definition

Graphical User Interface Grundelemente

Ein Graphical User Interface wird einem User über eine grafische Benutzeroberfläche dargestellt. Sie soll dem User eine zufriedenstellende, effektive und effiziente Möglichkeit bieten Aufgaben zu erledigen. Diese Zielsetzung wird durch verschiedene visuelle Elemente und Interaktionsmöglichkeiten unterstützt.

Dialoge

Ein wichtiges Grundelement für die Interaktion mit einem Anwendungssystem sind Dialoge. Dabei handelt es sich um abwechselnde Aktionen von User und Anwendung. Arbeitsaufträge können so schrittweise ausgeführt werden, indem der User Daten eingibt und anschließend Rückmeldung über die Verarbeitung von der Software erhält.

Bei Dialogen wir häufig zwischen Primärdialogen und Sekundärdialogen unterschieden. Erstere sind für die Aufgabenerfüllung selbst zuständig, während letzere, meist optional, für zusätzliche Informationen zu Arbeitsschritten verwendet werden.

Fenster

Der sichtbare Teil einer Anwendung wird in der Regel in einem oder mehreren Fenstern dargestellt. Ein Fenster kann eine Vielzahl von Operationen ermöglichen.

Im Titelbalken (Titelleiste) steht eine eindeutige Überschrift für das Fenster. Ein Klick auf den Titelbalken bringt das Fenster in der Regel in den Vordergrund und dieses wird als aktives Fenster festgelegt. Der User kann immer nur mit einem aktiven Fenster interagieren. Wird das Fenster festgehalten, indem die Maustaste auf dem Titelbalken gedrückt gehalten wird, kann es verschoben werden.

Genauso kann die Größe eines Fensters verändert werden, indem am Rand oder einer Ecke des Fensters die Maustaste gedrückt gehalten und anschließend bewegt wird. Die richtige Mausposition dafür wird über einen Wechsel des Mauszeigers indiziert.

Über die Schaltflächen (Buttons) im Titelbalken kann ein Fenster geschlossen, minimiert oder maximiert werden. Beim Minimieren wird das Fenster ausgeblendet und kann über einen Klick auf ein entsprechendes Symbol in der Taskleiste wieder in den Vordergrund gebracht werden. Maximieren meint, dass das Fenster bildschirmfüllend vergrößert wird.

Über weitere, entsprechend beschrifte Schaltflächen können verschiedenste andere Aktionen ausgeführt werden.

Beispielsweise können über die Schaltflächen in der Menüleiste diverse weitere (Kontext-)Menüs hervorgerufen werden, die weitere Einstellungs- und Aktionsmöglichkeiten bieten.

Über zwei Rollbalken (Scrollbar) kann der angezeigte Ausschnitt des Arbeitsbereichs im Fenster verschoben werden.

Fenster können viele weitere Oberflächenelemente verkörpern. Diese lassen sich drei Kategorien (Eingabesteuerung, Navigationselemente, Informationselemente) von Elementen einteilen:

Fenstertypen

Verschiedene Anwendungen nutzen auch verschiedene Fenstertypen. Diese lassen sich in vier Fenstertypen unterteilen (Anwendungsfenster, Unterfenster, Dialogfenster, Mitteilungsfenster).

Das Anwendungsfenster einer Anwendung wird in der Regel nach dem Anwendungsstart aufgerufen. Das Anwendungsfenster bietet wiederum häufig die Möglichkeit weitere Fenster aufzurufen.

Das Unterfenster unterstützt den Primärdialog. Beispielsweise können so verschiedene Funktionen und Operationen in einer Anwendung in ein eigenes Fenster ausgelagert werden.

Im Dialogfenster können Sekundärdialoge untergebracht werden. Hier können also diverse Dateneingaben erfolgen. Dafür können Textfelder, Checkboxen, Auswahlfelder und Drop-Down-Menüs (Optionsfelder) verwendet werden.

Mitteilungsfenster sind Dialogfenster, die primär genutzt werden um den User über etwas zu informieren oder zu einer spezifischen Eingabe aufzufordern.

Menüs

Menüs in einer GUI erlauben dem User eine bestimmte Aktion aus verschiedenen Optionen auszuwählen. Es gibt dabei verschiedene Arten von Menüs.

In einem Eigenschaftsmenü können verschiedene Parameter eingestellt werden. Ein Beispiel dafür sind die Druckeinstellungen, die aufgerufen wird, wenn der User ein Dokument drucken möchte.

Ein Kontextmenü kann meistens über einen Rechtsklick auf spezifische Flächen (bspw. Icons) aufgerufen werden. Hier können weiterführende Auswahlmöglichkeiten getroffen werden. Diese beziehen sich dabei auf das referenzierte Objekt, also beispielsweise auf die Anwendung, welche über einen Doppelklick auf das entsprechende Icon aufgerufen wird.

Ähnlich wie ein Kontextmenü klappt ein Kaskadenmenü auf und listet weitere Auswahlmöglichkeiten auf. Schwebt der Mauszeiger über einer spezifischen Menüoption werden weitere, untergeordnete Optionen seitlich aufgeklappt.

Graphical User Interface Gestaltung

Grundregeln

Für die Gestaltung von GUIs gibt es verschiedene Richtlinien (styleguides). Diese werden unter anderem eingesetzt um dem User eine möglichst einfache und zielführende Handhabung einer Anwendung zu erlauben. Beispielsweise kann darüber dafür gesorgt werden, dass verschiedene Anwendungen ein ähnliches Aussehen und eine ähnliche Bedienung haben.

Es gibt einige Anforderungen die ein GUI erfüllen sollte:

• User kann bequem mit der Software interagieren
• User hat das Gefühl die Kontrolle zu haben
• Geringe kognitive Belastung
• Zusammenhängend aufgebaute Benutzeroberflächen
• Aktionen sollten reversibel (umkehrbar) sein

Generell sollten alle Elemente klar aufgebaut sein, die bevorzugten Handlungen sollten dem User verständlich vermittelt werden und Kontrollelemente sollten immer im Kontext zum dazugehörigen Objekt stehen.

Beispielsweise sollten gebräuchlichen Symbole (wieder-)verwendet werden, welche mit spezifischen Funktionen assoziiert werden. Das hilft die kognitive Belastung zu verringern und erlaubt ein klares, gut nachvollziehbares und effizientes Arbeiten.

Die einzelnen Elemente sollten konsistent und durchgängig sein und eine schnelle Aufgabenerledigung zu erlauben. Verschiedene Hinweise (Aktionen, Statusänderungen, Fehlermeldungen) sollten dem User gut nachvollziehbar zur Verfügung gestellt werden, um diesem ein effizientes Arbeiten zu ermöglichen.
Durch Farben und Texturen sollte die Aufmerksamkeit des Users gelenkt werden.

Farben, Schriftarten und Kontraste

Verschiedene Farben, Schriftarten und Kontraste können einen großen Einfluss auf das Aussehen und die Handhabung von grafischen Benutzerschnittstellen haben.

Davon kannst du dich hier einmal selbst überzeugen:

Hinweis: Klicke mehrfach auf die jeweiligen Buttons, um dir verschiedene Kombinationen anzusehen.

Entwicklungskriterien

Bei der Entwicklung von GUIs sollten einige Kriterien beachtet werden:

• Verständlichkeit: Auf unnötige Designelemente verzichten und einfache, verständliche Bezeichnungen wählen
• Zweckorientiertes Layout: Gute Struktur und klar erkennbare Funktionen und Beziehungen
• Konsistenz: Die verschiedenen Elemente aufeinander abstimmen
• Typografie: Farben und Texte klar erkennbar und wiedererkennbar gestalten
• Vertiefte Elemente nutzen für: Texteingabefelder, gedrückte/ aktivierte Schaltflächen, Checkboxen,...
• Erhabene Elemente nutzen für: Nicht gedrückte/ aktivierte Schaltflächen, Slider,...

Graphical User Interface Usability

Einer der wichtigsten Begriffe für die Bewertung von GUIs ist Usability. Damit ist die Benutzerfreundlichkeit oder eher die Gebrauchstauglichkeit der Schnittstelle gemeint. Die Usability setzt sich aus verschiedenen Aspekten zusammen:

GUIs sollten konsistent gestaltet sein. Alle Elemente und ihre Bedeutung und Funktionen sollten einheitlich sein und ein User sollte sich auf die Konsistenz der Funktion der verschiedenen Schaltflächen, Dialoge und Menüs verlassen können.

GUIs sollten dem User klar verständliche und eindeutige Rückmeldungen geben. Damit sollte bspw. darauf hingewiesen werden, ob eine Aktion erfolgreich ausgeführt wurde oder ein Fehler aufgetreten ist. Auch über den aktuellen Status oder Zustand der Anwendung sollte informiert werden.

GUIs sollten dem User eine effiziente Nutzung der Anwendung erlauben. Beispielsweise kann dabei die Verwendung von Tastenkombinationen oder Shortcuts, kontextsensitiven Menüs oder gut strukturierte Positionierung von Elementen helfen.

Auch Fehlertoleranz ist wichtig für GUIs. Damit ist gemeint, dass der User Fehler korrigieren oder rückgängig machen kann und auf Fehler bzw. eine fehlerhafte Bedienung hingewiesen wird.

Barrierefreiheit meint, dass eine Anwendung für möglichst viele User zugänglich sein soll. Insbesondere User mit Einschränkungen sollen bedürfnisgerecht unterstützt werden. Ein Beispiel sind die Verwendung von skalierbaren Texten mit gut lesbaren Schriftarten und geeigneten Farbkontrasten.

Graphical User Interface Beispiel

Ein Beispiel für ein GUI ist auch das Interface dieses Webshops. Er verkörpert verschiedene Elemente. Hier kannst du das Interface einmal ausprobieren. Achte dabei gerne darauf, welche Elemente du hier wiedererkennst.

Graphical User Interface Zusammenfassung

Ein Graphical User Interface ist eine Benutzerschnittstelle, die visuelle Elemente wie Fenster, Schaltflächen und Menüs verwendet. Eine grafische Bentutzeroberfläche wird auf einem Bildschirm dargestellt und kann über Maus und Tastatur oder einen Touchscreen bedient werden.

Die Anwendungsdarstellung erfolgt in der Regel über verschiedene Fenster, die spezifische Funktionen und Dialoge verkörpern. Einzelne Funktionen und Einstellmöglichkeiten können in diversen Menüs untergebracht werden. Dem User soll dadurch die Interaktion mit der Anwendung ermöglicht werden und diesem die effiziente Erledigung von Aufgaben erlauben.

Bei der Gestaltung von GUIs gilt es verschiedene Anforderungen in Kriterien in verschiedenen Hinsichten zu beachten.

Im Sinne der Usability sollten die folgenden Aspekte erfüllt werden:

• Konsistenz
• Feedback
• Effizienz
• Fehlertoleranz
• Barrierefreiheit