GUI-Design ist keine wissenschaftlich festgelegte Domäne. Vieles ist hier im Fluss und richtet sich nach aktuellen Strömungen aber auch nach kulturellen Gepflogenheiten.
Heuristische Verfahren basieren auf Erfahrungen und Vergleichen. In der Folge werden einige Aspekte näher betrachtet.

3.1 Verdichtete Information

Darstellung einer Vielzahl von gleichartigen und gleich bedeutsamen Daten. Der Anwender möchte sowohl den Überblick haben als auch Detailinformationen sehen.

  • Stellen Sie möglichst alle Informationen innerhalb einer Ansicht dar.
  • Sparen Sie Platz durch Verwendung eines kleinen Fonts.
  • Setzen Sie Farbe und Schrifttypen (z.B. fett, kursiv) zur Strukturierung ein. Der Anwender kann sich so schneller in der Informationsfülle orientieren.
  • Wählen Sie eine grafische Darstellung, die der Informationsstruktur entspricht.

Beispiele:     Fahrplan, Landkarte, Organigramm


Abb. 1-8: verdichtet Darstellung

3.2 Tabelle

Darstellung von verdichteten Daten in tabellarischer Form. Der Anwender möchte viele Informationen auf einmal sehen und Vergleiche anstellen. Ein einzelner Eintrag muss leicht aufzufinden sein.

  • Sortieren Sie die Daten nach logischen Kriterien1
  • Erleichtern Sie das Auffinden einzelner Werte durch optische Anker (z.B. bei einer alpha-betischen Sortierung durch Fettdruck für den ersten Eintrag eines neuen Buchstabens)
  • Ordnen Sie die Spalten in absteigender Wichtigkeit von links nach rechts.

Beispiel:     Adressbuch, Stückliste, Suchergebnis


Abb. 1-9: tabellarische Darstellung

3.3 Hierarchie

Darstellung verdichteter, hierarchisch geordneter Daten. Das Wissen über die Informationsstruktur ist für den Anwender von grosser Bedeutung. Es hilft ihm, Daten schnell wieder zu finden und Beziehungen zu erkennen.

  • Stellen Sie die Daten in einer Baumstruktur dar.

Beispiel:     Verzeichnisse (Dateien, Warengruppen etc.), Organigramm


Abb. 1-10: hierarchische Darstellung

3.4 Formular

Standardisierte Dateneingabe.

  • Heben Sie Pflichteingaben von optionalen Feldern optisch hervor (z.B. durch die Hinter-grundfarbe).
  • Ausgabefelder müssen von Eingabefeldern klar zu unterscheiden sein.
  • Machen Sie deutlich, welche Eingaben erwartet werden. Dies kann durch vorformatierte Felder oder Beispiele erfolgen.

Beispiel:     Internet-Bestellung, Buchungssatz anlegen, Schadensanzeige


Abb. 1-11: tabellarische Darstellung

3.5 Expertensystem

Anwendung mit langer Lebenszeit, die von den Anwendern zur Bearbeitung komplexer Aufgaben verwendet wird. Der Benutzer will eine Vielzahl von Daten gleichzeitig sehen und bearbeiten. Längere Einarbeitungszeiten werden akzeptiert.

  • Lassen Sie viel Platz für die Darstellung der Arbeitsgegenstände.
  • Platzieren Sie Statusinformationen und Werkzeuge an den Rändern.
  • Die Aufgaben müssen performant und mit möglichst wenigen Arbeitsschritten zu erledigen sein.
  • Bieten Sie Möglichkeiten zur benutzerspezifischen Konfiguration.

Beispiel:     Tabellenkalkulation, Bildbearbeitung, Audio-Schnittplatz


Abb. 1-12: Experten Darstellung

3.6 Strukturelle Wiederholung

Darstellung und Navigation folgen stets dem gleichen visuellen und strukturellen Muster. Durch die permanente Wiederholung werden die Bedeutungen implizit erfasst und die Bedienung intuitiv.

  • Verwenden Sie Symbole und Dialoge aus dem Betriebssystem-Standard, wann immer dies möglich ist.
  • Bilden Sie gleichartige Aufgaben im gleichen Interaktionsstil ab.
  • Führen Sie Standards für Buttons und Kontext-Menüs ein (Kombination, Anordnung, Beschriftungen, Default-Button).
  • Verwenden Sie gleiche Fonts und Farben zur Hervorhebung gleicher Bedeutung (Beschriftung, Erläuterung, Kontext der Bearbeitung etc.)

Beispiel:     Buch mit gleichartigem Layout aller Kapitel, Standard-Menüs und Standard-Dialoge in Windows-Programmen


Abb. 1-13: Strukturelle Wiederholung von Elementen

3.7 Gruppen verwandter Dinge

Darstellung zusammenhängender Informationen (nach der 7+/-2-Regel). Kleine Informationseinheiten können vom Anwender schnell erkannt werden.

  • Verwenden Sie visuelle Muster für die Anordnung der Gruppen.
  • Setzen Sie die Gruppen durch breitere Zeilen- oder Spaltenabstände voneinander ab.
  • Beschränken Sie den Einsatz von Gruppierungsrahmen

Beispiel:     Adressblock auf einer Kunden-Maske


Abb. 1-14: Gruppierung von Elementen

3.8 Rückkehr an einen sicheren Ort

Rückkehr zu einem konsistenten Ausgangspunkt. Der Anwender kann sich in der Anwendung “verirrt” haben.

  • Bieten Sie eine Rückkehrmöglichkeit zum letzten konsistenten Zustand an (gesicherte Datei, aktuelle Konfiguration etc.).

Beispiel:     Home-Button im Web-Browser, Zurücksetzen-Button in Eingabemasken, Standard-Button in Konfigurationsmasken


Abb. 1-15: Rückkehr an sicheren Ort

3.9 Statusanzeige

Darstellung eines Zustandes. Die Information ist für den Anwender nur gelegentlich interes-sant. Sie muss einfach zu finden sein, darf aber die Haupttätigkeit nicht stören.

  • Verwenden Sie Symbole.
  • Betonen Sie Wichtiges (z.B. durch Farbe).
  • Stellen Sie die Information immer an der gleichen Stelle dar. Behalten Sie bei mehreren Statusinformationen stets die gleiche Anordnung bei.

Beispiel:     Datei-Download, Installations-Prozedur


Abb. 1-16: Status der Bearbeitung

3.10 Mehrfach-Aktion

Auf mehrere gleichartige Objekte soll die gleiche Operation ausgeführt werden. Der Anwender möchte einzelne Bearbeitungsschritte nicht für jedes einzelne Element wiederholen.

  • Wenn eine Operation dies zulässt, so geben Sie die Möglichkeit zur Mehrfachauswahl von Objekten

Beispiel:     Löschen mehrerer Dateien, Verschieben mehrerer Objekte


Abb. 1-17: Mehrfachaktion auf Dateien


© René Probst

  • modul/m322/learningunits/lu01/theorie/lu1-kapitel_3.txt
  • Last modified: 2023/11/13 08:56
  • by 127.0.0.1