Grafische Benutzeroberfläche

Grafische Benutzeroberfläche oder auch grafische Benutzerschnittstelle oder Bedienoberfläche (Abk. GUI von englisch graphical user interface) bezeichnet eine Form von Benutzerschnittstelle eines Computers. Sie hat die Aufgabe, Anwendungssoftware auf einem Rechner mittels grafischer Symbole, Steuerelemente oder auch Widgets genannt, bedienbar zu machen. Dies geschieht bei Computern meistens mittels einer Maus als Steuergerät, mit der die grafischen Elemente bedient oder ausgewählt werden, bei Smartphones, Tablets und Kiosksystemen in der Regel durch Berührung eines Touchscreens.

Die Gesamtgestaltung heutiger grafischer Oberflächen verwendet oftmals die sogenannte Schreibtischmetapher. Dieses Konzept wurde ab 1984 mit dem Macintosh von Apple populär, in den 1990er Jahren entwickelte es sich zum Industriestandard bei Personal Computern.

Im Gebiet der Software-Ergonomie wird der Begriff grafische Benutzungsschnittstelle bevorzugt.

Fingerspreiz-Geste zum Vergrößern

Abgrenzung

Eine grafische Benutzerschnittstelle basiert auf einem im Grafikmodus der Hardware arbeitenden Fenstersystem und enthält zudem so gut wie immer eine Softwarekomponente, die die Steuerung eines Computers durch Zeigegeräte zu einem dominierenden Bedienelement macht.

Zwar ermöglichen auch zeichenorientierte Benutzerschnittstellen („TUI“) eine nicht zeilenorientierte, also den ganzen Bildschirm einbeziehende, Bedienung der Computerprogramme, basieren aber auf dem Textmodus der Hardware.

Auch bei zeichenorientierten Benutzerschnittstellen ist grundsätzlich eine Bedienung per Maus möglich, aber nicht so verbreitet. Beide Bedienkonzepte (also GUI und TUI) unterscheiden sich grundsätzlich von der Kommandozeilen-Interaktion (CLI von engl. Command Line Interface) mit einem Computer.

GUI-Bestandteile

Bedienelemente

Der Zugang zu Programmen und Dateien wird dabei als Icons (Bildsymbole) dargestellt. Das GUI-System ermöglicht Fenster und Unterfenster (auch Dialoge und Meldungen sind Fenster) und ggf. das Verändern ihrer Größe und Position, beispielsweise das Vergrößern auf die gesamte Bildschirmgröße, oder deren Ausblenden. Grafische Bedienoberflächen sind für viele Mehrzweck-Betriebssysteme verfügbar oder gar in sie integriert.

Weitere Bedienelemente sind Schaltflächen (Buttons, Knöpfe), Schalter und Regler (Schieberegler), Symbolleisten (Werkzeugleisten, Toolbars), Auswahllisten oder Menüs.

Zusammengefasst werden alle diese Elemente zum WIMP-Modell, nach engl. Windows (Fenster), Icons (Datei- und Programmsymbole), Menus (Menüs) und Pointer (Zeiger, der zum Beispiel durch die Maus bewegt wird).

Eine Palette als GUI-Element kann im Gegensatz zu einem Dialog ständig geöffnet bleiben (ist „nicht-modal“) und wird oft am Seitenrand angeordnet. Beispiele sind das Favoritencenter im Internet Explorer oder die Navigationsleiste im Adobe Reader. Ein Ribbon oder Menüband ist eine Kombination aus Menü- und Symbolleiste, die um weitere Bedienelemente ergänzt wurde. Sie findet beispielsweise in MS Office 2010 Anwendung.

GUIs können mit der Verwendung von Metaphern für bestimmte Programmfunktionen, wie zum Beispiel dem Papierkorb, das Erlernen und das Verständnis der Bedienung wesentlich erleichtern.

Weitere Bedienkonzepte

Kein separates GUI-Element, aber relevant für alle GUI-Elemente ist der Fokus: Das GUI-Element, welches aktuell für die nächste Benutzer-Aktion mit einem zeigerlosen Eingabegerät (in der Regel einer Tastatur) relevant ist, besitzt den Fokus. Damit er jederzeit für den Benutzer sichtbar ist, ist er grafisch hervorgehoben: in Text-Eingabefeldern durch eine blinkende Eingabemarke (Cursor, Caret); andere GUI-Elemente sind meist durch eine gepunktete, dünne Umrandung hervorgehoben, wenn sie fokussiert sind (den Fokus besitzen). Das ist unverzichtbar, wenn mehrere fokussierbare GUI-Elemente sichtbar sind, da „fehlfokussierte“ Eingaben erhebliche Konsequenzen haben können. Weiterhin besteht in der Regel für Benutzer die Möglichkeit, den Fokus mit der Tastatur (als zeigerloses Eingabegerät) auf ein bestimmtes Element zu wechseln. Dies ermöglicht effizientes Arbeiten mit einer GUI bei vorwiegender Tastaturbedienung sowie die Erhaltung der Bedienfähigkeit bei fehlender Maus.

