human computer interaction - gdv.informatik.uni-frankfurt.de · ‣ idee, konzept, story ‣...
TRANSCRIPT
1
Hier wird Wissen Wirklichkeit
Human Computer Interaction
Tools
Prof. Dr. Detlef KrömkerInstitut für InformatikJohann Wolfgang Goethe-Universität
Prof. Dr. Detlef KrömkerInstitut für Informatik
2 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Rückblick
Akademische Forschung
Theorienund Modelle
Algorithmenund Prototypen
KontrollierteExperimente
Erfolgreiche Benutzungsschnittstellen
Richtlinienund
Prozesse
UISoftware
Tools
Experten-Reviewsund
UsabilityTesting
2
Prof. Dr. Detlef KrömkerInstitut für Informatik
3 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Übersicht
Spezifikationsmethoden
User Interface Builder
Testen
Prof. Dr. Detlef KrömkerInstitut für Informatik
4 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Spezifikationsmethoden
‣ Gestaltung von Benutzungsschnittstellen bedarf Notationsformen zur Beschreibung unterschiedlicher Lösungsansätze
‣ Ansätze‣ Natürliche Sprache‣ Storybook‣ Formale Sprachen
‣ Grammatiken‣ Menüauswahl-Bäume‣ Transitionsdiagramme
‣ Interface Builder‣ CASE-Tool/Application Framework
3
Prof. Dr. Detlef KrömkerInstitut für Informatik
5 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Spezifikationsmethoden: Natürliche Sprache
‣ Natürlich-sprachliche Beschreibung als “Standardansatz”‣ Ggf. Ergänzt durch graphische Darstellungen
‣ Nachteile natürlich-sprachlicher Spezifikationen‣ länglich ‣ vage ‣ mehrdeutig
‣ Problematisch zur Überprüfung auf ‣ Korrektheit ‣ Konsistenz ‣ Vollständigkeit
Prof. Dr. Detlef KrömkerInstitut für Informatik
6 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Spezifikationsmethoden
immer 1. Schritt: Szenario-Beschreibung (Text – nicht formalisiert)
‣ Grundlage des Szenario-basierten Designs
4
Prof. Dr. Detlef KrömkerInstitut für Informatik
7 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Storybook
Schlüsselbegriff aus dem Bereich Film, Video und Animation, dort weit entwickelt
gehört zum Bereich Preproduktion
‣ Idee, Konzept, Story‣ Screenplay (linear - nonlinear)‣ Storyboard
‣ conceptual storyboard‣ presentation storyboard‣ production storyboard‣ (character sheets)
‣ Production Planning‣ teams (1...100), budget, resources,
schedule, ...
wir können einzelne Techniken entleihen� ein kleiner Ausflug!
Postproduction
Rendering
Animation
Scene Modelling
Object Modelling
Preproduction
Prof. Dr. Detlef KrömkerInstitut für Informatik
8 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Preproduction
‣ Wer? Was? Wann? Wie?‣ Entscheidend ist die Art der Produktion:
‣ Werbung (Agenturen � Spot, Commercial) sehr formalisiert‣ Industriefilm („ultra low budget“) weniger formalisiert‣ Kurzfilm oft auch frei‣ Feature Film sehr formalisiert‣ Lehrfilm („ultra, ultra low budget“ ... leider fast immer ) weniger formalisiert‣ MM-Präsentation (CD, Kiosk, Web, eLearning..) weniger formalisiert‣ Spiel wird langsam formalisiert‣ Installation (Museum, Ausstellung, ...) oft auch frei
‣ aber im Prinzip ähnlich: Grad der Arbeitsteilung und das Risiko bestimmen den Grad der Formalisierung: Rollen, Arbeitsschritte, Abnahmen, …
5
Prof. Dr. Detlef KrömkerInstitut für Informatik
9 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Kostenkalkulation in Multimedia-Produktionen ... gilt ähnlich auch bei HCI
‣ Projektmanagement‣ Konzeption‣ Produktion‣ Test
zuzüglich‣ Gebühren, Rechte, Lizenzen‣ Packaging‣ Sonstiges: Server, Wartung
30 %
70 %
„Faktor Kunde“Meetingszusätzliche PräsentationenVorabversionen für MessenAutorenkorrekturenÄnderungen im PflichtenheftUmständliche FreigabenAchtung bis zu + 30% mehr„geheime Zusatzkosten“
Prof. Dr. Detlef KrömkerInstitut für Informatik
10 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Typische erste Schrittez.B. im Bereich Werbung
‣ Auftraggeber�Agentur „Briefing“ ‣ Zweck und Bestimmung des Auftrags‣ Umfeld des Auftrags: Quellen, Daten, ..., Budget
Wichtige Dokumente:‣ Exposé beschreibt die Projektidee‣ Screenplay mit Treatment (1. Präsentation für den Kunden, definiert:
wie soll das Produkt aussehen, wenn interaktiv: Funktionalität, Ablaufsteuerung)
‣ Grobplanung: ‣ Ablaufstruktur und ‣ Anforderungskatalog (Pflichtenheft)
6
Prof. Dr. Detlef KrömkerInstitut für Informatik
11 Hier wird Wissen WirklichkeitB-CG – V06 Tools
„X-Film oder Games“Storytelling
‣ Stories kommunizieren Fakten‣ Stories beantworten Fragen‣ Stories erzeugen Emotionen‣ Stories provozieren Aktionen
‣ Stories sind linear oder nichtlinear
‣ Stories sind die Grundlage einer jeden Animation, eines jeden Spiels
‣ Animationen sind die visuelle (bewegte) Interpretation einer Story
Prof. Dr. Detlef KrömkerInstitut für Informatik
12 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Screenplay
‣ Ist ein Schriftstück, das eine Story erzählt, enthält‣ Beschreibungen, Dialoge, Produktionshinweise
‣ Im Gegensatz zu einer Novelle, einem Roman etc., ist das Screenplaykein Endprodukt, es beschreibt‣ um was geht es?‣ welche Characters (Figuren, Objekte, ...) gibt es. etc.
‣ Daumenregel: eine Seite Screenplay pro Minute Animation
7
Prof. Dr. Detlef KrömkerInstitut für Informatik
13 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Screenplay (2)
‣ enthält immer ein sogenanntes Treatment des Inhaltes:‣ Zielgruppe‣ Visuelle Ausprägung
‣ kann in unterschiedlichen dramaturgischen oder narrativen Formengeschrieben sein, insbesondere kann es linear (z.B. Film) oder nichtlinear (z.B. Computerspiel) sein
Prof. Dr. Detlef KrömkerInstitut für Informatik
14 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Screenplay (3)„Standardgliederung“ für lineare Medien
Three act structure:
‣ Beginning (exposition, setup): ‣ stellt die Hauptdarsteller vor‣ stellt den Ort der Handlung vor‣ setzt die Ereignisse, Situationen, von denen sich die Handlung entwickelt
‣ Middle (development)‣ Konfrontation (climax)
‣ End (resolution, dénouement)‣ Ergebnisse, Folgen
8
Prof. Dr. Detlef KrömkerInstitut für Informatik
15 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Screenplay (4) - Beispiel für die klassische Struktur: Adam and Eve
‣ Establish Characters and Situations
‣ Introduce Agent of Conflict
‣ Develop Conflict
‣ Climax
‣ Resolution
God, Garden of Eden, Adam and Eve, apple
Snake
Snake persudes Eve. –Eve persudes AdamEffect of apple: They feel the need for
clothesClothes indicate to God their
disobedience
They are questioned
Expulsion from Heaven
Prof. Dr. Detlef KrömkerInstitut für Informatik
16 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Nonlinear Storytelling
‣ für interaktive Produkte: (Videos, Filme, Animationen, ... Spiele)
‣ wichtigstes Hilfsmittel (hier wieder aktuell) ‣ Flußdiagramme geeignet für „kleine – mittlere“ Projekte
stellt dar: ‣ „flow of events“ oder ‣ Navigationsstruktur
‣ Interaktions- oder Dialogdesign
9
Prof. Dr. Detlef KrömkerInstitut für Informatik
17 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Navigations – Grundstrukturenfür MM und interaktive Animationen
‣ Lineare Struktur‣ Jumplineare Struktur‣ Baumstruktur‣ Netzstruktur‣ Singleframe Struktur‣ See-and-Point-Struktur
Seite / Szene
Jede Seite setzt die Kenntnis der vorangegan-genen voraus
„Autoshows“
Prof. Dr. Detlef KrömkerInstitut für Informatik
18 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Navigations – Grundstrukturenfür MM und interaktive Animationen
‣ Lineare Struktur‣ Jumplineare Struktur‣ Baumstruktur‣ Netzstruktur‣ Singleframe Struktur‣ See-and-Point-Struktur
Standardstruktur für Kiosksysteme
10
Prof. Dr. Detlef KrömkerInstitut für Informatik
19 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Navigations – Grundstrukturenfür MM und interaktive Animationen
‣ Lineare Struktur‣ Jumplineare Struktur‣ Baumstruktur‣ Netzstruktur‣ Singleframe Struktur‣ See-and-Point-Struktur
Für den Benutzer „gerade noch“ übersichtliche Struktur
Prof. Dr. Detlef KrömkerInstitut für Informatik
20 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Navigations – Grundstrukturenfür MM und interaktive Animationen
‣ Lineare Struktur‣ Jumplineare Struktur‣ Baumstruktur‣ Netzstruktur‣ Singleframe Struktur‣ See-and-Point-Struktur
sehr viel Freiheit
Problem: „lost in hyperspace“
Ggf. durch sehr klare Nagivationselemente milderbar!
11
Prof. Dr. Detlef KrömkerInstitut für Informatik
21 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Navigations – Grundstrukturenfür MM und interaktive Animationen
‣ Lineare Struktur‣ Jumplineare Struktur‣ Baumstruktur‣ Netzstruktur‣ Singleframe Struktur‣ See-and-Point-Struktur
Der Nutzer erlebt diese Struktur als eine Seite: man erreicht jede andere Seite direkt!Dazu sollten diese optisch nahezu gleich sein: „Lexikonstruktur“
Prof. Dr. Detlef KrömkerInstitut für Informatik
22 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Navigations – Grundstrukturenfür MM und interaktive Animationen
‣ Lineare Struktur‣ Jumplineare Struktur‣ Baumstruktur‣ Netzstruktur‣ Singleframe Struktur‣ See-and-Point-Struktur
Weiterentwicklung der Singleframe-Struktur
Details werden im z.B im Overlay oder Fokusmodus präsentiert (z.B. eigenes Fenster mit <back>-Funktion)
Achtung: nicht zu viele Verzwei-gungsmöglichkeiten anbieten
12
Prof. Dr. Detlef KrömkerInstitut für Informatik
23 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Storyboarding
‣ Ein Storyboard (ungenau Drehbuch) ist die visuelle Interpretation des Screenplays:‣ Enthält viele Skizzen und Bilder, die in der Regel die Sicht der
Kamera wiedergeben‣ Produktionsnotizen –zeichen und Skizzen‣ organisiert häufig in einer Serie von Panels (z.B. A4)
‣ Man unterscheidet:‣ conceptual storyboard‣ presentation storyboard‣ production storyboard
Prof. Dr. Detlef KrömkerInstitut für Informatik
24 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Conceptual Storyboard
‣ Wird benutzt, um die grundlegenden visuellen Ideen zu skizzieren:‣ Aktionen der Character (alle „aktiven“ Objekte)‣ Positionen und Bewegungen der Kamera‣ Timing der Bewegung (schwierig!)‣ Schnitte
‣ In der Regel noch skizzenhaft und roh.
13
Prof. Dr. Detlef KrömkerInstitut für Informatik
25 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Presentation Storyboard
‣ Präsentiert eine visuelle Zusammenfassung der Produktion
‣ Zielgruppe: Entscheider (Produzenten, Supervisor, Auftraggeber)
‣ Charakteristika: Zeigt die Hauptline:
‣ Details gezeichnet, Farbe, hochwertiges Material, große Formate (A3, A2)
Prof. Dr. Detlef KrömkerInstitut für Informatik
26 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Beispiel Presentation Storyboard
14
Prof. Dr. Detlef KrömkerInstitut für Informatik
27 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Production Storyboard
‣ Leitdokument (vergl. Spezifikation) für die gesamte Produktion
‣ In der Regel sehr detailliert: auch mit schriftlichen Informationen zu:
‣ Aktionen‣ Bewegungen und Timing‣ „set“ (eigene Skizzen, Layouts)‣ Beleuchtung und Rendering Parameter‣ Schnitte
Prof. Dr. Detlef KrömkerInstitut für Informatik
28 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Production Storyboard
‣ Jedes Bild ist numeriert:‣ Shot number oder Scene + Shot number‣ Zusätzlich die absolute und /oder relative Zeit
‣ Spezielle Zeichen (Dicke Pfeile) für Kamerabewegungen und Bezeichnung des Shots
15
Prof. Dr. Detlef KrömkerInstitut für Informatik
29 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Production Storyboard
‣ Spezielle Zeichen für die häufigsten Schnitte
‣ default oder harter Schnittggf. über schwarz
Cross Dissolve(weiche) Blende
Prof. Dr. Detlef KrömkerInstitut für Informatik
30 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Beispiel Storyboard
16
Prof. Dr. Detlef KrömkerInstitut für Informatik
31 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Character Sheets
‣ Definiert das Äußere: Form und visuelle Erscheinung
‣ Definiert die „Persönlichkeit“: Erscheinung, Bewegung (auch Rhythmen), Mimik, Gestik, ...
‣ Definiert die Produktionstechnik für die Animation, z.B. interne Struktur (Skelett, ...)
Prof. Dr. Detlef KrömkerInstitut für Informatik
32 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Soweit der Ausflug in die Welt der Animation und MM Produktion
Viele Techniken sind übertragbar und sind nützlich! Sehr Graphisch!
‣ Gestaltung von Benutzungsschnittstellen bedarf Notationsformen zur Beschreibung unterschiedlicher Lösungsansätze
‣ Ansätze‣ Natürliche Sprache‣ Storybook‣ Formale Sprachen
‣ Grammatiken‣ Menüauswahl-Bäume‣ Transitionsdiagramme
‣ Interface Builder‣ CASE-Tool/Application Framework
17
Prof. Dr. Detlef KrömkerInstitut für Informatik
33 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Spezifikationsmethoden: Grammatiken (I)
‣ Backus-Naur-Form (Backus-Normalform, BNF oder EBNF) ‣ Beschreibung von High-Level-Komponenten als Non-Terminale‣ Spezifische (Eingabe-) Sequenzen als Terminale
‣ Beispiel einer Grammatik
<Telephone book entry>::= <Name><Telephone number><Name> ::= <Last name>, <First name><Last name> ::= <string><First name> ::= <string><string> ::= <character>|<character><string><character> ::= A|B|C|D|E|F|G|H|I|J|K|L|M|N|O|P|Q|R|S|T|U|V|W|X|Y|Z<Telephone number>::= (<area code>) <exchange>-<local number><area code>::= <digit><digit><digit><exchange>::= <digit><digit><digit><local number>::= <digit><digit><digit><digit><digit>::= 0|1|2|3|4|5|6|7|8|9
Prof. Dr. Detlef KrömkerInstitut für Informatik
34 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Spezifikationsmethoden: Grammatiken (II)
‣ Beispiele akzeptierter Worte - WASHINGTON, GEORGE (301) 555-1234- BEEF, STU (726) 768-7878- A, Z (999) 111-1111
‣ Erweiterung für komplexe Dialoge: Multiparty Grammars (z.B. Carr 1995)
<Session> ::= <U: Opening> <C: Responding><U: Opening> ::= LOGIN <U: Name><U: Name> ::= <U: string><C: Responding> ::= HELLO [<U: Name.]
U: User C: Computer
‣ Multiparty Grammars können effektiv zur Spezifikation textbasierter Interaktionssequenzen genutzt werden
18
Prof. Dr. Detlef KrömkerInstitut für Informatik
35 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Spezifikationsmethoden: Transitionsdiagramm
‣ Transitionsdiagramme‣ Graphische Darstellung
eines endlichen Automaten in Form eines Graphen
‣ Knoten repräsentieren Zustände, Kanten die möglichen Zustandsübergänge
‣ Beispiel‣ UML State Transition
Diagram
Prof. Dr. Detlef KrömkerInstitut für Informatik
36 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Spezifikationsmethoden: Transitionsdiagramm
19
Prof. Dr. Detlef KrömkerInstitut für Informatik
37 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Spezifikationsmethoden: Transitionsdiagramm
State Charts
Prof. Dr. Detlef KrömkerInstitut für Informatik
38 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Spezifikationsmethoden: Transitionsdiagramm
‣ Möglichkeit der interaktiven Ausführung und Überprüfung mit Hilfe eines Simulators
‣ Beispiel:‣ Interaction Object Graph
(IOG) Demonstrator
Carr 1995
http://www.sm.luth.se/~david/carl/www/iogcode.html
20
Prof. Dr. Detlef KrömkerInstitut für Informatik
39 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Interface Builder
Vorteile‣ Entkopplung von User-Interface und Anwendung
‣ Besseres Software-Design‣ Ermöglicht parallele Entwicklung und Evaluierung mehrerer User-Interface-Strategien ‣ Multi-Platform Support ‣ Ermöglicht die unabhängige Rolle eines User-Interface-Architekten im Entwicklungsprozess‣ Erzwingen von Standards
‣ Methodik & Notation ‣ Design-Prozeduren ‣ Diskussion von Design ‣ Project-Management
Prof. Dr. Detlef KrömkerInstitut für Informatik
40 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Interface Builder
‣ Vorteile (Fortsetzung)
‣ Rapid Prototyping‣ Frühes Testen von Ideen‣ Testen, überarbeiten, testen, überarbeiten,... ‣ Einbeziehung von Endanwendern, Managern und anderen
‣ Software Support ‣ Erhöhte Produktivität‣ Überprüfung von Constraints und Konsistenz‣ Unterstützt Entwicklung im Team‣ Vereinfachung der Pflege
21
Prof. Dr. Detlef KrömkerInstitut für Informatik
41 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Übersicht
Spezifikationsmethoden
User Interface Builder
Testen
Prof. Dr. Detlef KrömkerInstitut für Informatik
42 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Interface Builder
‣ Kategorien
‣ Mockup Tools
‣ Window System
‣ Applikations-Frameworks
‣ Entwicklungswerkzeuge mit visueller Programmierung
‣ Anwendungen mit anpassbaren GUIs
22
Prof. Dr. Detlef KrömkerInstitut für Informatik
43 Hier wird Wissen WirklichkeitB-CG – V06 Tools
User Interface Mockup Tools
‣ Ziel‣ Schnelle Entwicklung von Gestaltungsentwürfen‣ Schnelle Umsetzung eines UI-Entwurfs für weiteres Testen
und/oder Marketing
‣ Beispiele‣ Stift und Papier‣ Textverarbeitungssysteme‣ Graphik- und Bildbearbeitungssoftware (z.B. Photoshop)‣ Slide-show Software (z.B. Powerpoint, HyperCard)‣ Multimedia-Autorensysteme
Prof. Dr. Detlef KrömkerInstitut für Informatik
44 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Multimedia Autorensysteme
‣ Typische Funktionalität‣ Positionierung von Medienobjekten
und anderen graphischen Elementen
‣ Spezifikation von Beziehungen zwischen Medienobjekten
‣ Visuelle Programmierung ‣ Handhabung von
Interaktionsobjekten und Interaktionsauswirkungen
‣ Erweiterbarkeit um neue Medientypen
‣ Typisches MM-Autorensysteme‣ Macromedia Flash und ActionScript
Macromedia Flash
23
Prof. Dr. Detlef KrömkerInstitut für Informatik
45 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Windowing-Systeme (I)
‣ Aufgaben‣ Bereitstellung grundlegender Funktionalitäten zum Aufbau
graphischer Benutzungsschnittstellen‣ Typische Komponenten
‣ Container, Panels, Buttons, Menüs, Eingabefelder, …‣ Schnittstellen zur Einbindung von Verhalten
‣ Verwendung über Bibliotheken, die in die eigene Anwendung eingebunden werden
‣ Beispiele für Windowing-Systeme‣ Java Swing‣ X-Windows/Motif‣ Tkinter
Prof. Dr. Detlef KrömkerInstitut für Informatik
46 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Windowing-Systeme (II)
‣ Entwicklung von Benutzungsschnittstellen auf der Windowing-Ebenebedarf z.T. Low-Level-Programmieraufwand
‣ Typisches Beispiel‣ while( true) Main Loop
24
Prof. Dr. Detlef KrömkerInstitut für Informatik
47 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Windowing-Systeme (III)
Prof. Dr. Detlef KrömkerInstitut für Informatik
48 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Interface-Building Tools (cont.)
25
Prof. Dr. Detlef KrömkerInstitut für Informatik
49 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Applikations-Frameworks
‣ Grundlagen‣ Objektorientierung
‣ Komponenten zur schnellen Entwicklung auch anspruchsvoller Schnittstellen
‣ Zum Teil spezielle Sprachen zur Erleichterung der Programmierung
‣ Nachteile‣ Zum Teil erhebliche Einarbeitungszeit
‣ Beispiele‣ TCL/TK (Sprache: TCL)‣ Macromedia Director (Sprache: Lingo)‣ Microsoft Foundation Classes (MFC) (Sprachen: Visual Basic, C#)‣ JavaScript‣ …
Prof. Dr. Detlef KrömkerInstitut für Informatik
50 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Applikations-Framework: Beispiel
‣ Beispiel TCL/TK‣ TCL
‣ Tool Command Language‣ Einfache Skriptsprache
‣ Tk‣ TCL ToolKit‣ Werkzeug zum einfachen
Erstellen graphischer Nutzerschnittstellen
‣ Spezifikation von Verhalten in TCL oder in Python (Tkinter)
‣ Anwendung‣ Schnelles Prototyping von UIs‣ Customizing-Schnittstelle für
eigene Anwendung
button .b -text "Hallo" -command {incr i; set entry "Klick $i„
}.b config -background greenentry .e -textvariable entrygrid .b -row 0 -column 0grid .e -row 1 -column 0set i 0
TCL/TK-Programm
26
Prof. Dr. Detlef KrömkerInstitut für Informatik
51 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Entwicklungswerkzeuge mit visueller Programmierung
‣ Graphisch-Interaktive Entwicklung von interaktiven Benutzungsschnittstellen‣ Interaktive Kombination von UI-
Komponenten‣ Automatische Code-
Generierung‣ Beispiele
‣ Microsoft Visual Studio‣ Borland JBuilder‣ netBeans (Sun)
Prof. Dr. Detlef KrömkerInstitut für Informatik
52 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Anwendungen mit anpassbaren GUIs
‣ Ansatz‣ Komplexe Werkzeuge, die eine Entwicklung spezieller, auf den
Anwendungskontext zugeschnittener graphischer Benutzungsschnittstelle erlauben
‣ Beispiele‣ Oracle (Datenbank mit Form Wizzard)‣ AVS (Visualisierungswerkzeug mit Möglichkeit zur Entwicklung
eigener Anwendungen)
27
Prof. Dr. Detlef KrömkerInstitut für Informatik
53 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Zusammenfassung Werkzeuge
Prof. Dr. Detlef KrömkerInstitut für Informatik
54 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Wahl des geeigneten Werkzeugs
6 Kriterien zur Auswahl des geeigneten Werkzeugs
‣ Schnittstellen zur Anwendung, für die das GUI entwickelt wird‣ Einarbeitungszeit‣ Entwicklungszeit‣ Verlangte oder empfohlene Methodik‣ Kommunikation mit anderen Subsystemen‣ Erweiterbarkeit und Modularisierung
28
Prof. Dr. Detlef KrömkerInstitut für Informatik
55 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Zusammenfassung
Prof. Dr. Detlef KrömkerInstitut für Informatik
56 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Übersicht
Spezifikationsmethoden
User Interface Builder
Testen (ganz kurz) ‣ Testwerkzeuge‣ Evaluierungswerkzeuge, automatische Kritiksysteme‣ Run Time Logging Software (der User Interaktionen)
29
Prof. Dr. Detlef KrömkerInstitut für Informatik
57 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Testwerkzeuge
‣ Zielsetzung‣ Automatisches Testen von Graphischen Benutzungsschnittstellen
und GUI-Komponenten‣ Ziel: vergleichbare Funktionalität zu TestCases in junit
‣ Funktionsweise‣ Simulation von Tastatureingaben, Mausbewegungen,
Fensterbefehlen (maximize, minimize, wait for, etc.)‣ Automatisierung von Aktionen‣ GGf. Kopplung mit anderen Testkomponenten
‣ Beispiele‣ OpenOffice TestTool‣ AutoIt (http://www.hiddensoft.com/AutoIt)‣ Squish: Automated Qt GUI Testing Tool (Froglogic)
Prof. Dr. Detlef KrömkerInstitut für Informatik
58 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Evaluierungswerkzeuge
‣ Analyse von Benutzungsschnittstellen nach formalen und heuristischen Gesichtspunkten
‣ Beispiele‣ Tullis' Display Analysis Program (TDA)‣ Doctor HTML – Web Page Analyzer
30
Prof. Dr. Detlef KrömkerInstitut für Informatik
59 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Evaluierungswerkzeuge: TDA
‣ Tullis' Display Analysis Program (TDA)‣ Analyse alphanumerischer Bildschirme‣ Bewertung der Komplexität des Bildschirms in Verbindung mit Hinweisen zur
Verbesserung der Bildschirmgestaltung‣ Beispiele für Ausgaben
Upper-case letters: 77% The percentage of upper-case letters is high. ‣ Consider using more lower-case letters, since text printed in normal upper- and
lower-case letters is read about 13% faster than text in all upper case. Reserve all upper-case for items that need to attract attention.
Maximum local density = 89.9% at row 9, column 8. Average local density = 67.0% ‣ The area with the highest local density is identified...you can
reduce local density by distributing the characters as evenly as feasible over theentire screen.
Total layout complexity = 8.02 bits. Layout complexity is high. ‣ This means that the display items (labels and data) are not well aligned with each
other...Horizontal complexity can be reduced by starting items in fewer different columns on the screen (that is, by aligning them vertically).
Prof. Dr. Detlef KrömkerInstitut für Informatik
60 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Evaluierungswerkzeuge: Doctor HTML
‣ Doctor HTML - Web Page Analyzer: ‣ http://imagiware.com/RxHTML
‣ Funktionalität‣ Syntaktische Überprüfung von Web-Seiten
‣ Beispiele für Ausgaben‣ Did not find the required open and close HEAD tag. You should
open and close the HEAD tag in order to get consistent
performance on all browsers.
‣ Found extra close STRONG tags in the document. Please remove
them.
31
Prof. Dr. Detlef KrömkerInstitut für Informatik
61 Hier wird Wissen WirklichkeitB-CG – V06 Tools
Hausaufgabe
‣ Lesen Sie Kapitel 5 aus Sheiderman, Plaisant: Desinging the User Interface!
‣ nur so als Hinweis ;-)
Hier wird Wissen Wirklichkeit
Schluss ... und Danke!