Was ist ein Graphical User Interface (GUI)?

Die Zeiten, in denen aus­schließ­lich Wis­sen­schaft­ler und Software-Ent­wick­ler Computer nutzen konnten, sind schon lange vorbei. Heut­zu­ta­ge kann fast jeder Mensch einen PC oder ein Tablet bedienen – oft sogar ohne große tech­no­lo­gi­sche Vor­kennt­nis­se. Doch dies bedurfte der Ent­wick­lung von gra­fi­schen Be­nut­zer­ober­flä­chen – einer Art von User Interface.

Die ersten Konzepte zur gra­fi­schen Nut­zer­ober­flä­che ent­stan­den bereits in den 1970ern im Un­ter­neh­men Xerox. Dabei ging es vor allem darum, PCs auch mit Maus und Tastatur bedienen zu können, statt nur über text­ba­sie­ren­de An­wei­sun­gen. Der Xerox Alto war der erste PC mit einem GUI. In den 80er-Jahren folgte dann Apple mit dem Macintosh. Seit der Ent­wick­lung von Smart­phones und Tablets hat sich das Prinzip des gra­fi­schen In­ter­faces deutlich wei­ter­ent­wi­ckelt. Heute kann man Displays sogar mit Fin­ger­be­we­gun­gen und Gesten bedienen.

Das GUI ist eine Schnitt­stel­le zwischen Mensch und Maschine. Zweck dieser gra­fi­schen Schnitt­stel­le ist es, den Code im Backend eines Systems möglichst be­nut­zer­freund­lich wie­der­zu­ge­ben, um die all­täg­li­che Arbeit damit zu ver­ein­fa­chen. Symbole und Bilder sind hierbei von be­son­de­rer Bedeutung, weil erst mit diesen eine uni­ver­sel­le und text­un­ab­hän­gi­ge Anwendung möglich ist. So weiß bei­spiels­wei­se fast jeder, wie ein Wi-Fi Symbol aussieht, während das Wort dafür in un­ter­schied­li­chen Sprachen ganz un­ter­schied­lich aussieht.

Das GUI ist eine Be­nut­zer­ober­flä­che, die es Usern erlaubt, mit dem Computer zu kom­mu­ni­zie­ren. Üblich ist vor allem die In­ter­ak­ti­on per Maus und Tastatur (wobei in­zwi­schen auch die Steuerung über Gesten immer mehr an Bedeutung gewinnt): Wenn wir eine Com­pu­ter­maus bewegen, dann bewegt sich der Zeiger auf unserem Bild­schirm. Das Signal des Gerätes wird an den Computer über­mit­telt, der es dann in eine ähnlich ver­lau­fen­de Bewegung auf dem Bild­schirm übersetzt. Wenn ein Nutzer dann zum Beispiel auf ein be­stimm­tes Pro­gramm­sym­bol in der Me­nü­aus­wahl klickt, wird ent­spre­chen­de Anweisung aus­ge­führt und das Programm wird geöffnet.

Das GUI ist also eine Art Über­set­zer in der Kom­mu­ni­ka­ti­on zwischen Mensch und Maschine. Ohne GUI müsste man Programme und An­wen­dun­gen über Befehle in der Kom­man­do­zei­le aufrufen. Das kann dann fol­gen­der­ma­ßen aussehen (das Beispiel zeigt das Öffnen des Explorers):

Ein Graphical User Interface verbindet visuelles Design und Pro­gram­mier­funk­tio­nen. Es bietet daher Schalt­flä­chen, Drop-down-Menüs, Na­vi­ga­ti­ons­fel­der, Such­fel­der, Symbole und Widgets. Ent­wick­ler sollten dabei vor allem auf Nut­zer­freund­lich­keit achten. Übliche GUI-Kom­po­nen­ten sind:

• Ein­ga­be­fel­der
• Fenster
• Leinwände (Canvas)
• Rahmen
• Schalt­flä­chen
• Schrift­fel­der
• Text­fel­der

Der Pa­pier­korb ist ein gutes Beispiel für ein in den meisten Be­triebs­sys­te­men zu findendes Element. Und er wird sowohl bei Windows als auch bei Mac grafisch als ein Pa­pier­korb dar­ge­stellt. Dadurch ist dem Benutzer sofort klar wozu der Pa­pier­korb dient: dem Löschen von Do­ku­men­ten und Dateien.

Beim Schreiben von GUIs setzten Ent­wick­ler auf er­eig­nis­ba­sier­tes Pro­gram­mie­ren, denn sie können nicht vor­aus­sa­gen, welche Tä­tig­kei­ten der Anwender ausführen wird. Daher kann man GUIs nicht linear pro­gram­mie­ren, sondern muss sie so schreiben, dass ein Kommando nur dann aus­ge­führt wird, wenn der User das Signal dafür gibt.

Eine gute grafische Be­nut­zer­ober­flä­che sollte in erster Linie dem Nutzer die Bedienung er­leich­tern. Bei der Kon­zep­ti­on ist wichtig, dass das GUI eine intuitive Steuerung erlaubt. Um das zu erreichen, benötigt man al­ler­dings ein gutes Ver­ständ­nis für die Be­dürf­nis­se und Vorlieben der Nutzer. Ein User-Ex­pe­ri­ence-ori­en­tier­tes Design zielt darauf ab, dem Benutzer das zu bieten, was er sich von der Anwendung erhofft. Worauf man bei der Ent­wick­lung eines GUIs auf jeden Fall achten sollte, sind folgende Merkmale:

• Einfache Schnitt­stel­len. Es empfiehlt sich, auf unnötige Design-Elemente zu ver­zich­ten und einfache und klar ver­ständ­li­che Be­zeich­nun­gen zu wählen.
• Zweck­ori­en­tier­tes Layout: Jede Seite sollte gut struk­tu­riert sein; jedes Element sollte eine klare Funktion erfüllen.
• Kon­sis­tenz: Bei der Ver­wen­dung mehrerer Elemente und Grafiken ist es wichtig, dass alle einzelnen Be­stand­tei­le auf­ein­an­der ab­ge­stimmt sind.
• Design und Ty­po­gra­fie: Design-Einheiten, Farben und Texte sollten je nach Zweck eines Be­stand­teils das Element in den Vor­der­grund oder Hin­ter­grund rücken. Wichtig ist auch, auch jeweils zur Funktion und passende und leicht er­kenn­ba­re Fonts und Schrift­grö­ßen zu verwenden.
• Benutzer Updates: Ein GUI sollte auch über Fehler und Status-Än­de­run­gen in­for­mie­ren.

Grafische Be­nut­zer­ober­flä­chen haben sich durch­ge­setzt, weil sie den Nutzern zahl­rei­che Vorteile bieten. Aber sie haben auch einige Nachteile. Wir erläutern die Stärken und Schwächen von GUIs in der un­ten­ste­hen­den Tabelle.