Während der Fokus für die Tastatureingaben relevant ist, gibt es weiterhin einen Capture („Mausfang“), also das Ziel für Mauseingaben, etwa das Aufziehen einer Markierung oder das Auftauchen von Kontexthilfe. In der Regel bekommt das Eingabelement, über dem sich der Mauszeiger befindet, die Mauseingaben. In bestimmten Situationen, zumeist bei gedrückt gehaltener Maustaste, ist das nicht der Fall und wäre irreführend. Einige GUI-Architekturen verketten automatisch Capture und Fokus, bei den meisten folgt der Fokuswechsel erst bei einem Mausklick.

Bei der Implementierung von GUI für ein verdrängendes Multitasking-System stellte die richtige Zuordnung von Capture und Focus zum passenden Prozess bei adäquatem Feedback eine erhebliche implementationstechnische Hürde dar.

Technik

Benutzeroberflächenbaum

Als Benutzeroberflächenbaum (englisch GUI tree oder integration tree) wird der Graph bezeichnet, der die Logik der GUI-Elemente abbildet. Jeder Knoten des Baumes zeigt eine modale (d. h. die anderen Komponenten blockierende), von dieser Software verwendete GUI-Komponente, also z. B. einen Dialog zum Öffnen einer Datei. Von einem Knoten zu einem anderen existiert genau dann eine Kante, wenn aus der ersten Komponente die zweite aufgerufen werden kann (z. B. durch Betätigen einer Schaltfläche).

(c) Shmuel Csaba Otto Traian, CC BY-SA 3.0
Fenstersystem-basierte grafische Benutzeroberflächen haben mehrere Schichten, z. B. KDE Plasma Workspaces auf X.Org-Server

Normierung der Anforderungen

Die Anforderungen an eine grafische Benutzungsschnittstelle im Rahmen der Mensch-Computer-Kommunikation sind in der internationalen Normenreihe ISO 9241 geregelt, welche als europäische Normenreihe EN ISO 9241 vom CEN übernommen wurden, wobei hier die Teile 110: Interaktionsprinzipien[1], 112: Grundsätze der Informationsdarstellung[2], 125: Empfehlungen zur visuellen Informationsdarstellung[3], 143: Formulardialoge[4], 151: Leitlinien zur Gestaltung von Benutzungsschnittstellen für das World Wide Web[5], 161: Leitfaden zu visuellen User-Interface-Elementen[6] und 171: Leitlinien für die Zugänglichkeit von Software[7] relevant sind. Dabei muss die Schnittstelle folgende Merkmale aufweisen:

Ferner ist in der Norm ISO 9241-151 die Umsetzung von Benutzungsschnittstellen für Web-Applikationen und deren Evaluation im Rahmen der Benutzbarkeit definiert.

Geschichte

Xerox Star im Betrieb

Das Konzept von GUIs im heutigen Sinne stammt aus den 1970er Jahren. Seit 1973 erarbeitete man am Xerox PARC in Kalifornien den Xerox Alto. Den ersten kommerziellen Einsatz zeigte 1981 der Xerox Star. Einen größeren Kreis von Anwendern erreichte das Konzept erst durch die populäreren Computer von Apple. Ab 1979 wurde dort daran gearbeitet, wobei man sich von Xerox inspirieren ließ, und 1983 erschien der Apple Lisa mit grafischer Benutzeroberfläche. Dieser war noch überaus teuer, wichtiger war für die Zukunft der Apple Macintosh von 1984, der unter der Leitung von Steve Jobs entwickelt wurde.

Als originäre GUI-Computer folgten der Atari ST (Verkaufsstart im Juni 1985) und der Commodore Amiga (Verkaufsstart im März 1986). Microsoft kam im November 1985 mit Windows (1.03) hinzu, das bereits zwei Jahre zuvor als Reaktion auf Lisa angekündigt worden war. Windows 1.03 konnte allerdings die hohen Erwartungen kaum erfüllen.[8] Es lief auf den IBM-kompatiblen PCs und setzte sich später gegen das von IBM bevorzugte OS/2 durch. Auch für den weit verbreiteten Commodore 64 erschien eine grafische Benutzeroberfläche, GEOS von 1986.

