Graphische Nutzerschnittstellen

Transkript

1 Graphische Nutzerschnittstellen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik Raum Tel / FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 1 Lernziele Grundlegende Kenntnisse in der Grafikprogrammierung Allgemeiner Aufbau von Benutzeroberflächen Grafische Elemente GUI-Style Guide Design der Oberfläche (Dialog, SDI, MDI, RDI) Layertechnik (GUI vs. Code, Middleware) Vertiefende Kenntnisse in der Programmierung Design Pattern Testroutinen (Junit) Interface-Technik Threads FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 2 1

2 Inhalt 1. Einführung, Literatur, Begriffe 2. Architektur eines Fenstersystems 3. Java-Dialog 4. Grafik in Java 5. Benutzeroberfläche (Dialog, SDI, MDI, SDI, RDI) 6. Design Pattern (Framework, Mehrschicht Anwendung) 7. Testroutinen (JUnit) 8. JDBC (Datenbankanbindung) 9. Threads FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 3 Literatur Klingert, A.: Einführung in graphische Fenstersysteme, Springer Verlag, Berlin, 1996 (HS-Harz) Herczeg, M.: Einführung in die Software-Ergonomie, Gestaltung graphische-interaktiver Systeme, de Gruyter (HS-Harz) Foley, van Dam, Feiner, Hughes: Computer Graphics, Principles and Practice, Addison Wesley, 1990 Stary, Chr.: Interaktive Systeme, Vieweg Verlag, Braunschweig, 1994 Balzert, H: Lehrbuch der Softwaretechnik, Akademische Verlagsgesellschaft, Mannheim, 1996 Edwards, A.D.N.: Extra-Ordinary Human-Computer Interaction, New York: Cambridge University Press, 1995 Horstmann, Cornell: core Java Volume I/II, Sun microsystems FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 4 2

