Tools - Goethe

Transcrição

Tools - Goethe

Human Computer Interaction
Tools
Prof. Dr. Detlef Krömker
Institut für Informatik
Johann Wolfgang Goethe-Universität
Hier wird Wissen Wirklichkeit
Rückblick
Erfolgreiche Benutzungsschnittstellen
UI
Software
Tools
ExpertenReviews
und
Usability
Testing
Algorithmen
und Prototypen
Kontrollierte
Experimente
Richtlinien
und
Prozesse
Theorien
und Modelle
Akademische Forschung
2
B-CG – V06 Tools
1
Übersicht
Spezifikationsmethoden
User Interface Builder
Testen
3
B-CG – V06 Tools
‣
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
4
B-CG – V06 Tools
2
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
5
B-CG – V06 Tools
immer 1. Schritt: Szenario-Beschreibung (Text – nicht formalisiert)
‣ Grundlage des Szenario-basierten Designs
6
B-CG – V06 Tools
3
Storybook
Schlüsselbegriff aus dem Bereich Film,
Video und Animation, dort weit
entwickelt
Preproduction
Object Modelling
gehört zum Bereich Preproduktion
Scene Modelling
‣
‣
‣
Animation
Rendering
‣
Postproduction
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!
7
B-CG – V06 Tools
Preproduction
‣
‣
Wer? Was? Wann? Wie?
Entscheidend ist die Art der Produktion:
‣
‣
‣
‣
‣
‣
‣
‣
‣
8
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, …
B-CG – V06 Tools
4
Kostenkalkulation in
Multimedia-Produktionen ... gilt ähnlich auch bei HCI
‣
‣
‣
‣
Projektmanagement
Konzeption
Produktion
Test
30 %
70 %
zuzüglich
‣ Gebühren, Rechte, Lizenzen
‣ Packaging
‣ Sonstiges: Server, Wartung
„geheime Zusatzkosten“
9
B-CG – V06 Tools
„Faktor Kunde“
Meetings
zusätzliche Präsentationen
Vorabversionen für Messen
Autorenkorrekturen
Änderungen im Pflichtenheft
Umständliche Freigaben
Achtung bis zu + 30% mehr
Typische erste Schritte
z.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)
10
B-CG – V06 Tools
5
„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
‣
11
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
12
B-CG – V06 Tools
6
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
13
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
14
B-CG – V06 Tools
7
Screenplay (4) - Beispiel für die klassische Struktur:
Adam and Eve
‣
Establish Characters and Situations
God, Garden of Eden,
Adam and Eve, apple
‣
Introduce Agent of Conflict
Snake
Snake persudes Eve. –
Eve persudes Adam
Effect of apple: They feel the need for
clothes
Clothes indicate to God their
disobedience
‣
Develop Conflict
‣
Climax
They are questioned
‣
Resolution
Expulsion from Heaven
15
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
16
B-CG – V06 Tools
8
Navigations – Grundstrukturen
für MM und interaktive Animationen
‣
‣
‣
‣
‣
‣
Seite / Szene
Lineare Struktur
Jumplineare Struktur
Baumstruktur
Netzstruktur
Singleframe Struktur
See-and-Point-Struktur
Jede Seite setzt die
Kenntnis der vorangegangenen voraus
„Autoshows“
17
B-CG – V06 Tools
‣
‣
‣
‣
‣
‣
Lineare Struktur
Baumstruktur
Netzstruktur
Standardstruktur für
Kiosksysteme
18
B-CG – V06 Tools
9
‣
‣
‣
‣
‣
‣
Lineare Struktur
Baumstruktur
Netzstruktur
Für den Benutzer „gerade
noch“ übersichtliche
Struktur
19
B-CG – V06 Tools
‣
‣
‣
‣
‣
‣
Lineare Struktur
Baumstruktur
Netzstruktur
sehr viel Freiheit
Problem: „lost in hyperspace“
Ggf. durch sehr klare
Nagivationselemente milderbar!
20
B-CG – V06 Tools
10
‣
‣
‣
‣
‣
‣
Lineare Struktur
Baumstruktur
Netzstruktur
Der Nutzer erlebt diese Struktur als
eine Seite: man erreicht jede andere
Seite direkt!
Dazu sollten diese optisch nahezu
gleich sein: „Lexikonstruktur“
21
B-CG – V06 Tools
‣
‣
‣
‣
‣
‣
Lineare Struktur
Baumstruktur
Netzstruktur
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 Verzweigungsmöglichkeiten anbieten
22
B-CG – V06 Tools
11
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
23
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.
24
B-CG – V06 Tools
12
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)
25
B-CG – V06 Tools
Beispiel Presentation Storyboard
26
B-CG – V06 Tools
13
Production Storyboard
‣
Leitdokument (vergl. Spezifikation) für die gesamte Produktion
‣
In der Regel sehr detailliert: auch mit schriftlichen Informationen zu:
‣
‣
‣
‣
‣
27
Aktionen
Bewegungen und Timing
„set“ (eigene Skizzen, Layouts)
Beleuchtung und Rendering Parameter
Schnitte
B-CG – V06 Tools
‣
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
28
B-CG – V06 Tools
14
‣
Spezielle Zeichen für die häufigsten Schnitte
‣
default oder
harter Schnitt
ggf. über schwarz
Cross Dissolve
(weiche) Blende
29
B-CG – V06 Tools
Beispiel Storyboard
30
B-CG – V06 Tools
15
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, ...)
31
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
32
B-CG – V06 Tools
16
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
33
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
‣
34
Multiparty Grammars können effektiv zur Spezifikation textbasierter
Interaktionssequenzen genutzt werden
B-CG – V06 Tools
17
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
35
B-CG – V06 Tools
36
B-CG – V06 Tools
18
State Charts
37
B-CG – V06 Tools
‣
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
38
B-CG – V06 Tools
19
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-InterfaceArchitekten im Entwicklungsprozess
‣ Erzwingen von Standards
‣ Methodik & Notation
‣ Design-Prozeduren
‣ Diskussion von Design
‣ Project-Management
39
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
40
B-CG – V06 Tools
20
Übersicht
Testen
41
B-CG – V06 Tools
Interface Builder
‣
Kategorien
‣ Mockup Tools
‣ Window System
‣ Applikations-Frameworks
‣ Entwicklungswerkzeuge mit visueller Programmierung
‣ Anwendungen mit anpassbaren GUIs
42
B-CG – V06 Tools
21
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
43
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
44
B-CG – V06 Tools
Macromedia Flash
22
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
45
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
46
B-CG – V06 Tools
23
Windowing-Systeme (III)
47
B-CG – V06 Tools
Interface-Building Tools (cont.)
48
B-CG – V06 Tools
24
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
‣ …
49
B-CG – V06 Tools
Applikations-Framework: Beispiel
‣
‣
‣
‣
50
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
B-CG – V06 Tools
TCL/TK-Programm
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
25
Entwicklungswerkzeuge mit visueller Programmierung
‣
‣
51
Graphisch-Interaktive Entwicklung
von interaktiven
Benutzungsschnittstellen
‣ Interaktive Kombination von UIKomponenten
‣ Automatische CodeGenerierung
Beispiele
‣ Microsoft Visual Studio
‣ Borland JBuilder
‣ netBeans (Sun)
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)
52
B-CG – V06 Tools
26
Zusammenfassung Werkzeuge
53
B-CG – V06 Tools
Wahl des geeigneten Werkzeugs
6 Kriterien zur Auswahl des geeigneten Werkzeugs
‣
‣
‣
‣
‣
‣
54
Schnittstellen zur Anwendung, für die das GUI entwickelt wird
Einarbeitungszeit
Entwicklungszeit
Verlangte oder empfohlene Methodik
Kommunikation mit anderen Subsystemen
Erweiterbarkeit und Modularisierung
B-CG – V06 Tools
27
Zusammenfassung
55
B-CG – V06 Tools
Übersicht
Testen (ganz kurz)
‣
Testwerkzeuge
‣
Evaluierungswerkzeuge, automatische Kritiksysteme
‣
Run Time Logging Software (der User Interaktionen)
56
B-CG – V06 Tools
28
Testwerkzeuge
‣
‣
‣
57
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)
B-CG – V06 Tools
Evaluierungswerkzeuge
‣
Analyse von Benutzungsschnittstellen nach formalen und heuristischen
Gesichtspunkten
‣
Beispiele
‣ Tullis' Display Analysis Program (TDA)
‣ Doctor HTML – Web Page Analyzer
58
B-CG – V06 Tools
29
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).
59
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.
60
B-CG – V06 Tools
30
Hausaufgabe
‣
Lesen Sie Kapitel 5 aus Sheiderman, Plaisant: Desinging the User
Interface!
‣
nur so als Hinweis ;-)
61
B-CG – V06 Tools
Schluss ... und Danke!
31

Tools - Goethe

Transcrição

Documentos relacionados

Ihre Ansprechpartner: Geschäftsführende

Installation des VP62 Codecs für die NSV Tools (http:///www

Cable Scissors No. 35

1 Historisches 1969: in der Zeit des Kalten Krieges

VOX-Doku Star und Ruhrpott-Charmeur Detlef

Qualitätsbeauftragte/n Pflege - Diözesan

Profi-Fotobearbeitung von Apple

Evo Home 2012 - Hermann Stitz Rostock

free-pdf-download 1.1MB

03. Der Visualisierungsprozess