Dennoch setzten sich GUIs nur langsam durch, da die damaligen Computer meist noch zu langsam waren, um das Konzept angemessen zu realisieren. Als die Zeitschrift 64’er im Mai-Heft 1990 vier Benutzeroberflächen miteinander verglich, erhielten der Commodore 64 (mit GEOS) und der AT 286 (also ein IBM-PC, mit Windows) die Note gut, der Amiga und der Atari nur ein befriedigend. Die Zeitschrift lobte die größere Benutzerfreundlichkeit von GUIs, wies aber auf das Problem hin, dass für manche nur wenige Anwendungen existieren. Als einheitliche Lösung mit großem Umfeld an Anwendungen fiel der Windows-PC positiv auf, er war aber auch am teuersten: Gerät (mit Diskettenlaufwerk, Monitor und Maus) und Software kosteten damals 4000 DM, das entsprechende Paket Commodore 64/GEOS bzw. der Amiga waren nur halb so teuer. Der Atari ST kostete nur 1200 DM, wurde aber nur mit wenig Software ausgeliefert.[9]

8-Bit-Rechner wie der Commodore 64 erwiesen sich letztlich als zu langsam; wegen des begrenzten Arbeitsspeichers musste man des Öfteren mit Disketten hantieren. Daher waren grafische Benutzeroberflächen eher erst für die Generation der 16-Bit-Rechner geeignet, zum Beispiel für den Atari ST. Der Durchbruch von Microsoft Windows erfolgte nach 1992 mit Windows 3.1. Windows gilt heute als Standard beim Arbeiten mit PCs.

Unter Unix und Linux gibt es mehrere, auf das X Window System aufsetzende Desktop-Umgebungen, die den Zweck einer grafischen Oberfläche erfüllen. Besonders bekannte Vertreter sind die Desktop-Umgebungen KDE sowie des Weiteren Gnome, Xfce und Enlightenment, ferner die Lightweight-Entwicklung LXDE.

Mit zunehmendem Funktionsumfang der GUIs selbst und der zugehörigen Programme nahm auch der Ressourcenbedarf der betreffenden Betriebssysteme immer weiter zu.

Mit der Verbreitung von Multi-Touch-Screens in Smartphones und Tabletcomputern entwickelten sich eigene Benutzeroberflächen mit Methoden wie Wischgesten und sonstiger Gestenerkennung, beispielsweise die Fingerspreiz-Geste zum Heranzoomen.

Entwicklung des Designs grafischer Benutzeroberflächen

Siehe auch

Weblinks

Commons: Grafische Benutzeroberfläche – Sammlung von Bildern, Videos und Audiodateien

Einzelnachweise

  1. DIN EN ISO 9241-110:2020-10. Abgerufen am 9. Januar 2023.
  2. DIN EN ISO 9241-112:2017-08. Abgerufen am 9. Januar 2023.
  3. DIN EN ISO 9241-125:2018-05. Abgerufen am 9. Januar 2023.
  4. DIN EN ISO 9241-143:2012-06. Abgerufen am 9. Januar 2023.
  5. DIN EN ISO 9241-151:2008-09. Abgerufen am 9. Januar 2023.
  6. DIN EN ISO 9241-161:2016-10. Abgerufen am 9. Januar 2023.
  7. DIN EN ISO 9241-171:2008-10. Abgerufen am 9. Januar 2023.
  8. Daniel Ichbiah: Die Microsoft Story. Bill Gates und das erfolgreichste Software-Unternehmen der Welt, Heyne: München 1993 (Original 1991), S. 241, S. 253–256.
  9. Dirk Astrath: Ganz und gar nicht oberflächlich. In: 64’er, Mai 1990, S. 54–60.

Auf dieser Seite verwendete Medien

KDE 2.2.2.png
Autor/Urheber: KDE development team http://kde.org, Lizenz: GPL
Screenshot of K Desktop Environment 2.2.2
Macintosh 128k computer, January 1984, by Bernard Gotfryd - (cropped to remove individual).jpg
Steve Jobs and Macintosh computer, January 1984, by Bernard Gotfryd.

The image on the computer screen is “A Woman Combing Her Hair”, by Hashiguchi Goyo (d. 1921). Tif version of photo converted to jpg, retouched and edited.

KDE 1.0.jpg
Autor/Urheber: KDE development team, Lizenz: GPL
Screenshot of KDE 1.0
UbuntuNattyKDE.png
Autor/Urheber: Canonical Ltd., Lizenz: GPL
Screenshot of Kubuntu 11.04
Enlightenment1700.png
Autor/Urheber: Der ursprünglich hochladende Benutzer war 96xund in der Wikipedia auf Deutsch, Lizenz: GPL
Enlightenment 0.17.0.0 mit neuem Standarddesign.
Windows 95 C Startmenü System mit allen Updates 2010-03-01.png
Autor/Urheber:

erstellt von Henry Mühlpfordt

