Grafische Benutzerschnittstellen

Transkript

1 Grafische Benutzerschnittstellen Benjamin Rust 22. Dezember 2006 Software Engineering Projekt

2 Gliederung 1. Teil: Ergonomie und Gestaltung 1. Die ersten GUIs 2. Software-Ergonomie 2.1. ISO Grundprinzipien des Interaktionsdesigns 3. Web-GUIs 2. Teil: Technik 4. Entwurfsmuster 5. Java-GUI-Toolkits 6. Layout-Manager 7. GUI-Builder 8. Deklarative GUI-Programmierung 2

3 Die ersten GUIs Die ersten GUIs Xerox Alto Xerox Star Erste kommerzielle Verwendung Apple Macintosh Amiga Workbench Apple Lisa Schreibtisch-Metapher Digital Research GEM Microsoft Windows 1.0 3

4 Software-Ergonomie Software-Ergonomie Gebrauchstauglichkeit von Software Berücksichtigung psychologischer Aspekte Richtlinien und Standards: DIN EN ISO 9241 Bildschirmarbeitsverordnung (BildscharbV) 4

5 Software-Ergonomie DIN EN ISO Grundsätze der Dialoggestaltung Aufgabenangemessenheit Selbstbeschreibungsfähigkeit Steuerbarkeit Erwartungskonformität Fehlertoleranz Individualisierbarkeit Lernförderlichkeit 5

6 Grundprinzipien des Interaktionsdesigns Was benötigt der Benutzer? Visualisierung der Arbeitsobjekte Lesbarkeit beachten Aktuelle Daten hervorheben Sinnvoller Einsatz von Metaphern Hohen Kontrast für Texte verwenden 6

7 Grundprinzipien des Interaktionsdesigns Farben und Strukturen Farben...lenken stark die Aufmerksamkeit...nie ausschließlich verwenden! Farbenblindheit Sekundäre Anzeigemerkmale (z.b. Grafiken) Räumliche Gliederung durch Umrandung Abstände zu anderen Elementen 7

8 Grundprinzipien des Interaktionsdesigns Farben und Strukturen Beispiel: Prinzip der Nähe 8

9 Grundprinzipien des Interaktionsdesigns Farben und Strukturen Beispiel: Prinzip der Nähe 9

10 Grundprinzipien des Interaktionsdesigns Wie arbeitet der Benutzer? Handlungsspielraum definieren Gefühl von Kontrolle vermitteln Angemessene Reaktion auf Benutzeraktionen Steuerbarkeit erfordert ausreichende Informationen 10

11 Grundprinzipien des Interaktionsdesigns Konsistenz Ähnliche Situationen sollten ähnliche Aktionsfolgen erfordern Unterschiedliches Verhalten erfordert Inkonsistenz Objekte sind konsistent mit ihrem Verhalten 11

12 Grundprinzipien des Interaktionsdesigns Konsistenz Konsistenz: Prioritäten 1. Interpretation des Benutzerverhaltens 2. Unsichtbare Strukturen 3. Kleine sichtbare Strukturen 4. Gesamtaussehen einer Anwendung 5....einer Folge von Produkten 6....aller Produkte eines Herstellers 7....aller Produkte für eine Plattform 12

13 Grundprinzipien des Interaktionsdesigns Benutzer-Effizienz Benutzer-Effizienz Computer-Effizienz Bedienung der GUI verbraucht Zeit Wartezeiten möglichst reduzieren Verzicht auf modale Dialoge Tastaturkürzel Multithreading Schlüsselwörter voranstellen 13

14 Grundprinzipien des Interaktionsdesigns Benutzer-Effizienz Fitts Law The time to acquire a target is a function of the distance to and size of the target. Große Objekte sind schneller Bildschirmecken und -ränder am geeignetsten 14

15 Grundprinzipien des Interaktionsdesigns Exploration Mehr als einen Weg bieten, die Aufgabe zu erledigen......aber einen Weg besonders auszeichnen Stabile, sichtbare Navigationselemente Mehrstufiges Undo ist besser als Sicherheitsabfragen Sicherheitsabfragen sind besser als nichts 15

16 Web-GUIs Web-GUIs Passive, zustandslose Umgebung Lange Antwortzeiten stören den Arbeitsfluss durch Web 2.0 größtenteils gelöst Browser besitzt eigene GUI, die im Weg ist 16

17 Gliederung 1. Teil: Ergonomie und Gestaltung Die ersten GUIs Software-Ergonomie ISO Grundprinzipien des Interaktionsdesigns Web-GUIs 2. Teil: Technik 4. Entwurfsmuster 5. Java-GUI-Toolkits 6. Layout-Manager 7. GUI-Builder 8. Deklarative GUI-Programmierung 17

18 Entwurfsmuster Composite Repräsentation von Teil-Ganzes-Hierarchien Clients können einzelne Objekte und Kompositionen von Objekten gleich behandeln Verwendet z.b. von Widget-Containern 18

