Navigation überspringen

Benutzeroberflächen (View, V)

Grafische Benutzeroberflächen

KomponentenAn Software ohne grafische Benutzeroberflächen können sich nur wenige Benutzer noch erinnern. Grafische Benutzeroberflächen (Abk. GUI für den englischen Begriff Grafical User Interface) dominieren Heutzutage und dienen dazu die Eingaben des Benutzers in einer Anwendungssoftware zu erfassen. Diese Interaktionen des Benutzer dienen als Impulse und lösen im Softwaresystem Ereignisse aus, machen sie damit also bedienbar. Die Ereignisse folgen immer dem Prinzip der Eingabe-Verarbeitung-Ausgabe (EVA-Prinzip) egal welches Softwaresystem angesteuert wird.

Die Softwareindustrie beschäftigt sich Heutzutage sehr intensive mit der Gestaltung grafischer Benutzeroberflächen, da die Benutzeroberfläche aus Sicht des Benutzers das wichtigste Qualitätsmerkmal ist. Software muss selbsterklärend funktionieren, um erfolgreich zu sein! Der Kerngedanke dabei ist: Das Beste ist immer Einfach! Das Wissenschaftliche Gebiet der Gestaltung und Optimierung grafischer Benutzeroberflächen heißt im übrigen Software-Ergonomie. Vor allen Dingen ein Modewort (engl. Buzzword) beschäftigt derzeit die Gemüter bei der Gestaltung grafischer Benutzeroberflächen: "Simplicity" (Einfachheit).

In den folgenden Erläuterungen werden wir Benutzeroberflächen in den gängigsten Programmiersprachen beschreiben und vor allen Dingen die Gemeinsamkeiten und Einsatzgebiete klären.

Komponenten 

Komponenten (Components, Widgets) sind einzelne Bedienelemente. Die Bedienelemente (syn. Steuerelemente) werden Heutzutage meistens in sogenannten Fenstern (engl. Windows) organisiert/angeordnet. Je nach Sprache, Umgebung und Zweck werden diese Kompositionen aus Bedienelementen auch gelegentlich Formulare genannt. Rein optisch sind die Komponenten recht einfach zu Unterscheiden. Dabei sollte der Softwareentwickler unbedingt darauf achten, dass der Sinn für den Einsatz einer Komponente zweckmäßig ist.

Da wir Komponenten in vielen Kontexten verwenden werden legen wir hier an dieser Stelle auch fest welche Kennzeichnung (Präfixe) wir in den Komponentennamen verwenden. Damit stellen wir sicher, dass wir künftig am verwendeten Präfix im Komponentenname erkennen können, welche Art Komponente für die Benutzeroberfläche verwendet wurde.

Komponenten
Optik Bezeichnung Zweck Präfix
 1 Radiobutton | Optionsfeld Einfachauswahl rb_
 2 Checkbox | Markierfeld
Mehrfachauswahl cb_
 3 Textfield | Texteingabefeld Eingabefeld tf_
 4 Lable | Bezeichner Anzeigefeld lb_
5 Button | Schaltfläche Klickfeld bt_
6 Spinner/Drop-Down-Menüs | Listenfeld Listenauswahlfeld sp_, dd_, pi_
7 Trackbar | Schieberegler Regulierfeld tb_
8 Toggle Button, Switch | Schalter On-Off sw_
9 App Icons, Starter Startfeld icon_

HTML-/ PHP- Templates

Geeignet für die Auswertung in den gängigen Objektorientierten Sprachen. 

Beispiel-Templates (Formulare):

Fallbeispiel Umsatzrechner

Praxis: Web-Framworks mit Python, wie Django, Zope

XML-Templates

Geeignet für die Auswertung in den gängigen Objektorientierten Sprachen.

Beispiel-Templates:

Notenrechner.

Rabattrechner

Darlehnsrechner

Login

Fallbeispiel Umsatzrechner

Welcomeuser

Währungsrechner

CowCounter

Praxis: XML User Interface. Ein Java und XML-Framework für große Anwendungen u.a. auch für Mobile-Endgeräte.

Sonstige

Java Swing:

Fallbeispiel Umsatzrechner

Login

Python:

BMI-Rechner

Notenrechner.

Taschenrechner

Rabattrechner

Darlehnsrechner

Fallbeispiel Umsatzrechner

Login

JavaServer Pages:

Fallbeispiel Umsatzrechner