1 Hier wird Wissen Wirklichkeit Human Computer Interaction Tools Prof. Dr. Detlef Krömker Institut für Informatik 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
31
Embed
Human Computer Interaction - Goethe University Frankfurt€¦ · ‣ Ein Storyboard(ungenau Drehbuch) ist die visuelle Interpretation des Screenplays: ‣ Enthält viele Skizzen und
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
‣ 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
„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)
‣ 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
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
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
‣ Backus-Naur-Form (Backus-Normalform, BNF oder EBNF) ‣ Beschreibung von High-Level-Komponenten als Non-Terminale‣ Spezifische (Eingabe-) Sequenzen als Terminale
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
‣ 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
‣ 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!