Grafikprogrammierung
Grafische Benutzerschnittstellen

Das Weiterschalten der Folien kann ebenfalls durch das Klicken auf den rechten bzw. linken Folienrand erfolgen.

• GUI ("Graphical User Interface")
• Benutzeroberfläche, die Mensch-Computer-Interaktion über grafische Komponenten erlaubt
• Anwendungen werden als Fenster dargestellt
• Fensterinhalt wird aus grafischen Komponenten aufgebaut, auch "Widgets" genannt
• Mittels grafischer Komponenten wird die Information ein- und ausgegeben
• Interaktion mit grafischen Steuerelementen in der Regel per Maus u. Tastatur; heutzutage auch häufig per Touchscreen

In den frühen 80er Jahren kamen die ersten Geräte mit grafischer Benutzeroberfläche und Mauseingabe auf den Markt, wie z.B.

Apple Lisa

• Apple Lisa (1983)
• MS Windows 1.0 (1985)
• Amiga Workbench (1985)

• Viele Anwendungen, die dazu dienen, kreative Inhalte zu erstellen, starten mit einem leeren "Canvas" und einer Palette mit Werkzeugsymbolen
• Beispiele: MS Word, MS Powerpoint, Photoshop, etc.
• Oft ist es möglich, mehrere Dokumente geöffnet zu haben und gleichzeitig zu bearbeiten

• Vorteil von Werkzeugsymbolen gegenüber Menüleisten ist der schnelle Zugriff mit nur einem Mausklick
• Ein Ziel beim GUI-Design einer Anwendung ist u.a., einen möglichst schnellen Zugriff zu erlauben
• Häufig verwendete Aktionen müssen schnell erreichbar sein, andere können mehr Klicks erfordern
• Geübte Nutzer verwenden auch häufig Tastaturkürzel, wie z.B. CTRL+C zum Kopieren (System-Standards beachten!)

• Je nach Einsatzzweck sieht eine GUI anders aus:
  Inhalte betrachten, in Datenbank suchen, neue Inhalte erstellen, bestimmte Aufgabe lösen
• Beispiel: Ein einfacher Video- oder Bildbetrachter kommt mit wenigen Bedienelementen aus
• Beispiel: Ist der Weg zum Lösen der Aufgabe bekannt, kann der Benutzer schrittweise geführt werden

Die Gestaltpsychologie nennt einige Gesetze zum Gruppieren von Komponenten

• Gesetz der Nähe
• Gesetz der Ähnlichkeit
• Gesetz der Kontinuität
• Gesetz der einfachen Gestalt

Nahe beieinander platzierte Objekte gehören zusammen

Objekte mit der gleichen Farbe, Form, Größe, Orientierung, etc. gehören zusammen

Komponenten werden gruppiert, wenn sie gemeinsam eine einfache Form ergeben

Kleine Komponenten werden zu größeren Objekten gruppiert, wenn Linien/Kurven kontinuierlich fortgesetzt werden können

Welche Art der Gruppierung/Zusammengehörigkeit von Komponenten existieren hier?

Verschiedene Arten von Widgets

• Komponenten, die eine Aktion anstoßen
• Komponenten, die eine Eingabe abfragen
• Komponenten, die Inhalte darstellen
• Komponenten, die etwas gruppieren
• Komponenten, die Größe oder Ausschnitt verändern

Mit diesen Komponenten wird typischerweise eine ausführbare Funktion verknüpft, die beim Aktivieren aufgerufen wird

• Schaltfläche (Button)
• Menü-Leiste und Menü-Einträge
• Kontext-Menü
• Werkzeugleiste
• etc.

Diese Komponenten können z.B. eine ausführbare Funktion aufrufen, wenn sie editiert werden

• Texteingabefeld
• Schieberegler
• Kombinationsfeld
• Spinbox/Spinner
• Radiobutton
• Kontrollkästchen
• etc.

• Bezeichnungsfeld
• Fortschrittsbalken
• Listen
• Bäume
• Tabellen
• etc.

• Gruppenfeld

• Reiter (Tabs)

• etc

• Scroll-Leiste

• Größenziehpunkt

• etc.

• Undo wird in der Regel mit einem Stapelspeicher implementiert
• Jede Aktion des Benutzer wird auf den Stapel gelegt
• Möchte der Benutzer Aktionen rückgängig machen werden diese nacheinander vom Stapel genommen und für jede Aktion die Umkehrfunktion ausgeführt
• D.h. hoher Mehraufwand für den Programmierer, da auch die Umkehrfunktion implementiert werden muss
• Ist eine Funktion verlustbehaftet (löscht Daten) müssen die Daten gespeichert werden
• Daher hat der Stapelspeicher typischerweise eine definierte maximale Größe

• Bei längeren Berechnungen sollte immer ein Fortschrittsbalken angezeigt werden
• Dies gibt dem Benutzer eine Voraussage wie lange die Aktion dauert und motiviert zum Warten
• Längere Berechnungen sollten jederzeit vom Benutzer abgebrochen werden können
• Nach einem Abbruch sollte die Anwendung im selben Zustand sein wie vorher (Arbeiten auf temporären Datenstrukturen)
• Idealerweise sollten längere Berechnungen im Hintergrund laufen (nicht immer sinnvoll, wenn der Benutzer Zustand/Daten dann noch ändern kann)

Anregungen oder Verbesserungsvorschläge können auch gerne per E-mail an mich gesendet werden: Kontakt

Weitere Vorlesungsfolien

Folien auf Englisch (Slides in English)