Human Computer Interaction - Goethe University Frankfurt€¦ · ‣ Ein Storyboard(ungenau Drehbuch) ist die visuelle Interpretation des Screenplays: ‣ Enthält viele Skizzen und

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



Übersicht

Spezifikationsmethoden

User Interface Builder

Testen




‣ 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



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




immer 1. Schritt: Szenario-Beschreibung (Text – nicht formalisiert)

‣ Grundlage des Szenario-basierten Designs

4



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



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



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“



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



„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



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



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



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



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



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



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“





Standardstruktur für Kiosksysteme

10





Für den Benutzer „gerade noch“ übersichtliche Struktur





sehr viel Freiheit

Problem: „lost in hyperspace“

Ggf. durch sehr klare Nagivationselemente milderbar!

11





Der Nutzer erlebt diese Struktur als eine Seite: man erreicht jede andere Seite direkt!Dazu sollten diese optisch nahezu gleich sein: „Lexikonstruktur“





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



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



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



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)



Beispiel Presentation Storyboard

14



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




‣ 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




‣ Spezielle Zeichen für die häufigsten Schnitte

‣ default oder harter Schnittggf. über schwarz

Cross Dissolve(weiche) Blende



Beispiel Storyboard

16



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, ...)



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



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



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



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




19




State Charts




‣ 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



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



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



Übersicht



Testen



Interface Builder

‣ Kategorien

‣ Mockup Tools

‣ Window System

‣ Applikations-Frameworks

‣ Entwicklungswerkzeuge mit visueller Programmierung

‣ Anwendungen mit anpassbaren GUIs

22



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



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



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



Windowing-Systeme (II)

‣ Entwicklung von Benutzungsschnittstellen auf der Windowing-Ebenebedarf z.T. Low-Level-Programmieraufwand

‣ Typisches Beispiel‣ while( true) Main Loop

24



Windowing-Systeme (III)



Interface-Building Tools (cont.)

25



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‣ …



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



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)



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



Zusammenfassung Werkzeuge



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



Zusammenfassung



Übersicht



Testen (ganz kurz) ‣ Testwerkzeuge‣ Evaluierungswerkzeuge, automatische Kritiksysteme‣ Run Time Logging Software (der User Interaktionen)

29



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)



Evaluierungswerkzeuge

‣ Analyse von Benutzungsschnittstellen nach formalen und heuristischen Gesichtspunkten

‣ Beispiele‣ Tullis' Display Analysis Program (TDA)‣ Doctor HTML – Web Page Analyzer

30



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).



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



Hausaufgabe

‣ Lesen Sie Kapitel 5 aus Sheiderman, Plaisant: Desinging the User Interface!

‣ nur so als Hinweis ;-)

Hier wird Wissen Wirklichkeit

Schluss ... und Danke!

Documents

Human Computer Interaction - Goethe University Frankfurt€¦ · ‣ Ein Storyboard(ungenau Drehbuch) ist die visuelle Interpretation des Screenplays: ‣ Enthält viele Skizzen und