human computer interaction ui softwaretools€¦ · ‣ ein storyboard (ungenau drehbuch) ist die...
TRANSCRIPT
Hier wird Wissen Wirklichkeit
Human Computer Interaction
UI SoftwareTools
Prof. Dr. Detlef Krömker Johann Wolfgang Goethe-Universität
Prof. Dr. Detlef Krömker Institut für Informatik
2 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Rückblick
Akademische Forschung
Theorien und Modelle
Algorithmen und Prototypen
Kontrollierte Experimente
Erfolgreiche Benutzungsschnittstellen
Richtlinien und
Prozesse
UI Software
Tools
Experten- Reviews
und Usability Testing
Prof. Dr. Detlef Krömker Institut für Informatik
3 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Übersicht
Spezifikationsmethoden
User Interface Builder
Testen
Prof. Dr. Detlef Krömker Institut für Informatik
4 Hier wird Wissen Wirklichkeit B-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
Prof. Dr. Detlef Krömker Institut für Informatik
5 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
6 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Ein sehr aktuelles Beispiel ;-) … ein Self-Assessment im Übungsmodus
‣ Achtung … aus einem größeren Zusammenhang
‣ Zu Multiple Choice Fragen:
‣ Anweisung für den Benutzer
…
„Sie haben pro Frage maximal zwei Beantwortungsversuche. Sollte die Antwort nach dem zweiten Versuch noch nicht richtig sein, können Sie sich die richtige Lösung anzeigen lassen.“
…
Prof. Dr. Detlef Krömker Institut für Informatik
7 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Im Detail: Regieanmerkungen zum Ablauf des Self-Assessment
1. Aufruf 1. Fragenblock, 1. Frage 2. Klick des Lerners auf eine Antwortoption 3. Klick auf „Antwort prüfen“ Button 4. Feedback Richtig oder Falsch wird angezeigt (Text „korrekt“ oder „falsch“ und zusätzlich
Markierung [√, ) bei Antwortoption)
5. wenn richtig: nächste Frage auf Anforderung mit „weiter“-Button in Lernbar Navigation (weiter mit 1.)
6. wenn falsch weiter mit 7.
7. 2. Versuch 8. Klick auf „Antwort prüfen“ Button 9. Richtig oder Falsch wird angezeigt (Text „korrekt“ oder „falsch“ und zusätzlich Markierung
[√, ) bei Antwortoption) 10. wenn richtig: nächste Frage auf Anforderung (weiter mit 1.) 11. wenn falsch: Button „Lösung zeigen“ aktiv 12. Bei Klick auf „Lösung zeigen“ wird die richtige Lösung angezeigt 13. nächste Frage auf Anforderung (weiter mit 1.)
Prof. Dr. Detlef Krömker Institut für Informatik
8 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
An anderer Stelle in dem Spezifikationsdokument
Auswertung:
… „Bei Klick auf „zurück zur Frage“ springt man zur Frage, die dann
nochmals bearbeitet werden kann.“
Was genau? Antworten geben, Lösung prüfen, Lösung anzeigen, …
Was lernen wir daraus? Sprachlich so etwas präzis zu fassen ist sehr schwierig!!
Prof. Dr. Detlef Krömker Institut für Informatik
9 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Storybook – „Drehbuch“
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!
Prof. Dr. Detlef Krömker Institut für Informatik
10 Hier wird Wissen Wirklichkeit B-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, …
Prof. Dr. Detlef Krömker Institut für Informatik
11 Hier wird Wissen Wirklichkeit B-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“ Meetings zusätzliche Präsentationen Vorabversionen für Messen Autorenkorrekturen Änderungen im Pflichtenheft Umständliche Freigaben Achtung bis zu + 30% mehr „geheime Zusatzkosten“
Prof. Dr. Detlef Krömker Institut für Informatik
12 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Typische erste Schritte z.B. im Bereich Werbung
‣ AuftraggeberAgentur „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)
Prof. Dr. Detlef Krömker Institut für Informatik
13 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
14 Hier wird Wissen Wirklichkeit B-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 Screenplay kein Endprodukt, es beschreibt ‣ um was geht es? ‣ welche Characters (Figuren, Objekte, ...) gibt es. etc.
‣ Daumenregel: eine Seite Screenplay pro Minute Animation
Prof. Dr. Detlef Krömker Institut für Informatik
15 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Screenplay (2)
‣ enthält immer ein sogenanntes Treatment des Inhaltes: ‣ Zielgruppe ‣ Visuelle Ausprägung
‣ kann in unterschiedlichen dramaturgischen oder narrativen Formen geschrieben sein, insbesondere kann es linear (z.B. Film) oder nichtlinear (z.B. Computerspiel) sein
Prof. Dr. Detlef Krömker Institut für Informatik
16 Hier wird Wissen Wirklichkeit B-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
Prof. Dr. Detlef Krömker Institut für Informatik
17 Hier wird Wissen Wirklichkeit B-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 Adam Effect of apple: They feel the need for
clothes Clothes indicate to God their
disobedience
They are questioned
Expulsion from Heaven
Prof. Dr. Detlef Krömker Institut für Informatik
18 Hier wird Wissen Wirklichkeit B-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
Prof. Dr. Detlef Krömker Institut für Informatik
19 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Navigations – Grundstrukturen fü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ömker Institut für Informatik
20 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Navigations – Grundstrukturen für MM und interaktive Animationen
‣ Lineare Struktur ‣ Jumplineare Struktur ‣ Baumstruktur ‣ Netzstruktur ‣ Singleframe Struktur ‣ See-and-Point-Struktur
Standardstruktur für Kiosksysteme
Prof. Dr. Detlef Krömker Institut für Informatik
21 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Navigations – Grundstrukturen fü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ömker Institut für Informatik
22 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Navigations – Grundstrukturen fü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!
Prof. Dr. Detlef Krömker Institut für Informatik
23 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Navigations – Grundstrukturen fü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ömker Institut für Informatik
24 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Navigations – Grundstrukturen fü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
Prof. Dr. Detlef Krömker Institut für Informatik
25 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
26 Hier wird Wissen Wirklichkeit B-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.
Prof. Dr. Detlef Krömker Institut für Informatik
27 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
28 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Beispiel Presentation Storyboard
Prof. Dr. Detlef Krömker Institut für Informatik
29 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
30 Hier wird Wissen Wirklichkeit B-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
Prof. Dr. Detlef Krömker Institut für Informatik
31 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Production Storyboard
‣ Spezielle Zeichen für die häufigsten Schnitte
‣ default oder harter Schnitt ggf. über schwarz
Cross Dissolve (weiche) Blende
Prof. Dr. Detlef Krömker Institut für Informatik
32 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Beispiel Storyboard
Prof. Dr. Detlef Krömker Institut für Informatik
33 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
34 Hier wird Wissen Wirklichkeit B-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
Prof. Dr. Detlef Krömker Institut für Informatik
35 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
36 Hier wird Wissen Wirklichkeit B-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
Prof. Dr. Detlef Krömker Institut für Informatik
37 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
38 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Spezifikationsmethoden: Transitionsdiagramm
Prof. Dr. Detlef Krömker Institut für Informatik
39 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Spezifikationsmethoden: Transitionsdiagramm State Charts
Prof. Dr. Detlef Krömker Institut für Informatik
40 Hier wird Wissen Wirklichkeit B-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
Prof. Dr. Detlef Krömker Institut für Informatik
41 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Interface Builder in der Spezifikationsphase
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ömker Institut für Informatik
42 Hier wird Wissen Wirklichkeit B-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
Prof. Dr. Detlef Krömker Institut für Informatik
43 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Interface Builder
‣ Kategorien
‣ Mockup Tools
‣ Window System
‣ Applikations-Frameworks
‣ Entwicklungswerkzeuge mit visueller Programmierung
‣ Anwendungen mit anpassbaren GUIs
Prof. Dr. Detlef Krömker Institut für Informatik
44 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
45 Hier wird Wissen Wirklichkeit B-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
Prof. Dr. Detlef Krömker Institut für Informatik
46 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
47 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Windowing-Systeme (II)
‣ Entwicklung von Benutzungsschnittstellen auf der Windowing-Ebene bedarf z.T. Low-Level-Programmieraufwand
‣ Typisches Beispiel ‣ while( true) Main Loop
Prof. Dr. Detlef Krömker Institut für Informatik
48 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Windowing-Systeme (III)
Prof. Dr. Detlef Krömker Institut für Informatik
49 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Interface-Building Tools (cont.)
Prof. Dr. Detlef Krömker Institut für Informatik
50 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
51 Hier wird Wissen Wirklichkeit B-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 green entry .e -textvariable entry grid .b -row 0 -column 0 grid .e -row 1 -column 0 set i 0
TCL/TK-Programm
Prof. Dr. Detlef Krömker Institut für Informatik
52 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
53 Hier wird Wissen Wirklichkeit B-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)
Prof. Dr. Detlef Krömker Institut für Informatik
54 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Zusammenfassung Werkzeuge
Prof. Dr. Detlef Krömker Institut für Informatik
55 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Wahl des geeigneten Werkzeugs 1
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
‣ +++ Kommunikationsmöglichkeiten mit dem Nutzer!
Prof. Dr. Detlef Krömker Institut für Informatik
56 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Wahl des geeigneten Werkzeugs 2
Prof. Dr. Detlef Krömker Institut für Informatik
57 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Sonstige Werkzeuge
‣ Run Time Logging Software
‣ Testwerkzeuge
‣ Evaluierungswerkzeuge, automatische Kritiksysteme
Prof. Dr. Detlef Krömker Institut für Informatik
58 Hier wird Wissen Wirklichkeit B-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ömker Institut für Informatik
59 Hier wird Wissen Wirklichkeit B-CG – V06 Tools
Evaluierungswerkzeuge
‣ Analyse von Benutzungsschnittstellen nach formalen und heuristischen Gesichtspunkten
‣ Beispiele ‣ Tullis' Display Analysis Program (TDA) ‣ Doctor HTML – Web Page Analyzer
Prof. Dr. Detlef Krömker Institut für Informatik
60 Hier wird Wissen Wirklichkeit B-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 the entire 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ömker Institut für Informatik
61 Hier wird Wissen Wirklichkeit B-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.
Hier wird Wissen Wirklichkeit
Schluss ... und Danke!