, Lizenz: PD-Schöpfungshöhe

Screenshot von Microsoft Windows 95C (1297) mit allen Updates (+ Internet Explorer 5.5 SP2), Grafiktreiber sowie geöffnetem Explorer, Media Player 6.4, Systemsteuerung und System.

GNOME-escritorio-1.x.png
Autor/Urheber: Vladimir Támara, Jaime Irving Dávila, Pablo Chamorro, Igor Támara, Lizenz: GPL
Escritorio GNOME versión 1.x
Screenshot of Xerox PARC's NoteCards hypertext application.png
Autor/Urheber: kevin, Lizenz: CC BY 2.0
Clipped from Conklin, J. (1987) "Hypertext: An Introduction and Survey."
KDE 3.0n.jpg
Autor/Urheber: KDE, Lizenz: GPL
KDE 3.0 official Screenshot
TFT LCD display Samsung SyncMaster 510N.jpg
Autor/Urheber: unknown, Lizenz: GPL
Sugar-home-view-0.82.jpg
Autor/Urheber: Walter Bender, Lizenz: CC BY-SA 3.0
Sugar UI Home View (version 0.82)
UNIS Mininote (4049618798).jpg
Autor/Urheber: VIA Gallery from Hsintien, Taiwan, Lizenz: CC BY 2.0
UNIS Mininote
NeXTSTEP Nethack.png
Autor/Urheber: Gürkan Sengün (talk), Lizenz: GPL
Screenshot of NeXTSTEP NetHack.app
KDE Plasma 5.0.png
Autor/Urheber: KDE, Lizenz: GPL
Screenshot of Plasma 5.0
KDE 4-1 desktop.png
Autor/Urheber: KDE team, Lizenz: GPL
The KDE 4.1 desktop.
Gnome 3.2 shell.png
(c) The GNOME Project, CC BY 1.0
GNOME 3.2 Shell featuring Epiphany web browser
GeoPublish.png
GEOS for Apple II
Common Desktop Environment.jpg
Autor/Urheber: User230792, Lizenz: CC BY-SA 3.0
Common Desktop Environment screenshot.
Atari 1040STf.jpg
Autor/Urheber: © Bill Bertram, 2006, Lizenz: CC BY-SA 2.5
Atari 1040STF 16-bit computer (1986)
Post Processing: BG, B/C, spot, unsharp mask, composite picture.
Mac Classic.jpg
Autor/Urheber: Christian Brockmann, Lizenz: Copyrighted free use
Apple Macintosh Classic
Wfw.PNG
Autor/Urheber:

unbekannt

, Lizenz: PD-Schöpfungshöhe

Windows 3.11 for Workgroups (deutsch), u.a. mit Verknüpfung zum PIF-Editor (in der zweiten (Verknüpfungs-)Spalte und dritten Zeile)

Interface gráfica do computador pessoal Lisa.gif
Autor/Urheber: Rhett Jones, Lizenz: CC BY-SA 4.0
Interface graphique de l'ordinateur personnel Lisa
Haiku os.png
(c) The Haiku Project, MIT
Premier écrans après installation
GNOME 1.4 -- 2001, 04.png
Autor/Urheber: iain, Lizenz: CC BY-SA 3.0
GEGL invaders a classic easter egg, gimp-1.3 and an antique by now GNOME desktop.
Schreibtischmetapher Windows 1.x.png
Autor/Urheber:

unbekannt

, Lizenz: PD-Schöpfungshöhe

Karteikasten der ersten Windowsversion 1.x

Xfce4.png
Autor/Urheber: User:Tullius, Lizenz: CC BY-SA 4.0
XFce 4 mit Mozilla, AbiWord und xmms
Amiga500 system1.jpg
Autor/Urheber: unknown, Lizenz: CC BY-SA 2.5
Xfce3.jpg
Autor/Urheber: unknown, Lizenz: GPL
Clamshell iBook G3.jpg
Autor/Urheber: unknown, Lizenz: CC BY 2.0
Xerox Star on a Vintage Computer Faire West 2019.jpg
Autor/Urheber: leighklotz, Lizenz: CC BY 2.0
Vintage Computer Faire West 2019 - 48465464571
Rox-desktop-2004.png
Autor/Urheber: various, Lizenz: GPL
Screenshot of the en:ROX Desktop.
Apple Macintosh PowerBook 180.jpg
Autor/Urheber: Felix Winkelnkemper, Lizenz: CC BY-SA 4.0
Apple Macintosh PowerBook 180
LXDE desktop full.png
Autor/Urheber:
  • LXDE: LXDE Team* Screenshot: Hidro
, Lizenz: GPL
Base LXDE desktop, taken from lubuntu-9.10_lynxis_b14