Human Computer Interaction UI SoftwareTools€¦ · ‣ Ein Storyboard (ungenau Drehbuch) ist die visuelle Interpretation des Screenplays: ‣ Enthält viele Skizzen und Bilder, die

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



Übersicht

Spezifikationsmethoden

User Interface Builder

Testen



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



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



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

…



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



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!!



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!



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



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“



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)



„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 Screenplay kein Endprodukt, es beschreibt ‣  um was geht es? ‣  welche Characters (Figuren, Objekte, ...) gibt es. etc.

‣  Daumenregel: eine Seite Screenplay pro Minute Animation



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



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



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



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



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“





Standardstruktur für Kiosksysteme





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





sehr viel Freiheit

Problem: „lost in hyperspace“

Ggf. durch sehr klare Nagivationselemente milderbar!





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



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.



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



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




‣  Spezielle Zeichen für die häufigsten Schnitte

‣  default oder harter Schnitt ggf. über schwarz

Cross Dissolve (weiche) Blende



Beispiel Storyboard



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



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



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



Spezifikationsmethoden: Transitionsdiagramm



Spezifikationsmethoden: Transitionsdiagramm State Charts



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



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



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



Interface Builder

‣  Kategorien

‣  Mockup Tools

‣  Window System

‣  Applikations-Frameworks

‣  Entwicklungswerkzeuge mit visueller Programmierung

‣  Anwendungen mit anpassbaren GUIs



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



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-Ebene bedarf z.T. Low-Level-Programmieraufwand

‣  Typisches Beispiel ‣  while( true) Main Loop



Windowing-Systeme (III)



Interface-Building Tools (cont.)



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 green entry .e -textvariable entry grid .b -row 0 -column 0 grid .e -row 1 -column 0 set i 0

TCL/TK-Programm



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)



Zusammenfassung Werkzeuge



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!



Wahl des geeigneten Werkzeugs 2



Sonstige Werkzeuge

‣  Run Time Logging Software

‣  Testwerkzeuge

‣  Evaluierungswerkzeuge, automatische Kritiksysteme



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



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



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!

Documents

Human Computer Interaction UI SoftwareTools€¦ · ‣ Ein Storyboard (ungenau Drehbuch) ist die visuelle Interpretation des Screenplays: ‣ Enthält viele Skizzen und Bilder, die