3 Erläuterung grundlegender Begriffe Mensch-Maschine Kommunikation Kommunikation zwischen Mensch und Maschinen über einen technischen Kanal Mensch-Computer Kommunikation Kommunikation eines oder mehrerer Menschen mit einem Computer über Ein-/Ausgabegeräte Dialogsysteme Anwendungen der Informatik die vor allem verbale Kommunikation ermöglichen Interaktive Systeme Anwendungen der Informatik die vor nichtverbale Kommunikation ermöglichen Benutzeroberfläche Der Teil eines Anwendungsprogramms, der für den Benutzer wahrnehmbar wird und mit dem eine Interaktion realisiert wird. FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 5 Generationen von Benutzeroberflächen Graphisch Hochauflösender Bildschirm, Zeigegerät Masken Direkte Manipulation WYSIWYG Generation E/A Geräte Interaktionstechniken Textuell Zeichenorientierter Kommandos, Bildschirm, Interview Tastatur Semigraphisch Cursorsteuerung Menüs, Formulare, Programmierwerkzeuge Einfache E/A Befehle (scanf, printf, cd Graphikzeichen, Positionierbefehle, Maskengeneratoren Benutzerschnittstellen baukästen, Generatoren FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 6 3

4 Beispiel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 7 Beispiel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 8 4

5 Beispiel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 9 FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 10 5

6 Register: ab Win 95 FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 11 Beispiel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 12 6

7 Beispiel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 13 Beispiel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 14 7

8 Beispiel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 15 Beispiel aus Win 3.1 FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 16 8

9 Beispiel aus Win 3.1 FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 17 Beispiel aus Win 3.1 FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 18 9

10 Hilfefenster mit Fragen Quelle: Joel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 19 Literat Quelle: Joel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 20 10

11 Wenig Mehraufwand beim Lesen 1. Bild: mehr Text Bessere Akzeptanz beim zweitem Bild Quelle: Joel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 21 Ein oder zwei Schalter FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 11

12 Falsches Drag & Drop? FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 23 Immer die richtigen Tasten! FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 24 CAL 12

13 Tipps Verwendung der Usibility der Konkurrenten Microsoft ist ein quasi Standard, Millionen Anwender benutzen Winword, Excel, IExplorer Fensterdarstellung (Explorer) Tastencode (Alt-Left, F6) Amazon speichert die Daten 90 Tage, ein eigener Shop speichert diese nur 10 Tage, nach 11 Tagen ruft der Kunde den eigenen Shop auf: Datenverlust, ein Kunde weniger Vermeiden von unnötigen Optionen Menübar in Winword Featuritis Verwendung der richtigen Symbole Verwendung einheitlicher Tastencodes (Strg+X ) Quelle: Joel FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 25 Tipps Anwender lesen Handbücher Anwender können die Maus nicht bedienen (ComboBox) Anwender können sich nichts merken Verwendung von nichtproportionalen Schriften in Editboxen FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 26 13

14 Aktuelle Aspekte grafischer Benutzeroberflächen Ca % Anteil am Entwicklungsaufwand von Anwendungen Die GUI ist für die Akzeptanz einer Anwendung entscheidend Anforderung: Benutzerfreundlichkeit statt Korrektheit Attraktivität statt Effizienz keine einheitlichen Standards, Mangel an Portabilität Java Swing, Java SWT, Qt Anforderungen und technische Möglichkeiten (HW) entwickeln sich schneller als Entwicklungswerkzeuge (SW) wachsende Kluft zwischen Benutzung und Programmierung FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 27 Evaluation von Benutzeroberflächen Nach ISO 924, Teil 11t: Hypothesen Zufriedenheit, Effektivität Effizienz bestimmen Sammeln von Daten Beobachtung, Video/Audio Protokoll Microsoft und andere Schlussfolgerungen ziehen Daten sammeln Vorlesung HS-Harz, Medieninformatik Eye-catching Programmzusätze Befragung (schriftlich, mündlich), Checkliste Expertenmeinung Daten verdichten Kommentare von Kunden, Flurtest Tester sind billiger als Programmierer FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 28 14

15 Entwurfsprinzipien (Preim, 1999) Informiere dich über potenzielle Benutzer und ihre Aufgaben Hilf Benutzern ein konzeptuelles Modell zu entwickeln Sprich in der Sprache des Benutzers Mach Systemzustände sichtbar und unterscheidbar Mach die jeweiligen möglichen Aktionen deutlich Strukturiere die Benutzeroberfläche Stelle eine erkennbare Rückkopplung zum Benutzer sicher Mache die grafische Schnittstelle adaptierbar, anpassbar Kombiniere visuelle Interaktionen mit textueller Interaktion Vermeide es, dass Benutzer sich viele Dinge merken müssen Ermögliche es, Aktionen rückgängig zu machen Mach es leicht, Fehler zu erkennen, zu diagnostizieren und zu beheben Vermeide es, den Benutzer zu überraschen (Excel MDI) Erkläre die Bedienung des Programms vor allem durch Beispiele und weniger durch Formalismen. Ordne die Bedienhandlungen nach ihrer Wichtigkeit, mit dem Ziel die wichtigsten Aktionen besonders gut zu unterstützen FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 29 Dialoggestaltung Aufgabenangemessenheit: nur für dem Arbeitsplatz? Selbstbeschreibungsfähigkeit: was kennt der Benutzer schon Steuerbarkeit: überall etwas einstellen (Optionen) Erwartungskonformität: Ausnahmen sind möglich! Lernförderlichkeit: inkrementell vorgehen Individualisierbarkeit pro Sitzung im Netz FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 30 15

16 Ziele bei der Entwicklung von Benutzeroberflächen Langfristige Perspektiven: Bedeutung der Benutzeroberfläche Auswirkungen guter und schlechter Benutzeroberflächen Verschiedenheit der Benutzer und der Anwendungen Anwendung von Methoden und Werkzeugen: Abwägen von Interaktionstechniken und Ein-/Ausgabegeräten Vorteile und Kosten von Werkzeugen zur Implementierung Bedeutung von Lernmaterial Bedeutung und Probleme der Bewertung Informatik übergreifende Aspekte: Psychologen unterstützen das Design und bewerten die Oberfläche (Evaluation) Technische Autoren stellen Handbücher, Hilfetexte, usw. her Statistiker analysieren die Benutzeroberfläche (Zeit, Fehler) Grafiker erstellen effektive und motivierende Anzeigeinhalte (CSS) FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 31 16