19 Entwurfsmuster Observer Benachrichtigung abhängiger Objekte über Änderungen an einem Objekt Abhängige Objekte müssen nur Schnittstelle implementieren und sich anmelden Listener in Java 19

20 Entwurfsmuster Model-View-Controller 20

21 GUI-Toolkits GUI-Toolkits für Java AWT (Abstract Window Toolkit) Seit 1995 (Erste Release von Java) Verwendet native GUI-Komponenten Bietet nur Widgets, die auf allen Plattformen verfügbar sind Swing Seit Java 1.2 (1998) Schwer- und leichtgewichtige Komponenten Plugable Look-and-Feels 21

22 GUI-Toolkits GUI-Toolkits für Java SWT (Standard Widget Toolkit) Seit 2001 (für Eclipse entwickelt) Verwendet native Widgets Emuliert fehlende Widgets Benötigt Bibliothek für Zielplattform 22

23 GUI-Toolkits SWT SWT Display: Verbindung von SWT mit der GUI des OS Shell: Ein (Dialog-)Fenster als Widget-Container Darstellungsstile werden den Konstruktoren übergeben sind nachträglich nicht änderbar Keine Garbage Collection für GUI-Elemente! You create the Object, you must dispose it. 23

24 GUI-Toolkits SWT SWT public static void main(string args[]) { Display display = new Display(); Shell shell = new Shell(display); // // Your GUI code here. Fenster öffnen // shell.pack(); shell.open(); while (!shell.isdisposed()) Fenster freigegeben? { if (!display.readanddispatch()) } display.sleep(); } display.dispose(); Auf Events warten Event-Queue abarbeiten 24

25 Layout-Manager Layout-Manager Kümmern sich um die Anordnung der Widgets und deren Verhalten bei Größenänderung Bei einer Größenänderung muss sich ein Widget neu zeichnen......aber wie groß? 25

26 Layout-Manager SWT-Layout-Manager FillLayout Eine Zeile oder Spalte Alle gleich groß, nehmen max. Platz ein GridLayout Tabellenartig Eigenschaften über GridData-Objekte RowLayout Zeilen oder Spalten (mit Umbruch) Abstände und Widget-Ausrichtung FormLayout Freie Platzierung: Jedes Widget steht in Beziehung zu seinen Nachbarn/Rand 26

27 GUI-Builder GUI-Builder Schnelles Prototyping Leichter zu handhaben als Code Kriterien: Ein- oder Zwei-Wege-Verfahren Code-Generierung vs. eigener Code/Ergänzungen Reverse Engineering Zusätzliche Bibliotheken nötig? 27

28 GUI-Builder Visual Editor 28

29 GUI-Builder Jigloo 29

30 GUI-Builder Window Builder Pro 30

31 Deklarative GUI-Programmierung Deklarative GUI-Programmierung Bislang: Imperativer Code wird für Anwendungslogik und GUI geschrieben Deklarativer Ansatz: Statische GUI-Elemente werden modelliert (z.b. in XML) Code wird aus dieser Beschreibung generiert......oder sie wird zur Laufzeit interpretiert 31

32 Deklarative GUI-Programmierung Deklarative GUI-Programmierung Vorteile Trennung von (statischer) GUI und Anwendungslogik Struktur der GUI bleibt in XML erhalten Einige Vertreter XSWT (XML Standard Widget Toolkit) XUL (XML User-interface Language) XAML (extensible Application Markup Language) 32

33 Deklarative GUI-Programmierung Beispiel: XSWT final List list = new List(shell, SWT.BORDER); list.setlayoutdata(new GridData(SWT.FILL, SWT.FILL, true, true)); final Group addentrygroup = new Group(shell, SWT.NONE); addentrygroup.settext("add entry"); addentrygroup.setlayoutdata(new GridData(SWT.FILL, SWT.CENTER, final GridLayout gridlayout = new GridLayout(); gridlayout.numcolumns = 2; addentrygroup.setlayout(gridlayout); final Text text = new Text(addEntryGroup, SWT.BORDER); text.setlayoutdata(new GridData(SWT.FILL, SWT.CENTER, true, false)); final Button addbutton = new Button(addEntryGroup, SWT.NONE); addbutton.settext("add"); <list x:id="list" x:style="border"> <layoutdata x:class="griddata" grabexcesshorizontalspace="true" grabexcessverticalspa </list> <group text="add entry"> <layoutdata x:class="griddata" grabexcesshorizontalspace="true" grabexcessverticalspa <layout x:class="gridlayout" numcolumns="2"/> <x:children> <text x:id="text" x:style="border"> <layoutdata x:class="griddata" grabexcesshorizontalspace="true" grabexcessver </text> <button x:id="addbutton" text="add"/> </x:children> </group> 33

34 Zum Schluss Quellen [1] ISO : Dialogknigge, [2] Bruce Tognazzini, First Principles of Interaction Design, [3] Simon Rutishauser, SWT Tutorial, [4] Visual Editor Project, [5] CloudGarden Jigloo, [6] Instantiations WindowBuilder Pro, [7] XSWT, 34

35 Zum Schluss Danke für eure Aufmerksamkeit! 35