130
Universität Konstanz Fachbereich Informatik und Informationswissenschaft ANIMATION ALS SKETCHINGTECHNIK FÜR STORYBOARDS - ENTWICKLUNG UND EVALUATION EINES INTERAKTIONSKONZEPTS MASTERARBEIT zur Erlangung des akademischen Grades Master of Science (M.Sc.) von Laura Lorenz Erstgutachter: Prof. Dr. Harald Reiterer Zweitgutachter: Jun.–Prof. Dr. Tobias Schreck Einreichung: 03. September 2013

Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

  • Upload
    vukien

  • View
    229

  • Download
    3

Embed Size (px)

Citation preview

Page 1: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

Universität Konstanz

Fachbereich Informatik und Informationswissenschaft

ANIMATION ALS SKETCHINGTECHNIK FÜR STORYBOARDS -

ENTWICKLUNG UND EVALUATION EINES INTERAKTIONSKONZEPTS

MASTERARBEIT

zur Erlangung des akademischen Grades

Master of Science (M.Sc.)

von

Laura Lorenz

Erstgutachter: Prof. Dr. Harald Reiterer

Zweitgutachter: Jun.–Prof. Dr. Tobias Schreck

Einreichung: 03. September 2013

Page 2: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

EIDESSTATTLICHE ERKLÄRUNG

Ich versichere hiermit an Eides statt, dass ich diese Masterarbeit mit dem Thema

„Animation als Sketchingtechnik für Storyboards –

Entwicklung und Evaluation eines Interaktionskonzepts“

selbständig verfasst und keine anderen Hilfsmittel und Quellen als die angegebenen

benutzt habe. Die Stellen, die anderen Werken dem Wortlaut oder dem Sinne nach

entnommen sind, habe ich in jedem einzelnen Fall durch Angabe der Quelle bzw. der

Sekundärliteratur als Entlehnung kenntlich gemacht. Die Arbeit wurde in gleicher

oder ähnlicher Form keiner anderen Prüfungsbehörde zur Erlangung eines akademi-

schen Grades vorgelegt.

Konstanz, den 03. September 2013

Laura Lorenz

Page 3: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

ZUSAMMENFASSUNG

Diese Arbeit beschäftigt sich mit der Entwicklung und Evaluation eines Interaktions-

konzepts für animierte Storyboards in frühen Designphasen. Digitale Anwendungen

und deren Anforderungen haben sich in den letzten Jahren zunehmend verändert: Sie

sind mobiler, interaktiver und allgegenwärtiger geworden. Auf diesen Wandel müssen

auch Interaktionsdesigner reagieren. Die Nutzung traditioneller Designrepräsentatio-

nen stößt hierbei allerdings an ihre Grenzen. Sie können neue Konzepte nicht immer

ausreichend ausdrücken und anderen Designern verständlich kommunizieren. Anima-

tion, in Verbindung mit Storyboards, könnte hierfür eine Lösung anbieten. Story-

boards sind schon heute ein Standardwerkzeug im Bereich der Mensch-Computer-

Interaktion und auch das Potential von Animationen wurde bereits von verschiedenen

Forschern entdeckt.

In der vorliegenden Arbeit werden zunächst die Grundlagen des Sketchings, Story-

boardings und der Animation, sowie verschiedene verwandte Arbeiten untersucht.

Eine Reihe von Anforderungen für ein Interaktionskonzept, welches die Erstellung

von Animationen in Storyboards in frühen Designphasen unterstützt, wird herausge-

arbeitet. Das Prinzip der Transformation-durch-Beispiel, bei dem der Anwender der

Anwendung die zu animierende Bewegung „vormacht“, wird als vielversprechend

erkannt und in das Interaktionskonzept integriert. Das Konzept wurde prototypisch

implementiert und in zwei Nutzerstudien auf dessen Praktikabilität und auf Interakti-

onsschwierigkeiten hin untersucht. Probanden waren in der Lage, ihre Ideen in ani-

mierten Storyboards auszudrücken, anderen Probanden zu erklären und mit diesen

über die Ideen zu diskutieren. Auch zeigte sich, dass gegebene Animationen erfolg-

reich nachgestellt werden konnten. Die Studien konnten Verbesserungspotential of-

fenlegen, welches in Redesign-Vorschlägen teilweise aufgegriffen wurde.

Page 4: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

ABSTRACT

This thesis is about the development and evaluation of an interaction concept for ani-

mated storyboards in early design phases. Digital applications and their requirements

have drastically changed in recent years: they became more mobile, interactive and

ubiquitous. Interaction designers need to respond to this change. However, the use of

traditional design representations limits the ways designers may express new con-

cepts and communicate them to fellow designers. Animation, in conjunction with sto-

ryboards, could offer a solution for this issue. Today, storyboards are already a stand-

ard tool in the field of human-computer interaction and the potential of animation has

already been discovered by various researchers.

In this work, first the foundations of sketching, storyboarding and animation, as well

as various related works are analyzed. A set of requirements for an interaction con-

cept, which supports the creation of animations in storyboards in early design phases,

is worked out. The principle of transformation-by-example, in which a user performs

the motion which should be animated, is recognized as promising and is integrated

into the interaction concept. A prototype, implementing the aforementioned concept,

was developed and finally evaluated in two user studies regarding its applicability and

interaction difficulties. Subjects were able to express their ideas in animated story-

boards and explain and discuss them with other participants. Furthermore, it was

shown that given animations can successfully be replicated with the aid of the proto-

type. The studies revealed potential for improvement, which was partially taken up in

redesign proposals.

Page 5: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

I

INHALTSVERZEICHNIS

1 Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.2 Aufbau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2 Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.1 Sketching und der Designprozess im Allgemeinen. . . . . . . . . . . . . 3

2.2 Storyboarding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2.2.1 Elemente eines Storyboards . . . . . . . . . . . . . . . . . . . . . 6

2.2.2 Storyboard-Varianten . . . . . . . . . . . . . . . . . . . . . . . . 7

2.2.3 Der Prozess des Storyboardings . . . . . . . . . . . . . . . . . . . 9

2.2.4 Storyboards im Designprozess . . . . . . . . . . . . . . . . . . . 10

2.3 Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.3.1 Prinzipien von Animation in Benutzungsoberflächen . . . . . . 12

2.3.2 Animationstechniken . . . . . . . . . . . . . . . . . . . . . . . . 13

2.3.3 Der grundlegende Animationsprozess . . . . . . . . . . . . . . . 16

2.3.4 Animation in Storyboards . . . . . . . . . . . . . . . . . . . . . 16

3 Verwandte Arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.1 Kombinationen von Storyboarding und Animationen . . . . . . . . . . 19

3.2 Storyboarding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.2.1 Akademische Anwendungen zur Erstellung von Storyboards . . 21

3.2.2 Professionelle Tools . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.3 Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3.3.1 Animationstools für Kinder . . . . . . . . . . . . . . . . . . . . . 24

3.3.2 Informelle Animationstools . . . . . . . . . . . . . . . . . . . . . 25

3.3.3 Professionelle Tools . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.4 Stärken und Schwächen verwandter Arbeiten . . . . . . . . . . . . . . 28

4 Anforderungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4.1 Storyboarding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

4.2 Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.3 Modalität und Setting . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

5 Konzeption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

5.1 Designprozess und Umsetzung . . . . . . . . . . . . . . . . . . . . . . 34

5.2 Interaktionskonzept . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

5.2.1 Workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

5.2.2 Einzel- und Gruppenarbeitsplätze . . . . . . . . . . . . . . . . . 36

5.2.3 Zeichnen und Manipulieren von Ideen . . . . . . . . . . . . . . . 37

5.2.4 Animieren von Ideen und deren Wiedergabe . . . . . . . . . . . 40

5.2.5 Zusammenarbeit mit anderen Designern . . . . . . . . . . . . . 42

Page 6: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

II

6 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

6.1 Kollaborative Erstellung von Storyboards . . . . . . . . . . . . . . . . 44

6.1.1 Studiendesign . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

6.1.2 Ergebnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

6.1.3 Diskussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

6.2 Überprüfung der Animationsfunktionalitäten . . . . . . . . . . . . . . 64

6.2.1 Anpassung der Anwendung . . . . . . . . . . . . . . . . . . . . . 65

6.2.2 Studiendesign . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

6.2.3 Ergebnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

6.2.4 Diskussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

6.3 Redesigns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

7 Fazit und Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Literaturverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Anhang A: Studienunterlagen Erste Studie . . . . . . . . . . . . . . . . . . 92

Anhang B: Studienunterlagen Zweite Studie . . . . . . . . . . . . . . . . 108

Page 7: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

III

ABBILDUNGSVERZEICHNIS

Abbildung 2.1: Zwischenspiel zwischen dem Verstand und einem Sketch (adaptiert

von Buxton, 2007) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Abbildung 2.2: Sowohl die Elaboration als auch die Reduktion von Ideen sind

während des Designprozesses von Bedeutung (adaptiert von Buxton,

2007) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Abbildung 2.3: Storyboarding in den Disney Studios (Canemaker, 1999) . . . . . . 5

Abbildung 2.4: Darstellung eines Szenarios in dessen Nutzungskontext, (a) gezeich-

net (b) fotografiert; jeweils mit farbigen Annotationen (adaptiert von

Greenberg et al., 2011) . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Abbildung 2.5: UI Storyboards werden oftmals mit Zustandsdiagrammen kombiniert

(Greenberg et al., 2011; Stappers & van der Lelie, 2010) . . . . . . . 9

Abbildung 2.6: (a) Schematic Storyboards (Goldman et al., 2006) (b) Claim

Storyboards (Wahid et al., 2010) . . . . . . . . . . . . . . . . . . . . 9

Abbildung 2.7: Einsatz von Storyboards im Designprozess (Lorenz, 2011) . . . . 11

Abbildung 2.8: Daumenkinoanimation eines Autos (adaptiert von Buxton, 2007) . 14

Abbildung 2.9: (a) Aufnahme einer Stop-Motion Animation eines User-Interfaces

(Geyer, 2010) (b) Traditionelle 2D-Animation mit einer Lightbox

(White, 2006) (c) 2D-Animation mithilfe eines Vektor-Programms

(White, 2006) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Abbildung 2.10: Der grundlegende Animationsprozess (Lorenz, 2011) . . . . . . . 16

Abbildung 2.11: Ausschnitte aus Löwgrens animierten Use Sketches (Löwgren, 2004)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Abbildung 3.1: Microsoft PowerPoint stellt (a) verschiedene Animationseffekte

(adaptiert von Buxton, 2007) (b) und einen Animationsbereich zur

Verfügung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Abbildung 3.2: Microsoft Expression Blend (a) Storyboard einer Benutzungs-

oberfläche (b) Übersicht über die verwendeten Animationen . . . 20

Abbildung 3.3: (a) SILK Storyboard und Zeichenansicht (Landay & Myers, 2001) (b)

DENIM Storyboardansicht (Lin et al., 2000) . . . . . . . . . . . . . 21

Abbildung 3.4: COMulCSer (Haesen et al., 2010), Erläuterungen siehe Text . . . . 22

Abbildung 3.5: (a) Toon Boom Storyboard Pro (Toon Boom, 2013) (b) Storyboard

Artist (PowerProduction Software, 2013) . . . . . . . . . . . . . . 23

Abbildung 3.6: (a) Trickfilmstudio im ZOOM Kindermuseum (Zoom Kindermuseum,

2013) (b) Animation mithilfe des As-Rigid-As-Possible-Algorithmus

(Takayama & Igarashi, 2007) (c) Toontastic (Pack, 2012) . . . . . 24

Abbildung 3.7: K-Sketch (a) Andeutung einer Animation eines über eine Rampe

springenden Autos (b) Steuerelement zum Manipulieren und Ani-

mieren einer Selektion (Davis et al., 2008) . . . . . . . . . . . . . . 26

Page 8: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

IV

Abbildung 3.8: (a) Sketch-n-Stretch (Sohn & Choy, 2012) (b) idAnimate (Quevedo-

Fernández & Martens, 2013) . . . . . . . . . . . . . . . . . . . . . . 27

Abbildung 3.9: Bei Adobe Flash besitzt jede Ebene einen eigenen Zeitstrahl . . . . 28

Abbildung 5.1: Verschiedene Artefakte entstanden in der Designphase beim (a) Affi-

nity Diagramming und (b) Sketching . . . . . . . . . . . . . . . . . 34

Abbildung 5.2: Workflow der Anwendung zum Erstellen von Storyboards (adaptiert

von Hankh, 2012) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Abbildung 5.3: Darstellung der verschiedenen Ansichten der Anwendung; (a)

öffentliche Sicht (b) private Sicht . . . . . . . . . . . . . . . . . . . 37

Abbildung 5.4: Von der Anwendung unterstützte (Multi-) Touch-Gesten (adaptiert

von Villamor et al., 2010) . . . . . . . . . . . . . . . . . . . . . . . . 37

Abbildung 5.5: Bearbeitungssicht eines Storyboards . . . . . . . . . . . . . . . . . 38

Abbildung 5.6: Der Template-Reiter . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Abbildung 5.7: (a) Übersichtsansicht und (b) Präsentationsansicht . . . . . . . . . 39

Abbildung 5.8: Erstellung von Animationen - Animationsreiter mit Werkzeugen im

oberen Bereich, Andeutung von Animationen im Zeichenbereich und

auf der Animationszeitleiste . . . . . . . . . . . . . . . . . . . . . . 40

Abbildung 5.9: Piktogramme der verschiedenen Animationstypen . . . . . . . . . 42

Abbildung 5.10: (a) Schaltfläche zum Veröffentlichen (b) Schaltfläche zum Verteilen

an private Arbeitsplätze (c) Ein Reiter mit den Schaltflächen zum

Veröffentlichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Abbildung 6.1: Kollaboratives Setting . . . . . . . . . . . . . . . . . . . . . . . . . 45

Abbildung 6.2: Zuweisung von Adjektiven zu den Werten des System Usability Scales

(adaptiert von Bangor et al., 2009) . . . . . . . . . . . . . . . . . . 49

Abbildung 6.3: Bewertung der Zeichenfunktionen . . . . . . . . . . . . . . . . . . 52

Abbildung 6.4: Bewertung des Hinzufügens von Ebenen und Templates . . . . . . 53

Abbildung 6.5: Bewertung der Storyboardfunktionen . . . . . . . . . . . . . . . . 54

Abbildung 6.6: Bewertung des Erstellens von Animationen . . . . . . . . . . . . . 55

Abbildung 6.7: Bewertung der Animationssteuerung und der einzelnen Animations-

typen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Abbildung 6.8: Bewertung der Unterstützungsfunktionen . . . . . . . . . . . . . . 57

Abbildung 6.9: Bewertung der Präsentationsansichten . . . . . . . . . . . . . . . . 58

Abbildung 6.10: Boxplot zur Bewertung des Systems anhand des System Usability

Scales (SUS) und des Creativity Support Indexes (CSI) . . . . . . . 60

Abbildung 6.11: Ausschnitte der während der Studie erstellten Animationen . . . . 61

Abbildung 6.12: Darstellung des angepassten Prototyps . . . . . . . . . . . . . . . . 65

Abbildung 6.13: Setting zur Überprüfung der Animationsfunktionalitäten . . . . . 66

Abbildung 6.14: Für die Aufgaben zur Verfügung gestellte Zeichnungen . . . . . . . 68

Abbildung 6.15: Bewertung und Zeitaufwand der ersten Aufgabe . . . . . . . . . . 71

Abbildung 6.16: Bewertung und Zeitaufwand der zweiten Aufgabe . . . . . . . . . 72

Abbildung 6.17: Bewertung und Zeitaufwand der dritten Aufgabe . . . . . . . . . . 73

Page 9: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V

Abbildung 6.18: Das Aufspalten von Animationen führte gelegentlich zu Verwirrungen

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Abbildung 6.19: Bewertung der Erstellung von Animationen, der Animations-

steuerung und der einzelnen Animationstypen . . . . . . . . . . . 77

Abbildung 6.20: Bewertung der Unterstützungsfunktionen . . . . . . . . . . . . . . 78

Abbildung 6.21: Bewertung des Systems anhand des System Usability Scales . . . . 78

Abbildung 6.22: Redesign-Vorschlag zur Benutzungsoberfläche . . . . . . . . . . . 82

Abbildung 6.23: Redesigns bezüglich der Ebenen (a) bei ausgeblendeter Ebene

(b) beim Abspeichern eines Templates . . . . . . . . . . . . . . . . 83

Abbildung 6.24: Einsortieren von Einzelzeichnungen in Storyboards . . . . . . . . 83

Abbildung 6.25: (a) Verdeutlichung des Aufnahmestatus (b) Möglichkeit zur Selektion

einer Animation (c) Animationsbereich zum Bearbeiten von Anima-

tionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

TABELLENVERZEICHNIS

Tabelle 6.1: Übersicht und Zeitplan der Studie "Kollaborative Erstellung von

Storyboards" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Tabelle 6.2: Demographische Daten der Probanden . . . . . . . . . . . . . . . . 52

Tabelle 6.3: Auflistung der Ergebnisse des Creativity Support Indexes . . . . . 60

Tabelle 6.4: Zusammenfassung des Verbesserungspotentials der Anwendung . 63

Tabelle 6.5: Übersicht und Zeitplan der Studie "Überprüfung der Animations-

funktionalitäten" . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Tabelle 6.6: Demographische Daten der Probanden der zweiten Studie . . . . 71

Tabelle 6.7: Vergleich der Fragebogenwerte für die Animationsfunktionalität . 79

Tabelle 6.8: Zusammenfassung des Verbesserungspotentials der zweiten Studie

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Page 10: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E i n l e i t u n g | 1

1 EINLEITUNG

Die Interaktion mit Computern hat sich im Laufe der Zeit stark verändert: von mehreren

Personen, die mit einem Großrechner interagierten, zu einer Person, die einen Rechner

benutzte, bis hin zu einer Person, die viele Rechner verwendet. Nicht nur in Smartphones,

sondern auch in Fernsehern und anderen Alltagsgegenständen befinden sich heutzutage

Hochleistungsprozessoren. Inzwischen kann nicht mehr davon ausgegangen werden,

dass ein Nutzer sich in seinem Büro oder zu Hause befindet, wenn er eine Anwendung

benutzt. Er kann sich überall befinden und möchte auch dort die gleichen Möglichkeiten

wie an seinen traditionellen Arbeitsplätzen vorfinden. Mit diesem Wandel haben sich

auch Anwendungen und deren Anforderungen verändert. Sie sind mobiler, interaktiver

und komplexer geworden. Nutzer erwarten von Anwendungen, dass sie nicht nur funkti-

onal sind, sondern auch, dass sie Spaß machen. Interaktionsdesigner müssen auf diese

Entwicklungen reagieren und Anwendungen dementsprechend entwerfen. Nicht mehr

nur die Anwendung allein, sondern der Kontext des Nutzers und dessen Emotionen ste-

hen im Vordergrund. Designer stoßen hierbei an die Grenzen traditioneller Designreprä-

sentationen. Nicht immer ist es einfach, in frühen Designphasen seine interaktiven Ideen

ganzheitlich auf Papier abzubilden und diese erfolgreich Kollegen und Projektverant-

wortlichen zu kommunizieren (Fallman & Moussette, 2011; Löwgren, 2004). Neue Aus-

drucksmöglichkeiten für diese Zwecke müssen gefunden werden.

Animation besitzt das Potential hierfür. In Verbindung mit Storyboards, die anhand von

Bildern Geschichten erzählen, eröffnen sich neue Möglichkeiten, um Ideen auszudrücken

und anderen mitzuteilen. Storyboards sind schon heute ein Standardwerkzeug im Inter-

aktionsdesign und sind in der Lage, den Nutzungskontext von Personen, deren Emotio-

nen und Motivation auszudrücken und zu kommunizieren. Auch die Interaktion mit Be-

nutzungsoberflächen lässt sich mithilfe von Storyboards abbilden und durchdenken.

Durch die Kombination mit Animation wird ermöglicht, dass Designer eine bessere Vor-

stellung ihrer Ideen erhalten und diese noch klarer an Projektbeteiligte kommunizieren

können. Wichtig hierbei ist jedoch, dass die Eigenschaften eines Sketches, wie etwa des-

sen schnelle und günstige Erstellung, sowie dessen skizzenhaftes Aussehen erhalten blei-

ben. Nur so können die externalisierten Ideen erfolgreich diskutiert und kritisiert werden

(Buxton, 2007; Löwgren, 2004). In den letzten Jahren wurde der Bedarf an einer Anwen-

dung erkannt, welche das schnelle Erstellen von Animationen ermöglicht. Allerdings gibt

es bislang noch keine hinreichende Unterstützung für die einfache Erstellung von Anima-

tionen in Storyboards.

1.1 MOTIVATION Ziel dieser Arbeit ist es, ein Konzept für eine Anwendung zu entwickeln und zu evaluie-

ren, welche den Einsatz von Animation in Storyboards in frühen Designphasen erlaubt.

Von Bedeutung ist hierbei die schnelle und unkomplizierte Externalisierung erster Ideen

und Konzepte. Aufgrund des Bedarfs soll sich die Anwendung in erster Linie an angehen-

de und professionelle Interaktionsdesigner richten, aufgrund ihrer Einfachheit allerdings

Page 11: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E i n l e i t u n g | 2

auch für weitere Benutzerkreise verwendbar sein. Natürliche Eingabemöglichkeiten, wie

das Zeichnen mit einem Stift oder das Manipulieren mithilfe von Gesten, sollen zudem

unterstützt werden. Nicht nur das Erstellen von Artefakten, sondern auch deren Präsen-

tation zur Kommunikation mit Projektbeteiligten soll ermöglicht werden. Im Rahmen

einer Evaluation soll zudem die Anwendbarkeit und Gebrauchstauglichkeit des entwi-

ckelten Konzepts untersucht werden.

1.2 AUFBAU Um ein Verständnis für die Thematik aufbauen zu können, werden in Kapitel 2 zunächst

die Grundlagen des Sketchings, des Storyboardings und der Animation erarbeitet. Typi-

sche Prinzipien und Prozesse werden beschrieben, sowie der potentielle Nutzen von

Animation in Storyboards näher erläutert. Kapitel 3 setzt sich mit bereits vorhandenen

Anwendungen auseinander, welche die Erstellung von Storyboards und Animation unter-

stützen. Da nur wenige Anwendungen die Kombination der beiden Techniken erlauben,

werden an dieser Stelle auch Anwendungen untersucht und bewertet, welche entweder

nur Storyboarding oder Animation unterstützen. Basierend auf den erarbeiteten Grund-

lagen können in Kapitel 4 Anforderungen an eine Anwendung erarbeitet werden, welche

die Erstellung von Animationen für Storyboards in frühen Designphasen ermöglicht. Ka-

pitel 5 beschreibt schließlich das entwickelte Interaktionskonzept, welches in einem Pro-

totyp exemplarisch umgesetzt wurde. Dieses wird in Kapitel 6 anhand von zwei Benut-

zerstudien evaluiert. Zunächst steht die Nutzung der Anwendung in einer kreativen, kol-

laborativen Umgebung im Vordergrund. Im Anschluss werden die Animationsfunktionali-

täten der Anwendung fokussiert. Verbesserungspotential wird offengelegt und teilweise

in Redesigns umgesetzt. Abschließend wird in Kapitel 7 ein Fazit der hier dargelegten

Arbeit gezogen und ein Ausblick auf mögliche zukünftige Schritte gegeben.

Page 12: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 3

2 GRUNDLAGEN

Um den möglichen Nutzen von Animation in Storyboards zu verstehen, ist es wichtig,

zunächst die beiden Methoden an sich zu kennen und zu verstehen. In diesem Kapitel

werden die Grundlagen hierfür erarbeitet. Zunächst wird geklärt, was genau Sketching

ist, und welche Aufgabe es im Designprozess einnimmt. Anschließend werden die Grund-

lagen des Storyboardings und zuletzt die der Animation vorgestellt. Die Erläuterung des

Nutzens von Animation in Storyboards schließt dieses Kapitel ab.

2.1 SKETCHING UND DER DESIGNPROZESS IM ALLGEMEINEN Unter Sketching wird meist lediglich das Erstellen von Skizzen auf Papier verstanden,

doch Sketching ist weit mehr. Es ist nicht einfach nur die Externalisierung fertiger Ideen,

auch wenn die entstehenden Repräsentationen für den weiteren Designprozess von Be-

deutung sind. Sehr viel wichtiger ist laut Buxton (Buxton, 2007) der Prozess des Sket-

chings. Sketching ist eine Denkhilfe, eine Möglichkeit Ideen genauer zu durchdenken,

durchzuspielen und neue Ideen zu generieren. Abbildung 2.1 zeigt einen Dialog zwischen

dem menschlichen Verstand und einem Sketch. Mit den bisherigen Erkenntnissen einer

Person wird ein Sketch erstellt. Wird er gelesen und interpretiert, entstehen neue Er-

kenntnisse, wodurch neue Sketche erstellt werden können. Die Ideen entwickeln sich

während der Erstellung der Sketche stetig weiter.

Abbildung 2.1: Zwischenspiel zwischen dem Verstand und einem Sketch (adaptiert von

Buxton, 2007)

Buxton identifizierte in seinem Buch elf verschiedene typische Eigenschaften von Sket-

chen, welche im Folgenden aufgeführt werden:

Schnell (quick) - Ein Sketch sollte schnell erstellt sein, oder so aussehen als ob.

Rechtzeitig (timely) – Er sollte verfügbar sein, wenn er gebraucht wird.

Günstig (inexpensive) – Er sollte günstig erstellt worden sein, insbesondere in

frühen Designphasen.

Wegwerfbar (disposable) – Wenn man einen Sketch nicht wegwerfen kann, ist er

vermutlich auch kein Sketch, weil bereits zu viel Arbeit in ihn gesteckt wurde. Die

Entwicklung eines Konzepts ist bedeutend, nicht der Sketch an sich.

Zahlreich (plentiful) – Die Bedeutung eines Sketches offenbart sich häufig erst im

Kontext mit anderen Sketchen.

Verstand

(neue) Erkenntnisse

Sketch

Repräsentation

Erstellen

(sehen, dass)

Lesen

(sehen als)

Page 13: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 4

Klares Vokabular (clear vocabulary) – Der Stil des Sketches sollte auf einen

Sketch hindeuten, zum Beispiel, indem Linien nicht komplett miteinander verbun-

den werden.

Eigene Gestik (distinct gesture) – Er sollte offen und frei wirken, nicht präzise.

Minimale Details (minimal detail) – Ein Sketch sollte nur das zeigen, was von Be-

deutung ist. Zusätzliche Details lenken ab.

Angemessener Grad an Verfeinerung (appropriate degree of refinement) –

Der Stil des Sketches sollte auf seinen Entwicklungsstand und die Gewissheit eines

Designers bezüglich seiner Entscheidungen hinweisen.

Vorschlagen und Explorieren statt Bestätigen (suggest and explore rather than

confirm) – Der Wert eines Sketches liegt nicht im Sketch selbst, sondern in der Fä-

higkeit, ein Konzept zu entwickeln. Daher schlägt er vielmehr Ideen vor.

Mehrdeutigkeit (ambiguity) – Sketche sollten mehrdeutig sein. So können diese

unterschiedlich interpretiert werden, wodurch neue Ideen entstehen.

Buxton grenzt mit diesen Attributen Sketche explizit von Prototypen ab, welche einen

anderen Zweck im Designprozess verfolgen. Nachdem Anforderungen erfasst wurden,

beginnt der Designprozess typischerweise mit der Generierung vieler verschiedener

Sketche. Diese sind hierbei jedoch nicht automatisch nur Skizzen auf Papier, sondern

können jede physische, oder auch digitale Form annehmen, solange sie die oben genann-

ten Eigenschaften besitzen. Die Aktivität des Erstellens steht im Vordergrund und jede

Form der Erfahrung ist hierbei von Bedeutung. Aufgrund ihrer Beschaffenheit, werden

die entstandenen Repräsentationen auch als Low-Fidelity-Sketche bezeichnet. Sie regen

zu Diskussionen und Veränderungen an, wodurch weitere Ideen und Vorschläge entste-

hen können. Im Laufe der Zeit werden die Ideen konkreter, Entscheidungen werden ge-

troffen, Prototypen entstehen. Im Vergleich zu Sketchen geben diese Antworten - sie be-

schreiben ein Design, testen es und werden immer weiter verbessert. Sie werden ausge-

arbeitet und sind aufgrund ihrer vielen Details auch als High-Fidelity-Prototyp bekannt.

In solche wird mehr Zeit und Aufwand gesteckt, wodurch auch automatisch weniger Pro-

totypen existieren. Die Anzahl der Ideen wird immer weiter verringert. Dieses Prinzip

wird in Abbildung 2.2 beschrieben.

Abbildung 2.2: Sowohl die Elaboration als auch die Reduktion von Ideen sind während des

Designprozesses von Bedeutung (adaptiert von Buxton, 2007)

Die Entwicklung von Designrepräsentationen während des gesamten Designprozesses

dient laut Löwgren (2004) mindestens drei verschiedenen Zielen. Erstens sind die Reprä-

sentationen, wie oben bereits beschrieben, ein Hilfsmittel um neue Ideen zu generieren

Designprozess

Elaboration viele Designideen

entstehen

Reduktion Designentscheidungen

verringern Anzahl

Start- punkt

Ziel- punkt

Page 14: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 5

und Konzepte zu durchdenken. Zweitens unterstützen sie dabei, Konzepte anderen

Teammitgliedern zu kommunizieren. Sie ermöglichen den Aufbau eines gemeinsamen

Verständnisses und fördern die Kollaboration. Oft werden Designrepräsentationen an

einem öffentlich einsehbaren Ort gesammelt, wie etwa an einem Whiteboard. Den dritten

Grund, den Löwgren nennt, ist der rhetorische Aspekt. Insbesondere Artefakte, welche

später im Designprozess erstellt werden und hierdurch elaborierter sind, können dabei

helfen, Projektverantwortliche zu überzeugen (Löwgren, 2004).

2.2 STORYBOARDING Storyboards erzählen, ähnlich wie Comics, anhand von einzelnen, aneinandergereihten

Bildern eine Geschichte. Sie wurden Anfang der 30er Jahre des 20. Jahrhunderts in den

Disney Studios entwickelt und haben sich seitdem in verschiedenen Branchen, insbeson-

dere in der Film- und Werbeindustrie, als ein Standardwerkzeug etabliert. Ursprünglich

wurden alle Szenen eines Filmes auf einzelne lose Papierblätter gezeichnet und an gro-

ßen Pinnwänden angeordnet. Ganze Designteams konnten sich vor diesen Pinnwänden

versammeln und über die dargestellten Szenen diskutieren, wie in Abbildung 2.3 zu se-

hen ist. Bei Bedarf konnten Änderungen vorgenommen werden, indem neue Blätter hin-

zugefügt oder bestehende ausgetauscht oder entfernt wurden. Die Entwicklung der Sto-

ryboards erlaubte die Simulation des Films. Potentielle Fehler konnten im Vorfeld einer

Produktion aufgedeckt werden, wodurch deren Qualität verbessert und Kosten reduziert

werden konnten (Finch, 1978).

Abbildung 2.3: Storyboarding in den Disney Studios (Canemaker, 1999)

Auch heute noch besitzen Storyboards diese Vorteile und ihr Wert wurde auch in ande-

ren Branchen, wie etwa dem Produkt- oder Interaktionsdesign, entdeckt. Im Interakti-

onsdesign können Storyboards beispielsweise eine Kombination aus einem Szenario und

einer Skizze einer Benutzungsoberfläche sein (Löwgren & Stolterman, 2007). Der Nut-

zungskontext, Personen und komplexe oder zeitliche Beziehungen können ausgedrückt

werden. Der Betrachter erhält die Möglichkeit sich in die Personen hineinzuversetzen,

deren Motivation zu erkennen und ein besseres Verständnis für das Zusammenspiel zwi-

schen Produkt und Nutzer zu erhalten. Die Erstellung der Storyboards, das Storyboar-

ding, hilft Designern, Probleme oder Lücken in ihrem Konzept zu erkennen, die ihnen

davor noch nicht aufgefallen waren (Curtis & Vertelney, 1990; Löwgren, 2004; van der

Lelie, 2005). Es unterstützt zudem das „visuelle Denken, welches wesentlich für den krea-

tiven Prozess ist“ (van der Lelie, 2005). Durch den Einsatz von Bildern sind Storyboards

Page 15: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 6

allgemeinverständlich und eignen sich somit auch für den Einsatz in heterogenen Teams,

wie sie im Interaktionsdesign häufig anzutreffen sind. Sie helfen dabei, unterschiedliche

Auffassungen der Designer aufzudecken und ein gemeinsames Verständnis aufzubauen.

Storyboards können also nicht nur den kreativen Prozess fördern, sondern auch Szenari-

en visualisieren, analysieren und kommunizieren. Ähnlich wie bei anderen Designreprä-

sentationen eignen sich Storyboards mit weniger Details und höherer Abstraktion (Low-

Fidelity) eher für frühe Design- und Ideenfindungsphasen, während elaborierte High-

Fidelity-Storyboards geeignet sind, um Projektverantwortlichen Ideen vorzustellen und

sie von ihnen zu überzeugen (Buxton, 2007; van der Lelie, 2005).

Nach dieser Einführung in die Thematik, sollen als nächstes die Elemente eines Story-

boards, sowie verschiedene, im Laufe der Zeit entstandene Varianten beschrieben wer-

den. Der typische Prozess zur Erstellung eines Storyboards wird vorgestellt, sowie ab-

schließend, eine Einordung von Storyboards in den Designprozess vorgenommen.

2.2.1 ELEMENTE EINES STORYBOARDS

Durch die Analyse von Storyboards, welche von nicht-professionellen, sowie professio-

nellen Designern erstellt wurden, konnten Truong et al. (2006) fünf verschiedene typi-

sche Elemente von Storyboards identifizieren: Detaillierungsgrad, Einbeziehung von Text,

Einbeziehung von Personen und Emotionen, Anzahl der Einzelbilder, sowie die Abbildung

von Zeit. Diese Elemente wurden in einem kontrollierten Experiment variiert, um deren

optimale Nutzung herauszufinden. Die Vorstellung der einzelnen Elemente, sowie eine

Anleitung für deren Einsatz werden im Folgenden gegeben.

Der Detaillierungsgrad (Level of Detail) eines Storyboards bezieht sich darauf, wie viele

Objekte und Personen in einer Szene gezeigt werden, wie photorealistisch diese darge-

stellt sind und ob eine gesamte Szene dargestellt wird oder lediglich ein Ausschnitt derer.

Trotz der besseren Bildästhetik bei der Darstellung vieler Details, ist es im Allgemeinen

zu empfehlen, so wenige Details wie möglich zu zeigen, um die Aufmerksamkeit der Be-

trachter auf die wichtigen Dinge zu lenken. Hierfür können unnötige Personen oder Ob-

jekte im Hintergrund eines Bildes entfernt werden oder beispielsweise Strichmännchen

und Objektkonturen eingesetzt werden, um den Detaillierungsgrad noch weiter zu ver-

ringern.

Die Einbeziehung von Text kann durch Bildunterschriften, beschriftete Schilder, sowie

Sprech- oder Denkblasen in Storyboards integriert werden. Text ist insbesondere bei

Storyboards nützlich, die neuartige Produkte zeigen oder bei Szenarien, bei denen der

Fokus auf einen bestimmten Aspekt gelenkt werden soll und dies sonst nur durch das

Zeichnen vieler weiterer Details realisiert werden könnte. Die Textpassagen sollten in

jedem Fall kurz gehalten werden. Entscheidend ist zudem die richtige Wortwahl, da Ver-

ständnis und Reaktion der Beobachter durch Text negativ beeinflusst werden können.

Einbezug von Personen und Emotionen – Werden in einem Storyboard Personen dabei

gezeigt, wie sie mit einem System interagieren, so können Beobachter sich in diese Per-

son hineinversetzen und verstehen, wie die Anwendung den Benutzer beeinflusst und

Page 16: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 7

was dessen Motivation ist. Laut professionellen Designern ist der Aufbau von Empathie

ein wichtiges Stilmittel bei Storyboards. Soll mithilfe eines Storyboards lediglich Feed-

back zur Usability oder zu technischen und ästhetischen Einzelheiten der Anwendung

erhalten werden, so sollte auf die Darstellung von Personen und Emotionen verzichtet

werden.

Anzahl der Einzelbilder – Für ein optimales Verständnis eines Storyboards, sollte dieses

aus drei bis fünf Einzelbildern bestehen. Dies gilt sowohl für vertraute, als auch für eher

unvertraute Szenarien. Ein Storyboard sollte jeweils nur ein Programmfeature oder eine

Aktivität darstellen. Ist die Darstellung mehrerer Features oder Aktivitäten erforderlich,

so empfiehlt sich die Erstellung mehrerer Storyboards.

Die Abbildung von Zeit erfolgt oft implizit durch die Reihenfolge der einzelnen Bilder

eines Storyboards oder durch graphische Hinweise, wie etwa dem Wachstum einer Pflan-

ze. Explizite Hinweise, beispielsweise mithilfe einer Uhr oder eines Kalenders, sollten laut

Truong et al. lediglich dann eingesetzt werden, wenn viel Zeit vergeht oder Zeit eine be-

sondere Rolle in der darzustellenden Geschichte einnimmt.

Lücken zwischen zwei Einzelbildern eines Storyboards werden manchmal absichtlich von

Designern als Stilmittel eingesetzt, manchmal geschieht dies allerdings auch unbeabsich-

tigt. Betrachter neigen dazu, diese Lücken anhand ihres eigenen Hintergrundwissens

aufzufüllen, was gelegentlich zu Missverständnissen führen kann. Als Gegenmaßnahme

empfehlen Truong et al. den Einsatz von Text oder das Erstellen verschiedener Story-

boardversionen für verschiedene Zielgruppen (Truong et al., 2006).

2.2.2 STORYBOARD-VARIANTEN

Storyboarding ist als Kreativitätstechnik keinen klaren Vorgaben verpflichtet, wodurch

sich verschiedene Abwandlungen und Varianten im Laufe der Zeit entwickelt haben. Im

Folgenden sollen einige dieser Varianten vorgestellt werden.

Bei Kontext-Storyboards steht vor allem der Nutzungskontext neuer Technologien im

Vordergrund. Heutzutage werden immer mehr Systeme entwickelt, welche nicht mehr

klassisch mit Maus und Tastatur am Privat- oder am Arbeitsplatzrechner bedient werden.

Stattdessen wird Technologie allgegenwärtig, neue Interaktionsmöglichkeiten entstehen.

Ist der Anwender mobil, so verändert sich der Kontext und dessen Wahrnehmung dyna-

misch. Kontext-Storyboards versuchen den Nutzungskontext und dessen Einfluss auf die

Benutzung einer Technologie zu visualisieren und zeigen hierbei die Benutzung, den Ort

und das Umfeld eines Technologieeinsatzes auf (Pedell & Vetere, 2005). Diese Möglich-

keit zur Visualisierung und Kommunikation, ist insbesondere bei neuen Technologien

von Bedeutung, da hiervon die oft teure und aufwändige Entwicklung der Designidee

abhängt (Dow et al., 2006).

Page 17: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 8

Abbildung 2.4: Darstellung eines Szenarios in dessen Nutzungskontext,

(a) gezeichnet (b) fotografiert; jeweils mit farbigen Annotationen (adaptiert von Greenberg et al., 2011)

Als Alternative zum klassischen Zeichnen von Storyboards, können auch Photoboards

mithilfe des Rapid Play Actings angefertigt werden (Stappers & van der Lelie, 2010).

Hierbei wird die Szene durch das Designteam nachgespielt. Durch deren aktive Beteili-

gung, kann es sich in die Situation hineinversetzen, wodurch gegebenenfalls weitere

Ideen entstehen oder Schwierigkeiten auffallen (Pedell & Vetere, 2005). Sind alle Szenen

abfotografiert, so können die entstandenen Fotos entweder direkt an einem Rechner oder

nachdem diese auf Papier ausgedruckt wurden, bearbeitet werden. Wie in Abbildung 2.4

zu sehen, lassen sich sowohl in gezeichnete als auch in ausgedruckte Storyboards Annota-

tionen einfügen, um den Fokus des Betrachters zu lenken und die Geschehnisse des Bil-

des zu verdeutlichen. Photoboards eignen sich insbesondere für Designteams, die keine

ausgeprägten Zeichenfähigkeiten besitzen. Allerdings können gezeichnete Storyboards

den Fokus klarer und ohne abzulenken auf die wichtigen Stellen richten, wie der direkte

Vergleich der beiden Storyboards in Abbildung 2.4 zeigt.

User-Interface-Storyboards geben eine Vorschau auf die Benutzungsoberfläche einer

Anwendung. Sie zeigen anhand von Darstellungen der Benutzungsoberfläche, wie die

Anwendung bedient wird und wie sie auf Benutzereingaben reagiert (Vertelney, 1989).

Oftmals werden User-Interface-Storyboards mit Zustandsdiagrammen kombiniert, bei

denen auch Zustandsübergänge und Verzweigungsmöglichkeiten dargestellt werden

können (vgl. Abbildung 2.4; Greenberg et al., 2011). Mithilfe von User-Interface-

Storyboards kann eine Oberfläche und deren Interaktionskonzept bereits durchgespielt

und auf Fehler geprüft werden, bevor diese kostspielig implementiert werden. Ebenfalls

eignen sie sich als Grundlage für Papierprototypen und Softwarespezifikationen (Coyette

& Vanderdonckt, 2005; Snyder, 2003). Bei User-Interface-Storyboards besteht aufgrund

der Fokussierung auf die Benutzungsoberfläche die Gefahr, dass der Nutzungskontext der

Anwendung außer Acht gelassen wird, und somit wichtige Aspekte bei der Konzeption

vergessen werden können.

a

b

Page 18: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 9

Abbildung 2.5: UI Storyboards werden oftmals mit Zustandsdiagrammen kombiniert

(Greenberg et al., 2011; Stappers & van der Lelie, 2010)

Schematic Storyboards fassen mehrere Szenenausschnitte zu einer einzigen Visualisie-

rung zusammen (vgl. Abbildung 2.6a). Dies erfolgt mithilfe von Annotationen wie Pfeilen,

Umrandungen oder Text, durch die die Kontinuität und Bewegungsrichtung einer Szene-

rie ausgedrückt werden kann. Insbesondere in der Videobearbeitung können Schematic

Storyboards hilfreich sein, da sie auf einen Blick eine Vorschau auf ein Video geben, ohne

dass dieses betrachtet werden muss (Goldman et al., 2006).

Abbildung 2.6: (a) Schematic Storyboards (Goldman et al., 2006)

(b) Claim Storyboards (Wahid et al., 2010)

Anstatt Storyboards jedes Mal von Grund auf neu zu zeichnen, verfolgen die von Wahid et

al. (2009) vorgestellten Claim-Storyboards den Ansatz, bestehende Artefakte wiederzu-

verwenden. Hierfür werden den Designern Karten zur Verfügung gestellt, auf deren Vor-

derseite ein beschriftetes Bild einer Sache und auf der Rückseite die Vor- und Nachteile

derer, die sogenannte Claims, dargestellt werden (vgl. Abbildung 2.6b). Hierdurch können

Designer gleichzeitig inspiriert und mit den Design-Trade-Offs einer Sache vertraut ge-

macht werden (Wahid et al., 2009). Claim-Storyboards werden erstellt, indem die zur

Verfügung stehenden Karten entsprechend der auszudrückenden Geschichte in eine Rei-

henfolge gebracht und jeweils mit Beschriftungen versehen werden (vgl. Abbildung 2.6b).

Auch neue Karten können bei Bedarf erstellt werden (Wahid et al., 2010). Die Verwen-

dung vorgegebener Bilder ist für das Storyboarding recht ungewöhnlich, da im Allgemei-

nen dadurch weder eine Geschichte richtig erzählt noch Empathie aufgebaut werden

kann.

2.2.3 DER PROZESS DES STORYBOARDINGS

Der typische Storyboarding-Prozess wurde in einer Studie von Truong et al. (2006) an-

hand von Interviews mit professionellen, sowie nicht-professionellen Designern unter-

sucht. Sie fanden heraus, dass sich Designer zunächst individuell über Designalternativen

b a

Page 19: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 10

Gedanken machen und diese in kleinen Skizzen festhalten. Anschließend werden die ent-

standenen Ideen in der Gruppe diskutiert. Experten treffen sich hierbei typischerweise an

einem Ort, an dem sie ihre Ideen gesammelt anbringen können, wie etwa an einem Whi-

teboard. Während der Gruppendiskussion wird ein gemeinsames Verständnis des zu

entwerfenden Produkts und dessen Nutzungskontexts aufgebaut. Die entstandenen Ideen

werden in den nächsten Schritten iterativ verbessert und zu einer Geschichte zusammen-

gefasst. Hierfür arbeiten professionelle Designer erneut für sich, wobei sie sich regelmä-

ßig zu Gruppendiskussionen treffen. Weniger professionelle Designer hingegen arbeiten

das Storyboard gemeinsam im Team aus. Dies hat für sie den Vorteil, dass sie sich leicht

die Ideen anderer Gruppenmitglieder als Vorlage nehmen können und durch Abpausen

oder Kopieren ihre eventuell weniger gut ausgeprägten Zeichenfähigkeiten ausgleichen

können.

Truong et al. merken weiterhin an, dass erste Ideen oftmals mit Papier und Stift skizziert

werden. Erst wenn die Designer mit ihren Vorschlägen relativ zufrieden sind, werden

diese digital umgesetzt. Hierfür werden Programme wie etwa Adobe Photoshop, Adobe

Illustrator oder Microsoft PowerPoint verwendet.

Neben den Interviews führten Truong et al. zudem eine Analyse von Storyboards durch,

sowie ein Experiment, bei dem sie die Elemente eines Storyboards variierten (vgl. auch

Abschnitt 2.2.1). Daraus folgend entstanden Richtlinien, die bei der Erstellung von Story-

boards berücksichtigt werden sollten. Hierzu zählt, dass die Designer bevor sie Ideen

sammeln, sich zunächst Gedanken darüber machen, wer die Storyboards später betrach-

ten wird, welchen Hintergrund diese Personen haben und was für Funktionen das zu

designende Produkt besitzen soll. Die fertigen Storyboards sollten zudem ähnlich wie

normale Prototypen mit Personen aus der Zielgruppe evaluiert werden, um Verständnis-

probleme und sonstige Schwierigkeiten aufzudecken.

2.2.4 STORYBOARDS IM DESIGNPROZESS

Aufgrund ihrer Vielseitigkeit lassen sich Storyboards während des gesamten Designpro-

zesses einsetzen. Deren Rolle wird im Folgenden anhand des von Rosson und Carroll

(2002) definierten szenariobasierten Framework erläutert. Dieses teilt den Designpro-

zess in drei verschiedene Phasen ein: Analyse, Design, sowie Prototyping und Evaluation.

Die Analysephase beschäftigt sich typischerweise mit den Anforderungen der Anwen-

dung: Was benötigt der Nutzer und wie arbeitet er bisher? Welche Features muss die

Anwendung haben, um den Nutzer optimal unterstützen zu können? Van der Lelie merkt

an, dass hierbei „nicht nur die technischen Funktionen, sondern auch die psychologi-

schen, sozialen, wirtschaftlichen und kulturellen“ (van der Lelie, 2005) Aspekte von Be-

deutung sind. Häufig werden Interviews mit potentiellen Nutzern, sowie Beobachtungen

an deren Arbeitsplatz durchgeführt. Storyboards können in dieser Phase den bisherigen

Arbeitsablauf eines Nutzers oder die Probleme, denen er gegenübersteht, dokumentieren

(Sova & Sova, 2006). Dabei können neben dem Kontext und den Interaktionen des Nut-

zers, auch Gefühle, sowie die Atmosphäre einer Situation aufgezeigt werden (van der

Lelie, 2005). Durch das Erstellen der Storyboards und Szenarien im Allgemeinen wird

Page 20: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 11

nicht nur die gezeigte Szene analysiert und diskutiert, die Designer machen sich zudem

Gedanken über andere mögliche Anforderungen und Anwendungsfälle des Systems.

Überdies können die Teammitglieder ein gemeinsames Verständnis für das System auf-

bauen (Rosson & Carroll, 2002).

Abbildung 2.7: Einsatz von Storyboards im Designprozess (Lorenz, 2011)

Im szenariobasierten Framework besteht die Designphase aus der Erstellung von Aktivi-

täts-, Informations- und Interaktionsszenarien. Diese definieren die Funktionen, die vom

System angeboten werden, die Informationen, die visualisiert werden sollen, sowie die

Bedienung des Systems (Rosson & Carroll, 2002). Storyboarding kann hierbei als Kreati-

vitätstechnik zur Erstellung und Evaluation von Ideen eingesetzt werden. Die entstehen-

den Zeichnungen sollten zu Anfang nur wenige Details besitzen, und grob und skizzenhaft

gezeichnet werden. Dies regt Diskussionen an und hilft dabei, sich nicht zu früh auf ein

Design zu fixieren. Erst im Verlauf dieser Phase, wenn die Anzahl an Ideen wieder redu-

ziert wird, gewinnt die Ausarbeitung von Details und die Handlung an sich an Wichtigkeit.

Iterativ werden die Storyboards verbessert, bis ein zufriedenstellendes Ergebnis erzielt

wurde. Sollen Projektverantwortliche oder Kunden überzeugt werden, so kann über die

Erstellung von High-Fidelity-Storyboards nachgedacht werden, um die Ideen überzeu-

gend zu präsentieren (Buxton, 2007; van der Lelie, 2005).

In der letzten Phase, die oft auch bereits parallel zur Designphase verläuft, werden die

Designs evaluiert. Storyboards können hierbei als Grundlage für Papierprototypen oder

direkt als Diskussionsgrundlage mit potentiellen Anwendern genutzt werden, um Szena-

rien durchzuspielen und potentielle Probleme zu finden (Rosson & Carroll, 2002; Snyder,

2003; van der Lelie, 2005). Auch für die Erstellung komplexerer Prototypen können Sto-

ryboards eingesetzt werden, um den Entwicklern als informelle Spezifikation zu dienen

(Coyette & Vanderdonckt, 2005).

2.3 ANIMATION Die ursprüngliche Bedeutung des Wortes „animieren“ ist „zum Leben erwecken“ (Parent,

2009). Dank der Animation können Betrachter den Eindruck erhalten, dass beispielswei-

se Gegenstände oder gezeichnete Figuren ein Eigenleben besitzen. Animation hat einer-

seits einen Unterhaltungswert, wie in Film und Fernsehen zu sehen, indem sie unsere

Realität oder eine Fantasiewelt abbildet und Geschichten erzählt. Andererseits kann

Animation auch dabei helfen, Sachverhalte und Funktionsweisen besser zu erklären und

zu verstehen. Sie lässt sich schneller wahrnehmen als eine Erklärung in Worten.

Storyboarding als Kreativitätstechnik,

Visualisierung der Interaktion mit einem System

Dokumentation von Nutzerverhalten, Problemen,

Kontext und Emotionen Analyse

Design

Informelle Spezifikation für Entwickler,

Grundlage für Papierprototypen / Evaluierungen Prototyping & Evaluation

Page 21: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 12

Animation wird erzeugt, indem eine Reihe von Einzelbildern, welche sich meist nur leicht

voneinander unterscheiden, schnell hintereinander abgespielt wird. Das menschliche

Auge ist ab einer gewissen Geschwindigkeit nicht mehr in der Lage, die einzelnen Bilder

als solche zu erkennen, sondern interpretiert diese kleinen Veränderungen als Geschwin-

digkeit, wodurch Bewegung wahrgenommen wird. Im Film werden hierfür normaler-

weise Geschwindigkeiten von mindestens 25 Bildern pro Sekunde verwendet. Die Wahr-

nehmung von Bewegung ist eine der wichtigsten menschlichen Wahrnehmungen. Sie

kann uns vor potentiellen Gefahren bewahren und erregt daher unsere Aufmerksamkeit

in besonderem Maße (Goldstein, 2009).

In diesem Abschnitt werden die Grundlagen von Animation erläutert. Hierfür werden

zunächst die Prinzipien von Animation beschrieben, und welchen Zweck diese in Benut-

zungsoberflächen verfolgen können. Verschiedene über die Zeit entstandene Animations-

techniken werden vorgestellt, sowie der grundlegende Animationsprozess erläutert. Als

Grundlage für die Erstellung von sowohl traditionellen als auch modernen Animationen

werden, wie in Abschnitt 2.2 bereits beschrieben, für gewöhnlich Storyboards verwendet.

Dieses Kapitel schließt mit der Erörterung eines möglichen Sinns von Animation in Sto-

ryboards ab.

2.3.1 PRINZIPIEN VON ANIMATION IN BENUTZUNGSOBERFLÄCHEN

Neben dem Storyboarding an sich, entwickelten die Disney Studios auch die zwölf Grund-

regeln der Animation, welche in dem Buch „The Illusion of Life“ (Thomas & Johnston,

1989) veröffentlicht wurden. Sie entstanden unter anderem aus der genauen Beobach-

tung der Natur, weshalb sie auch heute noch gültig sind. Einige dieser Prinzipien lassen

sich auch für die Gestaltung von Benutzungsoberflächen nutzen. Sie erleichtern die

Wahrnehmung von Übergängen und vermitteln einen natürlicheren Eindruck von Ober-

flächenkomponenten. Die im Interfacedesign benutzbaren Prinzipien werden im Folgen-

den vorgestellt (Hinman, 2012; Tonollo, 2011).

Quetschen und Strecken (Squash and Stretch) – Die Form eines elastischen Körpers

verformt sich beim Zusammenspiel mit anderen Gegenständen und bildet so die Einwir-

kung äußerer Kräfte ab. Anhand dieses Prinzips erhält der Betrachter ein Gefühl für das

Gewicht und die Flexibilität eines Gegenstandes. Ein Ball wird beispielsweise gequetscht,

wenn er auf eine Oberfläche aufprallt und gestreckt, wenn er wieder abprallt. Das Volu-

men des Gegenstandes bleibt hierbei immer gleich.

Ausholen oder Vorwegnehmen (Anticipation) – Eine Bewegung wird immer durch eine

Gegenbewegung eingeleitet. Dies ist beispielsweise der Fall, wenn eine Person vor einem

Ballwurf seinen Arm zurückzieht. Der Betrachter wird auf das Ereignis vorbereitet und

kann es dadurch besser wahrnehmen.

Inszenierung der Posen (Staging) – Bilder sollten so inszeniert sein, dass die Aufmerk-

samkeit des Betrachters auf das Handlungszentrum gelenkt wird. Dies kann beispielswei-

se in einer ruhigen Szene durch Bewegung, in einer bewegten Szene durch Stillstand,

oder auch anhand von kontrastreichen Farben bewerkstelligt werden.

Page 22: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 13

Weiterführende und überlappende Bewegung (Follow Through and Overlapping Ac-

tion) – Eine weiterführende Bewegung schließt eine Bewegung ab. Beispielsweise bleibt,

nachdem ein Ball geworfen wurde, der Arm nicht einfach in der Luft stehen, sondern er

bewegt sich noch weiter. Wenn mehrere Aktionen hintereinander durchgeführt werden,

muss nicht erst eine Aktion beendet werden, um die nächste Aktion zu initiieren. Die

Aktionen können überlappen. Dieses Prinzip kann beispielsweise genutzt werden, um

beim Scrollvorgang das Ende einer Liste mittels eines Nachfederns zu verdeutlichen.

Beschleunigung und Abbremsung (Slow In and Slow Out) – Wenn Objekte bewegt wer-

den, so beginnen sie in einer relativ langsamen Geschwindigkeit, beschleunigen dann und

werden zum Ende hin wieder langsamer. Durch die Entschleunigung lässt sich das Ende

einer Bewegung besser vorhersagen.

Bewegungsbögen (Arcs) – Eine Bewegung sollte möglichst natürlich aussehen und sich

entsprechend physikalischer Gegebenheiten verhalten. In der Natur führen nur wenige

Objekte lineare Bewegungen aus. Sie sind stattdessen oft bogenförmig, da sie etwa über

Gelenke verbunden sind.

Zweitrangige oder unterstützende Bewegung (Secondary Action) – Eine Bewegung, die

parallel zu einer anderen Bewegung stattfindet und diese unterstützt. Beispielsweise

werden während des Gehens auch die Arme einer Person bewegt. Die Bewegung wirkt

hierdurch natürlicher, und es wird gezeigt, dass ein Objekt mit anderen Objekten zusam-

menwirkt.

Bewegungsdauer (Timing) – Die Bewegungsgeschwindigkeit eines Charakters oder Ob-

jekts hängt von dessen Physik oder auch von dessen Emotionen ab. Eine Feder lässt sich

beispielsweise schneller anheben als ein schweres Gewicht. Das richtige Timing, ob eine

Bewegung zu langsam oder zu schnell durchgeführt, und wie diese auf andere wirkt, kön-

nen auch im Interface Design von Bedeutung sein.

Übertreibung (Exaggeration) – Um die Aufmerksamkeit des Betrachters zu erwecken,

können Bewegungen und Posen auch übertrieben dargestellt werden.

Neben diesen neun Prinzipien, existieren noch drei weitere, welche allerdings in erster

Linie für die Erstellung von Animationsfilmen relevant sind. Das erste Prinzip ist Straight-

Ahead und Pose-To-Pose, welches auf verschiedene Animationstechniken zum Zeichnen

von Bewegungen hinweist. Das zweite Prinzip ist Solides Zeichnen (Solid Drawing), das

auf die Fähigkeiten eines Zeichners anspielt, einen Charakter immer möglichst gleich

aussehen zu lassen. Abschließend besagt Charisma, Charme und Reiz (Appeal), dass Ani-

mation und Aussehen einer Figur ihrem Charakter entsprechen soll (Thomas & Johnston,

1989).

2.3.2 ANIMATIONSTECHNIKEN

Im Laufe der Zeit haben sich die verschiedensten Techniken zum Animieren realer Ge-

genstände, Zeichnungen oder etwa Computermodellen entwickelt. Im Folgenden wird

eine Auswahl derer aus der analogen und der digitalen Welt vorgestellt.

Page 23: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 14

Das Prinzip des Daumenkinos kennen die meisten noch aus ihrer Kindheit: man lässt ein

kleines Büchlein oder selbstgezeichnete Zeichnungen schnell hintereinander abblättern,

wodurch der Inhalt als sich scheinbar bewegend wahrgenommen wird. Variiert man die

Geschwindigkeit des Abblätterns, so verändert sich auch die Geschwindigkeit der wahr-

genommenen Bewegung. Um ein Daumenkino zu erstellen werden lediglich einzelne

Papierblätter und ein Stift benötigt. Bildausschnitte, die Teil der Bewegung sein sollen,

werden jeweils von Bild zu Bild leicht verändert. Die übrige Szenerie sollte möglichst

gleich bleiben, was beispielsweise durch das Abpausen des vorherigen Bildes sicherge-

stellt werden kann.

Kleinere Animationsabfolgen sind mithilfe von Daumenkinos sehr einfach, schnell und

günstig zu realisieren. Zeichnet man sie selbst von Hand, dann ist die Bewegung für ge-

wöhnlich nicht perfekt, da man es nicht schafft, die Szenerie des vorherigen Bildes zu

hundert Prozent zu übernehmen. Dies kann allerdings gerade in frühen Designphasen

von Vorteil sein, da hier nicht die perfekte Optik, sondern die Idee an sich und die Mög-

lichkeit, diese anderen Personen zu kommunizieren, im Vordergrund stehen. Sollen län-

gere Animationen erstellt werden, so nimmt der Aufwand für die Erstellung des Daumen-

kinos stetig zu, da jedes einzelne Bild neu gezeichnet werden muss. (Buxton, 2007).

Abbildung 2.8: Daumenkinoanimation eines Autos (adaptiert von Buxton, 2007)

Einem ähnlichen Prinzip wie Daumenkinos folgen Stop-Motion-Animationen. Auch hier

werden Einzelbilder schnell hintereinander abgespielt, die sich nur wenig voneinander

unterscheiden. Statt die Bilder zu zeichnen, nimmt bei der Stop-Motion-Animation für

gewöhnlich eine Kamera Bilder einer jeweils leicht veränderten Szenerie auf. Der Einsatz

eines Stativs ist bei der Aufnahme der Bilder zu empfehlen, damit immer der gleiche Bild-

ausschnitt aufgezeichnet wird. Die Szenerie wird in einer realen Umgebung mithilfe von

Gegenständen, Knetmodellen oder etwa Papierausschnitten aufgebaut. Hilfsmittel, wie

eine Angelschnur, können eingesetzt werden, um Objekte beispielsweise fliegen zu las-

sen. Realen Objekten lässt sich somit durch Stop-Motion-Animationen Leben „einhau-

chen“ (Bonanni & Ishii, 2009; Priebe, 2007).

Stop-Motion-Animationen lassen sich schnell und einfach erstellen, und eignen sich auch

als Kreativitätstechnik im Team. Im Vergleich zum Daumenkino haben sie den Vorteil,

dass bestehende Elemente wiederverwendet werden können und nicht bei jedem Einzel-

bild neu gezeichnet werden müssen. Jedoch wird der Animationsvorgang bei längeren

Sequenzen ebenfalls aufwändig, da jede einzelne Szene leicht verändert abfotografiert

werden muss. Die entstehenden Animationen sind eher grober Natur und nicht perfekt,

was jedoch, wie zuvor schon erwähnt, zu Beginn der Designphase von Vorteil sein kann.

Page 24: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 15

Aufgrund der Einfachheit und der Explorationsmöglichkeiten sehen Fallman und Mous-

sette (2011) Stop-Motion-Animationen als das Pen & Paper des Interaktionsdesigns an.

Abbildung 2.9: (a) Aufnahme einer Stop-Motion Animation eines User-Interfaces (Geyer,

2010) (b) Traditionelle 2D-Animation mit einer Lightbox (White, 2006) (c) 2D-Animation mithilfe eines Vektor-Programms (White, 2006)

Traditionelle 2D-Animationen werden komplett von Hand gezeichnet und sind vor al-

lem durch Zeichentrickfilme bekannt geworden. Typischerweise werden von Hauptani-

matoren die Basisbilder einer Animation, die sogenannten Keyframes, ausgearbeitet. Die-

se geben Anhaltspunkte darauf, wie die Animation verlaufen soll. Die Einzelbilder, die

sich zwischen diesen Keyframes befinden, die Inbetweens, werden von Assistenten ge-

zeichnet. Bei schnellen Bewegungen werden die Bilder manchmal auch direkt hinterei-

nander und ohne Inbetweens gezeichnet. Als Hilfsmittel stehen den Animatoren Lightbo-

xen zur Verfügung, Tische, die von unten beleuchtet werden, so dass der Inhalt des vorhe-

rigen Einzelbildes durchscheinen kann (vgl. Abbildung 2.9b). Um nicht immer ganze Sze-

nen neuzeichnen zu müssen, können die Animatoren zudem auf Celluloidfolie („Cels“)

zurückgreifen. Durch die Transparenz der Folie können wie bei einem Ebenensystem

mehrere Zeichnungen übereinander gelegt werden, um etwa einen Hintergrund, Objekte

und Personen darzustellen. Meist gibt es mehrere Repräsentationen eines Objektes, zum

Beispiel verschiedene Gesichtsausdrücke eines Charakters, welche je nach Bedarf einge-

setzt werden können. Falls sich ein Charakter durch eine Landschaft bewegen soll, so

kann der Hintergrund auf eine lange Papierrolle gezeichnet werden, welche hinter dem

Vordergrund entlanggezogen wird. Die Erstellung eines traditionellen 2D-Animations-

filmes ist sehr zeitaufwändig und wird heute kaum noch realisiert. Durch moderne Com-

puter und Animationsprogramme wurde der Prozess vereinfacht und dessen Möglichkei-

ten konnten erweitert werden (Parent, 2009; Taylor, 1999).

Heutige Animationen bestehen zumeist aus zwei- bzw. dreidimensionalen Computer-

grafiken. Zum Teil wird als Grundlage der Animation eine Zeichnung verwendet, welche

von Hand entweder direkt auf einem Grafiktablett erstellt oder auf Papier skizziert und

im Anschluss eingescannt wird. Teilweise werden allerdings auch alle Bestandteile einer

Animation am Computer erzeugt. Sollen dreidimensionale Animationen erstellt werden,

so wird ein 3D-Modell des zu animierenden Objektes benötigt. Bei der Animation mithilfe

von Computerprogrammen können ebenfalls Keyframes genutzt werden, jedoch über-

nimmt der Computer die Rolle des Inbetweeners und generiert die Bilder zwischen den

Keyframes automatisch. Moderne 3D-Animationstools besitzen zudem die Möglichkeit,

einzelne Objekte anhand von vordefinierten Aktionen zu animieren. Ebenfalls können

a b c

Page 25: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 16

reale Bewegungsabläufe mit der Motion-Capture-Technik erfasst und auf 3D-Modelle

angewandt werden. Nachdem die Modelle und Animationen erstellt wurden, werden im

Rendering-Schritt u.a. die sichtbaren Bereiche berechnet, sowie Texturen und Beleuch-

tungsoptionen angewandt (Jackel et al., 2006; Priebe, 2007). Die meisten Anwendungen

zum Erstellen zwei- und dreidimensionaler Animationen sind komplex und benötigen

viel Zeit zur Einarbeitung. Allerdings lassen sich mithilfe dieser Anwendungen realitäts-

nahe und überzeugende Animationen erstellen.

2.3.3 DER GRUNDLEGENDE ANIMATIONSPROZESS

Die hier vorgestellten Animationstechniken folgen im Großen und Ganzen dem gleichen

grundlegenden Animationsprozess. Zunächst wird das zu animierende Objekt ausge-

wählt. Es wird leicht verändert und ein Abbild von der veränderten Szene aufgezeichnet.

Dieser Schritt wird immer und immer wieder wiederholt, bis das Objekt sich an seinem

Zielpunkt befindet.

Abbildung 2.10: Der grundlegende Animationsprozess (Lorenz, 2011)

Diese kleinen Änderungen werden bei Daumenkinos und traditionellen 2D-Animationen

von Hand gezeichnet, bei Stop-Motion-Animationen werden die Gegenstände leicht be-

wegt und bei modernen zwei- und dreidimensionalen Animationen berechnet der Com-

puter diese Veränderungen.

2.3.4 ANIMATION IN STORYBOARDS

Für gewöhnlich bestehen Storyboards aus mehreren statischen Bildern, die eine Ge-

schichte erzählen. Sie dienen heutzutage unter anderem als Grundlage für Animationen

oder Filme, sind aber selbst nicht animiert. Moderne Anwendungen zur Erstellung von

Storyboards erlauben höchstens Hinweise für die Kameraführung, etwa wie die Kamera

über eine Szene zu schwenken ist, oder an welche Stelle in der Szene herangezoomt wer-

den soll. Storyboards lassen sich zudem für Animatics nutzen, eine Art Diashow der ein-

zelnen Bilder des Storyboards, bei der das Timing bereits grob festgelegt wird und wel-

che auch bereits mit Musik unterlegt sein kann (White, 2006). Trotz dieser Arten von

Animation in Storyboards, bleibt die Szenerie des Storyboards und auch dessen Objekte

statisch und unbewegt. Bewegungen können allenfalls durch Pfeile angedeutet werden.

Die Idee Animation in Storyboards einzusetzen, ist nicht vollkommen neu, sondern wurde

bereits bei einer Evaluation des Tools DEMAIS (siehe auch Abschnitt 3.2.1) als Verbesse-

rung vorgeschlagen (Bailey & Konstan, 2003).

Verwendet man Storyboards als Designrepräsentation, so wird anhand der eben be-

schriebenen Pfeile zwar klar, dass eine Bewegung stattfinden soll, allerdings erhält weder

der Betrachter, noch der Ersteller ein Gefühl dafür, wie diese Bewegung aussieht, in wel-

Objekt

auswählen

Objekt leicht

verändern

Veränderung

aufzeichnen

Objekt am

Zielpunkt?

Nein

Ja

Page 26: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 17

cher Geschwindigkeit sie stattfindet, und wie sie insgesamt wirkt. Setzt man an dieser

Stelle jedoch Animation ein, so kann sie einen besseren Eindruck des Konzepts vermit-

teln. Animation in Storyboards birgt allerdings noch weitere Vorteile. Der Unterschied

zwischen zwei Einzelbildern kann manchmal nur minimal und daher schwierig zu finden

sein. In diesem Fall muss der Betrachter beide Bilder vergleichen, um die Änderungen

sehen zu können. Wird stattdessen Animation genutzt, so kann der Betrachter die Ände-

rungen aktiv verfolgen, wodurch dessen kognitive Belastung sinkt.

Insbesondere im Interaktionsdesign kann Animation ihre Vorteile ausspielen. Hier wer-

den besondere Herausforderungen an Designrepräsentationen gestellt: die Systeme sind

meist mobil, interaktiv und oft auch neuartig oder komplex. Mithilfe statischer Repräsen-

tationen wird es immer schwieriger, die Ideen auszudrücken und auch erfolgreich ande-

ren Personen zu kommunizieren. Auf diese Herausforderung stieß Löwgren (2004) bei

der Konzeption eines Systems, mit dem die Wartung von Industrieanlagen mithilfe von

Spracheingaben dokumentiert werden sollte. Er trat ihr mit den animierten Use Sketches

entgegen, kleinen Animationsfilmen, die die Handhabung des von ihm konzipierten Sys-

tems illustrierten. Für die Szenerie der Animationen wählte er absichtlich eine sehr einfa-

che und skizzenhafte Darstellung. Er kombinierte schlichte, handgezeichnete Figuren mit

Fotografien von Fabrikgeländen als Hintergrund (vgl. Abbildung 2.3). Zwischen den Fra-

mes setzte er keine Interpolation ein, sondern nutzte harte Schnitte und nur wenige

Keyframes.

Abbildung 2.11: Ausschnitte aus Löwgrens animierten Use Sketches (Löwgren, 2004)

Durch diese Maßnahmen versuchte er die Probleme, die beim Einsatz von Filmen als

Designrepräsentationen auftreten, zu umgehen. Zu den Problemen zählen, dass Zuschau-

er dazu neigen, sich von einem Film „berieseln“ zu lassen und ihn im Gesamten bewerten,

statt das vorgestellte Design und dessen Details zu kritisieren und darüber zu diskutie-

ren. Sieht ein Film schon zu detailliert und endgültig aus, so wird der Fokus der Zuschau-

er beispielsweise eher auf die „richtige“ Farbe eines Buttons, statt auf das Konzept an sich

gelegt, eine typische Eigenschaft von High-Fidelity-Sketchen. Doch die von Löwgren ge-

troffenen Maßnahmen erreichten ihr Ziel. Die animierten Use Sketches wurden von den

Projektbeteiligten als Low-Fidelity-Sketch wahrgenommen. Sie sahen schnell erstellt aus

und es gab keine Verwechslungen mit einem fertigen System, welches lediglich verkauft

werden soll. Stattdessen konnten sie seine Ideen erfolgreich den Projektbeteiligten ver-

mitteln und diese zu konstruktiven Diskussionen und Kritik am Konzept anregen, da sie

das richtige Vokabular eines Sketches besaßen (vgl. auch Abschnitt 2.1). Es wurde zudem

vorgeschlagen, Papierausdrucke zur Verfügung zu stellen, auf denen die Animation grob

textuell und anhand von Bildern beschrieben wird, um sich auch später noch an die Idee

Page 27: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

G r u n d l a g e n | 18

erinnern zu können (Löwgren, 2004). Nicht nur Löwgren, sondern auch Fallman und

Moussette (2011), sowie Buxton (2007) schlagen Animation als Sketchingtechnik im

Interaktionsdesign vor. Buxton warnt allerdings davor, dass man nicht den Blick für den

Zweck der Animation verlieren darf und zu viel Zeit in deren Erstellung investiert. Daher

sollten bei der Erstellung von Animationen in frühen Designphasen insbesondere die

Aspekte eines Sketches im Hinterkopf behalten werden, welche in Abschnitt 2.1 vorge-

stellt wurden.

Animation kann also dafür eingesetzt werden, ein Konzept zu externalisieren und ande-

ren Leuten zu kommunizieren – ein Ziel, das auch Storyboards verfolgen. Allerdings kön-

nen durch den Einsatz von Animation nicht mehr alle Informationen auf einen Blick gese-

hen werden, was ein Vorteil von Storyboards ist. Dem kann entgegengewirkt werden,

indem eine alternative Ansicht angeboten wird, in der beispielsweise Animation durch

Pfeile oder Annotationen angedeutet wird, oder in der die Keyframes der Animation dar-

gestellt werden. Auch muss und sollte nicht das gesamte Storyboard als Animation umge-

setzt werden. Es genügt die Teile zu animieren, die einen Mehrwert davon erhalten und

die übrigen Szenen als Einzelbilder des Storyboards zu belassen. Hierdurch kann auch

weiterhin die Geschichte des Storyboards anhand der Einzelbilder grob verstanden wer-

den.

Page 28: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 19

3 VERWANDTE ARBEITEN

Dieses Kapitel widmet sich der Betrachtung und Bewertung verwandter Arbeiten. Bislang

existieren noch keine Anwendungen, die sich auf die Erstellung einer Kombination von

Storyboards und Animationen spezialisiert haben. Allerdings gibt es Anwendungen, die

für diesen Zweck verwendet werden können. Diese Tools werden als erstes vorgestellt,

bevor Anwendungen untersucht werden, die speziell Storyboarding oder Animation un-

terstützen.

3.1 KOMBINATIONEN VON STORYBOARDING UND ANIMATIONEN Microsoft PowerPoint (Microsoft, 2013a) ist eine Anwendung zum Erstellen, Bearbeiten

und Durchführen von Präsentationen. Aufgrund seiner geringen Lernschwelle, seiner

einfachen Handhabung bezüglich dem Einfügen, Positionieren und Skalieren von Objek-

ten, sowie seines großen Funktionsumfangs, ist es ein unter Designern beliebtes Werk-

zeug (Buxton, 2007; Truong et al., 2006). Es ist nicht darauf spezialisiert Storyboards

oder Animationen zu erstellen, kann hierfür aber genutzt werden. So lassen sich etwa die

einzelnen Präsentationsfolien als Einzelbilder eines Storyboards verwenden. Verschiede-

ne Bearbeitungsfunktionen für eingefügte Bilder, wie das Einfärben des Bildes oder das

Hinzufügen eines Effekts, werden zur Verfügung gestellt. Eine automatische Wiedergabe,

bei der zudem die Anzeigedauer festgelegt werden kann, erlaubt die Nutzung der Präsen-

tation als Animatic (vgl. auch Abschnitt 2.3.4). Auch Audio- oder Videodateien können

wiedergegeben werden. PowerPoint stellt zudem eine große Zahl vordefinierter Animati-

onseffekte zur Verfügung. Objekte können beispielsweise erscheinen und verschwinden,

verblassen oder einfliegen. Auch selbstdefinierte Animationen entlang eines Pfades sind

möglich. Allerdings wird dem Nutzer während der Definition dieses Pfades weder eine

Vorschau der Animation gegeben, noch lässt sich die Geschwindigkeit der Bewegung

variieren. Ein Animationsbereich gibt eine Übersicht über vorhandene Animationen, zeigt

deren Startzeitpunkt und Dauer an, und ermöglicht die Bearbeitung und Wiedergabe von

Animationen.

Abbildung 3.1: Microsoft PowerPoint stellt (a) verschiedene Animationseffekte (adaptiert

von Buxton, 2007) (b) und einen Animationsbereich zur Verfügung

a b

Page 29: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 20

Microsoft Expression Blend (Microsoft, 2013b) ist ein Werkzeug, welches es professio-

nellen Designern ermöglicht, Benutzungsoberflächen für Desktopanwendungen, Websei-

ten, sowie mobile Geräte zu gestalten. Vorgefertigte Schaltflächen lassen sich per Drag &

Drop zu einer Oberfläche zusammenstellen, aus denen aufgrund der engen Verzahnung

zu Microsofts .NET Framework auch direkt WPF- und Silverlight-Anwendungen generiert

werden können. Mithilfe von SketchFlow ist es zudem möglich, Storyboards dieser Ober-

flächen und Verbindungen zu anderen Screens zu erstellen. Interaktives Verhalten und

Animationen können zudem hinzugefügt werden. Animationen werden hierbei, ähnlich

wie in WPF, anhand von Keyframes definiert, und so lassen sich deren Dauer, zu verän-

dernde Eigenschaft und Interpolationsart festlegen (vgl. Abbildung 3.2b). Eine Low-

Fidelity-Sicht (siehe auch Abbildung 3.2a), in der die Schaltflächen ähnlich einer Skizze

dargestellt werden, eignet sich zur Kommunikation mit Kunden in frühen Designstadien.

Die Anfertigung von Zeichnungen ist in Expression Blend nicht möglich, allerdings lassen

sich Bilder aus anderen Anwendungen importieren. Fertige Designs können einfach aus-

geführt und simuliert werden. Sketchflow bietet zudem die Möglichkeit, Feedback direkt

mithilfe von Annotationen zu den Sketchen hinzuzufügen. Expression Blend ist auf die

Erstellung von UI-Storyboards spezialisiert und erlaubt somit nicht die Darstellung des

Kontexts oder von Emotionen. Als Anwendung für professionelle Designer benötigt es

zunächst eine gewisse Einarbeitungszeit, um erfolgreich Ideen externalisieren zu können.

Abbildung 3.2: Microsoft Expression Blend (a) Storyboard einer Benutzungsoberfläche

(b) Übersicht über die verwendeten Animationen

3.2 STORYBOARDING Zur Erstellung von Storyboards ist grundsätzlich nur Papier und Stift nötig. Allerdings

lassen sich Animationen auf Papier nur andeuten, deren Erstellung und Wiedergabe ist

nur bei einem digitalen Tool möglich. Um Storyboards digital zu erstellen, eignet sich

grundsätzlich jede Anwendung, mit der Zeichnungen angefertigt oder bearbeitet werden

können. Häufig werden Anwendungen wie Adobe Illustrator oder Photoshop als Basis zur

Erstellung von Storyboards verwendet. Jedoch gibt es auch Anwendungen, die darauf

spezialisiert sind. Eine Auswahl derer, sowohl aus dem akademischen als auch aus dem

professionellen Umfeld, soll im Folgenden vorgestellt werden.

a b

Page 30: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 21

3.2.1 AKADEMISCHE ANWENDUNGEN ZUR ERSTELLUNG VON STORYBOARDS

Als SILK (Sketching Interfaces like Krazy) entwickelt wurde, gab es noch keine Anwen-

dungen, mit denen man Benutzungsoberflächen informell gestalten konnte. Die verfügba-

ren Anwendungen legten einen zu großen Fokus auf die Farbe oder Schrift einer Schalt-

fläche, wodurch die meisten Designer auf deren Nutzung in frühen Designphasen verzich-

teten. Landay und Myers (2001) wollten dem entgegenwirken und entwickelten SILK,

eine Anwendung, mit der eine Benutzungsoberfläche schnell mithilfe eines digitalen

Stylus gezeichnet und simuliert werden kann. SILK interpretiert die Skizzen und erkennt

Schaltflächen und Gesten. In einer Storyboard-Ansicht, welche alle Skizzen in einer Über-

sicht zeigt, lassen sich die Schaltflächen durch das Zeichnen von Pfeilen verbinden. Aller-

dings können diese Pfeile bei komplexen Anwendungen auch schnell zu Unübersichtlich-

keit führen, wie in Abbildung 3.3a gesehen werden kann. SILK kann hierdurch das Verhal-

ten eines User-Interfaces simulieren und sogar eine funktionierende Benutzungsoberflä-

che aus den Skizzen generieren (Landay & Myers, 2001).

DENIM (Design Environment for Navigation and Information Models) steht Designern in

frühen Phasen des Webdesigns zur Seite. Es unterstützt die typische Arbeitsweise eines

Webdesigners, der zunächst den groben Aufbau einer Webseite gestaltet und erst später

Details wie Bilder und Texte hinzufügt. Hierfür bietet DENIM verschiedene Ansichten

einer Webseite, wie eine Sitemap, ein Storyboard, oder die einzelnen Seiten an sich, wel-

che alle durch einen semantischen Zoom miteinander verbunden sind. Dies bedeutet,

dass je nach Zoomlevel unterschiedlich viele Details angezeigt werden. Das Zeichnen von

Inhalten geschieht, ähnlich wie bei SILK, mithilfe eines Stylus. Seiten lassen sich nach wie

vor durch Pfeile miteinander verbinden, DENIM interpretiert jedoch die gezeichneten

Inhalte weniger, und ermöglicht hierdurch ein freieres Zeichnen. Ist der grobe Aufbau

einer Webseite definiert, so lassen sich Platzhalter durch konkrete Inhalte austauschen,

wodurch ein iteratives Design einer Webseite ermöglicht wird (Lin et al., 2000).

Abbildung 3.3: (a) SILK Storyboard und Zeichenansicht (Landay & Myers, 2001)

(b) DENIM Storyboardansicht (Lin et al., 2000)

DEMAIS (DEsigning Multimedia Applications with Interactive Storyboards) hat es sich

zum Ziel gesetzt, die Entwicklung von Multimediaanwendungen zu unterstützen, in de-

nen vor allem das zeitliche und interaktive Verhalten der Anwendung von Bedeutung ist.

In DEMAIS kann nicht nur auf verschiedenen Ebenen gezeichnet, sondern es können auch

Bilder, Audio- und Videodateien importiert werden. Events lassen sich definieren und mit

anderen Events synchronisieren. Auch DEMAIS erlaubt die Simulation der erstellten

a b

Page 31: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 22

Ideen (Bailey et al., 2001). Bailey und Konstan (2003) führten eine Nutzerstudie durch, in

der unter anderem das Erstellen von 2D-Anmationen als fehlendes Feature von DEMAIS

genannt wurde.

Sowohl SILK, DENIM, als auch DEMAIS haben sich auf die Erstellung von UI-Storyboards

spezialisiert. Sie interpretieren die durch den Nutzer erstellten Zeichnungen und fügen

ihnen Verhalten hinzu. Hierdurch wird freies Sketching verhindert und das kreative Po-

tential eines Designers lässt sich nicht komplett ausnutzen. Die Anwendungen sind au-

ßerdem nicht darauf ausgelegt, den Kontext einer Anwendung und Personen oder Emoti-

onen darzustellen.

Die Anwendung COMulCSer (COllaborative Multidisciplinary user-Centered Software

engineering), welche von Haesen et al. (2010) entwickelt wurde, konzentriert sich nicht

auf Benutzungsoberflächen, sondern stattdessen auf den Prozess des nutzerorientierten

Designs. Sie erlaubt die Verlinkung von Storyboards mit Artefakten, die im späteren Ver-

lauf des Designprozesses entstehen. Die Anwendung sieht vor, dass zunächst ein Szenario

textuell beschrieben wird (Abbildung 3.4a). Zu Abschnitten dieser Beschreibung kann

eine eingescannte Skizze oder ein Foto hinzugefügt werden (Abbildung 3.4b). Alternativ

können hierfür auch Bilder von Flickr importiert werden. Zeichnungen lassen sich in der

Anwendung selbst nicht anfertigen. Die eingefügten Bilder können zur Anonymisierung

zudem mit gezeichneten Personen oder Gesichtern kombiniert werden (Abbildung 3.4c).

Durch den skizzenhaften Stil fällt es leichter, sich in die Person hineinversetzen und Em-

pathie zu ihr aufbauen. Die entstandenen Szenen eines Storyboards können beschriftet

und mit weiteren Designartefakten, wie Personas oder Task-Modellen, verlinkt werden

(Abbildung 3.4d und e). Hierdurch entsteht eine hierarchische Struktur, welche verschie-

dene Detaillierungsgrade der zu designenden Anwendung vereint. Die entstandenen Ar-

tefakte können in einem abschließenden Schritt nach PowerPoint exportiert werden, um

diese für Präsentationen und Diskussionen zu verwenden (Haesen et al., 2010).

Abbildung 3.4: COMulCSer (Haesen et al., 2010), Erläuterungen siehe Text

3.2.2 PROFESSIONELLE TOOLS

Eine professionelle Anwendung zur Erstellung von Storyboards ist beispielsweise Toon

Boom Storyboard Pro (Toon Boom, 2013). Sie erlaubt die Erstellung selbstgezeichneter

a b

c d

e

Page 32: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 23

Storyboards und ist wie folgt aufgebaut: Im Mittelpunkt der Anwendung steht das aktuell

ausgewählte Einzelbild. Über diesem und rechts davon befinden sich verschiedene Werk-

zeuge, wie man sie etwa von Adobe Photoshop kennt. Verschiedene Farben, Pinsel, ein

Ebenensystem, sowie die Erstellung von Vektorzeichnungen werden von der Anwendung

unterstützt. Im unteren Bereich befinden sich die Einzelbilder, welche auch in einer wei-

teren Ansicht übersichtlich dargestellt und organisiert werden können. Storyboard Pro

erlaubt die Animation von Storyboards im Sinne von Kameraeinstellungen und Anima-

tics. Texte können importiert und den Einzelbildern zugewiesen, sowie die fertigen Sto-

ryboards zur Weiterbenutzung in andere Formate exportiert werden.

Abbildung 3.5: (a) Toon Boom Storyboard Pro (Toon Boom, 2013)

(b) Storyboard Artist (PowerProduction Software, 2013)

Storyboard Artist (PowerProduction Software, 2013) ist eine weitere professionelle

Anwendung, in der Storyboards allerdings nicht gezeichnet, sondern anhand von Bildar-

chiven zusammengesetzt werden. Die eingefügten Personen haben nur eine begrenzte

Mimik und so ist der Ausdruck von Emotionen nur eingeschränkt möglich. Allerdings

lassen sich Bilder oder 3D-Modelle auch in anderen Anwendungen erstellen und impor-

tieren. Die Anwendung eignet sich daher auch für Personen mit weniger ausgeprägten

Zeichenfähigkeiten. Auch bei Storyboard Artist können Texte importiert werden. Die

einzelnen Bilder des Storyboards können direkt auf einem Zeitstrahl angeordnet werden,

auf dem das Timing der Bilder festgelegt und Übergänge hinzugefügt werden können. Mit

Storyboard Artist sind auch Kamerabewegungen und das Hinzufügen von Klangeffekten

möglich. Es unterstützt verschiedene künstlerische Stile, wodurch sowohl Low- als auch

High-Fidelity-Storyboards erstellt werden können.

3.3 ANIMATION Es existiert eine Vielzahl von Animationsanwendungen für die unterschiedlichsten Zwe-

cke, wovon der Großteil jedoch eine hohe Komplexität besitzt. Durch die Entwicklungen

der vergangenen Jahre stehen Anwendungen zur Anfertigung dreidimensionaler Anima-

tionen im Fokus. Diese Art von Animation ist aufgrund ihrer elaborierten Wirkung und

ihres Aufwands zur Erstellung allerdings für frühe Designphasen nicht besonders gut

geeignet, weshalb sie in dieser Arbeit nicht weiter beachtet wird. Stattdessen werden

einfach zu bedienende Anwendungen, wie Animationsanwendungen für Kinder oder

informelle Tools näher betrachtet. Auch eine professionelle Anwendung, mit der sich

unter anderem 2D-Animationen erstellen lassen, wird im Folgenden vorgestellt.

a b

Page 33: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 24

3.3.1 ANIMATIONSTOOLS FÜR KINDER

Das ZOOM Kindermuseum (Zoom Kindermuseum, 2013) in Wien bietet ein Trickfilm-

studio, mit denen Kinder spielerisch Animationen erstellen können. Bilder und Gegen-

stände, die in der Animation dargestellt werden sollen, werden von den Kindern selb-

ständig gemalt oder gebastelt und in einer Bluebox abfotografiert. Auch die Kinder selbst

können fotografiert werden und so in der Animation mitwirken. Die angefertigten Bilder

werden im Anschluss in die Anwendung geladen. Ein nachträgliches Bearbeiten derer in

der Anwendung selbst ist nicht möglich. Die Animationen werden auf einem horizontalen

hochauflösenden Display erstellt, indem physikalische Marker über das Display bewegt

werden, wodurch die Bilder bewegt und rotiert werden können. Dank des Einsatzes von

Markern können mehrere Kinder gemeinsam eine Animation erstellen. Durch Druck auf

einen roten Knopf, welcher sich neben dem Display befindet, kann der Inhalt des Displays

aufgezeichnet und nach und nach eine Stop-Motion-Animation erstellt werden. Auch eine

Vertonung der Animationen ist möglich. Mithilfe eines grünen Knopfes lässt sich die er-

stellte Animation direkt wiedergeben. Den Kindern steht zu jeder Zeit Unterstützung

durch Museumsmitarbeiter zur Verfügung.

Abbildung 3.6: (a) Trickfilmstudio im ZOOM Kindermuseum (Zoom Kindermuseum, 2013)

(b) Animation mithilfe des As-Rigid-As-Possible-Algorithmus (Takayama & Igarashi, 2007) (c) Toontastic (Pack, 2012)

Auf Basis des As-Rigid-As-Possible-Algorithmus entwickelten Takayama und Igarashi

(2007) ein System zur Erstellung lebendiger 2D-Animationen, welches auf einem hori-

zontalen Multi-Touch-Display gestartet werden kann. Vorgefertigte 2D-Modelle lassen

sich in die Anwendung laden und animieren. Jeder Finger, welcher solch ein Objekt be-

rührt, wird als Gelenkpunkt des Objektes erkannt und erlaubt dessen Deformierung. Mit-

hilfe der Anwendung ist es sehr einfach möglich, den Mund eines Wals zu animieren (vgl.

Abbildung 3.6b) oder einen Wurm über eine Oberfläche kriechen zu lassen. Zur Rotation

und Skalierung der Bilder eignet sich dieses System weniger.

Toontastic (Launchpad Toys, 2013) ist eine iPad-Anwendung, mit der Kinder spielerisch

den Aufbau einer Geschichte erlernen und dabei eigene Animationsfilme erstellen kön-

nen. Anhand vorgegebener Handlungsbögen lassen sich Szenen gestalten und mit Musik

hinterlegen. Die Kinder können vorgefertigte Hintergründe und Figuren verwenden, ha-

ben aber auch die Möglichkeit, diese selbst zu kreieren. Die vorgefertigten Figuren bewe-

gen ihre Arme und Beine während einer Animation und erwecken so einen lebendigen

Eindruck. Selbstkreierten Figuren kann man dieses Verhalten nicht hinzufügen. Animie-

ren lassen sich die Figuren mithilfe der üblichen Single- und Multi-Touch-Gesten zur

a b c

Page 34: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 25

Translation, Rotation und Skalierung. Befindet sich mehr als eine Figur in einer Szene, so

können mehrere Kinder gemeinsam an der Animation arbeiten. Dank des im iPad einge-

bauten Mikrophons, können die Kinder zudem die erzählte Geschichte vertonen. Ver-

schiedene Szenarien können so animiert, wiedergegeben und sogar im Internet mit ande-

ren Kindern geteilt werden.

3.3.2 INFORMELLE ANIMATIONSTOOLS

Im Laufe der Zeit entstand eine Reihe von informellen Animationstools, die nach dem

Prinzip arbeiten, dass Nutzer die Animationen der Anwendung „vormachen“. Vor allem in

den letzten Jahren gab es eine Reihe von Entwicklungen, die im Folgenden vorgestellt

werden.

Eines der ersten Computerprogramme zum Erstellen informeller Animationen ist

Baeckers GENESYS-System (Baecker, 1969). Bei diesem System werden mit einem Stift

zunächst Objekte und im Anschluss Pfade gezeichnet, an denen sich die Objekte entlang

bewegen. Nicht nur der Pfad an sich, sondern auch die Geschwindigkeit der Bewegung

wird von dem System aufgezeichnet und im Anschluss auf die zu animierenden Objekte

angewandt. Moscovich und Hughes (2004) bezeichnen dieses Prinzip auch als Bewegung-

durch-Beispiel (Motion-By-Example). GENESYS stellte ferner bereits einfache Bearbei-

tungsfunktionen, sowie das Kopieren von Animationen zur Verfügung (Baecker, 1969,

1970).

Aufgrund der Komplexität und des hohen Zeitaufwands, den professionelle Animations-

programme einerseits zur Einarbeitung, andererseits zur Erstellung von Animationen

besitzen, beschlossen Davis et al. (2008) ein Animationstool zu entwickeln, welches den

Animationsprozess beschleunigen und vereinfachen sollte. Hierfür führten sie im Vorfeld

eine umfangreiche Analyse durch, um Anforderungen für ein solches Tool herauszufinden

(vgl. auch Abschnitt 4.2). Die Ergebnisse wurden in K-Sketch umgesetzt, einem informel-

len Animationstool, welches für Tablet-PCs mit Stifteingabe optimiert ist und ebenfalls

dem Prinzip der Bewegung-durch-Beispiel folgt. Skizzen werden mithilfe des Stiftes ge-

zeichnet, wobei eine begrenzte Auswahl an Farben zur Verfügung steht. Der Einsatz von

Ebenen wird nicht unterstützt. Durch gleichzeitiges Drücken einer Taste und Umfahren

der Zeichnung kann diese selektiert werden. Selektionen werden umrandet dargestellt

und besitzen ein spezielles Steuerelement (vgl. Abbildung 3.7b), mit dem sie manipuliert

und animiert werden können. Hierbei wird die Geschwindigkeit und Dauer aufgezeichnet,

mit welcher der Nutzer die Zeichnung bewegt. Die Wiedergabe der Animation erfolgt in

eben dieser Geschwindigkeit und Dauer. Das eingesetzte Steuerelement besitzt verschie-

dene Funktionen und ist daher insbesondere am Anfang der Benutzung gewöhnungsbe-

dürftig. Dank Heuristiken ist es möglich, mehrere Objekte relativ zueinander zu animie-

ren, zum Beispiel einen Vogel, der sich entlang eines Weges bewegt und gleichzeitig mit

seinen Flügeln schlägt. Zeichnungen können erscheinen bzw. verschwinden, indem sie an

einem bestimmten Punkt in der Zeit gezeichnet bzw. gelöscht werden. Demzufolge sind

Animationen in K-Sketch eine Folge von Bearbeitungsschritten über die Zeit, welche der

Nutzer der Anwendung vorführt. K-Sketch besitzt außerdem Funktionen, welche den

Page 35: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 26

Nutzer bei der Erstellung von Animationen unterstützen. Hierzu zählt die Andeutung von

Bewegungspfaden und entfernten Zeichnungen. In einer Evaluation wurde K-Sketch im

Vergleich zur formaleren Animationsanwendung Microsoft PowerPoint als einfacher,

schneller und weniger kognitiv belastend eingestuft (Davis et al., 2008).

Abbildung 3.7: K-Sketch (a) Andeutung einer Animation eines über eine Rampe

springenden Autos (b) Steuerelement zum Manipulieren und Animieren einer Selektion (Davis et al., 2008)

Sketch-n-Stretch nutzt ein ähnliches Prinzip wie K-Sketch, verwendet allerdings einzelne

Ausschnitte von Zeichnungen (Cut-Outs). Die Ausschnitte können aneinander gepinnt

werden und erlauben somit den Aufbau von Objekthierarchien und die Animation an-

hand von Gelenkpunkten. Ein ähnliches Steuerelement, wie jenes von K-Sketch, erlaubt

die Animation der Ausschnitte (vgl. auch Abbildung 3.8a). Im Gegensatz zu K-Sketch wer-

den keine Heuristiken zum Erstellen relativer Animationen genutzt, sondern das Steue-

relement bietet direkt die Option zum Hinzufügen einer Rotation oder Skalierung zu ei-

ner bestehenden Animation. Verschiedene Effekte wie das Ein- und Ausblenden von Ob-

jekten werden unterstützt. Anstelle von Bewegungspfaden werden bei Sketch-n-Stretch

auf Wunsch „Geister“ eingeblendet – halbtransparente Darstellungen des animierten

Objektes über die Zeit. Mithilfe einer erweiterten Zeitleiste lassen sich Animationen nach-

träglich in deren Start- und Endzeitpunkten, sowie deren Dauer verändern. In einer Nut-

zerstudie, in der die Animation bereits fertiger Sketche mit der von K-Sketch verglichen

wurde, konnte Sketch-n-Stretch einen besseren Wert bezüglich der Bearbeitungsdauer

und des System Usability Scales (siehe auch Abschnitt 6.1.1.4.1) erzielen (Sohn & Choy,

2012). Allerdings wurde hier nicht die Erstellung der Zeichnungen untersucht, welche

insbesondere für Anfänger und Designer in frühen Designphasen aufgrund der Definition

der Gelenke gewöhnungsbedürftig sein könnte.

idAnimate entwickelt das Prinzip der Bewegung-durch-Beispiel weiter zur Transforma-

tion-durch-Beispiel (transformation-by-example). Statt einem Steuerelement setzt idAni-

mate auf die Multi-Touch-Manipulation zur Animation von Objekten, wodurch eine

gleichzeitige Translation, Rotation und Skalierung dieser möglich ist. Die Anwendung

wird auf einem iPad ausgeführt und erlaubt somit eine Stifteingabe nur mit speziellen

Stiften. Um trotzdem auch kleine Objekte manipulieren zu können, werden zu animieren-

de Objekte auf einer Leiste, die sich auf der linken Seite befindet, ausgewählt. Diese kön-

nen im nächsten Schritt auf dem kompletten Bildschirm transformiert werden, wodurch

genügend Platz für die Finger bleibt und auch das Sichtfeld nicht versperrt wird. Objekte

a b

Orientierung an Pfad

Rotation

Translation

Nicht-uniforme Skal.

Uniforme Skalierung

Page 36: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 27

können mehrere Repräsentationen besitzen, die zu einem beliebigen Zeitpunkt während

der Animation ausgetauscht werden können. Hierdurch lassen sich beispielsweise meh-

rere Gesichtsausdrücke ermöglichen. Auch idAnimate wurde in einer Nutzerstudie mit K-

Sketch verglichen. K-Sketch wurde hierbei von den Probanden als die Anwendung einge-

stuft, mit der Animationen präziser, sowie Schritt für Schritt erstellt werden können,

jedoch bei der die Kombination mehrerer Animationen komplex werden kann. Animatio-

nen konnten mit idAnimate schneller, aber weniger akkurat erstellt werden. Es eignet

sich daher eher für „quick and dirty“ Sketche. Die Probanden stuften insgesamt Multi-

Touch-Transformationen als positiv und intuitiv ein, auch wenn die Bewegungen

manchmal schwierig waren und teilweise zunächst geübt werden mussten (Quevedo-

Fernández & Martens, 2013). Der Ansatz von idAnimate ist vielversprechend für eine

Anwendung, welche Storyboards und Animation in frühen Designphasen verbindet. Der

starke Fokus auf die Animation könnte allerdings das Sketchen an sich in den Hinter-

grund rücken lassen, da nur komplette Ausschnitte, nicht aber einzelne Striche animiert

werden können.

Abbildung 3.8: (a) Sketch-n-Stretch (Sohn & Choy, 2012)

(b) idAnimate (Quevedo-Fernández & Martens, 2013)

3.3.3 PROFESSIONELLE TOOLS

Es gibt eine Vielzahl professioneller Tools, mit denen zwei- und dreidimensionale Anima-

tionen erstellt werden können. Als Repräsentant wird an dieser Stelle Adobe Flash

(Adobe Systems Incorporated, 2013) vorgestellt, da es im Interaktionsdesign häufig als

Animationstool der Wahl genannt wird (Fallman & Moussette, 2011; Truong et al., 2006).

Adobe Flash ist eine professionelle Anwendung mit großem Funktionsumfang. Sie kann

zur Erstellung interaktiver Inhalte genutzt werden, welche hauptsächlich auf Webseiten

eingesetzt werden. Adobe Flash besitzt, ähnlich wie Adobe Photoshop, ein ausgeklügeltes

Ebenensystem. Selbsterstellte Inhalte wie Bilder, Videos und Audio lassen sich einbinden.

Jede Ebene kann einzeln animiert werden, wobei die Veränderungen zwischen einer

Start- und einer Endposition automatisch berechnet werden können. Interaktives Verhal-

ten lässt sich mithilfe der Scriptsprache ActionScript hinzufügen und erlaubt so weitrei-

chende Gestaltungsmöglichkeiten für den Benutzer. Allerdings kommen diese Möglich-

keiten mit einer hohen Einarbeitungszeit und Komplexität der Anwendung einher.

a b

Page 37: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 28

Abbildung 3.9: Bei Adobe Flash besitzt jede Ebene einen eigenen Zeitstrahl

3.4 STÄRKEN UND SCHWÄCHEN VERWANDTER ARBEITEN Zu Anfang des Designprozesses ist es insbesondere wichtig, dass Ideen schnell und prob-

lemlos externalisiert werden können. Zeichnen stellt hierfür eine wichtige Voraussetzung

dar. Die hier vorgestellten Anwendungen haben alle ihre Stärken und Schwächen in Hin-

blick auf die Möglichkeiten zum Ausdruck von Ideen in frühen Designphasen, welche im

Folgenden diskutiert werden sollen.

Die professionellen Anwendungen Microsoft Expression Blend und Adobe Flash besitzen

einen hohen Funktionsumfang. Allerdings kommt dieser mit einer hohen Einarbeitungs-

zeit und Komplexität einher, welche nicht die schnelle und einfache Externalisierung

fördert. Leider unterstützen sie auch das direkte Zeichnen innerhalb der Anwendung

nicht. Die akademischen Tools SILK, DENIM und DEMAIS sind gut geeignet für das Design

von Benutzungsoberflächen, allerdings interpretieren sie das Gezeichnete und versuchen

Logik zu jenem hinzuzufügen. Das freie Zeichnen des Kontexts wird von diesen Anwen-

dungen nicht unterstützt. Die Vernetzung mit anderen Designartefakten von COMulCSer

ist positiv hervorzuheben, allerdings kann der Arbeitsablauf noch weiter optimiert wer-

den. Einmal eingescannte Zeichnungen können nur begrenzt innerhalb der Anwendung

editiert werden. Die professionellen Anwendungen Toon Boom Storyboard Pro und Sto-

ryboard Artist sind gut geeignet zum Erstellen von Storyboards und auch hierauf spezia-

lisiert. Eine Orientierung an diesen ist für eine Anwendung zum Erstellen animierter Sto-

ryboards zu empfehlen.

Microsoft Power Point ist einfach zu bedienen und stellt umfassende Möglichkeiten zum

Erstellen von Storyboards und auch verschiedene Animationseffekte zur Verfügung. Al-

lerdings kann dessen Animationsvorgang verbessert werden, da während einer Pfadani-

mation keine Vorschau auf das animierte Element gegeben wird und auch die Geschwin-

digkeit der Animation nicht entsprechend der Bewegung des Nutzers aufgezeichnet wird.

Das Trickfilmstudio des Zoom Kindermuseums gibt Kindern einen guten Einblick, wie

Animationen erstellt werden können. Allerdings sind auch hier die Schritte für eine An-

wendung in frühen Designphasen zu aufwändig, da erst gezeichnet, dann eingescannt und

anschließend Bild für Bild verändert und animiert wird. Ein nachträgliches Bearbeiten

der Bilder innerhalb der Anwendung ist nicht möglich. Dies gilt auch für das von Takaya-

ma und Igarashi entwickelte System, mit dem es zudem schwierig ist, Zeichnungen zu

Page 38: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

V e r w a n d t e A r b e i t e n | 29

rotieren oder zu skalieren. Das Prinzip von Toontastic hingegen ist sehr vielverspre-

chend. Ähnlich wie idAnimate basiert es auf dem Prinzip der Transformation-durch-

Beispiel und erlaubt die Animation von Elementen durch Multi-Touch-Gesten. Während

des Animationsprozesses ist es allerdings bei beiden Anwendungen nicht möglich, die

Zeichnungen dynamisch zu verändern. Es lassen sich bei idAnimate zwar verschiedene

Repräsentationen eines Elements hinterlegen, allerdings können diese immer nur im

Gesamten ein- und ausgeblendet bzw. animiert werden. Die Animation von Teilen derer

ist nicht möglich. In frühen Designphasen könnte es von Vorteil sein, den Fokus auf das

Zeichnen von Designartefakten und nicht auf den Animationsvorgang zu legen, auch

wenn dieser von Bedeutung ist. K-Sketch bietet hierfür die Möglichkeiten, allerdings lässt

sich hier nur die präzisere und weniger natürliche Animation mithilfe eines speziellen

Steuerelements realisieren. Sketch-n-Stretch bietet mithilfe seines Steuerelements eine

alternative zur Heuristik von K-Sketch, um mehrere Elemente relativ zueinander zu ani-

mieren. Die Verwendung von Gelenkpunkten bei Zeichnungen könnte allerdings nicht so

intuitiv sein, wie Zeichnungen direkt zu zeichnen und nur Teile zu animieren.

Zusammenfassend lässt sich sagen, dass es noch keine Anwendung gibt, die die Erstellung

animierter Storyboards in frühen Designphasen angemessen unterstützt. Die Funktionen

professioneller Storyboardanwendungen, die Einfachheit von PowerPoint, die Möglich-

keit zum Zeichnen in Animationen von K-Sketch, sowie das Prinzip der Transformation-

durch-Beispiel von idAnimate stellen allerdings vielversprechende Aspekte dar, die beim

Design eines Interaktionskonzepts berücksichtigt werden sollten.

Page 39: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n f o r d e r u n g e n | 30

4 ANFORDERUNGEN

Nachdem die Grundlagen des Sketchings, Storyboardings und der Animation erläutert

wurden, sowie verwandte Arbeiten untersucht wurden, können nun Anforderungen für

ein System abgeleitet werden, welches die Erstellung von Animationen für Storyboards in

frühen Designphasen unterstützt. Die Analyse der verwandten Arbeiten hat ergeben, dass

es bisher noch keine Anwendung gibt, welche dies angemessen unterstützt. Von der Um-

setzung eines solchen Werkzeugs sollen sowohl professionelle, als auch angehende Inter-

aktionsdesigner profitieren. Der Einsatz von Animation hat in dem Bereich des Interakti-

onsdesigns den Vorteil, dass auch für neuartige, komplexe, interaktive und mobile An-

wendungen eine angemessene und ausdrucksstarke Designrepräsentation erstellt wer-

den kann. Insbesondere in frühen Designphasen ist es wichtig, dass erste Sketche mög-

lichst schnell und ohne viel Aufwand erstellt werden können. Dies kann unter anderem

durch eine intuitive Bedienung der Anwendung und eine niedrige Lernschwelle ermög-

licht werden. Aufgrund der Einfachheit der Anwendung sollen allerdings auch andere

Benutzerkreise von der Anwendung profitieren können. Da der Lernaufwand einer An-

wendung normalerweise mit deren Funktionsumfang korreliert, sollen nicht alle, aber

möglichst viele Szenarien umsetzbar sein.

Nachdem die Rahmenbedingungen der Anwendung definiert wurden, sollen im Folgen-

den die Anforderungen für die Erstellung von Storyboards und Animationen festgelegt

werden. Abschließend werden Anforderungen an Modalität und Setting aufgestellt.

4.1 STORYBOARDING Neben der Untersuchung der Elemente eines Storyboards und des Prozesses zur Erstel-

lung derer, entwickelten Truong et al. (2006) auch eine Reihe von Richtlinien, die eine

Anwendung einhalten sollte, welche auf die Erstellung von Storyboards ausgerichtet ist.

Eine solche Anwendung sollte den Nutzern die Möglichkeit geben, die grundlegende Ge-

schichte des Storyboards zu identifizieren und diese als Untertitel für die einzelnen Sze-

nen zu verwenden. Da Designer für gewöhnlich damit beginnen, ihre Ideen mit Papier

und Stift zu skizzieren, sollte eine digitale Anwendung diesen Prozess möglichst gut nach-

stellen können. Gedanken müssen schnell und problemlos mithilfe der Anwendung ex-

ternalisiert werden können. Sie sollte ferner viele der grundlegenden Zeichenfunktionen

von Photoshop besitzen, sowie das unkomplizierte „Einfügen, Löschen, Platzieren und

Skalieren einfacher Objekte, Formen und Text“ (Truong et al., 2006), ähnlich wie in

PowerPoint, ermöglichen. Nicht immer werden Storyboards von Grund auf neu gezeich-

net. Früher erstellte Zeichnungen, Clip-Arts, sowie Bildersammlungen wie Flickr werden

ebenso als Basis von Storyboards verwendet und von den Designern, dem Stil des Story-

boards entsprechend, angepasst. Möglichkeiten zum Import dieser Bilder und zur Wie-

derverwendung bestehender Zeichnungen sind daher zu empfehlen. Ein Ebenensystem

ist ein für Designer elementares Werkzeug, welches ihnen erlaubt, die Inhalte der Story-

boards zu variieren, verschiedene Versionen zu erstellen und abzuspeichern. Wie zudem

in professionellen Anwendungen gesehen werden konnte, ist das Hinzufügen, Umsortie-

Page 40: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n f o r d e r u n g e n | 31

ren, Austauschen und Entfernen von Einzelbildern ein wichtiger Bestandteil einer Story-

boarding-Anwendung. Auch die Zusammenarbeit mit anderen Designern ist von Bedeu-

tung. Das Teilen erstellter Artefakte, sowie die Inspiration durch andere Designer sind

wichtig für den Designprozess. Wie bereits bei der Vorstellung des Storyboarding-

Prozesses in Kapitel 2.2.3 beschrieben, nutzen professionelle Designer hierfür öffentliche,

vertikale Flächen, wie etwa Whiteboards, an denen frühere Designvorschläge angebracht

sind. Für Anfänger ist es wichtig, Artefakte von anderen heranzuziehen, um unter ande-

rem mangelnde Zeichenfähigkeiten ausgleichen zu können. Zudem müssen erstellte Sto-

ryboards anderen Teammitgliedern präsentiert werden können, um über diese zu disku-

tieren und Verbesserungsvorschläge zu entwickeln. Sind Storyboards fertig gestellt, so ist

es von Vorteil, wenn diese für die weitere Benutzung, sowie spätere Designphasen expor-

tiert werden können. Die folgende Auflistung fasst nochmals die eben erwähnten Punkte

zusammen:

Erstellung und Manipulation von Skizzen

Möglichkeit, eine Geschichte zu identifizieren und Text als Untertitel von Einzel-

bildern zu verwenden

Einfaches Einfügen, Löschen, Platzieren und Skalieren von Objekten

Bibliothek vorgefertigter und bereits existierender Elemente

Nutzung von Ebenen

Hinzufügen, Umsortieren, Austauschen und Entfernen von Einzelbildern

Präsentieren und Teilen der erstellten Artefakte

Import und Export von Artefakten

4.2 ANIMATION Animation soll Designer beim Sketchen von Ideen und Konzepten in frühen Designphasen

unterstützen. Wie in Kapitel 2.1 beschrieben, besitzen Sketche typischerweise bestimmte

Eigenschaften: Sie sollen schnell und ohne viel Aufwand erstellbar sein. Sie sollen wie

grobe Ideen aussehen und nicht den Eindruck eines fertigen Produktes vermitteln, an

dem nichts mehr verändert werden kann. Dies unterstützt zum einen den Designer beim

Festhalten und Neuinterpretieren seiner Ideen, zum anderen die Kommunikation und

Diskussion mit anderen Teammitgliedern. Benötigt wird also eine Anwendung, mit der

schnell und einfach Animationen erstellt werden können, welche weder perfekt noch

schön sein müssen, stattdessen jedoch in der Lage sind, ein Konzept abzubilden und es zu

kommunizieren.

Die Erstellung von Animationen mit konventionellen Animationsprogrammen ist bisher

jedoch meist aufwändig, langwierig und komplex – allesamt Eigenschaften, welche im

Widerspruch zum Sketching stehen. In einem Versuch den Animationsprozess zu verein-

fachen, führten Davis et al. (2008) eine umfangreiche Studie durch. Sie analysierten 72

Animationsszenarien und konnten 18 grundlegende Animationstypen identifizieren.

Diese große Zahl, so Davis et al., erkläre unter anderem die Komplexität bisheriger Ani-

mationsprogramme. Das Ziel der Forscher war es, eine Anwendung zu erstellen, mit der

möglichst viele Szenarien in kurzer Zeit und auf einfache Weise umgesetzt werden kön-

Page 41: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n f o r d e r u n g e n | 32

nen. Hierfür wandten sie einen Optimierungsalgorithmus an, der sie bei der Auswahl

eines Sets an Animationstypen unterstützen sollte. Dieser berechnete eine Abdeckung

von etwa 80% der Szenarien bei der Auswahl von sieben Animationstypen, welche in

allen Szenarien benötigt wurden, sowie zwei weiteren, welche nur in manchen Szenarien

benötigt wurden. Außerdem fügten sie noch einen weiteren Typen hinzu, der gut in ihr

Interaktionskonzept integriert werden konnte. Die umgesetzten Animationstypen sind

die folgenden:

In allen Szenarien benötigt:

Translation Verschieben eines Objekts bezüglich dessen X- und Y-

Koordinaten

Skalierung Vergrößern oder verkleinern eines Objekts

Rotation Drehen eines Objekts um eine Achse oder ein Zentrum

Timing setzen Festlegen der Geschwindigkeit und Beschleunigung einer

Bewegung

Relative Bewegung Animationen relativ zueinander bewegen lassen, zum

Beispiel die Flügel eines Vogels und den Vogel selbst

Erscheinen Objekt zu einem Zeitpunkt sichtbar machen

Verschwinden Objekt zu einem Zeitpunkt unsichtbar machen

In manchen Szenarien benötigt:

Strich verfolgen Animation der Zeichnung eines Striches über die Zeit

Bewegung kopieren gleiche Bewegung auf ein anderes Objekt anwenden

An Pfad orientieren Rotation eines Objekts entsprechend des Winkels eines

Bewegungspfades

Davis et al. schlagen weiterhin vor, eine Animationsanwendung informell zu gestalten. Oft

sei es nicht nötig, dass das Timing auf die Millisekunde genau sei. Stattdessen empfehlen

sie, dass der Nutzer dem System die Animation „vormacht“ und so auf die Intuition des

Nutzer bezüglich Zeit und Raum zu vertrauen (Davis et al., 2008). Das von Quevedo-

Fernández und Martens (2013) Prinzip der Transformation-durch-Animation (vgl. Ab-

schnitt 3.3.2) scheint hierfür gut geeignet und trägt zur vereinfachten und beschleunigten

Erstellung von Animation bei.

4.3 MODALITÄT UND SETTING In frühen Designphasen beginnen Designer typischerweise mithilfe von Papier und Stift

ihre Ideen zu externalisieren. Da sich Animation allerdings nur begrenzt in Form von

Pfeilen oder Daumenkinos auf Papier skizzieren lässt, ist die Nutzung einer digitalen An-

wendung von Nöten, wenn Animationen wirklich umgesetzt und wiedergegeben werden

sollen. Um trotzdem den Designer so gut wie möglich zu unterstützen, ist der Einsatz

eines Stiftes zum Skizzieren der Ideen unumgänglich. Hierfür können beispielsweise Tab-

let-PCs, Tabletops oder Tablets mit Stiftunterstützung eingesetzt werden. Durch die Ent-

wicklungen der letzten Jahre unterstützen viele Modelle mittlerweile Multi-Touch-

Page 42: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n f o r d e r u n g e n | 33

Eingaben. Multi-Touch-Gesten zur Rotation und Skalierung von Objekten erlauben eine

direktere und natürlichere Interaktion mit der Anwendung und sind den meisten Nutzern

inzwischen gut bekannt. Durch den Einsatz eines digitalen Tools können Nutzer zudem

von dessen Vorteilen profitieren. Nachträgliche Änderungen an den Sketchen sind mög-

lich und Ausschnitte können dupliziert oder entfernt werden. Bei der konventionellen

Erstellung von Storyboards greifen Designer für gewöhnlich in späteren Phasen auf die

Nutzung digitaler Anwendungen zurück. Dadurch, dass bereits digitale Repräsentationen

ihrer Ideen existieren, kann dieser Schritt beschleunigt und vereinfacht werden.

Da Designer, wie in Abschnitt 2.2.3 beschrieben, zunächst für sich alleine arbeiten, ist der

Einsatz eines Gerätes pro Person zu empfehlen. Nachdem erste Ideen skizziert wurden,

besprechen die Designer ihre Ideen im Team. Normalerweise bringen sie dabei ihre Ideen

an einem Whiteboard an, welches öffentlich einsehbar ist. Analog hierzu könnte ein verti-

kales Display eingesetzt werden, welches die Ideen der einzelnen Designer darstellt und

trotzdem die Designer von Angesicht zu Angesicht miteinander kommunizieren lässt.

Dieses Display könnte auch während des gesamten weiteren Designprozesses als Inspira-

tionsquelle für die Generierung weiterer Ideen genutzt werden.

Page 43: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 34

5 KONZEPTION

Im folgenden Abschnitt wird das anhand der Anforderungen erstellte Interaktionskon-

zept für eine Anwendung vorgestellt, welche Animation in Storyboards in frühen Design-

phasen unterstützt. Zunächst werden hierbei kurz der Designprozess und die Umsetzung

des Prototyps aufgegriffen. Anschließend wird das Konzept anhand des erstellten Proto-

typs beschrieben.

5.1 DESIGNPROZESS UND UMSETZUNG Aufgrund der thematischen Nähe zu Markus Hankhs kollaborativer Storyboardanwen-

dung (Hankh, 2012) wurden erste Designüberlegungen gemeinsam angestellt. Verschie-

dene kollaborative Kreativitätstechniken, wie etwa das Affinity Diagramming, oder Sket-

ching wurden eingesetzt.

Das Affinity Diagramming ist eine Brainstormingtechnik, die bei der Analyse und Struktu-

rierung eines Designproblems unterstützt. Einzelne Begriffe, welche mit der Thematik

verwandt sind und Teilnehmern spontan zu ihr einfallen, werden zunächst auf Post-Its

notiert und den anderen Gruppenteilnehmern vorgestellt. Gemeinsam werden in einem

zweiten Schritt die Begriffe geordnet und strukturiert, indem Überbegriffe zu diesen ge-

sucht werden. Hierdurch entsteht eine hierarchische Struktur, welche auch gut in Abbild-

ung 5.1a zu erkennen ist. Als zu beachtende Punkte beim Affinity Diagramming wurden

unter anderem das Sketching an sich, die zu unterstützenden Funktionen, der Workflow,

die Eingabemöglichkeiten, sowie Animation und Kollaboration identifiziert.

Abbildung 5.1: Verschiedene Artefakte entstanden in der Designphase beim (a) Affinity

Diagramming und (b) Sketching

Nachdem das Designproblem grob eingeteilt war, wurden verschiedene erste Sketche

bezüglich der Benutzungsoberfläche und der Handhabung der Anwendung angefertigt.

Hierbei wurden andere bereits existierende Anwendungen zur Erstellung von Story-

boards und Animationen als Vorbild genommen, wodurch beispielsweise eine Darstel-

lung der Einzelbilder des Storyboards im Zeichenmodus im unteren Bereich dargestellt

werden, wie Abbildung 5.1b zeigt. In dieser Skizze wird zudem die Nutzung von Effekten

a b

Page 44: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 35

dargestellt, wie sie von Microsoft PowerPoint beispielsweise bekannt ist. Verschiedene

Animationseffekte verbunden mit direkterem Feedback und Multi-Touch-Gesten, ähnlich

wie bei idAnimate, könnten den Animationsvorgang weiter vereinfachen.

Im Rahmen des Master-Projekts wurden die Designvorschläge in Prototypen umgesetzt.

Es entstanden zwei getrennte Anwendungen, eine zur Kollaboration und eine zur Anima-

tion. Beide Prototypen basieren auf dem gleichen Grundgerüst zum Zeichnen und Verwal-

ten von Storyboards. Sie wurden in der Programmiersprache C# und mithilfe des an der

Universität Konstanz entwickelten ZOIL-Frameworks (ZOIL, 2013) entwickelt. Imple-

mentierungsdetails und weitere Informationen zum Designprozess finden sich in der

technischen Dokumentation zum Master-Projekt (Lorenz, 2013). Aufgrund der Ähnlich-

keit der Themen wurde eine gemeinsame Nutzerstudie zur Evaluation der beiden Arbei-

ten durchgeführt, welche in Kapitel 6 vorgestellt wird. Im Rahmen dieser Evaluation

wurden die beiden Prototypen im Vorfeld zusammengefasst.

5.2 INTERAKTIONSKONZEPT In diesem Abschnitt wird das entwickelte Interaktionskonzept für eine Anwendung zur

Erstellung von Storyboards anhand des entwickelten Prototyps beschrieben. Die Anwen-

dung erlaubt es, Zeichnungen zu erstellen, zu manipulieren und mithilfe verschiedener

Animationstypen zu animieren. Mehrere Zeichnungen können in einem Storyboard zu-

sammengefasst werden und so eine logische Einheit bilden. Durch die Zusammenarbeit

mit Markus Hankh können Storyboards ebenfalls kollaborativ erstellt und mit anderen

Personen geteilt werden.

Bevor Details zur Anwendung gegeben werden, wird zunächst deren Workflow beschrie-

ben, um ein Verständnis für die Interaktion zwischen den Designern und der Anwendung

zu erhalten. Aufgrund der Kollaborationsmöglichkeiten entstanden verschiedene Benut-

zungsoberflächen für private und öffentliche Arbeitsplätze, welche in Abschnitt 5.2.2

vorgestellt werden. Das Zeichnen und Manipulieren von Ideen wird im darauf folgenden

Abschnitt thematisiert, bevor auf das Animieren der Ideen eingegangen wird. Abschlie-

ßend werden die Möglichkeiten zur Zusammenarbeit und zum Wiederverwenden beste-

hender Artefakte erläutert.

5.2.1 WORKFLOW

Als Grundlage des Interaktionskonzepts dient der von Markus Hankh (Hankh, 2012) be-

schriebene Workflow zur Erstellung von Storyboards, welcher auf der Arbeitsweise no-

mineller Gruppen basiert und in Abbildung 5.2 dargestellt wird. Der Workflow sieht vor,

dass sich ein Designteam zunächst trifft, um in einem Kick-Off-Meeting grob Aufgaben zu

einem Designthema zu besprechen und zu verteilen. Diese Aufgabe bearbeitet jeder ein-

zelne Designer in einer anschließenden privaten Sketchingphase für sich. Die Anwendung

steht ihm an dieser Stelle unterstützend zur Seite. Jeder Designer besitzt einen eigenen

Tablet-PC an dem Ideen skizziert und direkt animiert werden können. Die Ideen können

auf einzelnen Zetteln erstellt werden, lassen sich aber auch direkt in Storyboards sam-

meln und sortieren. Liegen erste Ergebnisse vor, so treffen sich die Designer erneut in der

Page 45: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 36

Gruppe. Ihre Ideen haben sie zuvor an ein hochauflösendes vertikales Display gesendet,

welches die Rolle eines Whiteboards einnimmt und die erstellten Sketche darstellt. Diese

können mithilfe der Anwendung den anderen Mitgliedern präsentiert werden. Die Grup-

pe diskutiert die Ideen, Verbesserungen werden vorgeschlagen und kleine Änderungen

lassen sich gegebenenfalls direkt mithilfe der Anwendung am Wanddisplay umsetzen.

Sketche anderer Gruppenmitglieder oder in der Gruppenphase veränderte Skizzen lassen

sich dank der Anwendung einfach an die privaten Arbeitsplätze verteilen. Nach der Be-

sprechung trennen sich die Designer erneut, arbeiten ihre Sketche weiter aus, verbessern

diese, erstellen neue Ideen. Einzel- und Gruppenarbeitsphasen wechseln sich im Folgen-

den ab, führen zur iterativen Verbesserung der Ideen und zur Erstellung eines gemein-

samen Storyboards.

Abbildung 5.2: Workflow der Anwendung zum Erstellen von Storyboards (adaptiert von

Hankh, 2012)

5.2.2 EINZEL- UND GRUPPENARBEITSPLÄTZE

Durch die kollaborativen Möglichkeiten der Anwendung, welche von Hankh (2012) aus-

gearbeitet wurden, bieten sich dem Nutzer zwei verschiedene Ansichten der Anwendung,

die unterschiedlichen Verwendungszwecken dienen. Eine Ansicht ist einer Pinnwand

nachempfunden, an der einzelne Zeichnungen und Poster mithilfe von Pinnadeln befes-

tigt werden können. Sie wird den Nutzern an einem vertikalen, hochauflösenden Display

angezeigt und ist öffentlich einsehbar. Ferner ist sie zur gemeinsamen Ansicht, Diskussi-

on und Bearbeitung von Ideen gedacht. Die andere Ansicht zeigt eine Schreibtischplatte,

auf der sich ebenfalls einzelne Zeichnungen, sowie Sammelmappen befinden können. Sie

ist dem privaten Arbeitsplatz eines Designers nachempfunden, an dem dieser einzeln für

sich arbeitet. Das Poster am Gruppen- bzw. die Mappe am privaten Arbeitsplatz ent-

spricht einem Storyboard. Es kann genutzt werden, um mehrere Einzelzeichnungen zu

sammeln und in eine logische Reihenfolge zu bringen. Einem Storyboard kann überdies

ein Name zugewiesen werden. Einzelzeichnungen lassen sich mithilfe von Drag & Drop zu

einem Storyboard hinzufügen, indem diese über ein Storyboard gezogen werden. Ein

roter Rahmen erscheint, der das Hinzufügen andeutet.

Kick-Off-Meeting

Privates Sketchen und Animieren

Aufgaben Sketche und Ideen

Aufgaben

Kick-Off

Gruppendiskussion

Page 46: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 37

Abbildung 5.3: Darstellung der verschiedenen Ansichten der Anwendung;

(a) öffentliche Sicht (b) private Sicht

Beide Sichten enthalten eine zoombare Informationslandschaft, auf der Einzelzeichnun-

gen und Storyboards frei angeordnet werden können und die je nach Zoomlevel unter-

schiedlich viele Details darstellt. Innerhalb der Anwendung gelten die üblichen (Multi-)

Touch-Gesten, welche auch in Abbildung 5.4 dargestellt werden. Die Benutzung eines

Fingers führt zu einer Verschiebung eines Objekts, das Andeuten einer Kreisbewegung

mittels zweier Finger zu einer Rotation, das Auseinander- bzw. Zueinanderbewegen

zweier Finger führt zu einem Vergrößern bzw. Verkleinern der Objekte. Einzelzeichnun-

gen und Storyboards lassen sich auf der Informationslandschaft frei verschieben und

skalieren. Dargestellte Schaltflächen behalten bei der Skalierung stets die gleiche Größe,

wodurch nur die Ideen der Designer vergrößert werden. Alternativ zur Multi-Touch-

Geste zur Skalierung, kann auch ein Doppelklick auf eine Einzelzeichnung oder ein Story-

board durchgeführt werden, um dieses zu fokussieren und zu vergrößern. Ein Doppel-

klick auf die Informationslandschaft hingegen führt zum Herauszoomen aus einzelnen

Sketchen und gibt eine Übersicht über existierende Sketche.

Abbildung 5.4: Von der Anwendung unterstützte (Multi-) Touch-Gesten (adaptiert von

Villamor et al., 2010)

In der rechten oberen Ecke der öffentlichen und privaten Ansicht befindet sich ein

schwarzes Dreieck, welches, nachdem es berührt wurde, ein Menü darstellt, mit dem sich

neue Storyboards und Zeichnungen hinzufügen lassen (vgl. auch Abbildung 5.3b). Außer-

dem können weitere Optionen eingeblendet werden, um etwa Touch-Eingaben zu deakti-

vieren, was Fehleingaben beim Zeichnen mit dem Stylus verhindern soll.

5.2.3 ZEICHNEN UND MANIPULIEREN VON IDEEN

Vergrößert man ein Storyboard oder eine Einzelzeichnung, so verändert sich deren Dar-

stellung und mehr Details werden sichtbar. An den privaten Arbeitsplätzen wird der Fo-

kus auf eine Zeichnung gelegt und Bearbeitungsmöglichkeiten werden um diese herum

a b

Verschieben mit einem Finger

Skalieren durch Auseinanderziehen oder Zueinanderbewegen

zweier Finger

Rotieren durch Ausführen einer Drehbewegung mittels zweier Finger

Page 47: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 38

eingeblendet, wie in Abbildung 5.5 zu sehen ist. Im oberen Bereich (Markierung a) stehen

hierfür verschiedene Reiter zur Verfügung. Der in der Abbildung aktuell ausgewählte

Reiter Sketching bietet verschiedene Stiftstärken und -farben an, einen Radierer, sowie

Schaltflächen zum Hinzufügen von Texten und Bildern. Gezeichnet oder radiert wird

durch einfaches Berühren der Zeichenfläche (Markierung b) mit einem Stift oder Finger.

Mithilfe des Lassowerkzeuges lassen sich Elemente einer Idee selektieren. Hierfür wer-

den diese umfahren, wie bei Markierung c dargestellt, oder auch angetippt. Sind sie selek-

tiert, können sie mithilfe der in Abbildung 5.4 dargestellten Gesten auf der Zeichenfläche

manipuliert werden. Selektierte Objekte lassen sich auch mithilfe des Mülleimers von der

Zeichenfläche entfernen.

Abbildung 5.5: Bearbeitungssicht eines Storyboards

Eine Zeichnung kann mehrere Ebenen besitzen, welche rechts von der Zeichenfläche

(Markierung d) dargestellt werden. Hier lassen sich neue Ebenen hinzufügen, bestehende

ausblenden oder komplett löschen. Sie geben den Designern die Möglichkeit, ihre Zeich-

nungen schnell zu verändern und verschiedene Versionen derer anzufertigen. Mithilfe

von Drag & Drop ist ein Umsortieren der Ebenen möglich. Die Zeichenfläche zeigt alle

sichtbaren Ebenen an, gezeichnet wird allerdings nur auf der aktuell selektierten Ebene.

Ebenen lassen sich zudem mithilfe der Stempel-Schaltfläche als Template abspeichern,

um sie in der gleichen oder auch in anderen Ideen wiederzuverwenden. Auch animierte

Ebenen können als Template abgespeichert werden. Verfügbare Templates werden im

a

b d

e

c

f

Page 48: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 39

dritten Reiter der Werkzeugleiste mit Namen Templates dargestellt (vgl. Abbildung 5.6).

Sie lassen sich mithilfe von Drag & Drop auf die Zeichenfläche ziehen und werden dort als

neue Ebene in die vorhandene Zeichnung hinzugefügt. Alternativ können sie auf die In-

formationslandschaft gezogen werden, wodurch eine neue Einzelzeichnung mit dem

Template als Inhalt erstellt wird. Innerhalb des Template-Reiters lassen sich Templates

umsortieren oder auch bei Bedarf entfernen.

Abbildung 5.6: Der Template-Reiter

Bei Storyboards befindet sich im unteren Bereich (Abbildung 5.5e) zudem eine Leiste,

welche die Einzelbilder eines Storyboards anzeigt. Diese Einzelbilder werden im Folgen-

den auch als Frame bezeichnet, um Missverständnissen vorzubeugen. Ist ein solcher

Frame animiert, so wird er in der Leiste durch einen Filmstreifen oben und unten mar-

kiert. Der Zeichenbereich zeigt immer den aktuell selektierten Frame an. Mithilfe von

Drag & Drop lassen sich auch die die Frames umsortieren. Zudem können Frames, ähnlich

wie Templates, aus dem Storyboard herausgezogen werden, wodurch ein neues Einzel-

bild mit dem Inhalt des Frames auf der Landschaft entsteht. Da Einzelbilder entsprechend

ihres Namens, lediglich aus einem Bild bestehen, wird diese Frameleiste dort nicht darge-

stellt.

Abbildung 5.7: (a) Übersichtsansicht und (b) Präsentationsansicht

Insbesondere in frühen Phasen möchten sich Designer auf das Zeichnen eines Story-

boards konzentrieren können. Hierfür steht ihnen eine spezielle Ansicht zur Verfügung,

welche nur die Zeichenwerkzeuge und den Zeichenbereich darstellt. Die einzelnen Reiter,

Ebenen oder die Leiste zum Animieren werden ausgeblendet und erlauben so die Fokus-

sierung auf das Zeichnen. Diese Sicht kann mithilfe der linken Schaltfläche bei Markie-

rung f in Abbildung 5.5 aufgerufen werden. Neben dieser unterstützen noch zwei weitere

Ansichten den Designer beim Prüfen und Präsentieren seiner Storyboards. Eine Comican-

sicht, welche vier Frames gleichzeitig in einer Übersicht darstellen kann, sowie eine Prä-

b a

Page 49: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 40

sentationsansicht, welche jeweils in Abbildung 5.7 dargestellt werden. Letztere zeigt

jeweils nur einen Frame und ermöglicht mithilfe von Pfeiltasten zwischen den verschie-

denen Frames des Storyboards zu navigieren. Auch eine automatische Wiedergabe der

Frames ist in dieser Sicht möglich.

5.2.4 ANIMIEREN VON IDEEN UND DEREN WIEDERGABE

Verschiedene Animationstypen wurden innerhalb der Anwendung prototypisch imple-

mentiert. Hierzu zählt die Bewegung gezeichneter oder eingefügter Elemente, deren Ro-

tation, Skalierung, sowie deren Ein- und Ausblendung. Das Zeichnen eines Striches lässt

sich ebenfalls aufzeichnen. Wie genau die Animation und Wiedergabe der Zeichnungen

erfolgt, ist Bestandteil des folgenden Abschnittes.

Unterhalb der Zeichenfläche befindet sich eine weitere Leiste, welche die Steuerung von

Animationen regelt. Sie beinhaltet unter anderem einen Aufnahmeknopf, mit dem festge-

legt wird, ob getätigte Manipulationen auf der Zeichenfläche aufgenommen werden sollen

oder nicht. Durch ein rotes Leuchten und leichtes Pulsieren dieses Knopfes wird der Nut-

zer darauf aufmerksam gemacht, dass die Aufnahme aktiv ist. Rechts neben diesem Knopf

gibt es eine Schaltfläche, mit der an den Anfang einer Animation gesprungen, sowie eine

weitere Schaltfläche, mit der die Animation wiedergegeben werden kann. Im Falle einer

Wiedergabe wechselt diese Schaltfläche ihr Aussehen und ihre Funktion und ermöglicht

dann die Pausierung der Animation.

Abbildung 5.8: Erstellung von Animationen - Animationsreiter mit Werkzeugen im oberen

Bereich, Andeutung von Animationen im Zeichenbereich und auf der Animationszeitleiste

Page 50: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 41

Eine Animationszeitleiste findet man neben diesen Schaltflächen. Sie zeigt den komplet-

ten Zeitraum der Animation und markiert den aktuell dargestellten Zeitpunkt. Mithilfe

der Zeitleiste kann in einer Animation gespult oder an einen bestimmten Zeitpunkt ge-

sprungen werden. Animationen werden auf dieser Zeitleiste durch kleine Bilder angedeu-

tet. Mit der letzten Schaltfläche lässt sich jeweils eine Sekunde zur aktuellen Animation

hinzufügen. Wird eine Zeichnung initialisiert, so hat diese normalerweise eine Dauer von

null Sekunden, da nicht jede Zeichnung eine Animation enthalten muss. Das Hinzufügen

von Zeit ist insbesondere dann hilfreich, wenn eine Animation erst zu einem späteren

Zeitpunkt beginnen soll.

Um aktiv animieren zu können, wird zudem der zweite Reiter der oberen Werkzeugleiste

benötigt, welcher den Namen Animating trägt und verschiedene Hilfsmittel zum Animie-

ren von Elementen auf der Zeichenfläche beinhaltet. Die Anwendung stellt verschiedene

Animationstypen zur Verfügung, die in diesem Reiter ausgewählt werden können. Die

erste Gruppe von Animationstypen bezieht sich auf die Manipulation von Elementen, also

deren Translation, Rotation und Skalierung. Neben der Manipulation, werden Rotation

und Skalierung (Scaling) noch einmal gesondert aufgeführt, um gezielt Elemente zu rotie-

ren oder zu skalieren, ohne dass diese aus Versehen noch anderweitig manipuliert wer-

den. Entsprechend des Animationstyps ist die Bewegungsfreiheit bei der Manipulation

der Elemente eingeschränkt: Bei Translation sind die früher bereits genannten Gesten

zum Verschieben, Rotieren und Skalieren von Elementen möglich. Ist jedoch beispiels-

weise der Animationstyp Skalierung ausgewählt, so reagiert die Anwendung nicht mehr

auf die Gesten zum Verschieben oder Rotieren der Elemente. Nur noch Skalierungen sind

möglich. Um Elemente animieren zu können, müssen auch diese zunächst mithilfe des

Lassowerkzeuges selektiert werden. Ist der Aufnahmemodus nicht aktiv, können die

Elemente normal manipuliert werden. Ist er hingegen aktiv, so werden alle Manipulatio-

nen selektierter Elemente in der Geschwindigkeit, in der der Nutzer sie tätigt, aufge-

zeichnet. Die Aufnahme beginnt in dem Moment, in dem der Nutzer die zu animierenden

Elemente berührt. Standardmäßig wird der Bewegungspfad der Manipulation durch eine

hellblaue Linie angedeutet. Wurde die Animation bereits ausgeführt, so ist diese Linie

durchgezogen, ansonsten ist sie gestrichelt. Nicht nur Manipulationen, sondern auch der

Zeichenvorgang eines Striches kann in dessen Geschwindigkeit aufgezeichnet und wie-

dergegeben werden. Der Strich wird dann nach und nach eingeblendet, wobei noch nicht

eingeblendete Teile des Striches grau dargestellt werden. Diese Animationsvorgänge

entsprechen dem Prinzip der Transformation-durch-Beispiel.

Mithilfe der zweiten Gruppe von Animationstypen kann die Sichtbarkeit von Elementen

verändert werden. Hierfür müssen auch wieder die zu animierenden Elemente selektiert

und je nach Vorhaben die Schaltfläche zum Ein- (Appear) oder Ausblenden (Disappear)

betätigt werden. Ausgeblendete Elemente werden standardmäßig in einem halbtranspa-

renten Grau angedeutet. Auch diese Animationen werden im Zeichenbereich und auf der

Animationszeitleiste durch ein Piktogramm angedeutet. Radierungen verhalten sich ähn-

lich wie Erscheinen und Verschwinden. Der Radiervorgang an sich kann nicht aufge-

zeichnet werden, allerdings kann zu einem bestimmten Zeitpunkt in der Zeit radiert wer-

Page 51: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 42

den. Eine Übersicht über die in der Anwendung eingesetzten Piktogramme gibt Abbild-

ung 5.9.

Manipulation Skalierung Rotation

Erscheinen Verschwinden Zeichnen Radieren

Abbildung 5.9: Piktogramme der verschiedenen Animationstypen

Die Andeutung von Animationen und ausgeblendeten Elementen soll die Erstellung der

Animationen vereinfachen und eine Vorschau auf die Animation geben, auch wenn diese

gerade nicht abgespielt wird. Deren Darstellung ist standardmäßig aktiviert, kann jedoch

mithilfe der Schaltfläche Zeige Unsichtbares (Show Invisibles) ein- und ausgeschaltet

werden. Auch Zeige Animationsfarben (Show AniColors) stellt ein Hilfsmittel für den Ani-

mator zur Verfügung, mit dessen Hilfe Animationen einem Zeitpunkt bzw. Zeitraum zu-

geordnet werden können. Die Andeutung der Animation, sowie die Markierungen auf

dem Zeitstrahl werden hierbei bunt eingefärbt. Diese Funktion ist allerdings standard-

mäßig deaktiviert.

Das Löschen von Animationen wurde lediglich prototypisch umgesetzt, in dem alle Ani-

mationen eines selektierten Elements gelöscht werden. Hierfür wird die Schaltfläche

Lösche Animationen (Remove Animations) verwendet. Neben dem Löschen aller Animati-

onen, ist es auch möglich, Animationen zu überschreiben. Das Überschreiben erfolgt au-

tomatisch, wenn eine Manipulationsanimation erstellt wird und zuvor bereits eine zu

diesem Zeitpunkt existierte. Vorhergehende und nachfolgende Animationen bleiben wei-

terhin erhalten.

5.2.5 ZUSAMMENARBEIT MIT ANDEREN DESIGNERN

Durch die Zusammenfassung der Anwendung mit der von Markus Hankh unterstützt der

Prototyp die Zusammenarbeit mit anderen Teammitgliedern. Wie bereits im Workflow

(vgl. Abschnitt 5.2.1) beschrieben, können Ideen, nachdem diese mithilfe der Anwendung

externalisiert wurden, anderen Designern präsentiert werden. Dies kann entweder direkt

am privaten Arbeitsplatz mithilfe der Präsentationsansicht geschehen oder der öffentli-

che Arbeitsplatz wird genutzt. Mithilfe einer Schaltfläche (vgl. Abbildung 5.10a) lassen

sich Storyboards und Einzelbilder an den öffentlichen Arbeitsplatz senden. Die Schaltflä-

che befindet sich am privaten Arbeitsplatz bei ungezoomten Einzelzeichnungen und Sto-

ryboards rechts von diesen, bei gezoomten befindet sie sich im rechten oberen Eck der

Objekte (vgl. Abbildung 5.10c). Das Versenden wird durch einen grün blinkenden Brief-

umschlag angedeutet. Sind die Ideen am öffentlichen Arbeitsplatz angekommen, so wer-

den diese in der Präsentations- und nicht in der Bearbeitungssicht geöffnet. Designer

können somit direkt mit der Vorstellung ihrer Ideen beginnen. Nachdem diese diskutiert

und gegebenenfalls verbessert wurden, lassen sie sich mit einer weiteren Schaltfläche

(vgl. Abbildung 5.10b) wieder zurück an die privaten Arbeitsplätze senden. Die Schaltflä-

che findet sich beim öffentlichen Arbeitsplatz an der gleichen Stelle wie bei den privaten.

Die Sketche werden an alle Gruppenmitglieder verteilt. Diese können sie im folgenden

Schritt weiter verbessern oder sie lassen sich von ihnen inspirieren.

Page 52: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

K o n z e p t i o n | 43

Nicht nur das Teilen von Einzelbildern und Storyboards ist möglich, auch Templates las-

sen sich mit anderen Teammitgliedern teilen. Im Template-Reiter steht hierfür eine

Schaltfläche zur Verfügung.

Abbildung 5.10: (a) Schaltfläche zum Veröffentlichen (b) Schaltfläche zum Verteilen an

private Arbeitsplätze (c) Ein Reiter mit den Schaltflächen zum Veröffentlichen

c a b

Page 53: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 44

6 EVALUATION

Um die Anwendbarkeit und die Gebrauchstauglichkeit des Interaktionskonzepts zu über-

prüfen, wurde es mithilfe zweier verschiedener Anwendungsfälle evaluiert. Der erste

Anwendungsfall ist die kollaborative Kreativarbeit. Nutzer hatten die Möglichkeit in einer

Gruppe ein gemeinsames Design zu erstellen und ihre Ideen frei zu externalisieren. Der

zweite Anwendungsfall ist die Überprüfung des Verständnisses der Animationsfunktiona-

litäten. Anhand gegebener Aufgaben sollten Nutzer Animationen erstellen.

Im Folgenden werden die einzelnen Anwendungsfälle nacheinander im Detail beschrie-

ben, deren Ergebnisse dargestellt, sowie diskutiert. Verbesserungspotential der Anwen-

dung wird aufgedeckt und teilweise in Redesignvorschlägen ausgearbeitet.

6.1 KOLLABORATIVE ERSTELLUNG VON STORYBOARDS In der ersten Nutzerstudie sollten Storyboards anhand eines konkreten Szenarios mithil-

fe des Prototyps erstellt werden. Dieser Teil wurde gemeinsam mit Markus Hankh durch-

geführt, dessen Fokus auf der kollaborativen Erstellung von Storyboards lag. Seine Er-

kenntnisse werden in (Hankh, 2013) thematisiert.

Zunächst werden das Studiendesign und die Methoden der Datenerhebung der Studie

beschrieben. Im Anschluss daran werden die Ergebnisse der Studie detailliert vorgestellt

und zuletzt kritisch diskutiert.

6.1.1 STUDIENDESIGN

Für die erste Studie wurde ein formativer Usability-Test mit einem Within-Subjects-

Design als Untersuchungsmethode gewählt. Der Usability-Test ist eine empirische Me-

thode, bei der typische Benutzer ein System bedienen und möglichst repräsentative Auf-

gaben bearbeiten sollen. Usability-Experten beobachten die Nutzer hierbei und versu-

chen aus deren Handlungen und Äußerungen Probleme und Bedienungsschwierigkeiten

des Systems aufzudecken (Sarodnick & Brau, 2011). Da es sich bei dem zu testenden Sys-

tem um keine fertige Anwendung, sondern lediglich um einen Prototypen handelt, wurde

ein formatives Design verwendet. Dieses ist laut Nielsen (1993) besonders gut dafür ge-

eignet, Verbesserungspotentiale einer Anwendung offen zu legen. Im Zuge des iterativen

Designprozesses ist es wichtig zu wissen, welche Aspekte einer Anwendung bereits gut

sind und welche noch überarbeitet werden sollten (Nielsen, 1993). Üblicherweise wer-

den laut Sarodnick & Brau (2011) die Probanden vor einem Usability-Test bezüglich ihrer

Vorerfahrungen befragt, da diese gegebenenfalls das Ergebnis des Tests beeinflussen

können. Nach Bearbeitung der Aufgaben erfolgt meist die Möglichkeit zur subjektiven

Bewertung des Systems und einer Befragung der Nutzer, welche in diesem Fall anhand

von Fragebögen und einer Focus Group durchgeführt wurden.

Im Folgenden werden zunächst die Zielgruppe der Studie und deren Setting definiert,

bevor deren Aufbau und die eingesetzten Erhebungsmethoden erläutert werden.

Page 54: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 45

6.1.1.1 ZIELGRUPPE

Als typische Benutzer des Systems wurden Personen mit kreativem Hintergrund identifi-

ziert, welche aufgrund der kollaborativen Ausrichtung der Anwendung in Gruppen à drei

Personen eingeteilt werden sollten. Um aussagekräftige Ergebnisse erhalten zu können,

sollte die Studie mit drei Gruppen, also neun Probanden, durchgeführt werden. Zur er-

folgreichen Teilnahme an der Studie, war es erforderlich, dass die Probanden bereits

Erfahrungen mit touchfähigen Geräten, einfachen Grafikprogrammen, sowie kreativer

Gruppenarbeit besaßen.

6.1.1.2 SETTING

Für die Durchführung der Studie zur kollaborativen Erstellung von Storyboards wurden

drei Einzelarbeitsplätze, sowie ein Gruppenarbeitsplatz eingerichtet, welche in Abbildung

6.1 zu sehen sind. An jedem Einzelarbeitsplatz befand sich ein Multi-Touch- und stiftfähi-

ges Gerät, mithilfe dessen die Probanden jeweils für sich arbeiten konnten. Konkret wa-

ren mehrere Tablet-PCs, sowie ein Microsoft SUR40 im Einsatz. Das Display des SUR40

war geneigt, um ein besseres Zeichnen zu ermöglichen. Die Auswahl des Gerätes stand

den Probanden frei. Die Einzelarbeitsplätze waren jeweils so angeordnet, dass keiner der

Probanden während der Arbeit andere Probanden beobachten oder deren Ideen sehen

konnte. Dies wirkt der Evaluation Apprehension entgegen, einem Effekt, der aufritt, wenn

sich Personen kontrolliert oder beobachtet fühlen und zu einer Einschränkung derer

Kreativität führen kann (Hankh, 2013). Als Gruppenarbeitsplatz wurde ein hochauflösen-

des, 64 Zoll großes Touch-Display gewählt, vor dem die Probanden sich versammeln und

Ideen besprechen konnten. Für den Microsoft SUR 40, sowie das hochauflösende Display

am Gruppenarbeitsplatz wurden zudem spezielle Stifte für kapazitive Touch-Displays zur

Verfügung gestellt.

Abbildung 6.1: Kollaboratives Setting

6.1.1.3 AUFBAU DER STUDIE

Ziel der Studie war es, Usability-Probleme und Verbesserungspotentiale der Anwendung

aufzudecken. Daher sollte den Probanden möglichst viel Gelegenheit gegeben werden,

mit dem Prototypen zu arbeiten, dessen Praktikabilität aufzuzeigen und Probleme aufzu-

decken. Im Folgenden wird der Aufbau der Studie beschrieben, der zudem in Tabelle 6.1

zusammengefasst ist. Insgesamt dauerte die Studie etwa 120 Minuten.

Einzelarbeitsplätze

Gruppenarbeits-platz

Page 55: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 46

Begrüßung und Pre-Questionnaire 5 min

- Begrüßung, Vorstellung und Einverständniserklärung

- Fragebogen: Demographie, Fähigkeiten und Erfahrungen

3 min

2 min

Einführung und Exploration 20 min

- Erklären der Funktionen des Prototyps

- Freie Exploration durch die Teilnehmer

10 min

10 min

Bearbeitung eines Szenarios 55 – 65 min

- Vorstellung des Workflows und der Aufgabenstellung

- Kick-Off-Meeting

- 1. Private Arbeitsphase

- Besprechung der ersten Ergebnisse in der Gruppe

- 2. Private Arbeitsphase

- Abschlussdiskussion in der Gruppe

5 min

5 min

15 min

10-15 min

10 min

10-15 min

Abschlussfragebogen 10 min

- SUS (System Usability Scale)

- Allgemeine Fragen zu den Funktionen des Prototyps

- CSI (Creativity Support Index)

2 min

5 min

3 min

Focus-Group 15 min

Verabschiedung und Entlohnung 5 min

Tabelle 6.1: Übersicht und Zeitplan der Studie "Kollaborative Erstellung von Storyboards"

Für die Studie wurden die Probanden, wie bereits beschrieben, in Designteams à drei

Personen eingeteilt. Nachdem die Probanden willkommen geheißen wurden, wurden sie

zunächst einander vorgestellt, um ein angenehmes Gruppenklima zu ermöglichen. Im

Anschluss musste ein Fragebogen ausgefüllt werden, der demographische Daten, Zei-

chenfähigkeiten und bisherige Erfahrungen mit Touchscreen, Zeichen- und Animations-

programmen, sowie Gruppenarbeiten abfragte. Es folgte eine Einführung, bei der die

Funktionen und Möglichkeiten des Prototyps den Probanden erklärt wurden. Eine freie

Explorationsphase schloss sich an, bei der die Probanden erste Storyboards und Animati-

onen erstellen konnten. Die Probanden konnten währenddessen jederzeit Fragen bezüg-

lich der Anwendung an die Versuchsleiter stellen.

Nach dieser Explorationsphase wurde den Probanden der weitere Verlauf der Studie

vorgestellt. Eine Anwendung solle anhand des in Abschnitt 5.2.1 vorgestellten Arbeitsab-

laufs entworfen werden. Der Arbeitsablauf ist in fünf Phasen unterteilt, die im Folgenden

nochmals kurz beschrieben werden. Zunächst wird in einem Kick-Off-Meeting bespro-

chen, was die einzelnen Teilnehmer für Vorstellungen von der Anwendung haben und

eventuell erste Aufgaben verteilt. In einer anschließenden ersten privaten Arbeitsphase

haben die Teilnehmer dann die Möglichkeit ihre Ideen für sich mithilfe der Anwendung

zu externalisieren. In einer Gruppenbesprechung können diese Ideen dann diskutiert und

mögliche Verbesserungs- oder Erweiterungsvorschläge vorgebracht werden. Eine zweite

private Arbeitsphase gibt den Teilnehmern die Möglichkeit, diese Vorschläge umzusetzen

und ihre Ideen weiter auszuarbeiten. In einer abschließenden zweiten Gruppenbespre-

Page 56: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 47

chung wird dann aus den einzelnen Ideen der Teilnehmer ein gemeinsames Storyboard

erstellt, welches das Konzept der Anwendung zusammenfasst. Für jede dieser Phasen

wurde im Vorfeld eine bestimmte Bearbeitungsdauer festgelegt, welche ebenfalls den

Probanden mitgeteilt wurde. Nach der Vorstellung des Arbeitsablaufs, wurden sie mit der

eigentlichen Aufgabe vertraut gemacht: dem Design einer mobilen „StudenTaxi“-

Anwendung, mit der Studenten oder Mitarbeiter der Universität eine Mitfahrgelegenheit

von und zur Uni anbieten oder suchen können sollen. Wie genau die Umsetzung erfolgen

soll, ob der Kontext der Anwendung oder direkt Screendesigns gezeichnet werden sollen,

wurde den Teilnehmern freigestellt. Sie wurden lediglich dazu aufgefordert, ihre Story-

boards mit Animationen anzureichern.

In der darauffolgenden Stunde bearbeiteten die Teilnehmer die Aufgabe anhand des vor-

gestellten Arbeitsablaufs gemeinsam. Während der gesamten Dauer konnten ebenfalls

Fragen zur Bedienung der Anwendung gestellt werden. Nach Ablauf der Hälfte der Bear-

beitungsdauer der jeweiligen Phase wurde den Probanden ein Hinweis gegeben, ebenso

zwei Minuten vor Ablauf der Phase, damit diese langsam zu einem Ende gelangten. Insge-

samt war es den Probanden somit möglich, etwa 70 Minuten lang den Prototypen zu tes-

ten, produktiv zu nutzen und zu evaluieren.

Ein Abschlussfragebogen, der aus dem standardisierten Fragebogen zur Bestimmung des

System Usability Scales (SUS) und des Creativity Support Indexes (CSI), sowie einem spe-

zifisch für den Prototypen erstellten Fragebogen zur subjektiven Einschätzung dessen

einzelner Funktionen bestand, wurde im Anschluss von den Probanden ausgefüllt. Eine

Focus Group beendete die Studie, bei der die Probanden ihre Erfahrungen mit dem Sys-

tem diskutieren konnten. Im Vorfeld der Studie definierte, offene Fragen, welche nur

schwer durch einen Fragebogen beantwortet werden konnten, waren Bestandteil der

Focus Group und lenkten die Diskussion in bestimmte Richtungen. Hier war beispielswei-

se von Interesse, wie Animation den Designprozess unterstützen kann.

6.1.1.4 METHODEN DER DATENERHEBUNG

Verschiedene Methoden wie Fragebögen, Beobachtung und Focus Group wurden für die

Datenerhebung genutzt. Während der Gruppenphasen und der Focus Group wurde zu-

dem mithilfe einer Videokamera Bild und Ton der Probanden und des Gruppenarbeits-

platzes aufgezeichnet. Im Folgenden werden die einzelnen Methoden zur Datenerhebung

näher erläutert.

6.1.1.4.1 Fragebögen

Fragebögen sind eine einfache und kostengünstige Methode, um die subjektive Meinung

der Probanden zu untersuchen. Da bei Fragebögen nicht direkt das System, sondern le-

diglich die Meinung der Probanden zu diesem untersucht wird, handelt es sich aus Usabi-

lity-Perspektive bei Fragebögen um eine indirekte Erhebungsmethode (Nielsen, 1993).

Bei deren Auswertung sollten sie deshalb mit anderen Erhebungsmethoden trianguliert

werden. Im Vergleich zu Interviews ist bei Fragebögen die Beeinflussung der Probanden

durch Dritte geringer, wodurch deren Objektivität höher einzuschätzen ist (Sarodnick &

Brau, 2011). Im Rahmen dieser Studie kamen mehrere Fragebögen zum Einsatz. Hierzu

Page 57: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 48

zählt der standardisierte Fragebogen System Usability Scale, der zur Standardisierung

vorgeschlagene Creativity Support Index, sowie zwei eigens für die Anwendung entwi-

ckelte Fragebögen. Diese sind im Anhang zu finden und werden im Folgenden näher er-

läutert.

Eigene Fragebögen Einer dieser eigens entwickelten Fragebögen wird vor

Beginn der Studie eingesetzt. Er fragt zunächst demographische Daten der Probanden,

wie Alter, Geschlecht, sowie momentane Tätigkeit ab. Im Anschluss werden für die

Durchführung der Studie interessante Fähigkeiten und bisherige Erfahrungen der Pro-

banden erhoben. Hierzu zählen die Bedienung von Touch-Geräten, die Einschätzung der

eigenen Zeichenfähigkeiten, sowie die Benutzung von Grafik- und Animationsprogram-

men. In Hinblick auf den kollaborativen Aspekt der Studie werden außerdem die Erfah-

rungen der Probanden zu Gruppenarbeiten untersucht.

Der zweite entwickelte Fragebogen wird nach Durchführung des Szenarios eingesetzt. Er

bezieht sich konkret auf einzelne Funktionen des Programms und fragt die subjektiven

Eindrücke der Probanden ab. Zunächst stehen hierbei die Zeichenfunktionen des Proto-

typs, die Verwaltung der Ebenen und Frames des Storyboards, sowie die Präsentations-

möglichkeiten der Ideen im Fokus. Ebenfalls können die Möglichkeiten zur Zusammenar-

beit mit den Teammitgliedern bewertet werden, deren Ergebnisse in der Arbeit von

Hankh (2013) vorgestellt werden. Im Anschluss werden die Animationsmöglichkeiten

des Prototyps beurteilt. Dies umfasst die Erstellung von Animationen, deren Steuerung,

Unterstützungsmöglichkeiten, sowie die einzelnen Animationstypen an sich. Zuletzt wer-

den allgemeine Verbesserungsvorschläge und Anmerkungen zur Anwendung abgefragt.

System Usability Scale Ebenfalls nach der Durchführung des Szenarios kommt

der System Usability Scale (kurz: SUS) zum Einsatz. Der SUS ist ein von John Brooke

(1996) entwickelter, standardisierter Fragebogen, der Hinweise auf Usability-

Schwachstellen geben kann. Er wird typischerweise nach dem Gebrauch einer Benut-

zungsschnittstelle durch einen Probanden, sowie vor einer Diskussion angewandt. Der

SUS besteht aus zehn einfachen Aussagen, die die subjektive Meinung des Probanden

abfragen und eine Reihe von Usability-Aspekten abdecken, wie beispielsweise Komplexi-

tät oder Lernaufwand einer Benutzungsschnittstelle. Die Aussagen können typischer-

weise mit einer Fünf-Punkte-Likert-Skala von „stimme überhaupt nicht zu“ (1) bis „stim-

me völlig zu“ (5) beantwortet werden. Fünf Aussagen des SUS sind positiv (z.B. „Ich den-

ke, das System war einfach zu benutzen.“) und fünf Aussagen negativ formuliert (z.B. „Ich

fand das System sehr mühsam zu benutzen.“), wobei sich positive und negative Formulie-

rungen abwechseln. Um den SUS zu berechnen, sollen die positiv formulierten Aussagen

mit einer Skala von 0 bis 4 codiert werden, indem jeweils die Zahl 1 von dem ausgewähl-

ten Wert subtrahiert wird, und die negativ formulierten von 4 bis 0 codiert werden, in-

dem der ausgewählte Wert von 5 subtrahiert wird. Die Summe dieser Werte wird im

Anschluss mit 2,5 multipliziert, sodass Werte zwischen 0 und 100 resultieren. (Brooke,

1996)

Page 58: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 49

Bangor et al. (2009) versuchten in einer Studie, die Ergebnisse des SUS anhand von Ad-

jektiven zu beschreiben. Hierfür fügten sie dem SUS eine weitere Frage hinzu, die die

Gesamtmeinung der Benutzungsfreundlichkeit abfragte. Sie konnte anhand einer Sieben-

Punkte-Likert-Skala beantwortet werden, der Adjektive von „am denkbar schlechtesten“

(„worst imaginable“) bis „am denkbar besten“ („best imaginable“) zugewiesen war. Die

Ergebnisse dieser Befragung bei knapp 1000 Probanden ergab eine hohe Korrelation

zwischen den SUS-Werten und den zugewiesenen Adjektiven. Die daraus folgende Zuwei-

sung ist in Abbildung 6.2 zu sehen. So ist beispielsweise eine Benutzungsoberfläche mit

einem SUS-Wert von 85 als „exzellent“ einzustufen. Ferner gilt laut deren Studie eine

Benutzungsoberfläche ab einem SUS-Wert von 70 als akzeptabel.

Abbildung 6.2: Zuweisung von Adjektiven zu den Werten des System Usability Scales

(adaptiert von Bangor et al., 2009)

Statt der üblichen Fünf-Punkte-Likert-Skala für den SUS wurde in dieser Studie eine Sie-

ben-Punkte-Likert-Skala verwendet. Die Ergebnisse wurden entsprechend umgerechnet,

so dass auch hier Werte zwischen 0 und 100 resultieren. Laut Matell und Jacoby (1972)

haben Sieben-Punkte-Likert-Skalen den Vorteil, dass weniger die neutrale Antwortkate-

gorie gewählt wird. Hinzu kommt, dass laut Finstad (2010) Probanden gegebenenfalls

zwischen zwei Antwortmöglichkeiten hin- und herschwanken können. Dies führt bei

schriftlichen Befragungen gelegentlich zum Hinzufügen einer Antwortmöglichkeit, die

zwischen der einen und der anderen liegt. Dies ist nicht der Fall bei Sieben-Punkte-

Likert-Skalen. Finstad empfiehlt für jede Usability-Evaluation die Nutzung einer Sieben-

Punkte-Likert Skala, da diese „akkurater und leichter zu verwenden sind, sowie die tat-

sächliche Bewertung eines Probanden besser wiederspiegeln“ (Finstad, 2010). Auch in

weiteren Studien (z.B. Finn, 1972; Masters, 1974) wurde nachgewiesen, dass die Sieben-

Punkte-Likert-Skala zu einer höheren Verlässlichkeit der Ergebnisse führt. Aus diesem

Grund wurde für die Bewertung der eigens für die Anwendung entwickelten Fragebögen

ebenfalls eine Sieben-Punkte-Likert-Skala eingesetzt.

Creativity Support Index Der Creativity Support Index (kurz: CSI) wird als Ab-

schluss des Fragebogens nach dem Szenario eingesetzt. Er ist ein noch relativ neuer An-

satz von Carroll et al. (2009), dessen Ziel es ist, die Unterstützung des kreativen Prozes-

ses durch eine Anwendung zu messen. Hierfür wird die Anwendung nach sechs verschie-

denen Gesichtspunkten untersucht: Kollaboration, Exploration, Ausdrucksmöglichkeiten,

Spaß bei der Benutzung, Grad des Eintauchens in eine Kreativarbeit (Immersion), und ob

die Ergebnisse als den Aufwand wert empfunden werden. Diese Gesichtspunkte werden

anhand von jeweils zwei Fragen evaluiert, deren Skala von 1 bis 10 reicht. Im Anschluss

werden die einzelnen Gesichtspunkte miteinander verglichen, um deren Wichtigkeit zu

ermitteln. Dies erfolgt mithilfe von insgesamt 15 Gegenüberstellungen, wobei die Wich-

tigkeit anhand der Anzahl der Gewichtungen gemessen wird. Da es insgesamt sechs Ge-

am denkbar schlechtesten

schlecht ok gut exzellent am denkbar

besten

0 10 20 30 40 50 60 70 80 90 100

Page 59: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 50

sichtspunkte gibt, kann hier ein maximaler Wert von 5 erreicht werden. Im Anschluss

werden Wichtigkeit und Bewertungen miteinander verrechnet, indem diese für jeden

Gesichtspunkt miteinander multipliziert werden. Die Summe dieser Produkte wird be-

rechnet und zuletzt durch 1,5 dividiert. Auch die Spanne des CSI liegt somit zwischen 0

und 100 Punkten. Da der Creativity Support Index, wie eingangs erwähnt, ein noch relativ

neuer Ansatz ist, liegen leider noch keine Hinweise vor, wie genau die Ergebnisse des

CSIs gedeutet werden können. Wie eine Studie (Zabramski & Neelakannan, 2011) bereits

gezeigt hat, eignet er sich gut, um zwei Systeme miteinander zu vergleichen. Doch auch

die Gesichtspunkte an sich scheinen interessant und aussagekräftig zu sein. Die Bewer-

tung des Creativity Support Indexes erfolgte in dieser Studie ebenfalls mithilfe einer Sie-

ben-Punkte-Likert-Skala. Wie im vorherigen Abschnitt bereits erläutert wurde, werden

mit einer solchen Skala die verlässlichsten Ergebnisse erzielt. Zudem konnte hierdurch

eine einheitliche Skala über den ganzen Fragebogen gewährleistet werden, was von Niel-

sen (1993) explizit empfohlen wird.

6.1.1.4.2 Beobachtung und Videoanalyse

Die Probanden wurden während des kompletten Szenarios durch zwei Versuchsleiter

intensiv beobachtet. Diese konnten sich auf einem zuvor vorbereiteten Versuchs-

leiterskript Notizen über Auffälligkeiten und aufgetretene Probleme machen. Zudem

wurden die Gruppenphasen mithilfe einer Videokamera aufgezeichnet, um diese später

nochmals gezielter analysieren zu können. Die Einzelarbeitsphasen hingegen wurden aus

Mangel an Kameras nicht aufgezeichnet. Zudem hätte dies die Privatsphäre der Proban-

den einschränken und ein Gefühl der Kontrolliertheit vermitteln können, was zu einer

Beeinträchtigung der Kreativität der Probanden hätte führen können. Das Aufzeichnen

des Bildschirminhaltes der Einzelarbeitsplätze war aufgrund der Performanceansprüche

der Anwendung ebenfalls nicht möglich. Die Aufzeichnungen der Gruppenphasen wurden

im Anschluss an die Studie analysiert. Hierbei wurden alle Auffälligkeiten in einer Tabelle

notiert und zusammengefasst.

6.1.1.4.3 Focus Group

Eine Focus Group ist ein offenes Interview mit einer Gruppe von Personen. Laut Lazar et

al. (2010) haben Interviews den Vorteil, dass sie tief in eine Materie eindringen können

und so Ansichten von Probanden zu Tage führen können, die nur schwierig oder auch gar

nicht mit anderen Erhebungsmethoden erfassbar sind. Die Durchführung und Auswer-

tung von Interviews mit vielen Personen ist zeitaufwändig. Focus Groups hingegen erlau-

ben die Erfassung unterschiedlicher Meinungen mit geringerem Zeitaufwand, haben al-

lerdings den Nachteil, dass sie nicht die gleiche Tiefe erreichen. Dafür können Diskussio-

nen innerhalb einer Gruppe Unterschiede und Gemeinsamkeiten in den Auffassungen der

einzelnen Probanden aufzeigen, und Erkenntnisse liefern, die aus einem Einzelinterview

nicht gezogen werden könnten. Focus Groups helfen ferner dabei, Problemen entgegen-

zuwirken, die in einem Einzelinterview auftreten können. Während ein Interview mit

einer einzelnen, besonders stillen Person scheitern kann, hat man bei einer Focus Group

noch weitere Personen, die das Verhalten dieser Person ausgleichen können. (Lazar et al.,

2010)

Page 60: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 51

Krueger (1994) empfiehlt eine Größe von fünf bis sieben Personen, sowie mehrere

Durchläufe von Focus Groups für ein optimales Ergebnis. Aufgrund des Studiendesigns

war die Focus Group mit einer Gruppengröße von nur drei Personen nicht optimal, je-

doch fand die Focus Group mit drei verschiedenen Gruppen statt. Die Durchführung war

semistrukturiert. Neben acht vorbereiteten Fragen sollte auch dynamisch auf Beobach-

tungen und Äußerungen während der Studie, sowie auf Anmerkungen in den Fragebögen

eingegangen werden. Die Fragen bezogen sich zum einen auf die Zusammenarbeit in der

Gruppe, welche in der Arbeit von Hankh (2013) besprochen werden, zum anderen auf

Fragen bezüglich der Unterstützung von Animation in der Kreativarbeit und in Story-

boards im Speziellen.

6.1.2 ERGEBNISSE

Im folgenden Abschnitt werden die Erkenntnisse vorgestellt, welche aus der Studie gezo-

gen werden konnten. Hierfür werden die Ergebnisse der einzelnen Datenerhebungsme-

thoden zusammengefasst und gemeinsam beschrieben. Zu Beginn werden die demogra-

phischen Daten aufgelistet, um einen Eindruck der Teilnehmer gewinnen zu können. Im

Anschluss werden die Ergebnisse bezüglich der Usability der Anwendung vorgestellt.

Dieser Bereich ist in verschiedene Kategorien eingeteilt. Neben Zeichen-, Storyboard-

Animations- und Präsentationsfunktionen wird auf die Steuerung der Anwendung und

deren Gesamteindruck eingegangen. Zuletzt werden die erstellten Animationen analy-

siert und die potentielle Rolle von Animation in der Kreativarbeit und in Storyboards

diskutiert.

Diagramme mit den Ergebnissen aus den Fragebögen werden unterstützend eingesetzt.

Fast immer konnten die Aussagen des Fragebogens mit einer Sieben-Punkte-Likert-Skala

von „stimme überhaupt nicht zu“ bis „stimme völlig zu“ beantwortet werden. Um die

Ergebnisse besser interpretieren zu können, wird im Folgenden eine Codierung von -3

(„stimme überhaupt nicht zu“) bis +3 („stimme völlig zu“) genutzt (vgl. bspw. Abbildung

6.3).

6.1.2.1 TEILNEHMER

Insgesamt nahmen neun Probanden an der Studie teil, welche in Gruppen à drei Personen

eingeteilt wurden. Sechs Probanden waren männlich, drei weiblich. Sie waren zwischen

21 und 31 Jahre alt. Die Versuchspersonen setzten sich aus acht Studierenden aus den

Bereichen Architektur, Mensch-Computer Interaktion und Informatik, sowie aus einem

wissenschaftlichen Mitarbeiter im Bereich Interaktionsdesign zusammen.

Durch eine Befragung im Vorfeld der Studie sollte sichergestellt werden, dass alle Pro-

banden bereits Erfahrungen mit Touch-Geräten und einfachen Grafikprogrammen besit-

zen. Allerdings stellte sich heraus, dass ein Proband doch noch nicht mit Touch-Geräten

gearbeitet hatte. Bei Beobachtungen fiel diese Person allerdings nicht negativ auf, hatte

also keine großen Probleme bei der Bedienung der Geräte. Die übrigen Probanden be-

werteten ihre Erfahrungen mit Touch-Geräten als durchweg positiv (M=1,78; SD = 1,03).

Sieben der Probanden konnten bereits Erfahrungen mit Videoschnittprogrammen und

vier Probanden mit Animationsprogrammen sammeln. Zudem hatten alle Probanden im

Page 61: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 52

Verlauf ihres Studiums bereits Kreativitätstechniken angewandt. Die Probanden schätz-

ten ihre Zeichenfähigkeiten sehr unterschiedlich, und im Schnitt leicht über dem Mittel-

maß ein (M=0,56; SD = 1,42).

Probanden 9, davon 6 männlich und 3 weiblich

Alter 21 bis 31 Jahre (M=26,0; SD = 3,99)

Tätigkeit 8 Studierende, davon

3 Architektur,

3 Mensch-Computer Interaktion

2 Informatik

1 wissenschaftlicher Mitarbeiter (Interaktionsdesign)

Erfahrungen Anzahl Personen, die bereits Erfahrungen hatte mit

9 Einfache Grafikprogramme, Kreativitätstechniken

8 Touch-Geräte

7 Videoschnittprogramme

4 Animationsprogramme

Tabelle 6.2: Demographische Daten der Probanden

6.1.2.2 ZEICHENFUNKTIONEN

Die wohl elementarste Funktion der Anwendung – das Zeichnen an sich – wurde von den

Probanden durchweg positiv und als einfach bewertet (M=2,44; SD=0,68; vgl. Abbildung

6.3). Auch bei Beobachtungen traten beim Zeichnen wenige Probleme auf. Lediglich auf

dem Surface SUR 40 gab es die Anmerkung, dass man seine Hand beim Zeichnen nicht

auflegen könne, da diese sonst Fehleingaben auslöse. Bei den Tablet-PCs wurde dieses

Problem bereits im Vorfeld adressiert, indem die Touch-Eingabe auf Wunsch deaktiviert

werden konnte. Da der Surface allerdings nicht zwischen der Stift- und der Toucheingabe

unterscheiden kann, kann diesem Problem hier nicht entgegengewirkt werden. Die Aus-

stattung aller Teilnehmer mit Tablet-PCs, die diese Unterscheidung vornehmen können,

wäre zu empfehlen.

Das Sketchen (Zeichnen, Radieren, Bild-

und Textbearbeitung) fiel mir einfach

.

Abbildung 6.3: Bewertung der Zeichenfunktionen

Die Probanden griffen verschiedene weitere Punkte auf, die im Bereich der Zeichenfunk-

tionen noch verbessert werden können. Hierzu zählt zum einen die bisher begrenzte

Anzahl an Farben, zum anderen die Größe des Radierers. Ein Proband schlug vor, diese

variabel zu machen. Aufgrund des Einsatzes des ZOIL-Frameworks kam es zudem zu

Performance-Einbußen der Anwendung. Nicht immer reagierte diese sofort und exakt auf

5

3

1

0

3

6

9

3210-1-2-3

M=2,44; SD=0,68

Page 62: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 53

die Eingaben der Anwender, was ebenfalls durch einen Probanden bemängelt wurde. Die

Möglichkeit des Einfügens eines Textfeldes in eine Zeichnung führte öfter zu Problemen.

Insbesondere die Eingabe mit der Bildschirmtastatur war nicht immer intuitiv und für die

Probanden laut Aussage sogar „mühsam“. Ein Proband merkte an, dass seiner Meinung

nach auf das Textfeld verzichtet werden könne, wenn die Stifteingabe direkter wäre. Auf-

grund des Prototypcharakters der Anwendung waren weitere übliche Funktionen, wie

etwa das Rückgängigmachen oder Wiederholen von Aktionen, das Kopieren und Einfügen

von Elementen oder die Mehrfachselektion per Tastendruck nicht vorhanden. Vor allem

die Rückgängig-Funktion wurde von fast allen Probanden gewünscht. In einem Fall wur-

de bei einer Gruppenbesprechung ein Storyboard ungewünscht verändert, was durch die

mangelnden Möglichkeiten zur Wiederherstellung vorhandener Status in der Äußerung

eines Probanden resultierte: „Oh nein, du machst alles kaputt!“.

In mehreren Aussagen der Probanden, wurde die Ebenenfunktion positiv bewertet. Es

war für die Probanden einfach, neue Ebenen zu einer Zeichnung hinzuzufügen (M=2,89;

SD=0,31; vgl. Abbildung 6.4a) und die Funktion wurde häufig benutzt. Insbesondere die

Probanden mit Architekturhintergrund setzten stark auf die Ebenen. Auch hier wurden

erweiterte Funktionen gewünscht, wie das Kopieren einer Selektion in eine neue Ebene,

die Zusammenführung von Ebenen, sowie die Benennung von Ebenen. War eine Ebene

ausgeblendet, so kam es gelegentlich zu Problemen beim Zeichnen. Wird auf eine ausge-

blendete Ebene gezeichnet, so verschob sich das gesamte Einzelbild bzw. das Storyboard.

Hier ist weiteres Feedback bzw. ein anderes Verhalten von Nöten.

a) Es war ersichtlich, wie man Ebenen

zu einem Frame hinzufügt.

b) Es war einfach, Ebenen als Templates

abzuspeichern.

Abbildung 6.4: Bewertung des Hinzufügens von Ebenen und Templates

Auch das Erstellen von Templates fiel dem Großteil der Probanden einfach (M=2,33;

SD=1,05; vgl. Abbildung 6.4b). Nach der Einweisung war den Probanden zwar bekannt,

dass sie Templates abspeichern können, allerdings konnten sich viele Probanden nicht an

die Schaltfläche erinnern, mit der sie diese Aktion auslösen können. Wurde die Schaltflä-

che gefunden, so bemängelten die Probanden fehlendes visuelles Feedback über die Spei-

cherung des Templates. Ein Proband wies außerdem darauf hin, dass wenn ein Template

wieder eingefügt wird, man dieses oft in dessen Position, Größe oder Rotation verändern

möchte. Er schlug daraufhin vor, dass dieses nach dem Einfügen standardmäßig selektiert

werden könnte.

Zusammenfassend kann gesagt werden, dass die Zeichenfunktionen mit Ebenen und

Templates als sehr positiv bewertet wurden. Da es sich bei der Anwendung um einen

8

1

0

3

6

9

3210-1-2-3

M=2,89; SD=0,31 6

1 1 1

0

3

6

9

3210-1-2-3

M=2,33; SD=1,05

Page 63: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 54

Prototypen handelt, gibt es in diesem Bereich noch Verbesserungspotential, wie auch den

Anmerkungen der Probanden zu entnehmen ist.

6.1.2.3 STORYBOARDFUNKTIONEN

Für das Erstellen eines Storyboards ist es essentiell, dass Frames hinzugefügt werden

können (vgl. auch Abschnitt 4.1). Dies fiel den Probanden sehr einfach (M=2,33; SD=1,05;

vgl. Abbildung 6.5a). Wie in Abbildung 6.5a allerdings auffällt, gehen lediglich die Bewer-

tungen von sechs Personen in das Ergebnis ein. Drei Personen nutzten diese Funktion

nicht. Wie im vorherigen Abschnitt beschrieben, verwendeten vor allem die Studierenden

der Architektur das Ebenensystem im besonderen Maße. Dies äußerte sich, indem meh-

rere Ideen in einer Einzelzeichnung vereint, und diese mithilfe des Ein- und Ausblendens

von Ebenen den anderen Probanden präsentiert wurden. Hinzu kam, dass Probanden

anfangs oft vergaßen, dass es Storyboards gibt, worauf sie allerdings spätestens nach der

ersten Gruppenphase und gegebenenfalls durch Hinweise der Versuchsleiter aufmerksam

gemacht wurden. Ein Proband gab Zeitmangel als Grund an, warum er kein Storyboard

benutzt habe. Er wusste, dass es eine Zusammenführungsphase gäbe und habe daher auf

die Erstellung eines Storyboards verzichtet. Einzelbilder wurden auch von anderen Teil-

nehmern insbesondere bei der ersten Ideenfindung stark genutzt. Bei Gruppenbespre-

chungen wurde dann jedoch schlussendlich immer aus den Einzelzeichnungen ein ge-

meinsames Storyboard erstellt. Hierfür wurden die Zeichnungen mithilfe von Drag &

Drop auf das gemeinsame Storyboard gezogen, was den Probanden ebenfalls gut gefiel

(M=2,78; SD=0,79; vgl. Abbildung 6.5b). Diese Frage wurde von acht der neun Probanden

beantwortet.

a) Es war einfach, Frames zu einem Story-

board hinzuzufügen.

b) Wie hat Ihnen das Hinzufügen (Einsor-

tieren) von Sketchen zu einem Story-

board mittels Drag & Drop gefallen?

Abbildung 6.5: Bewertung der Storyboardfunktionen

Oftmals war es beim Zusammenfügen der Einzelzeichnungen notwendig, die Sortierung

der Frames anzupassen. Dies wurde von den Probanden bereits beim Hinzufügen von

Einzelzeichnungen zu einem Storyboard versucht, indem sie sie an eine bestimmte Stelle

in der Vorschau des Storyboards (Erste Zoomstufe) zogen. Auch wurde in der Vorschau

versucht, die einzelnen Frames umzusortieren, was allerdings von der Anwendung so

bisher nicht unterstützt wird. Das Hinzufügen eines kompletten Storyboards zu einem

anderen Storyboard wird ebenfalls nicht von der Anwendung unterstützt. In diesem Fall

mussten die Probanden zunächst die gewünschten Frames aus dem Storyboard auf die

Informationslandschaft ziehen. Hierdurch wurden neue Einzelzeichnungen mit dem In-

halt erstellt, welche im Anschluss in das Storyboard gezogen werden konnten.

5

1

0

3

6

9

3210-1-2-3

M=2,33; SD=1,05 6

1 1

0

3

6

9

3210-1-2-3

M=2,78; SD=0,79

Page 64: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 55

Auf die Frage, ob die Probanden es besser fänden, direkt in einem Storyboard-Objekt zu

zeichnen oder zunächst in einer Einzelzeichnung, gab es unterschiedliche Meinungen.

Dem größten Teil der Probanden gefiel jedoch die Trennung zwischen Einzelzeichnung

und Storyboard, da sie unter anderem auch unterschiedliche Dinge erfüllen. Eine Einzel-

zeichnung sei gut geeignet, um erste Ideen zu sketchen. Verschiedene Probanden arbeite-

ten lieber auf diese Art und Weise, weil sie dies auch durch die Arbeit mit Stift und Papier

aus dem echten Leben so gewöhnt seien. Das Storyboard wird – wie auch in der Anwen-

dung dargestellt – als Mappe angesehen, in der Zeichnungen zusammengefasst werden

können. Hier lassen sich Ideen sammeln, die anderen Personen präsentiert werden sol-

len. Dies schließe laut Aussage eines Probanden unzusammenhängende Zeichnungen

nicht aus. Die ursprüngliche Anwendung AnimatedStoryboarding, welche in der techni-

schen Dokumentation zum Master-Projekt (Lorenz, 2013) vorgestellt wurde, besaß ledig-

lich Storyboards und keine Einzelzeichnungen. Diese wurden durch die Zusammenfüh-

rung mit der Anwendung CollaborativeStoryboarding von Markus Hankh (2012) hinzuge-

fügt. Wie sich zeigte, war dieser Schritt der richtige.

6.1.2.4 ANIMATIONSFUNKTIONEN

Betrachtet man die Erstellung von Animationen, so gab der Großteil der Probanden an,

dass er sehr gut verstanden habe, wie man Animationen erstellen kann (M=2,33;

SD=1,25; vgl. Abbildung 6.6a). Die Leichtigkeit des Erstellens von Animationen bewerte-

ten die Probanden ebenfalls positiv, wobei die Bewertung teilweise eher in Richtung der

neutralen Bewertung ging (M=1,89; SD=1,29; vgl. Abbildung 6.6b). Dies könnte unter

anderem an der schlechten Performance der Anwendung liegen, die sich durch die Erstel-

lung vieler Zeichnungen weiter verschlechterte. Oftmals klagten die Probanden darüber,

dass die Zeit auf der Zeitleiste nicht mehr aufhörte weiter zu laufen und das System nicht

mehr reagierte. Dieses Problem trat vor allem auf den leistungsschwächeren Geräten auf.

a) Ich habe verstanden, wie Animationen

erstellt werden können.

b) Die Erstellung von Animationen ist mir

leicht gefallen.

Abbildung 6.6: Bewertung des Erstellens von Animationen

Die Animationssteuerung, welche beispielsweise die Aufnahme und Wiedergabe von

Animationen beinhaltet, wurde durch die Probanden überwiegend positiv bewertet. Hier

war manchen Probanden allerdings nicht der Zusammenhang zwischen Aufnahme und

vergangener Zeit bewusst. Die Zeit läuft lediglich dann weiter, wenn der Benutzer durch

Berührung eines Elements aktiv eine Animation aufzeichnet. Daher waren manche Ani-

mationen nur sehr kurz sichtbar. Ein Proband merkte außerdem an, dass es ihn verwirre,

dass zu Anfang noch keine Zeit auf der Zeitleiste dargestellt werde und man sich auf die-

ser auch nicht hin und her bewegen könne. Erst durch Aufnahme einer Animation oder

6

2 1

0

3

6

9

3210-1-2-3

M=2,33; SD=1,25

3 4

1

0

3

6

9

3210-1-2-3

M=1,89; SD=1,29

Page 65: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 56

durch Betätigen der Schaltfläche zum Hinzufügen einer Sekunde wird hier Zeit auf der

Zeitleiste zur Verfügung gestellt.

a) Die Animationssteuerung (Aufnahme /

Abspielen, …) ist verständlich.

b) Wie hat Ihnen die Manipulationsanima-

tion gefallen?

c) Wie hat Ihnen die Skalierungsanimation

gefallen?

d) Wie hat Ihnen die Rotationsanimation

gefallen?

e) Wie hat Ihnen die Erscheinen- bzw. Ver-

schwinden-Animation gefallen?

f) Wie hat Ihnen die Zeichenanimation

gefallen?

Abbildung 6.7: Bewertung der Animationssteuerung und der einzelnen Animationstypen

Die Probanden konnten ebenfalls bewerten, wie gut ihnen die einzelnen Animationstypen

gefielen. Da ihnen Art und Inhalt der Animationen, die sie erstellten, freistand, verwende-

ten nicht alle Probanden alle Animationstypen. Die meist genutzten Animationstypen

waren Manipulation (alle Probanden), Skalierung (6 Probanden), sowie Zeichenanimati-

on (Aufnahme von Zeichnungen; 5 Probanden). Diese, sowie die übrigen beiden Animati-

onstypen wurden überwiegend positiv bewertet, wobei die Zeichenanimation den Pro-

banden besonders gut gefiel (M=2,80; SD=0,67, vgl. Abbildung 6.7f). Alle Bewertungen,

sowie deren arithmetisches Mittel und Standardabweichung sind in Abbildung 6.7 darge-

stellt.

Eine Probandin bewertete die Manipulationsanimation leicht negativ. Dies kam daher,

dass sie den Begriff „Manipulation“ für diese Art von Animationstyp missverständlich

fand. Sie merkte an, dass sie Manipulation nicht als verschieben verstanden habe. Tat-

sächlich verbirgt sich hinter diesem Typen nicht nur die Translation von Elementen, son-

dern auch deren Rotation und Skalierung. Das Vorhandensein der beiden Animationsty-

pen „Skalierung“ und „Rotation“ verwirrte diese Probandin. Ebenfalls gab es bei den Ani-

mationstyp „Erscheinen“ und „Verschwinden“ Unklarheiten. In einem Fall wollte ein Pro-

3 2

3

1

0

3

6

9

3210-1-2-3

M=1,78; SD=1,03

3 2

3

1

0

3

6

9

3210-1-2-3

M=1,33; SD=1,49

4

1 1

0

3

6

9

3210-1-2-3

M=2,00; SD=1,56

3

1

0

3

6

9

3210-1-2-3

M=2,25; SD=1,23

2 2

0

3

6

9

3210-1-2-3

M=2,50; SD=1,50

4

1

0

3

6

9

3210-1-2-3

M=2,80; SD=0,67

Page 66: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 57

band lediglich ein Element ausblenden, löschte es allerdings aus Versehen komplett von

der Zeichnung mithilfe des Mülleimers. Auch dachte ein Proband, dass das Ausblenden

einer Ebene zu einem bestimmten Zeitpunkt als Animation aufgezeichnet werden würde.

Dies kann jedoch lediglich durch Markieren des gesamten Inhalts dieser Ebene und Aus-

wahl des Animationstyps „Verschwinden“ ausgelöst werden.

Auf Nachfrage, ob Animationstypen vermisst werden, gab es zwei Vorschläge: das Um-

kehren einer Animation, so dass diese rückwärts läuft, sowie die Einführung von Pfaden,

an denen die Elemente sich entlang bewegen und gegebenenfalls auch rotiert werden.

Verschiedene Mechanismen werden von der Anwendung zur Verfügung gestellt, die bei

der Erstellung von Animationen unterstützen sollen. Hierzu zählen zum einen die Anima-

tionsvorschaubilder, welche als neutral bis gut unterstützend eingestuft wurden

(M=1,56; SD=1,17; vgl. Abbildung 6.8a). Zum anderen gibt es die Animationsfarben, wel-

che in der Standardeinstellung deaktiviert sind und daher nur von vier Probanden bewer-

tet wurden. Auch diese werden als neutral bis gut unterstützend eingeschätzt (M=1,75;

SD=1,41; vgl. Abbildung 6.8b). Die Andeutung von nicht sichtbaren Elementen wird ähn-

lich positiv bewertet (M=1,86; SD=1,25; vgl. Abbildung 6.8c). Die Animationszeitleiste

dient nicht nur zum Hin- und Herspringen in der Zeit, auch hier werden Andeutungen

über Beginn und Ende einer Animation gemacht. Der Aussage, dass die Animationszeit-

leiste verständlich ist, stimmten alle Probanden zu. (M=2,11; SD=0,87; vgl. Abbildung

6.8d).

a) Die Animationsvorschaubilder im

Zeichenbereich haben mich unterstützt.

b) Die Animationsfarben haben mich

unterstützt.

c) Die Andeutung von nicht sichtbaren Objek-

ten im Zeichenbereich hat mich unterstützt.

d) Die Animationszeitleiste ist

verständlich.

Abbildung 6.8: Bewertung der Unterstützungsfunktionen

Grundsätzlich wurde die Erstellung von Animationen positiv bewertet, wie die Aussage

eines Probanden belegt: „Es war schnell und einfach möglich, kleine, ausdrucksstarke Ani-

mationen zu erstellen.“ Allerdings wünschten sich die Probanden weitere Bearbeitungs-

möglichkeiten für Animationen. Hierzu zählt das Verschieben und Löschen von Animati-

onen, was laut Vorschlag eines Probanden über die Zeitleiste erfolgen könnte. Prototy-

pisch wurde bisher lediglich das Überschreiben von Animationen oder das komplette

3

1

3 2

0

3

6

9

3210-1-2-3

M=1,56; SD=1,17

2 1 1

0

3

6

9

3210-1-2-3

M=1,75; SD=1,41

2 3

1 1

0

3

6

9

3210-1-2-3

M=1,86; SD=1,25

4

2 3

0

3

6

9

3210-1-2-3

M=2,11; SD=0,87

Page 67: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 58

Löschen aller Animationen eines Elements umgesetzt. Besonders in diesem Bereich gibt

es noch viel Potential für Verbesserungen der Animationsfunktionalität.

6.1.2.5 PRÄSENTATIONSFUNKTIONEN

Die Präsentation der erstellten Zeichnungen und Storyboards wurde jeweils am Grup-

penarbeitsplatz vorgenommen. Die Präsentationssicht war an diesem Arbeitsplatz als

Standardansicht des gezoomten Storyboards eingerichtet. Diese Sicht ermöglicht es zwi-

schen den einzelnen Frames hin und her zu blättern, sowie eine automatische Wiederga-

be inklusive aller Animationen zu starten. Sie gefiel den Probanden sehr gut (M=2,44;

SD=0,68; vgl. Abbildung 6.9a). Das Bearbeiten der Frames ist in dieser Sicht deaktiviert.

Im Gegensatz zu den Storyboards besitzen Einzelzeichnungen keine Präsentations-, son-

dern nur eine normale Zeichenansicht. Hier passierte es oft, dass Probanden beim Prä-

sentieren mit dem Finger auf die Zeichnung zeigten, und sie dabei versehentlich verän-

derten. Ein weitere Sicht, die Comicansicht, wurde bei den Präsentationen hingegen kaum

genutzt, von den Probanden aber ebenfalls gut bewertet (M=2,13; SD=0,94; vgl. Abbild-

ung 6.9b). Als Alternative zur Nutzung der Präsentationsansichten wurden teilweise auch

die Storyboards etwas größer gezoomt. In der ersten Zoomstufe werden alle Frames ei-

nes Storyboards dargestellt, um eine Vorschau auf den Inhalt des Storyboards zu geben.

Diese kleinere Ansicht genügte einigen Probanden zur Vorstellung ihrer Ideen.

a) Wie hat Ihnen die Präsentationssicht im

Storyboard gefallen?

b) Wie hat Ihnen die Comic-Ansicht (Über-

sicht) im Storyboard gefallen?

Abbildung 6.9: Bewertung der Präsentationsansichten

An den Gruppenarbeitsplatz gesendete Ideen verteilt die Anwendung zufällig auf der

Landschaft. Für gewöhnlich sollte ein Storyboard oder eine Einzelzeichnung durch

einfaches Antippen in den Vordergrund gelangen. Vereinzelt kam es hierbei zu

Problemen: es veränderte sich nichts und die Idee blieb zum Leidwesen der

Präsentierenden im Hintergrund. Dies ist ein Problem, das bereits öfters in Verbindung

mit dem ZOIL-Framework auftrat und ein Fehler innerhalb des Frameworks zu sein

scheint. Ein weiterer Fehler trat in einigen wenigen Fällen beim Übertragen von Ideen

auf. Sie wurden teilweise nur unvollständig übertragen. Dieses Problem muss bei

Weiterentwicklungen der Anwendung behoben werden.

Bei den Präsentationen wurden gelegentlich die vorgestellten Ideen verändert. Hier

merkte ein Proband an, dass er gerne „nicht-persistente Änderungen in Form von Notizen“

für diesen Modus hätte, um gemeinsam Ideen zu besprechen und Anmerkungen an diesen

zu machen, ohne sie zu verändern.

5

3

1

0

3

6

9

3210-1-2-3

M=2,44; SD=0,68

3 3 2

0

3

6

9

3210-1-2-3

M=2,13; SD=0,94

Page 68: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 59

6.1.2.6 STEUERUNG DER ANWENDUNG

Die Steuerung der Anwendung verlief größtenteils intuitiv und ohne Probleme. Lediglich

beim Zoomen der Objekte kam es öfters zu Schwierigkeiten. Die Gesten zum Vergrößern

und Verkleinern von Gesten (Spread und Pinch, vgl. auch Abbildung 5.4) waren allen

Probanden bekannt und ließen sich gut ausführen. Auch der Doppelklick zur Aktivierung

der Vollbildansicht war nach der Vorstellung durch die Versuchsleiter kein Hindernis für

die Probanden. Standardmäßig wird ein Objekt bei einer ZOIL-Anwendung durch eine

einfache Berührung vergrößert, was allerdings des Öfteren zum unbeabsichtigten Ver-

größern des Objekts führt. Aus diesem Grund wurde im Prototypen das Vergrößern per

Doppelklick aktiviert. Trotz dieser Vorsichtsmaßnahme kam es vereinzelt zum unbeab-

sichtigten Zoomen durch die Probanden. Ein weiteres Problem entstand, wenn ein groß-

gezoomtes Storyboard oder eine Einzelzeichnung, welches sich in der Zeichenansicht

befand, wieder verkleinert werden sollte. In einigen wenigen Fällen geschah es, dass beim

Aufsetzen der beiden Finger der erste Finger im Zeichenbereich landete. Hierdurch wur-

de versehentlich in die Idee gezeichnet, statt deren Größe zu verändern.

Bezüglich des Hinzufügens von Storyboards und Einzelzeichnungen wünschte sich ein

Proband, dass er direkt die Position des neu zu erstellenden Objektes bestimmen könne.

Bisher wird bei einem Klick auf die Schaltfläche das Objekt an einem zufälligen Ort auf

der Landschaft erstellt. Er schlug vor, dass man mithilfe von Drag & Drop das Objekt di-

rekt an die gewünschte Position ziehen könnte.

Aufgrund der vielfältigen Möglichkeiten der Anwendung wurden relativ viele Schaltflä-

chen verwendet, mit denen Funktionen ausgelöst werden können. Ein Proband merkte

an, dass er gerne eine Hilfeanzeige hätte, ähnlich der aus anderen Anwendungen, um

anzuzeigen, was welche Schaltfläche macht. Sie könne außerdem die Funktionen noch

näher beschreiben.

6.1.2.7 GESAMTEINDRUCK DES PROTOTYPS

Insgesamt wurde der Prototyp positiv bewertet. Das Sketchen von Ideen, Erstellen von

Animationen, sowie die Möglichkeit, einfach mit anderen Leuten zusammenzuarbeiten,

hoben die Probanden positiv hervor. Dies äußerte sich unter anderem in einem hohen

Wert des System Usability Scales mit einem Durchschnittswert von 81,3 (SD=8,67) von

100 Punkten, was laut der in Abschnitt 6.1.1.4.1 vorgestellten Studie von Bangor et al.

(2009) einer guten bis exzellenten Benutzungsfreundlichkeit entspricht. Die Wertespan-

ne reichte hierbei von 72 bis 95 Punkte. Somit wurde der Prototyp von allen Nutzern

mindestens als akzeptabel bezüglich der Benutzungsfreundlichkeit eingeschätzt. Die Dar-

stellung der Ergebnisse des SUS mithilfe eines Boxplots, welches den Median, das untere

und obere Quantil, sowie die gesamte Spanne der Werte darstellt, ist in Abbildung 6.10 zu

finden.

Page 69: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 60

Abbildung 6.10: Boxplot zur Bewertung des Systems anhand des System Usability Scales

(SUS) und des Creativity Support Indexes (CSI)

Abbildung 6.10 zeigt zudem die Ergebnisse des Creativity Support Indexes. Auch diese

liegen mit einem Durchschnittswert von 83,2 (SD=5,58) von 100 Punkten in einem ver-

mutlich sehr guten Bereich. Genaue Aussagen können aufgrund der Neuheit des CSIs

allerdings nicht getroffen werden. Die Spanne der Ergebnisse reichte von 73 bis 91 Punk-

te. Tabelle 6.3 zeigt die durchschnittliche Bewertung und Wichtigkeit der einzelnen Ge-

sichtspunkte, sortiert nach der besten Bewertung. Die Probanden waren mit einem

Durchschnittswert von 8,76 von 10 (SD=0,44) sehr zufrieden mit dem Aufwand, der zur

Externalisierung ihrer Ideen nötig war. Diesem Punkt maßen sie außerdem die höchste

Wichtigkeit zu (M=3,00 von 5; SD=1,76). Die Immersion, der Grad des Eintauchens in die

Kreativarbeit wurde am schlechtesten und am unterschiedlichsten von den Probanden

bewertet (M=7,04; SD=1,02). Sie war zudem für die Probanden im Vergleich zu den ande-

ren Punkten am wenigsten wichtig. Mit einem Wert von knapp über sieben ist die Immer-

sion vermutlich jedoch noch immer als gut einzustufen. Der Wert kommt möglicherweise

dadurch zustande, dass gelegentliche Abstürze und die schlechte Performance der An-

wendung die Probanden immer wieder von der eigentlichen Arbeit ablenkten und diese

verzögerten.

Gesichtspunkt

Bewertung (0-10)

Wichtigkeit (0-5)

⌀ SD ⌀ SD

Kollaboration 9,03 0,36 2,78 1,69

Aufwand der Ergebnisse 8,76 0,44 3,00 1,76

Ausdrucksmöglichkeiten 8,56 0,42 2,33 0,67

Spaß bei der Benutzung 8,33 0,66 2,67 1,49

Exploration 8,17 0,66 2,00 1,15

Immersion 7,04 1,02 2,00 1,56

Tabelle 6.3: Auflistung der Ergebnisse des Creativity Support Indexes

Die guten Ergebnisse des SUS und CSIs werden ebenfalls durch Aussagen von Probanden

bestätigt:

„Ich fand das System sehr schnell und einfach zu verstehen.“

„Schnell und einfach zu nutzen, schnelle Ergebnisse.“

0 10 20 30 40 50 60 70 80 90 100

CSI

SUS

Page 70: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 61

Trotz der hohen Komplexität und des Funktionsumfangs wurde die Handhabung der

Anwendung bezüglich ihrer Einfachheit gelobt. Ein Proband merkte außerdem an, dass er

„Freiheit in der Umsetzung der eigenen Ideen in Bezug auf die Interaktion“ gehabt habe.

Besonders gut gefallen hat den Probanden zudem, dass sie aktiv auf dem Bildschirm

zeichnen konnten.

Von den meisten Probanden wurde auf das Fehlen der Rückgängig-Funktion hingewie-

sen, auf die die meisten Benutzer heutzutage nicht mehr verzichten möchten. Auch die

schlechte Performance war ein häufiger Kritikpunkt seitens der Probanden. Diese Punkte

sind dem Prototypcharakter der Anwendung zu verschulden. Mehrmals kam es zu Ab-

stürzen der Anwendung, sowie gelegentlich zu Fehlern bei der Übertragung von Ideen

zwischen den Clients. Auch diese Probleme sind durch den Prototypcharakter der An-

wendung entstanden und müssen bei der Weiterentwicklung der Anwendung adressiert

werden.

6.1.2.8 ANIMATION IN STORYBOARDS

Nachdem die Ergebnisse bezüglich der Funktionen und der Benutzungsfreundlichkeit der

Anwendung dargelegt wurden, werden abschließend die während der Studie erstellten

Animationen beschrieben und die Meinungen der Nutzer über den Nutzen von Animation

in der Kreativarbeit und in Storyboards vorgestellt.

Abbildung 6.11: Ausschnitte der während der Studie erstellten Animationen

Die erstellten Storyboards bezogen sich meist auf den Kontext oder die Bedienung der

Anwendung. So gab es beispielsweise eine Animation, die eine in einem Bett schlafende

Person zeigt, was durch ein sich bewegendes „ZZZZZ“ angedeutet wird. Schreitet die Zeit

weiter voran, so beginnt ein neben dem Männchen stehender Wecker mit einem sich

bewegenden „RRRR“ ihn zu wecken. Eine weitere Animation zeigt einen Bus zur Uni da-

vonfahren. Daraufhin beginnt ein Männchen regelrechte Sturzbäche an Tränen zu vergie-

ßen. Doch dank der StudenTaxi-Anwendung kann die Person trotzdem zur Uni kommen.

Die Person wird aufgesammelt und an der Uni wieder abgesetzt. Weitere Animationen

beschreiben die Interaktion mit der Anwendung. Es wird beispielsweise das Drücken

eines Buttons angedeutet, indem eine Hand zu diesem wandert und Striche um den Fin-

Page 71: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 62

ger erscheinen. Eine andere Animation zeigt einen Bildschirmwechsel, welcher ähnlich

wie bei einem iPhone durch Verschieben des Bildschirms erfolgt. Abbildung 6.11 zeigt

Ausschnitte dieser Animationen.

Nach Bewertung des Prototyps im Fragebogen wurden abschließend in der Focus Group

mehrere Fragen bezüglich der Rolle von Animation in der Kreativarbeit und auch gezielt

in Storyboards gefragt. Auf die Frage, ob Animation beim kreativen Prozess unterstützen

kann, äußerten sich die Probanden wie folgt:

„ Mir hat es schon was gebracht.“

„Ja, schon vielleicht. Wenn es halt nicht zu aufwändig ist.“

„Beim Designprozess glaub‘ ich eher weniger, eher beim Präsentationsprozess.

Wenn ich etwas für mich designe, dann weiß ich, wie es aussieht, weil ich es mir

vorstellen kann. Aber ich kann es nicht immer den anderen vermitteln.

Und da ist es denk‘ ich mal ein gutes Vorgehen.“

Die meisten Probanden wussten auf diese Frage allerdings keine Antwort. Dies könnte

darauf zurückzuführen sein, dass lediglich vier Probanden überhaupt bereits Erfahrun-

gen mit Animationsprogrammen gesammelt haben und vermutlich noch weniger mithilfe

von Animationen kreativ wurden. Worin sich jedoch alle Probanden einig waren, ist dass

Animation die Kommunikation vereinfacht. Ideen würden sich schneller vermitteln las-

sen, insbesondere wenn Bewegungen angedeutet werden sollen, was bei Storyboards

typischerweise durch Pfeile geschieht. Mithilfe von Animation kann die angedeutete Be-

wegung direkt sichtbar gemacht werden. Auch für die Andeutung von Buttonklicks, die

Gestaltung neuartiger Steuerelemente, sowie Screen- oder Farbwechseln seien Animatio-

nen laut Aussagen von Probanden gut geeignet. Ein Proband konnte aufgrund der Per-

formanceprobleme der Anwendung seine Animation nicht so erstellen, wie er es wollte.

Er merkte an, dass seine Idee deshalb schwieriger zu kommunizieren gewesen wäre, als

die der anderen.

Auf die Frage, ob Animation in Storyboards sinnvoll wäre, antwortete ein Proband, dass

es von der Aufgabe abhinge. Man brauche nicht für jedes Szenario Animation, aber in

einigen Fällen sei es hilfreich. Dies deckt sich mit der Aussage einer anderen Probandin:

„wenn es da ist, ist es sinnvoll, aber man kommt auch so gut aus“. Ein Proband merkte au-

ßerdem an, dass man sich schnell darin verlieren könne, das ganze Storyboard in einer

Animation umzusetzen, aber er Animation trotzdem sinnvoll fände. Und außerdem ma-

che die Erstellung der Animationen Spaß.

6.1.3 DISKUSSION

In dieser Studie wurde der Prototyp an einer konkreten Designaufgabe mit realen Nut-

zern erprobt. Die erstellten Ideen und angeregten Diskussionen der Nutzer während der

Bearbeitung der Aufgabe zeigten, dass mithilfe der Anwendung produktiv gearbeitet

werden kann. Dies spiegelte sich auch in den guten Fragebogenbewertungen und insbe-

sondere in den guten Werten des SUS‘ und des CSIs wider. Die Benutzung der Anwendung

Page 72: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 63

machte Spaß, wie mehrere Probanden anmerkten. Zudem vergaßen Probanden während

der Bearbeitung der Aufgaben vollkommen die Zeit.

Bereich Verbesserungspotential

Zeichen-

funktionen

Auflegen der Hand auf allen Geräten ermöglichen

Mehr Zeichenfarben

Radierer mit variabler Größeneinstellung

Direktere und präzisere Eingabe (Performance)

Bildschirmeingabe bei Textfeldern verbessern

Rückgängig / Wiederholen

Ausschneiden, Kopieren und Einfügen (auch über Ebenen hinweg)

Mehrfachselektion per Tastendruck

Zusammenführen von Ebenen

Benennen von Ebenen

Besseres Feedback beim Zeichnen auf ausgeblendeten Ebenen

Visuelles Feedback beim Speichern von Templates hinzufügen

Inhalt eines Templates nach dem Einfügen automatisch selektieren

Storyboard-

funktionen

Unterstützung der Ein- und Umsortierung von Frames in der Story-

board-Vorschau

Hinzufügen eines kompletten Storyboards zu einem anderen

Animations-

funktionen

Performance verbessern

Unklarheiten, wie die Zeit vergeht beim Erstellen von Animationen

Bereits zu Anfang Zeit auf der Zeitleiste zur Verfügung stellen

Neue Animationstypen: Pfade und Animation rückwärts laufen lassen

Länge und Geschwindigkeit von Animationen bearbeiten

Zeitpunkt einer Animation verändern

Animationen einzeln löschen

Präsentations-

funktionen

Präsentationsansicht für Einzelzeichnungen hinzufügen

Angetippte Objekte immer in den Vordergrund bringen (Bug)

Ideen komplett übertragen (Bug)

Notizen für die Präsentationsansicht

Steuerung der

Anwendung

Zooming verbessern

Hinzufügen eines Storyboards / einer Einzelzeichnung durch Drag &

Drop an Position in der Landschaft ermöglichen

Hilfesystem hinzufügen

Tabelle 6.4: Zusammenfassung des Verbesserungspotentials der Anwendung

Page 73: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 64

Durch Analyse der Bedienung bei der Bearbeitung des Szenarios, sowie durch Aussagen

der Probanden, konnte Potential für Verbesserungen der Anwendung zum Vorschein

gebracht werden. Diese werden in Tabelle 6.4 zusammengefasst. Die Studie zeigte außer-

dem, dass Animation einen entscheidenden Vorteil in Storyboards hat: die erleichterte

Kommunikation von Ideen. Dies bestätigten alle Probanden. Der sinnvolle Einsatz von

Animationen in Storyboards hinge allerdings vom darzustellenden Inhalt des Storyboards

ab. Wichtig ist hierbei jedoch, dass lediglich Ausschnitte des Storyboards in einer Anima-

tion dargestellt werden, und nicht der gesamte Inhalt eines Storyboards in einer Animati-

on zusammengefasst wird. Dadurch würde der Sinn von Storyboards, eine Übersicht ei-

nes Szenarios zu erhalten, zerstört. Ob Animationen überdies auch Vorteile für den krea-

tiven Prozess bringen, konnte nicht nachgewiesen werden. Probanden sahen Potential

hierfür, sagten allerdings auch von sich selbst, dass sie hierfür zu wenig Erfahrung mit

Animationen im kreativen Bereiche hätten. Eine weitere Studie mit Probanden, die be-

reits mehr Erfahrungen in diesem Bereich haben, könnte hier zusätzliche Erkenntnisse

bringen.

Aufgrund der schlechten Performance der Anwendung, die dazu führte, dass es nicht

möglich war, die Interaktion an den privaten Clients mithilfe eines Screencapture-

Programms aufzuzeichnen, gab es leider nur wenige Einblicke in die Erstellung von Ani-

mationen. In den Gruppenphasen, von denen jeweils ein Video aufgezeichnet wurde, er-

stellten die Probanden keine Animationen. In den privaten Phasen wurden lediglich falls

Probleme auftraten die Versuchsleitung hinzugezogen. Hinzu kommt, dass die erstellten

Animationen von keiner allzu großen Komplexität waren, da sich die Probanden auf das

Szenario konzentrierten und nur begrenzt Zeit hatten, um ihre Ideen auszudrücken. Da-

her gibt diese Studie nur wenig Aufschluss über die Benutzungsfreundlichkeit der Anima-

tionsfunktionalität. Aus diesem Grund wurde eine weitere Studie durchgeführt, die sich

auf die Überprüfung der Animationsfunktionalität fokussiert, und im nächsten Abschnitt

beschrieben wird.

6.2 ÜBERPRÜFUNG DER ANIMATIONSFUNKTIONALITÄTEN Nachdem in der ersten Nutzerstudie den Probanden freie Hand bei der Erstellung von

Animationen gewährt wurde, sollen in einer zweiten Studie die Animationsfunktionalitä-

ten bezüglich ihrer Benutzungsfreundlichkeit untersucht werden. Hierfür wurden kon-

krete Aufgaben gestellt, welche möglichst viele Funktionen des Tools abdecken und die

Probanden während der Studie bearbeiten sollten. Im Gegensatz zur ersten Studie wer-

den die Probanden nun nicht mehr in der Gruppe, sondern einzeln mit der Anwendung

konfrontiert. Dadurch lassen sich die Ergebnisse bereits während der Studie besser kon-

trollieren und gezieltere Fragen sind im Interview möglich.

Verschiedene Teile der Anwendung, unter anderem die zoombare Informationsland-

schaft, wurden für diesen Teil der Studie entfernt, was zu einem deutlichen Performance-

anstieg führte. Die vorgenommenen Änderungen werden im nächsten Absatz beschrie-

ben. Analog zur ersten Studie wird im Anschluss das Studiendesign beschrieben, die Er-

gebnisse vorgestellt, sowie diskutiert.

Page 74: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 65

6.2.1 ANPASSUNG DER ANWENDUNG

Um die Erstellung von Animationen adäquat testen zu können, musste die Performance

der Anwendung verbessert werden. Da diese immer dann rapide abnahm, wenn viele

Ideen in die Anwendung geladen wurden, wurde beschlossen, für jede Aufgabe immer

nur eine Zeichnung zu laden. Zusätzlich wurde das Interface ohne das ZOIL-Framework

gestaltet, was zu einer deutlichen Verbesserung der Performance führte.

Da sie für die Aufgaben nicht notwendig waren, wurden die verschiedenen Ansichten

eines Storyboards, die Frames, sowie die verschiedenen Schaltflächen zum Veröffentli-

chen eines Sketches und zum Hinzufügen von Texten und Bildern entfernt. Abbildung

6.12 zeigt den angepassten Prototypen. Als Reaktion auf die vorherige Studie werden nun

standardmäßig drei Sekunden auf der Zeitleiste dargestellt. Weitere Zeit kann nach wie

vor mit der „+1s“-Schaltfläche, welche sich unten rechts in Abbildung 6.12 befindet, hin-

zugefügt werden.

Abbildung 6.12: Darstellung des angepassten Prototyps

6.2.2 STUDIENDESIGN

Auch für die zweite Studie wurde ein formativer Usability-Test mit einem Within-

Subjects-Design als Untersuchungsmethode gewählt. Da bereits erste Erkenntnisse zur

Benutzungsfreundlichkeit der gesamten Anwendung zur Verfügung stehen, sollen nun

gezielt die Schwächen und Stärken der Animationsfunktionalitäten offengelegt werden.

Im Vorfeld der Studie wurde daher nach den bisherigen Animationserfahrungen und

Fähigkeiten der Nutzer gefragt und ebenfalls abgeklärt, ob diese bereits Erfahrungen mit

einfachen Grafikprogrammen und touchfähigen Geräten besitzen. Um ein noch umfas-

senderes Verständnis zu den Animationsfunktionalitäten zu erhalten, wurden die Nutzer

während des Usability-Tests dazu aufgefordert, bei der Bearbeitung der Aufgaben laut zu

denken. Durch die Performanceoptimierungen war es möglich, die Bearbeitung der Auf-

Page 75: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 66

gaben mithilfe eines Screencapture-Programmes aufzuzeichnen, welches zusätzlich den

Ton des Probanden aufnahm. Die subjektive Bewertung der Funktionalitäten erfolgte

nach jeder Aufgabe mithilfe eines kurzen Fragebogens, sowie nach der Bearbeitung aller

Aufgaben anhand eines größeren Fragebogens und einem Einzelinterview.

Im Folgenden werden zunächst die Zielgruppe der Studie, sowie deren Setting und Auf-

bau näher erläutert, bevor die einzelnen Datenerhebungsmethoden beschrieben werden.

6.2.2.1 ZIELGRUPPE

Statt der relativ freien Bedienung der Anwendung in der ersten Studie, in der auch krea-

tiv Ideen erstellt werden konnten, soll nun bei dieser zweiten Studie gezielt auf die Ani-

mationsfunktionen anhand von fest definierten Aufgaben eingegangen werden. Aufgrund

der Vorgabe konkreter Animationsaufgaben wurden in diesem Fall nicht Personen mit

kreativem Hintergrund gesucht, sondern Personen, die gerne Animationen erstellen

würden oder bereits erstellt haben. Die Untersuchung des Umgangs mit dem System

durch Animationsanfänger ist interessant, um herauszufinden, wie schwierig der Einstieg

für nicht-professionelle Nutzer ist. Da das System auch Personen mit professionellem

Hintergrund unterstützen soll, zählen auch diese zur Zielgruppe. Eine Teilnehmeranzahl

von fünf bis sechs Personen reicht laut Studien bereits aus, um etwa 80% der Usability-

Probleme eines Systems aufzudecken (Nielsen, 1993; Virzi, 1992).

6.2.2.2 SETTING

Den Probanden stehen für die Exploration der Anwendung und die Bearbeitung der Auf-

gaben zwei Tablet-PCs zur Verfügung. Auf einem der Tablet-PCs ist die Anwendung in-

stalliert. Multi-Touch-, sowie Styluseingaben werden von diesem Gerät unterstützt. Der

andere Tablet-PC wird lediglich zu Präsentationszwecken verwendet: auf ihm sind Videos

der zu erstellenden Animationen gespeichert, welche der Proband während der Bearbei-

tung der Aufgaben betrachten kann. Die Aufgabenstellung wird dem Probanden jeweils in

Papierform überreicht. Dem Probanden gegenüber sitzt der Versuchsleiter, welcher das

Geschehen über einen Monitor verfolgen und gegebenenfalls Hilfestellung geben kann.

Abbildung 6.13: Setting zur Überprüfung der Animationsfunktionalitäten

6.2.2.3 AUFBAU DER STUDIE

Der Aufbau der zweiten Studie ähnelt dem Aufbau der ersten Studie mit einer Einführung

und Explorationsphase zu Anfang, der Bearbeitung der Aufgaben im Anschluss und der

Abfrage der subjektiven Meinung des Probanden zum Schluss. Die Studie erstreckte sich

über etwa 75 Minuten. Tabelle 6.5 zeigt den detaillierten Ablauf und Zeitplan der Studie.

Proband Versuchsleiter

Page 76: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 67

Begrüßung und Pre-Questionnaire 5 min

- Willkommensschreiben und Einverständniserklärung 3 min

- Fragebogen: Demographie, Fähigkeiten und Erfahrungen 2 min

Einführung und Exploration 20 min

- Erklären der Funktionen des Prototypen 10 min

- Freie Exploration durch den Teilnehmer 10 min

Bearbeitung verschiedener Aufgaben 32 min

- Einführung 2 min

- 1. Aufgabe: Ballwurf 5 min

- 2. Aufgabe: Bogenschießen 10 min

- 3. Aufgabe: Gestenbedienung eines Tablets 15 min

- Nach jeder Aufgabe: kurzer Fragebogen mit den ersten zwei

Fragen des ASQ und einem kurzen Interview im Anschluss

Abschlussfragebogen 5 min

- SUS (System Usability Scale) 2 min

- Allgemeine Fragen zur Animationsfunktionalität des Prototypen 3 min

Informelles Interview 10 min

Verabschiedung und Entlohnung 3 min

Tabelle 6.5: Übersicht und Zeitplan der Studie "Überprüfung der Animationsfunktionalitäten"

Analog zur ersten Studie wurde zu Anfang ein Fragebogen ausgeteilt, der demographi-

sche Daten, Fähigkeiten und bisherige Erfahrungen abprüft. Nach einer kurzen Einfüh-

rung in die Anwendung hatten die Probanden die Möglichkeit, die Anwendung und die

verschiedenen Animationstypen frei zu explorieren. Im Anschluss erfolgte eine Überprü-

fung des Verständnisses der Anwendung mithilfe dreier Aufgaben, welche in der Schwie-

rigkeit anstiegen. Hierfür erhielten die Probanden eine schriftliche Aufgabenstellung (vgl.

auch Anhang B), die anhand von Bildern und einem Begleittext erläutert, was Ziel der

Aufgabe war. Zudem wurde ein Tablet mit Videos der zu erstellenden Animationen zur

Verfügung gestellt, um den Probanden eine noch genauere Vorstellung der zu bearbei-

tenden Aufgabe zu bieten. Die den Animationen zugrundeliegenden Zeichnungen wurden

bereits vor Aufgabenbeginn in die Anwendung geladen, sodass die Probanden lediglich

diese animieren mussten (vgl. Abbildung 6.14). Die Zeichnungen wurden außerdem als

Template bereitgehalten, falls ein Proband nochmals zum Ursprungszustand zurückkeh-

ren wollte. Nach jeder Aufgabe prüfte ein kurzer Fragebogen die Zufriedenheit der

Schwierigkeit der Aufgabe, sowie deren Zeitaufwand ab. Ferner erhielten die Probanden

die Möglichkeit, Anmerkungen zu einer Aufgabe zu äußern.

Konkret sah die erste Aufgabe vor, dass eine Animation erstellt werden sollte, in der ein

Männchen einen Ball wirft und dieser mehrmals auf einer Wiese aufkommt. Die Aufgabe

war bewusst einfach gestellt, damit Probanden erste Erfolgserlebnisse verbuchen konn-

ten. Als einziger Animationstyp wird hier die Manipulation benötigt.

Page 77: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 68

Abbildung 6.14: Für die Aufgaben zur Verfügung gestellte Zeichnungen

Die zweite Aufgabe ist eine leicht abgeänderte Adaption des Apfelschusses aus Friedrich

Schillers Klassiker „Wilhelm Tell“. Ein Apfel, welcher sich auf dem Kopf eines Männchens

befindet, soll mithilfe eines Pfeiles abgeschossen werden. Während des Schusses wird

dem Männchen Angst und Bange zumute, sein Gesichtsausdruck verändert sich von ei-

nem Lächeln zu einer „Schlangenlinie“ und erhellt sich erst wieder, nachdem der Apfel

vom Kopf des Männchens geschossen wurde. In diesem Fall werden die Animationstypen

Manipulation, sowie Erscheinen und Verschwinden bzw. Radieren benötigt. Außerdem ist

es für die Realisierung dieser Aufgabe nötig, in der Zeit hin- und her zu springen, um den

Gesichtsausdruck des Männchens, nachdem der Pfeil geschossen wurde, durch einen

neuen auszutauschen.

Bei der dritten Aufgabe soll die Bedienung eines Tablets nachgestellt werden. Als Zeich-

nung stehen hierfür ein Tablet und zwei Hände, welche unter diesem angeordnet sind,

zur Verfügung. Zunächst soll sich eine Hand auf das Tablet bewegen und eine Linie zeich-

nen. Ist die Linie gezeichnet, so soll sich die linke Hand links unter die Linie und die rech-

te Hand rechts über die Linie bewegen. Im Anschluss stellen die Hände eine Skalierbewe-

gung nach, wobei sich die Hand rechts oben in Richtung links unten bewegt. Während

dieser Bewegung soll die Linie kleiner skaliert werden. Um eine Berührung des Tablets

anzudeuten, sollen bei Beginn und Ende der Zeichen- sowie Skalierungsbewegung die

Hände leicht rotiert werden. Diese Rotation soll auf einen Schlag erfolgen, so dass keine

Zeit vergeht. Bei dieser Aufgabe werden neben der Manipulation, die Rotation, Skalierung

und die Aufnahme des Zeichnens einer Linie genutzt. Erneut muss in der Zeit hin und her

gesprungen werden und Elemente müssen manipuliert werden, ohne dass die Aufnahme

aktiv ist.

Nach der Bearbeitung der Aufgaben prüft ebenfalls der System Usability Scale die Benut-

zungsfreundlichkeit der Anwendung ab. Zudem wird der eigens für die Anwendung er-

stellte Fragebogen bezüglich der Animationsfunktionalitäten eingesetzt. In einem ab-

schließenden informellen Interview können weitere Anmerkungen, sowie Verbesse-

rungsvorschläge zum Prototypen geäußert werden, und aufgekommene Schwierigkeiten

angesprochen werden.

6.2.2.4 METHODEN DER DATENERHEBUNG

Für die Datenerhebung wurden die Methoden der ersten Studie für den Anwendungs-

zweck und den Kontext der zweiten Studie angepasst. Durch die Nutzung ähnlicher Erhe-

bungsmethoden lassen sich die Ergebnisse der beiden Studien teilweise vergleichen.

Page 78: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 69

6.2.2.4.1 Fragebögen

Fragebögen sind auch bei der zweiten Studie ein wichtiger Bestandteil zur Datenerhe-

bung. Die selbst erstellten Fragebögen wurden für diese Studie ebenfalls in angepasster

Form verwendet. Nach wie vor wird der System Usability Scale nach Bearbeitung der

Aufgaben abgefragt, um den Grad der Benutzungszufriedenheit zu messen. Der Creativity

Support Index wurde in diesem Kontext weggelassen, da die Probanden gegebene Anima-

tionen nachstellen müssen und nicht frei Animationen entwickeln können. Zusätzlich

wurde der After-Scenario Questionnaire verwendet.

After-Scenario Questionnaire Nach jeder Aufgabe wurden zwei Fragen des von Lewis

(1991) entwickelten After-Scenario Questionnaires (ASQ) eingesetzt. Hierdurch kann

überprüft werden, wie zufrieden die Personen mit der Einfachheit und dem Zeitaufwand

der Erledigung einer Aufgabe sind. Die dritte Frage des ASQ beschäftigt sich mit unter-

stützenden Informationen wie etwa einer Online-Hilfe. In diesem Szenario standen keine

unterstützenden Informationen zur Verfügung, weshalb diese Frage nicht gestellt wurde.

Der ASQ wird für gewöhnlich mit einer Sieben-Punkte-Likert-Skala eingesetzt und bietet

eine Option zum Hinzufügen schriftlicher Kommentare. Diese Option wurde in dieser

Studie durch eine mündliche Nachfrage ausgetauscht, da offene Fragen in Fragebögen

manchmal nur kryptisch oder auch gar nicht von Probanden beantwortet werden

(Nielsen, 1993). Der ASQ korreliert mit der benötigten Dauer einer Aufgabe und kann

hierdurch auch Hinweise auf Usability-Probleme geben.

Eigene Fragebögen Beim Fragebogen, der im Vorfeld der Studie eingesetzt wird,

wurde der Fokus auf die Erfahrungen gelegt, die bereits mit Animation gemacht wurden.

Die Zeichenfähigkeiten, sowie die Erfahrungen mit Gruppenarbeiten waren im Kontext

dieser Studie nicht relevant. Der Fragebogen, der nach Benutzung der Anwendung ver-

wendet wurde, wurde stark gekürzt. Da die Anwendung den Probanden mit einem gerin-

geren Funktionsumfang und geringeren Freiheiten bei der Erstellung der Animationen

präsentiert wurde, wurden hier viele Fragen weggelassen. Der Fokus liegt bei dieser Stu-

die auf der Prüfung der Animationsfunktionalitäten. Die offenen Fragen zum Schluss be-

züglich Verbesserungsvorschlägen und Anmerkungen zum Prototypen wurden ebenfalls

weggelassen und stattdessen dem Interview hinzugefügt.

6.2.2.4.2 Beobachtung, Lautes Denken und Videoanalyse

Im Gegensatz zur ersten Studie, war es aufgrund der besseren Performance der Anwen-

dung möglich, den Bildschirminhalt, sowie den Ton des Probanden während der Bearbei-

tung der Aufgaben mithilfe der Anwendung Morae Recorder aufzuzeichnen. Der Morae

Manager erlaubte die anschließende Auswertung der Aufzeichnungen. Zusätzlich wurde

je nach Verfügbarkeit eine Videokamera eingesetzt, um die Mimik und Gestik des Pro-

banden aufzunehmen. Die Auswertung des Videomaterials erfolgte analog zur ersten

Studie, indem Auffälligkeiten in einer Tabelle gesammelt und zusammengefasst wurden.

Während der Studie saß der Versuchsleiter dem Probanden gegenüber. Er hatte mithilfe

eines Monitors Einsicht in seinen Bildschirminhalt und konnte ebenfalls das Verhalten

des Probanden beobachten und sich Notizen machen. Auch bei dieser Studie gab es ein

Page 79: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 70

Versuchsleiterprotokoll. Der Proband wurde dazu aufgefordert, während der Studie laut

zu denken (Thinking Aloud). Nielsen (1993) bezeichnet diese Methode als die wohl wich-

tigste Usability-Engineering-Methode. Mithilfe des lauten Denkens ist es möglich die In-

tentionen und Gedanken eines Nutzers nachzuvollziehen. Allerdings sollten bei der Aus-

wertung der Aussagen auch immer die Handlungen des Nutzers miteinbezogen werden,

da dieser manchmal auch falsche Theorien aufstellen kann (Nielsen, 1993).

Anhand des Videos konnte bei der Analyse die Bearbeitungszeit der Aufgaben ermittelt

werden. Aufgrund des lauten Denkens kann jedoch die zur Lösung einer Aufgabe benötig-

te Zeit verfälscht werden, da hierdurch die Dauer für die Bearbeitung der Aufgaben ver-

längert oder verkürzt werden kann (Sarodnick & Brau, 2011).

6.2.2.4.3 Interview

Diese Studie wurde jeweils mit Einzelpersonen und keiner Gruppe von Personen durch-

geführt. Hierdurch war es möglich, statt einer offenen Frage im Fragebogen, die Proban-

den direkt zu fragen. Gerade bei offenen Fragen, bei denen die Antworten länger ausfallen

können und schriftlich festgehalten werden, neigen Probanden aufgrund des Aufwands

dazu, einfach gar nichts hinzuschreiben (Lazar et al., 2010; Sarodnick & Brau, 2011). Des-

halb eignen sich mündliche Nachfragen besser.

Nach jeder Aufgabe wurden die Probanden gefragt, ob sie noch Anmerkungen zu einer

Aufgabe hätten. Zudem gab es am Ende der Studie ein semi-strukturiertes Interview. Hier

wurde gefragt, ob es noch Anmerkungen zur gesamten Anwendung oder Verbesserungs-

vorschläge gibt, sowie weitere Fragen, die während der Studie entstanden.

6.2.3 ERGEBNISSE

Nachfolgend werden die Ergebnisse der Studie präsentiert, beginnend mit der Vorstel-

lung der Teilnehmer. Im Anschluss werden die Ergebnisse der einzelnen Aufgaben und

die Schwierigkeiten, die dabei entstanden, beschrieben. Beobachtungen und Anregungen

der Teilnehmer folgen als nächstes. Abschließend werden die Ergebnisse des Fragebo-

gens zu den Animationsfunktionalitäten, sowie Anmerkungen zum Gesamteindruck der

angepassten Anwendung vorgestellt.

6.2.3.1 TEILNEHMER

Bei der zweiten Studie nahmen insgesamt sechs Versuchspersonen teil, vier weibliche

und zwei männliche. Die Probanden setzten sich aus einem Schüler, vier Studenten, sowie

einem professionellen Interaktionsdesigner zusammen. Ihr Alter variierte von 16 bis 28

Jahre, wobei ein durchschnittliches Alter von 23,5 Jahren zu verzeichnen war. Alle Teil-

nehmer gaben an, häufig bis sehr häufig Touch-Displays zu verwenden, sowie bereits

Erfahrungen mit einfachen Grafikprogrammen zu haben. Vier Probanden hatten außer-

dem bereits mit Videoschnittprogrammen und zwei Probanden mit Animationspro-

grammen gearbeitet.

Page 80: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 71

0 1 2 3 4 5

Probanden 6, davon 2 männlich und 4 weiblich

Alter 16 bis 28 Jahre, (M=23,5; SD=3,77)

Tätigkeit 4 Studierende unterschiedlicher Fachrichtungen

1 Schüler

1 Interaktionsdesigner

Erfahrungen Anzahl Personen, die bereits Erfahrungen hatte mit

6 Einfache Grafikprogramme

4 Videoschnittprogramme

2 Animationsprogramme

Tabelle 6.6: Demographische Daten der Probanden der zweiten Studie

6.2.3.2 ERSTE AUFGABE

Die erste Aufgabe diente als Einstieg in die Thematik und war daher einfach gehalten

worden. Sie beschäftigte sich mit der Animation eines Balles, der über eine Wiese springt.

Die Aufgabe konnten vier Probanden ohne jegliche Probleme abschließen, wodurch diese

Probanden sehr zufrieden mit der Einfachheit und dem Zeitaufwand waren. Die Bearbei-

tungsdauer variierte von 25 Sekunden bis knapp über 3 Minuten und hatte einen Median

von 37 Sekunden, wie in Abbildung 6.15c dargestellt ist.

a) Ich bin damit zufrieden, wie einfach ich die

Aufgabe erledigen konnte.

b) Ich bin mit dem Zeitaufwand zufrieden, mit

dem ich die Aufgabe erledigen konnte.

c) Benötigte Zeit

in Minuten

Abbildung 6.15: Bewertung und Zeitaufwand der ersten Aufgabe

Zwei Probanden hatten kleinere Probleme bei der Lösung dieser Aufgabe, waren aber

ebenfalls zufrieden mit deren Einfachheit und Bearbeitungsdauer. Eine Probandin vergaß

die Aufnahme zu aktivieren, bevor sie die Bewegung durchführte, was sie allerdings

schnell merkte und korrigierte. Ein anderes Problem, welches im weiteren Verlauf der

Studie noch mehrmals zu beobachten war, war das Deaktivieren des Animationstyps. Die

Probanden selektierten das zu animierende Element und wählten im Anschluss den Ani-

mationstypen aus. Da die Buttons für den Animationstypen allerdings deselektierbar

sind, wurde der Animationstyp bei dieser Auswahl deaktiviert, falls er bereits zuvor akti-

viert war. Dies hat zur Folge, dass trotz der ausgeführten Bewegung des Balles keine

Animation aufgezeichnet wurde. Die Probandin versuchte in diesem Fall die Animation

wiederzugeben, da jedoch nichts aufgezeichnet wurde, geschah auch nichts weiter als die

Bewegung des Sliders auf der Zeitleiste. Ein Folgefehler entstand: der Ball wurde zu ei-

2

4

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,67; SD=0,47

2

4

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,67; SD=0,47

M=1,05min SD=0,96min

Page 81: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 72

0 1 2 3 4 5 6 7 8 9 10

nem beliebigen Zeitpunkt von der Endposition zurück an den Anfang gezogen. Die Pro-

bandin sah das Problem und begann daraufhin wild auf allen Knöpfen herumzudrücken,

um diese Aktion rückgängig zu machen. Außerdem begann sie, die Aufgabenstellung er-

neut zu betrachten, was ein in dieser Studie typisches Verhalten bei Unsicherheiten war.

Letztlich konnte die Probandin jedoch die Aufgabe noch erfolgreich beenden.

6.2.3.3 ZWEITE AUFGABE

Bei der zweiten Aufgabe sollte ein Pfeil auf einen Apfel geschossen werden, der sich auf

dem Kopf eines Männchens befindet. Der Gesichtsausdruck dieses Männchens soll sich

während des Schusses von einem Lächeln, zu einer Schlangenlinie und wieder zurück zu

einem Lächeln verändern. Diese Aufgabe war schwieriger als die erste, da die Bewegung

und die Veränderung des Gesichtsausdruckes parallel stattfinden sollten, und so in der

Zeit hin- und hergesprungen werden musste. Außerdem wurden mehrere Animationsty-

pen benötigt. Die Bearbeitungszeit bei dieser Aufgabe variierte zwischen ein ein halb und

knapp neun Minuten (vgl. Abbildung 6.16c). Die kürzeste Zeit benötigte der Interaktions-

designer, der auch zuvor schon Animationsprogrammen gearbeitet hatte. Am längsten

brauchte eine Probandin, die sich scheinbar nur wenig mit Computern auskannte und nur

sehr zögerlich die Anwendung bediente.

a) Ich bin damit zufrieden, wie einfach ich die

Aufgabe erledigen konnte.

b) Ich bin mit dem Zeitaufwand zufrieden, mit

dem ich die Aufgabe erledigen konnte.

c) Benötigte Zeit

in Minuten

Abbildung 6.16: Bewertung und Zeitaufwand der zweiten Aufgabe

Die Schwierigkeit an dieser Aufgabe lag zunächst darin, die einzelnen Schritte der Anima-

tion zu identifizieren. Hier gab es unterschiedliche Strategien für die Vorgehensweise. Die

meisten Probanden animierten zunächst den Pfeil, dann den Pfeil und den Apfel zusam-

men und veränderten zuletzt den Gesichtsausdruck des Männchens. Einige Probanden

entschieden sich dazu, den Mund des Männchens auszublenden, andere Probanden ra-

dierten diesen weg. Es wurde zudem versucht, die Form des Mundes zu manipulieren,

indem an diesem gezogen wurde. Die Verzerrung von Formen wird allerdings nicht von

der Anwendung unterstützt. Der lachende Mund wurde zu einem späteren Zeitpunkt

entweder wieder mithilfe der Erscheinen-Animation eingeblendet oder ein neuer Mund

wurde gezeichnet. Eine Probandin entschied sich dazu, die Bewegung des Pfeiles und die

Veränderung des Mundes jeweils abwechselnd zu animieren.

1 2

1 2

0

2

4

6

-3 -2 -1 0 1 2 3

M=1,50; SD=1,38

1 2

3

0

2

4

6

-3 -2 -1 0 1 2 3

M=1,67; SD=1,49

M=5,88min SD=2,86min

Page 82: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 73

0 3 6 9 12 15

Um den richtigen Zeitpunkt für die Veränderung des Mundes zu finden, gab es ebenfalls

verschiedene Strategien. Oftmals wurde die Animation komplett abgespielt, um den Zeit-

punkt zu erfassen und um dann nach der Wiedergabe direkt an die Stelle zu springen

oder den Slider dorthin zu verschieben. Manche Probanden sprangen mit dem Slider an

mehrere Stellen, einige Probanden verschoben auch direkt den Slider und betrachteten

dabei den Fortlauf der Animation.

Aufgrund der erhöhten Schwierigkeit der zweiten Aufgabe waren die Probanden mit der

Einfachheit und dem Zeitaufwand, mit dem sie die Aufgabe erledigen konnte, weniger

zufrieden als in der ersten Aufgabe. Die Bewertungen waren jedoch trotzdem noch posi-

tiv, mit Ausnahme der Bewertung einer Probandin. Sie machte einen kleinen Fehler, in-

dem sie die Zeichnung des lachenden Mundes aufzeichnete. Hätte sie diesen Fehler nicht

gemacht, wäre sie mit ihrer Animation bereits nach einer Minute und fünfzig Sekunden

fertig geworden. Da sie diesen Schritt nicht rückgängig machen konnte und dann so unzu-

frieden mit ihrer Animation war, löschte sie immer wieder Teile der Animation und be-

gann diese nochmal neu. Zudem stieß sie noch auf einen Anwendungsfehler beim Radie-

ren, der sie noch zusätzlich verwirrte. Dadurch benötigte sie fast neun Minuten für diese

Aufgabe und bewertete infolgedessen deren Einfachheit und Zeitaufwand schlechter.

6.2.3.4 DRITTE AUFGABE

Die dritte Aufgabe besaß die höchste Komplexität, um die Möglichkeiten der Anwendung

möglichst komplett auszunutzen. In dieser Aufgabe sollte die Bedienung eines Tablets

nachgestellt werden. Mithilfe digitaler Hände soll zunächst eine Linie gezeichnet und im

Anschluss kleinskaliert werden. Die Hände sollen zudem bei jeder Berührung des Bild-

schirms ein wenig rotiert werden, ohne dass die Zeit in der Animation weiterläuft. Die

Probanden empfanden diese Aufgabe als schwierig zu lösen, was sich ebenfalls in der

Zufriedenheit der Einfachheit und des Zeitaufwands auswirkte. Trotz der Schwierigkeit

konnten noch leicht positive Ergebnisse erzielt werden. Die Bearbeitungszeit variierte

von vier ein viertel bis vierzehn ein viertel Minuten. Auch hier stachen wie in der Aufgabe

zuvor der Interaktionsdesigner durch seine Schnelligkeit, sowie die unerfahrene Nutzerin

durch ihre Langsamkeit hervor.

a) Ich bin damit zufrieden, wie einfach ich die

Aufgabe erledigen konnte.

b) Ich bin mit dem Zeitaufwand zufrieden, mit

dem ich die Aufgabe erledigen konnte.

c) Benötigte Zeit

in Minuten

Abbildung 6.17: Bewertung und Zeitaufwand der dritten Aufgabe

2

4

0

2

4

6

-3 -2 -1 0 1 2 3

M=0,67; SD=0,47

1

3

1 1

0

2

4

6

-3 -2 -1 0 1 2 3

M=0,16; SD=1,21

M=10,19min SD=3,28min

Page 83: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 74

Bei der dritten Aufgabe begannen zunächst alle Probanden, die gezeichnete Hand auf das

Tablet zu verschieben. Vielen war bewusst, dass sie die Hand an dieser Stelle rotieren

mussten, ohne dass die Aufnahme aktiv war. Deren Rotation wurde von den Probanden

anfangs noch durchgeführt, im weiteren Verlauf der Animation allerdings oft vergessen.

Dies ist jedoch in Ordnung, da das Prinzip der Rotation ohne Aufnahme verstanden wur-

de. Ebenfalls wurde nach einer Rotation oftmals vergessen, dass dieser Animationstyp

noch ausgewählt wurde. Mehrmals versuchten die Probanden bei aktiver Rotation die

Elemente zu verschieben, was allerdings nicht funktionierte. Ebenfalls entfiel den Pro-

banden mehrmals, ob der Aufnahmemodus gerade aktiv war oder nicht. Auch hierdurch

entstanden Fehler und da keine Rückgängig-Funktion verfügbar ist, mussten die Anima-

tionen daraufhin gelöscht oder überschrieben werden. Diese kleinen Fehler kosteten die

Probanden immer wieder Zeit.

Die meisten Probanden animierten für die Zeichnung der blauen Linie zunächst die Hand

und zeichneten erst im Anschluss die blaue Linie. Eine Probandin versuchte hierfür im

Wiedergabemodus die blaue Linie zu zeichnen, um sich an der Hand zu orientieren. Auf-

nahmen im Wiedergabemodus werden allerdings bislang nicht von der Anwendung un-

terstützt. Ein anderer Proband, der bei den vorherigen Aufgaben kaum Probleme mit der

Erstellung von Animationen hatte, hatte größere Probleme mit diesem Teil der Animati-

on. Er erstellte immer wieder einzelne Animationen hintereinander bzw. schaute sich die

Animation zur Kontrolle nochmals an. Die Animation führt er stets an deren Ende fort

und beachtete die Zeit, an der ein Animationsschritt erfolgen sollte, überhaupt nicht

mehr. Außerdem erstellte er einen Teil der blauen Linie und verschob diesen dann im

Anschluss, statt die Linie zeitlich parallel zur Bewegung der Hand zu zeichnen. Am Ende

gelang es jedoch auch ihm, die Animation nachzustellen. Mit der abschließenden Skalie-

rung hatten die wenigsten Probanden Probleme.

6.2.3.5 BEOBACHTUNGEN UND ANREGUNGEN DER TEILNEHMER

Während der Bearbeitung der Aufgaben konnten verschiedene Verhaltensweisen öfter

beobachtet werden. Hierzu zählte beispielsweise die Auswahl des Animationstyps direkt

bevor eine Animation ausgeführt wurde. Da wie bereits beschrieben die Schaltflächen zur

Auswahl eines Animationstyps auch deselektiert werden kann, geschah dies versehent-

lich, wenn der Animationstyp zuvor schon selektiert war. In diesem Fall wird keine Ani-

mation aufgezeichnet, auch wenn die Bewegung durchgeführt wird, was zu Verwirrung

bei den Probanden führte. Ebenfalls zu Schwierigkeiten führten die Animationstypen

Rotation und Skalierung, welche in der dritten Aufgabe verstärkt genutzt wurden. Oftmals

vergaßen die Probanden, dass diese Animationstypen noch aktiv waren und versuchten

die Elemente zu verschieben, was allerdings vom Prototyp nicht unterstützt wird. Zudem

wurde bei den Multi-Touch-Gesten bereits eine Animation aufgezeichnet, wenn lediglich

ein Finger den Bildschirm berührte. Hierdurch lief die Zeit weiter und die Animationen

konnten nicht so gut zeitlich aufeinander abgestimmt werden, was ein Proband bemän-

gelte. Daher wurde von Probanden einerseits angeregt, die Translation zu den Animati-

onstypen Rotation und Skalierung hinzuzufügen, andererseits die Aufnahme erst dann zu

starten, wenn sich zwei Finger auf der Oberfläche befinden. Ebenfalls wurde eine unpro-

Page 84: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 75

portionale Skalierung gewünscht, also eine Skalierung, die unabhängig Höhe und Breite

eines Elements verändert und es gegebenenfalls verzerren kann. Beobachtet werden

konnte zudem, dass der Prototyp nicht immer optimal auf die Gesten zur Rotation und

Skalierung eines Elements reagierte. Hier kann der Algorithmus zur Erkennung der Ges-

ten noch weiter optimiert werden.

Auch der Aufnahmeknopf erweckte nicht genügend Aufmerksamkeit. Mehrfach vergaßen

die Probanden, die Aufnahme zu aktivieren bzw. dass die Aufnahme noch aktiviert war.

Der Aufnahmemodus wird durch ein leichtes Pulsieren des Aufnahmeknopfes angedeu-

tet. Mehrere Probanden wurden im Interview gefragt, ob sie sich hier mehr Feedback

wünschten, was sie mit der Begründung verneinten, dass es eigentlich schon klar sei, sie

nur nicht daran gedacht hätten. Trotz dieser Aussagen könnte an dieser Stelle mehr

Feedback solchen Fehlern vorbeugen.

Aufgrund der nicht vorhandenen Rückgängig-Funktion war es häufig von Nöten, dass

Animationen wieder gelöscht werden. Da das Löschen einzelner Animationen nicht von

der Anwendung unterstützt wird, waren die Probanden gelegentlich ahnungslos, wie sie

mit dieser Situation umgehen sollten. Obwohl in der Einführungsphase erklärt wurde,

dass alle Animationen eines selektierten Elements gelöscht und dass Animationen eben-

falls überschrieben werden können, erinnerten die Probanden sich häufig nicht mehr

daran. Aus diesem Grund wurde während der Studie darauf hingewiesen, falls die Pro-

banden fragten. Das Überschreiben von Animationen führte gelegentlich zu Verwirrun-

gen. Insbesondere wenn eine Animation aufgespalten wurde, und ein Teil der bereits

existierenden Animation am Ende noch weiter vorhanden war (vgl. Abbildung 6.18), war

dies von den Probanden nicht immer so beabsichtigt. Der Großteil der Probanden

wünschte sich an dieser Stelle mehr Bearbeitungsmöglichkeiten für die Animationen. So

wurden das Löschen einzelner Zeitabschnitte und Animationen, das Hinzufügen einzelner

Elemente zu Animationen, sowie das Verschieben einer Animation in der Zeit genannt.

Bei Beobachtungen zeigte sich, dass ebenfalls die Möglichkeit zur Aufzeichnung von Ani-

mationen im Aufnahmemodus angeboten werden sollte.

Abbildung 6.18: Das Aufspalten von Animationen führte gelegentlich zu Verwirrungen

Die Probanden verstanden ohne Probleme, dass sie zu einem bestimmten Zeitpunkt et-

was zeichnen oder verändern können und dies dann in die Animation aufgenommen

wird. Dies zeigte sich am Beispiel des Mundes in der zweiten Aufgabe. Jedoch achteten sie

nicht immer auf den richtigen Zeitpunkt, wenn sie Änderungen durchführten. Für den

Interaktionsdesigner war das Prinzip des Zeichnens zu einem bestimmten Zeitpunkt und

dem damit verbundenen Erscheinen des Elements zu diesem Zeitpunkt kein geläufiges.

Er war es gewöhnt, zuerst die Elemente zu zeichnen und im Anschluss den Zeitpunkt

Animation 1

Animation 2 Animation 1‘

Bereits existierende Animation

Neue Animationen, die vor oder mit bisherigen beginnen, jedoch während diesen enden,

überschreiben diese bis zu deren Ende

t

Page 85: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 76

festzulegen, zu dem diese erscheinen sollen. Er schlug vor, alternativ einen gesonderten

Bereich einzurichten, in dem gezeichnet werden kann ohne über den Zeitpunkt nachzu-

denken.

Die Selektion führte bei einigen wenigen Probanden zu Schwierigkeiten. Eine Probandin

selektierte ein Element und versuchte es zu verschieben, klickte aber hierfür mehrmals

auf einen Punkt außerhalb der Selektion. Zudem kam es bei der Rotation und Skalierung

gelegentlich dazu, dass die Selektion deaktiviert wurde. Hier muss der Algorithmus für

die Deselektion von Elementen noch verbessert werden. Ähnlich wie bei der ersten Stu-

die traten gelegentlich Probleme mit ausgeblendeten Ebenen auf. Hier führten Eingaben

im Zeichenfeld zwar nicht zu Verschiebungen des Objekts, da es keine ZOIL-Landschaft

gab, dafür passierte allerdings gar nichts, was die Probanden ebenso sehr verwirrte. Ein

weiterer beobachteter Umstand, war die seitliche Taste des Stylus des Tablet-PCs, mit der

in anderen Anwendungen Aktionen wie ein Rechtsklick ausgelöst werden können. Inner-

halb des Prototyps hingegen hatte diese Taste keine Funktion, führte aber gelegentlich zu

Verwirrungen und Fehleingaben. Mehrere Probanden versuchten Zwei-Finger-Gesten

mithilfe der gleichzeitigen Nutzung von Touch und Stift durchzuführen, was technisch

allerdings nicht von dem genutzten Tablet-PC unterstützt wird. Sobald der Stylus aktiv

ist, werden keine Touch-Eingaben mehr an die Anwendung weitergeleitet.

Auf Nachfrage nach allgemeinen Verbesserungsvorschlägen für die Anwendung gab es

ebenfalls Anregungen. Bezüglich der Zeichenfunktionen wünschten sich die Probanden

mehr Farben und die Möglichkeit Formen einzufügen, wie etwa einen Kreis. Zudem gab

es den Vorschlag, dass Elemente mit einer Farbe ausgefüllt werden könnte, ähnlich wie es

von anderen Grafikprogrammen mithilfe des Füllwerkzeugs bekannt ist. Manche Proban-

den zogen beim Versuch ein Template in eine Zeichenfläche zu ziehen das Template

mehrmals hinein. Ihnen war aus einem Mangel an Feedback nicht klar, dass sie das Temp-

late bereits hinzugefügt hatten. Eine weitere Probandin bemängelte zu wenig Feedback

bei Drag & Drop-Aktionen. Sie regte an, dass wenn beispielsweise eine Ebene verschoben

werde, diese am Finger hängen bleiben solle, und nicht plötzlich nach oben oder unten

springen solle.

6.2.3.6 BEWERTUNG DER ANIMATIONSFUNKTIONALITÄTEN

Auch in dieser Studie hatten die Probanden die Möglichkeit, die Animationsfunktionalitä-

ten anhand des selbsterstellten Fragebogens zu bewerten. Im Folgenden werden dessen

Ergebnisse vorgestellt.

Alle Probanden konnten der Aussage voll und ganz zustimmen, dass sie verstanden ha-

ben, wie Animationen erstellt werden können (M=3,00; SD=0,00; vgl. Abbildung 6.19a).

Auch die Leichtigkeit der Erstellung von Animationen (M=2,17; SD=0,90; vgl. Abbildung

6.19b), sowie die Animationssteuerung (M=2,67; SD=0,47; vgl. Abbildung 6.19c) wurden

sehr positiv bewertet. Bei den einzelnen Animationstypen wurden ebenfalls gute Zufrie-

denheitswerte von 2,0 und mehr erzielt (vgl. Abbildung 6.19d-h). Einzig herausgestochen

war hierbei die Erscheinen- und Verschwinden-Animation, die lediglich von vier Perso-

Page 86: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 77

nen bewertet wurden. Diese benutzten in den Szenarien statt dieser Animationstypen die

Möglichkeit, Elemente wegzuradieren und neu zu zeichnen.

a) Ich habe verstanden, wie Animationen

erstellt werden können.

b) Die Erstellung von Animationen ist mir

leicht gefallen.

c) Die Animationssteuerung (Aufnahme /

Abspielen, …) ist verständlich.

d) Wie hat Ihnen die Manipulationsanima-

tion gefallen?

e) Wie hat Ihnen die Skalierungsanimation

gefallen?

f) Wie hat Ihnen die Rotationsanimation

gefallen?

g) Wie hat Ihnen die Erscheinen- bzw. Ver-

schwinden-Animation gefallen?

h) Wie hat Ihnen die Zeichenanimation ge-

fallen?

Abbildung 6.19: Bewertung der Erstellung von Animationen, der Animationssteuerung und

der einzelnen Animationstypen

Bei der Bewertung der Unterstützungsmöglichkeiten für die Animationserstellung waren

die Ansichten der Probanden nicht eindeutig positiv. Die Animationsvorschaubilder un-

terstützten zwar grundsätzlich die Probanden, verwirrten sie gelegentlich jedoch auch,

was sich darin zeigte, dass Probanden versuchten, diese wegzuradieren. Die Animations-

farben wurden in dieser Studie nicht direkt benötigt und nur gelegentlich genutzt. Eine

Probandin bewertete diese als schlecht unterstützend, weil sie keinen Sinn in diesen sah.

Auch die Andeutung nicht sichtbarer Elemente wurde nicht von allen Probanden genutzt,

und von einer Probandin als schlecht unterstützend bewertet. Diese Probandin hatte

6

0

2

4

6

-3 -2 -1 0 1 2 3

M=3,00; SD=0,00

2 1

3

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,17; SD=0,90

2

4

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,67; SD=0,47

1 2

3

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,33; SD=0,75

1 1

4

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,50; SD=0,76

1 1 1

3

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,00; SD=1,15

1 1 2

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,25; SD=0,83

1 2

3

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,33; SD=0,74

Page 87: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 78

meistens die Option „Zeige Unsichtbares“ deaktiviert. Die Animationszeitleiste fanden alle

Probanden gut oder sehr gut verständlich (M=2,67; SD=0,47; vgl. Abbildung 6.20d).

a) Die Animationsvorschaubilder im

Zeichenbereich haben mich unterstützt.

b) Die Animationsfarben haben mich

unterstützt.

c) Die Andeutung von nicht sichtbaren Objek-

ten im Zeichenbereich hat mich unter-

stützt.

d) Die Animationszeitleiste ist

verständlich.

Abbildung 6.20: Bewertung der Unterstützungsfunktionen

6.2.3.7 GESAMTEINDRUCK DES PROTOTYPS MIT REDUZIERTEM FUNKTIONSUMFANG

Insgesamt wurde auch der Animationsprototyp mit reduziertem Funktionsumfang als

benutzungsfreundlich eingestuft. Der durchschnittliche System Usability Scale-Wert von

82,5 (SD=8,04; vgl. auch Boxplot in Abbildung 6.21) entspricht laut Bangor et al. (2009)

ebenfalls einem guten bis exzellenten Wert.

Abbildung 6.21: Bewertung des Systems anhand des System Usability Scales

Die Probanden äußerten sich positiv über den verständlichen und klar abgetrennten

Aufbau der Anwendung, sowie deren logische Funktionsweise. Eine Probandin merkte

sogar an, dass sie denke, dass man ohne Einführung mit dem Programm, sprich mit der

Erstellung von Animationen, gut klarkommen könne. Auch bei dieser Studie führten die

Probanden am Ende an, dass die Benutzung der Anwendung Spaß mache, „schon witzig“

und „ja irgendwie cool“ sei. Zudem äußerte sich eine Probandin, dass sie es gut finde, dass

die Anwendung Animationen so schnell aufzeichne, wie man eine Bewegung ausführt.

Weniger gut war hingegen, dass es keine Rückgängig-Funktion gab. Genau wie bei der

ersten Studie wurde diese Funktion vermisst und oft kam ein erhöhter Zeitaufwand ledig-

lich dadurch zustande, dass die Probanden versuchten, kleine Fehler zu verbessern.

1 1 1

3

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,00; SD=1,15

2 1 1

0

2

4

6

-3 -2 -1 0 1 2 3

M=0,25; SD=2,27

1 1 2

0

2

4

6

-3 -2 -1 0 1 2 3

M=1,50; SD=2,06

2

4

0

2

4

6

-3 -2 -1 0 1 2 3

M=2,67; SD=0,47

0 10 20 30 40 50 60 70 80 90 100

SUS

Page 88: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 79

6.2.4 DISKUSSION

In dieser Studie wurden gezielt die Animationsfunktionalitäten des Prototyps auf deren

Gebrauchstauglichkeit hin untersucht. Die Studie zeigte, dass die Probanden bereits nach

kurzer Zeit komplexe Animationen erstellen konnten. Der ebenfalls gute Wert des System

Usability Scales weist darauf hin, dass nicht nur die komplette Anwendung inklusive des

kollaborativen Teils, sondern ebenso der Teil zur Erstellung von Animationen eine gute

Gebrauchstauglichkeit besitzt.

Die Probanden erhielten bei dieser Studie eine zeitlich ebenso lange Einführung in die

Anwendung, wie bei der ersten Studie. Durch den begrenzten Funktionsumfang konnte

hierbei allerdings gezielter auf die Animationsfunktionalität eingegangen werden. Daraus

resultierte, dass die Probanden sich auch im weiteren Verlauf der Studie intensiver mit

der Animationskompetente beschäftigen und ein besseres Verständnis für die Anwen-

dung aufbauen konnten. Dies wirkte sich ebenfalls auf den Fragebogen zur Bewertung

der Animationsfunktionalität aus, der bei beiden Studien durchgeführt wurde. Tabelle 6.7

zeigt die Vergleichswerte der Studien, welche im Anschluss diskutiert werden.

Gesichtspunkt 1. Studie 2. Studie Unterschied

M SD M SD M SD

Verständnis Erstellung 2,33 1,25 3,00 0,00 +0,67 -1,25

Leichtigkeit Erstellung 1,89 1,29 2,17 0,90 +0,28 -0,39

Verständlichkeit Steuerung 1,78 1,03 2,67 0,47 +0,89 -0,56

Manipulationsanimation 1,33 1,49 2,33 0,75 +1,00 -0,74

Skalierungsanimation 2,00 1,56 2,50 0,76 +0,50 -0,80

Rotationsanimation 2,25 1,23 2,00 1,15 -0,25 -0,08

Erscheinen / Verschwinden 2,50 1,50 2,25 0,83 -0,25 -0,67

Zeichenanimation 2,80 0,67 2,33 0,74 -0,47 +0,07

Unterstützung durch

Vorschaubilder 1,56 1,17 2,00 1,15 +0,44 -0,02

Unterstützung durch

Animationsfarben 1,75 1,41 0,25 2,27 -1,50 +0,86

Unterstützung durch Andeutung

nicht sichtbarer Objekte 1,86 1,25 1,50 2,06 -0,36 +0,81

Verständlichkeit Zeitleiste 2,11 0,87 2,67 0,47 +0,56 -0,40

Tabelle 6.7: Vergleich der Fragebogenwerte für die Animationsfunktionalität

Betrachtet man das Verständnis bezüglich der Erstellung von Animationen, so sind sich in

der zweiten Studie alle Probanden einig, dass sie voll und ganz verstanden haben, wie

Animationen erstellt werden können. Hier nahm das Verständnis im Vergleich zur ersten

Studie stark zu und die Standardabweichung reduzierte sich auf null. Ebenfalls konnte

sich die Leichtigkeit der Erstellung von Animationen leicht verbessern. Insbesondere die

Verständlichkeit zur Steuerung von Animationen und die Bewertung der Manipulations-

Page 89: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 80

animation konnten sich um fast einen Bewertungspunkt verbessern. Die Rotationsanima-

tion, die Erscheinen- und Verschwinden-Animation, sowie die Zeichenanimation ver-

schlechterten sich leicht, hatten jedoch noch immer sehr gute Bewertungen mit Werten

von 2,0 und besser. Insbesondere die Unterstützung durch Animationsfarben, sowie die

Andeutung nicht sichtbarer Elemente schnitten in dieser Studie schlechter ab, hatten

allerdings auch höhere Standardabweichungen. Im Gegenzug verbesserte sich die Bewer-

tung zur Unterstützung der Vorschaubilder. Dies könnte unter anderem daran liegen,

dass die Vorschaubilder an und für sich hilfreich sein können, sie bei Präsentationen die

Probanden aber zumeist störte. Ein standardmäßiges Deaktivieren der Vorschaubilder

bei Präsentationen könnte sich in einer besseren Bewertung der Funktionalität auswir-

ken. Als letzter untersuchter Punkt ist die Verständlichkeit der Zeitleiste zu nennen, wel-

che sich ebenfalls in dieser zweiten Studie um mehr als einen halben Bewertungspunkt

verbessern konnte.

Insgesamt kann gesagt werden, dass die Animationsfunktionalitäten mit Ausnahme der

Unterstützungsfunktionen in der zweiten Studie exzellente Bewertungen mit Werten

besser als 2,0 erhielten. Die Standardabweichung nahm bei fast allen Bewertungen ab,

was für eine einheitlichere Meinung der Probanden spricht. Dies könnte dadurch zustan-

de kommen, dass alle Probanden mehr Zeit hatten, sich mit dem Prototypen auseinander

zu setzen und dass sie zudem alle die gleichen Aufgaben bearbeiteten.

Durch die gezielte Untersuchung der Animationsfunktionalitäten, konnte Verbesserungs-

potential aufgedeckt werden. Die durch Beobachtung und Interview erkannten Punkte

werden in Tabelle 6.8 zusammengefasst. Insbesondere im Bereich der nachträglichen

Bearbeitung von Animationen gibt es viel Verbesserungspotential. Aufgrund des Proto-

typcharakters der Anwendung wurde lediglich eine rudimentäre Unterstützung hierfür

angeboten, die das Löschen aller Animationen selektierter Elemente umfasste. Stattdes-

sen wäre es wünschenswert, wenn einzelne Animationen oder Zeitabschnitte gelöscht

werden könnten. Das Verschieben von Animationen auf der Zeitleiste, sowie das Be-

schleunigen oder Verlangsamen einer bereits aufgezeichneten Animation wären ebenfalls

von Vorteil. Zudem könnten Elemente im Nachhinein zu einer Animation hinzugefügt

werden, falls diese vorher vergessen wurden oder noch nicht existent waren.

Den Probanden entstand durch die nicht vorhandenen Möglichkeiten einen vorherigen

Stand der Arbeit wiederherzustellen (Rückgängig-Funktion) oft durch kleine Fehler ein

erhöhter Zeitaufwand. Zu diesen kleinen Fehlern zählen vor allem das Nichtbeachten des

aktuellen Animationstyps oder Aufnahmemodus, sowie das Deaktivieren des Animations-

typs. Neben der Implementierung der Rückgängig-Funktion könnte sich ebenfalls mehr

Feedback bezüglich des aktuellen Modus empfehlen, auch wenn mehrere Probanden auf

die Frage, ob sie mehr Feedback benötigten mit nein antworteten. Eine Probandin merkte

jedoch an, dass sie nur schlecht sehen konnte, welcher Button aktuell selektiert sei.

Die Durchführung dieser zweiten Studie hat weitere interessante Erkenntnisse zu Tage

geführt. Sie hat gezeigt, dass auch von Anfängern nach kurzer Einarbeitungszeit bereits

komplexe Animationen erstellt werden können. Die Probanden stuften das System als

benutzungsfreundlich ein und gaben außerdem an, dass dessen Benutzung Spaß mache.

Page 90: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 81

Schwächen der Anwendung wurden aufgezeigt und weiteres Verbesserungspotential

aufgedeckt. Im nun folgenden Kapitel werden Teile dieses Verbesserungspotentials in

Redesigns umgesetzt.

Bereich Verbesserungspotential

Zeichen-

funktionen

Mehr Zeichenfarben

Einfügen von Formen (Kreise, Vierecke, …)

Füllwerkzeug zum Ausfüllen von Flächen

Besseres Feedback bei ausgeblendeten Ebenen

Besseres Feedback beim Einfügen von Templates

Algorithmus zur Deselektion verbessern (bei Multi-Touch-Gesten)

Animations-

funktionen

Animationstypbuttons sollten nicht deselektierbar sein

Mehr Feedback bezüglich des aktiven Animationstyps

Mehr Feedback bezüglich des Aufnahmemodus

Aufnahme auch im Wiedergabemodus ermöglichen

Rotation / Skalierung optimieren bzgl. Aufnahme, Translation,

Erkennung

Unproportionale Skalierung (Verzerrung) ermöglichen

Getrennte Bereiche für das Zeichnen und Animieren von Elementen

Nachträgliche Bearbeitung von Animationen ermöglichen

Anwendungsfehler beim Radieren beheben (Bug)

Steuerung der

Anwendung

Besseres Feedback bei Drag & Drop-Aktionen: Objekte bleiben am

Finger „kleben“

Rückgängig / Wiederholen

Seitliche Taste des Stylus, falls vorhanden, komplett deaktivieren

Gleichzeitige Stift- und Toucheingabe ermöglichen

Tabelle 6.8: Zusammenfassung des Verbesserungspotentials der zweiten Studie

6.3 REDESIGNS Anhand der in den Nutzerstudien aufgedeckten Schwachstellen des Prototyps und der

Äußerungen der Probanden werden im Folgenden mehrere Verbesserungsvorschläge

und Redesigns beschrieben. Diese umfassen unter anderem die Werkzeuge zur Erstellung

von Storyboards, die Ein- und Umsortierung von Einzelbildern, sowie die Bearbeitung

von Animationen.

Mehrere Verbesserungsvorschläge zur Benutzungsoberfläche der Anwendung werden in

Abbildung 6.22 vereint. Im oberen Reiterbereich werden die verschiedenen Schaltflächen

für Zeichenstiftdicke, und -farbe zusammengefasst. Ein kleines Dreieck in deren rechten

unteren Bereich deutet an, dass die Menüs aufgeklappt werden können. Tippt man mit

dem Finger auf die Schaltfläche zur Zeichenstiftdicke, so öffnet sich ein Slider, mit dem

diese dynamisch eingestellt werden kann. Bei den Zeichenstiftfarben werden nach wie

vor verschiedene vordefinierte Farben angeboten. Dank eines Auswahlfensters kann aber

Page 91: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 82

auch jede weitere gewünschte Farbe ausgewählt werden. Als nächstes folgen das Füll-

werkzeug, mithilfe dessen eine Fläche eingefärbt werden kann, sowie der Radierer. Ne-

ben dem Lassowerkzeug werden Schaltflächen zum Ausschneiden, Kopieren und Einfü-

gen, sowie zum Löschen von Elementen dargestellt. Nun ist es nicht mehr nur möglich,

Texte und Bilder hinzuzufügen, sondern auch vordefinierte Formen, wie Rechtecke und

Kreise lassen sich einfügen. Am rechten Rand der Reiter wird stets das aktuell ausgewähl-

te Werkzeug dargestellt, so dass dieses auch über mehrere Reiter hinweg sichtbar ist.

Innerhalb eines Einzelbildes oder eines Storyboards besitzen Nutzer globalen Zugriff auf

die „Rückgängig“- und „Wiederholen“- Schaltflächen, welche im oberen Bereich angeord-

net sind. Die Ebenen erhalten ebenfalls weitere Funktionen: sie lassen sich nun benennen

und zusammenfassen.

Abbildung 6.22: Redesign-Vorschlag zur Benutzungsoberfläche

Hinsichtlich der Ebenen zeigten sich Probleme, falls eine Ebene ausgeblendet und fokus-

siert war und der Nutzer zudem versuchte, auf diese Ebene zu zeichnen oder sie zu modi-

fizieren. In diesem Fall reagierte die Anwendung bisher mit der Verschiebung der Einzel-

zeichnung bzw. des Storyboards. Zukünftig könnte an dieser Stelle ein halbtransparentes

Overlay über die Zeichnung gelegt werden, auf dem ein Hinweis bezüglich der ausgeblen-

deten Ebene dargestellt wird (vgl. Abbildung 6.23a). Bezüglich des fehlenden Feedbacks

beim Erstellen eines Templates könnte, ähnlich wie beim Veröffentlichen derer, ein Hin-

weis direkt auf dem Vorschaubild der Zeichnung erscheinen. Dieses blinkt mehrmals, um

darauf hinzuweisen, dass ein Template erfolgreich angelegt wurde.

Page 92: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 83

Abbildung 6.23: Redesigns bezüglich der Ebenen

(a) bei ausgeblendeter Ebene (b) beim Abspeichern eines Templates

Bei der ersten Nutzerstudie fiel außerdem auf, dass Probanden versuchten, Einzelzeich-

nungen direkt an eine bestimmte Stelle im Storyboard einzusortieren. Dies könnte umge-

setzt werden, indem die Einzelzeichnung auf das Storyboard gezogen wird und dort einen

Moment festgehalten wird. Eine Linie könnte dann erscheinen und dem Nutzer die Posi-

tion andeuten, an der die Einzelzeichnung einsortiert werden würde, falls er diese los-

lässt. Wird sie innerhalb des Storyboards verschoben, so würde die Position sich dyna-

misch anpassen. Dieses Verhalten ist in Abbildung 6.24 abgebildet. Analog hierzu könnte

auch das Umsortieren der Frames eines Storyboards erfolgen. Ein Frame wird so lange

berührt, bis die Anwendung dem Nutzer anhand einer Linie signalisiert, dass er nun den

Frame im Storyboard verschieben kann. Lässt er den Frame los, so wird dieser umsor-

tiert.

Abbildung 6.24: Einsortieren von Einzelzeichnungen in Storyboards

Insbesondere im Bereich der Animationen ist eine Erweiterung des Prototyps empfeh-

lenswert. Die Veränderung des Zeitpunkts und der -dauer von Animationen, sowie das

Löschen einzelner Animationen wurden mehrfach von den Probanden als fehlende Funk-

tionalität genannt. Ebenfalls ist weiteres Feedback bezüglich des Aufnahmemodus von

Nöten, da dieser, wie sich in der Studie gezeigt hat, oft vergessen oder ignoriert wurde.

Fügt man dem Einzelbild bzw. dem Storyboard einen roten Rand hinzu, wenn dieses im

Aufnahmemodus ist, wird den Probanden eine eindeutige und gut sichtbare Rückmel-

dung gegeben (vgl. Abbildung 6.25a). Die Schaltflächen der einzelnen Animationstypen

dürfen nicht mehr deselektierbar sein, sondern sollten sich wie normale Toggle-Buttons

verhalten.

This layer is not visible.

If you want to modify it,

please change its visibility

a b

Page 93: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

E v a l u a t i o n | 84

Abbildung 6.25: (a) Verdeutlichung des Aufnahmestatus (b) Möglichkeit zur Selektion einer

Animation (c) Animationsbereich zum Bearbeiten von Animationen

Um einzelne Animationen bearbeiten zu können, stellt sich zunächst die Frage, wie der

Nutzer die zu bearbeitende Animation auswählen kann. Möglich wäre die Selektion einer

Animation analog zu der eines Einzelstriches. Das Lasso würde in diesem Fall die Andeu-

tung der Animation selektieren (vgl. Abbildung 6.25b). Alternativ oder auch zusätzlich

könnte ein Animationsbereich hinzugefügt werden, der ähnlich wie der aus Microsoft

Power Point aufgebaut ist und in Abbildung 6.25c exemplarisch dargestellt wird. Er könn-

te als zusätzlicher Reiter rechts von der Zeichenfläche hinzugefügt werden, wo bisher die

Ebenen dargestellt werden. Die einzelnen Animationen ließen sich in diesem Bereich

auflisten und es könnte angedeutet werden, um was für einen Animationstyp es sich je-

weils handelt, welche Objekte animiert werden und zu welcher Zeit sie stattfinden. Nach

der Selektion einer Animation würde diese auf der Zeitleiste unter dem Zeichenbereich

hervorgehoben werden. Weitere Optionen zum Verändern dieser würden angeboten.

Elemente könnten zu einer Animation hinzugefügt werden, sie ließe sich in der Zeit ver-

schieben oder auch deren Dauer verändern. Auch das Löschen einer Animation wäre

möglich.

Dieser Abschnitt stellte verschiedene Vorschläge zur Umgestaltung und Verbesserung der

Anwendung vor. Nach deren Implementierung sollten auch diese Ideen auf deren Benut-

zungsfreundlichkeit hin untersucht werden.

a

b

c

Page 94: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

F a z i t u n d A u s b l i c k | 85

7 FAZIT UND AUSBLICK

In dieser Arbeit wurde ein Interaktionskonzept zur Erstellung von Animationen für Sto-

ryboards in frühen Designphasen entwickelt und evaluiert. Insbesondere zu Beginn des

Designprozesses ist es wichtig, Ideen schnell und problemlos externalisieren zu können.

Eine Reihe weiterer Eigenschaften wurden zu Anfang dieser Arbeit beschrieben, welche

frühe Designrepräsentationen innehaben sollten. Wie unter anderem von Löwgren

(2004), sowie Fallman und Moussette (2011) festgestellt wurde, ist es schwierig mit kon-

ventionellen Designartefakten neue, mobile und interaktive Konzepte auszudrücken.

Animation bietet hierfür ein geeignetes Ausdrucksmittel und unterstützt, ebenso wie

Storyboards, die Kommunikation innerhalb eines Designteams. Bei der Erstellung ani-

mierter Storyboards sollte jedoch beachtet werden, dass diese die typischen Eigenschaf-

ten eines Sketches besitzen. Nach der Untersuchung typischer Elemente, Varianten und

Prozesse von Storyboarding und Animation wurde eine umfangreiche Analyse bereits

existierender Anwendungen zur Erstellung von Storyboards und Animation durchge-

führt. Informelle Animationstools, welche nach dem Prinzip der Bewegung- bzw. Trans-

formation-durch-Beispiel agieren, wurden als geeignet zur schnellen Erstellung einfacher

Animationen erkannt, wodurch dieses Prinzip in die Anforderungen des Interaktionskon-

zepts miteinfloss. Weitere Anforderungen konnten aus den Grundlagen von Storyboar-

ding und Animation, sowie der Analyse der verwandten Arbeiten gezogen werden. Diese

boten die Grundlage für das Design des Interaktionskonzepts, welches exemplarisch in

einem Prototyp implementiert wurde. Dieser unterstützt das Zeichnen und Manipulieren

von Storyboards, sowie die Erstellung einfacher Animationen anhand verschiedener

Animationstypen wie Bewegen, Rotieren, Skalieren, Zeichnen, sowie Erscheinen und

Verschwinden. Durch die Arbeit von Hankh (2013) ist zudem die kollaborative Erstellung

animierter Storyboards möglich.

In zwei durchgeführten Nutzerstudien konnte der Prototyp erfolgreich eingesetzt und

evaluiert werden. Die erste Studie befasste sich mit der Erstellung von Storyboards im

Team. Die Probanden bearbeiteten gemeinsam eine Designaufgabe und konnten hierbei

ihrer Kreativität freien Lauf lassen. Sie waren mithilfe des Prototyps in der Lage erste

Ideen zu externalisieren, zu animieren und zu diskutieren. Eine zweite Studie untersuchte

gezielt die Benutzungsfreundlichkeit der Animationsfunktionalitäten, indem vorgegebene

Animationen nachgestellt wurden. In beiden Nutzerstudien waren die Probanden grund-

sätzlich zufrieden mit der Benutzungsfreundlichkeit der Anwendung. Das Animations-

prinzip der Transformation-durch-Beispiel wurde positiv von den Probanden aufge-

nommen und es wurde hervorgehoben, dass die Benutzung der Anwendung Spaß mache

und intuitiv sei. Der Einsatz von Animation wurde als positiv für die Kommunikation von

Ideen innerhalb eines Designteams eingeschätzt. Die Nutzerstudien legten zudem Ver-

besserungspotential offen, das teilweise in Redesigns einfloss, und welches insgesamt in

zukünftigen Versionen der Anwendung berücksichtigt werden sollte.

Page 95: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

F a z i t u n d A u s b l i c k | 86

Erreicht der Prototyp einen angemessenen Entwicklungsstand, so könnte er in einem

summativen Studiendesign mit anderen bereits existierenden Anwendungen verglichen

werden. PowerPoint würde aufgrund seiner Animationseffekte und seinen Möglichkeiten

zum Erstellen von Storyboards hierfür in Frage kommen, sowie idAnimate, da es eben-

falls das Prinzip der Transformation-durch-Beispiel verwendet. Auch könnte eine Studie

mit professionellen Interaktionsdesignern Erkenntnisse bezüglich des Nutzens von Ani-

mation bei der Ideenfindung und beim Ausdruck von Ideen in frühen Designphasen her-

vorbringen.

Page 96: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

L i t e r a t u r v e r z e i c h n i s | 87

LITERATURVERZEICHNIS

Adobe Systems Incorporated. (2013). Adobe Flash Professional CS5.5. Abgerufen am 13. Juli 2013, von http://www.adobe.com/products/flash.html

Baecker, R. M. (1969). Picture-driven animation. In Proceedings of the May 14-16, 1969, spring joint computer conference on XX - AFIPS ’69 (Spring) (S. 273). New York, New York, USA: ACM Press.

Baecker, R. M. (1970). GENESYS: An Interactive Computer-Mediated Animation System. Abgerufen am 1. August 2013, von http://www.youtube.com/watch?v=GYIPKLxoTcQ

Bailey, B. P., & Konstan, J. (2003). Are informal tools better?: comparing DEMAIS, pencil and paper, and authorware for early multimedia design. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (S. 313–320).

Bailey, B. P., Konstan, J. A., & Carlis, J. V. (2001). DEMAIS: designing multimedia applications with interactive storyboards. In Proceedings of the ninth ACM international conference on Multimedia (S. 241–250). ACM Press.

Bangor, A., Staff, T., Kortum, P., & Miller, J. (2009). Determining What Individual SUS Scores Mean : Adding an Adjective Rating Scale. Journal of Usability Studies, 4, 114–123.

Bonanni, L., & Ishii, H. (2009). Stop-motion prototyping for tangible interfaces. In Proceedings of the 3rd International Conference on Tangible and Embedded Interaction (S. 315). ACM Press.

Brooke, J. (1996). SUS-A quick and dirty usability scale. Usability evaluation in industry, 189–194.

Buxton, B. (2007). Sketching User Experiences: Getting the Design Right and the Right Design: Getting the Design Right and the Right Design. Elsevier Science.

Canemaker, J. (1999). Paper dreams: the art & artists of Disney storyboards. Hyperion.

Carroll, E., Latulipe, C., Fung, R., & Terry, M. (2009). Creativity factor evaluation: towards a standardized survey metric for creativity support. In Proceeding of the seventh ACM conference on Creativity and cognition.

Coyette, A., & Vanderdonckt, J. (2005). Computer Assisted Sketching for the Early Stages of User Interface Design. Interface.

Curtis, G., & Vertelney, L. (1990). Storyboards and Sketch Prototypes for Rapid Interface Visualization. Interface.

Davis, R. C., Colwell, B., & Landay, J. A. (2008). K-sketch: a „kinetic“ Sketch Pad for Novice Animators. In Proceeding of the twenty-sixth annual SIGCHI conference on Human factors in computing systems (S. 413–422). ACM Press.

Page 97: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

L i t e r a t u r v e r z e i c h n i s | 88

Dow, S., Saponas, T. S., Li, Y., & Landay, J. A. (2006). External representations in ubiquitous computing design and the implications for design tools. Proceedings of the 6th ACM conference on Designing Interactive systems - DIS ’06, 241.

Fallman, D., & Moussette, C. (2011). Sketching with stop motion animation. interactions, 57–61.

Finch, C. (1978). Walt Disney : sein Leben, seine Kunst (S. 457). Stuttgart: EHAPA-Verlag.

Finn, R. H. (1972). Effects of Some Variations in Rating Scale Characteristics on the Means and Reliabilities of Ratings. Educational and Psychological Measurement, 32(2), 255–265.

Finstad, K. (2010). Response Interpolation and Scale Sensitivity : Evidence Against 5-Point Scales, 5(3), 104–110.

Geyer, F. (2010). Sketching User Experiences Teil 2. Universität Konstanz.

Goldman, D. B., Curless, B., Salesin, D., & Seitz, S. M. (2006). Schematic storyboarding for video visualization and editing. ACM Transactions on Graphics, 25(3), 862.

Goldstein, E. B. (2009). Sensation and Perception. Cognitive Neuroscience The Biology of Mind.

Greenberg, S., Carpendale, S., Marquard, N., & Buxton, B. (2011). Sketching User Experiences: The Workbook (S. 262). Elsevier Science.

Haesen, M., Meskens, J., Luyten, K., & Coninx, K. (2010). Draw me a storyboard: incorporating principles & techniques of comics... Proceedings of the 24th BCS Interaction Specialist Group Conference, 133–142.

Hankh, M. (2012). Implementierung eines interaktiven Tools zur Unterstützung von Kollaboration im Kontext von Storyboarding - Technische Dokumentation zum Master Projekt. Universität Konstanz.

Hankh, M. (2013). Entwicklung und Evaluation eines Konzepts für digitale und kollaborative Kreativarbeit im Kontext von Storyboarding. Master Thesis. Universität Konstanz.

Hinman, R. (2012). The Mobile Frontier. Rosenfeld Media.

Jackel, D., Neunreither, S., & Wagner, F. (2006). Methoden Der Computeranimation. Springer.

Krueger, R. A. (1994). Focus groups: A practical guide for applied research. Review Literature And Arts Of The Americas (Bd. 22). Sage Publications.

Landay, J. A., & Myers, B. A. (2001). Sketching interfaces: toward more human interface design. Computer, 34(3), 56–64.

Page 98: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

L i t e r a t u r v e r z e i c h n i s | 89

Launchpad Toys. (2013). Toontastic. Abgerufen am 22. August 2013, von http://launchpadtoys.com/toontastic/

Lazar, J., Feng, J. H., & Hochheiser, H. (2010). Research Methods in Human-Computer Interaction. (P. Cairns & A. L. Cox, Hrsg.)Evaluation (S. 426). Wiley.

Lewis, J. R. (1991). Psychometric Evaluation of an After-Scenario Questionnaire for Computer Usability Studies: The ASQ. ACM SIGCHI Bulletin, 23(1), 78–81.

Lin, J., Newman, M. W., Hong, J. I., & Landay, J. A. (2000). DENIM : Finding a Tighter Fit Between Tools and Practice for Web Site Design. Interface, 2(1), 1 – 6.

Lorenz, L. (2011). Use of Animation in Storyboards in the Context of Interaction Design. Universität Konstanz.

Lorenz, L. (2013). Prototypische Implementierung eines Tools zur Erstellung animierter Storyboards - Technische Dokumentation zum Master-Projekt. Universität Konstanz.

Löwgren, J. (2004). Animated Use Sketches as Design Representations. interactions, 22–27.

Löwgren, J., & Stolterman, E. (2007). Thoughtful Interaction Design: A Design Perspective on Information Technology (S. 212). The MIT Press.

Masters, J. R. (1974). The Relationship between Number of Response Categories and Reliability of Likert-Type Questionnaires. Journal of Educational Measurement, 11(1), 49–53.

Matell, M. S., & Jacoby, J. (1972). Is there an optimal number of alternatives for Likert-scale items? Effects of testing time and scale properties. US: American Psychological Association, 56(6), 506–509.

Microsoft. (2013a). PowerPoint. Abgerufen am 14. Juli 2013, von http://office.microsoft.com/en-us/powerpoint/

Microsoft. (2013b). Expression Blend. Abgerufen am 15. Juli 2013, von http://www.microsoft.com/expression/deu/index.html#blend

Moscovich, T., & Hughes, J. (2004). Animation sketching: An approach to accessible animation. Brown University CS Department Technical Report.

Nielsen, J. (1993). Usability Engineering. Morgan Kaufmann.

Pack, J. (2012). Video Tutorial: Toontastic. Abgerufen am 22. August 2013, von http://vimeo.com/28877827

Parent, R. (2009). Computer Animation Complete. San Francisco: Morgan Kaufmann.

Pedell, S., & Vetere, F. (2005). Visualizing use context with picture scenarios in the design process. In Proceedings of the 7th international conference on Human computer interaction with mobile devices & services (S. 271–274). ACM Press.

Page 99: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

L i t e r a t u r v e r z e i c h n i s | 90

PowerProduction Software. (2013). Storyboard Artist. Abgerufen am 17. Juli 2013, von http://www.powerproduction.com/storyboard-artist.html

Priebe, K. A. (2007). The Art of Stop-Motion Animation, 129–179.

Quevedo-Fernández, J., & Martens, J. (2013). idAnimate: A General-Purpose Animation Sketching Tool for Multi-Touch Devices. CONTENT 2013, The Fifth International Conferences on Pervasive Patterns and Applications, (c), 38–47.

Rosson, M. B., & Carroll, J. M. (2002). Usability Engineering: Scenario-Based Development of Human Computer Interaction (Bd. 1). Morgan Kaufmann.

Sarodnick, F., & Brau, H. (2011). Methoden der Usability Evaluation: Wissenschaftliche Grundlagen und praktische Anwendung. Huber Hans.

Snyder, C. (2003). Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. Ieee Transactions On Professional Communication (Bd. 47). Morgan Kaufmann.

Sohn, E., & Choy, Y. (2012). Sketch-n-Stretch: sketching animations using cutouts. Computer Graphics and Applications, IEEE, 32(3), 59–69.

Sova, R., & Sova, D. H. (2006). Storyboards : a Dynamic Storytelling Tool. Writing, 1–12.

Stappers, P. J., & van der Lelie, C. (2010). Storyboarding for designers and design researchers, 1–20.

Takayama, K., & Igarashi, T. (2007). 2D Animation Authoring System with FTIR Multi-touch Table. Abgerufen am 1. August 2013, von http://www-ui.is.s.u-tokyo.ac.jp/~kenshi/RigidOnFTIR/index.html

Taylor, R. (1999). The Encylopedia of Animation Techniques. London: Focal Press.

Thomas, F., & Johnston, O. (1989). Disney Animation: The Illusion of Life. Bdd Promotional Book Company.

Tonollo, J. (2011). Meaningful Transitions - Motion Graphics im User Interface. FH Potsdam. Abgerufen am von http://www.ui-transitions.com/

Toon Boom. (2013). Storyboard Pro. Abgerufen am 2. August 2013, von https://www.toonboom.com/products/storyboard-pro

Truong, K. N., Hayes, G. R., & Abowd, G. D. (2006). Storyboarding: an empirical determination of best practices and effective guidelines. Proceedings of the 6th conference on Designing Interactive systems, 12–21.

Van der Lelie, C. (2005). The value of storyboards in the product design process. Personal and Ubiquitous Computing, 10(2-3), 159–162.

Vertelney, L. (1989). Using video to prototype user interfaces. ACM SIGCHI Bulletin, 21(2), 57–61.

Page 100: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

L i t e r a t u r v e r z e i c h n i s | 91

Villamor, B. C., Willis, D., & Wroblewski, L. (2010). Touch Gesture Reference Guide. Abgerufen am 1. Juli 2013, von http://www.lukew.com/ff/entry.asp?1071

Virzi, R. A. (1992). Refining the test phase of usability evaluation: How many subjects is enough? Human Factors, 34(4), 457–468.

Wahid, S., Branham, S. M., Cairco, L., Mccrickard, D. S., Harrison, S., & Hill, R. (2009). Picking Up Artifacts : Storyboarding as a Gateway to Reuse. Ifip International Federation For Information Processing, 528–541.

Wahid, S., Branham, S. M., Mccrickard, D. S., Harrison, S., & Tech, V. (2010). Investigating the Relationship Between Imagery and Rationale in Design. Human-Computer Interaction, 75–84.

White, T. (2006). Animation from pencils to pixels: classical techniques for digital animators.

Zabramski, S., & Neelakannan, S. (2011). Paper equals screen: a comparison of a pen-based figural creativity test in computerized and paper form. Procedings of the Second Conference on Creativity and Innovation in Design, 47–50.

ZOIL. (2013). ZOIL Framework. Abgerufen am 2. Oktober 2012, von http://zoil.codeplex.com/

Zoom Kindermuseum. (2013). Zoom Trickfilmstudio. Abgerufen am 12. August 2013, von http://www.kindermuseum.at/jart/prj3/zoom/main.jart?rel=de&content-id=1278490693743

Page 101: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 92

ANHANG A: STUDIENUNTERLAGEN ERSTE STUDIE

In diesem Anhang werden alle studienrelevanten Testunterlagen zur ersten Studie, die

der Proband während der Studie erhalten hat, sowie der Versuchsleiterleitfaden zusam-

mengetragen.

1. Willkommensschreiben

2. Pre-Questionnaire

3. Abschlussfragebogen

4. Versuchsleiterleitfaden mit Ablaufplan, Notizen für jede Phase und Interviewfra-

gen der Focus Group

Page 102: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 93

Herzlich Willkommen

Zunächst möchten wir uns bei Ihnen bedanken, dass Sie sich bereit erklärt haben, an unserer Untersuchung teilzunehmen. Bevor es nun gleich losgeht, wollen wir Ihnen mit Hilfe dieser kurzen Einführung vermitteln, um was es uns bei dieser Untersuchung überhaupt geht und welche Rolle Sie dabei spielen. Wir untersuchen im Rahmen unserer beiden Master-Arbeiten den Vorgang des Storyboardings kollaborativ (in Teamarbeit), sowie mit animierten Inhalten. Dies geschieht mit Hilfe unseres digitalen Tools. Im Zuge dieser Studie möchten wir Sie bitten, das Tool anhand der vorgestellten Aufgaben auszuprobieren und anschließend zu bewerten Wir möchten noch einmal anmerken, dass nicht Sie hierbei bewertet werden, sondern Sie das System bewerten, um Probleme zu erkennen. Um eine bessere Auswertung der gewonnenen Daten zu erreichen, werden wir eine Videoaufzeichnung des Tests vornehmen. Durch die Unterzeichnung dieses Formulars erklären Sie sich damit einverstanden. Im Gegenzug verpflichten wir uns, die Aufzeichnung anonymisiert und lediglich zu Auswertungszwecken zu verwenden. Sie können den Versuch jederzeit ohne Nennung von Gründen abbrechen. Abschließend wünschen wir Ihnen viel Spaß und mochten uns noch einmal fu r Ihre Teilnahme bedanken.

Hiermit erkläre ich mich mit den oben genannten Punkten einverstanden:

Name, Vorname

der/des Studienteilnehmers/in ____________________________________________

Datum und Unterschrift ____________________________________________

Hiermit verpflichtet sich die Untersuchungsleitung, die Videoaufzeichnung sowie sämtliche sonstigen gewonnenen Daten lediglich zu Auswertungszwecken im Rahmen dieser Untersuchung zu verwenden:

Name, Vorname

der Versuchsleiter ____________________________________________

Datum und Unterschrift ____________________________________________

Page 103: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 94

Fragebogen Herzlichen Dank, dass Sie sich bereit erklärt haben an dieser Untersuchung teilzunehmen. Bevor wir anfangen, benötigen wir von Ihnen noch einige Angaben zu Ihrer Person. Wir möchten Ihnen hiermit noch einmal mitteilen, dass alle Daten vertraulich behandelt werden. Zur Person Alter: ________

Geschlecht: männlich weiblich

Ihre momentane Tätigkeit (bei Studium bitte Name des Studiengangs + Fachsemesterzahl angeben) ________________________________________________________________ Erfahrung – Geräte und Programme zum Sketchen und Animieren Haben Sie bereits Erfahrung mit technischen Geräten, die über einen Touchscreen verfügen?

ja

nein

Falls ja, welche Art von Geräten haben Sie bereits selbst genutzt? (mehrere Antworten möglich)

Smartphone/Tablet

Grafiktablett mit Stift

Convertible-PC (Laptop mit drehbarem Touchdisplay)

sonstiges: ______________________

Falls ja, wie häufig nutzen Sie diese Art von Technologien?

sehr selten sehr häufig

Falls ja, wie bewerten Sie generell die Bedienung dieser Art von Technologien?

sehr gut sehr schlecht

Wie bewerten Sie ihre Zeichen-/Sketching-Fähigkeiten?

sehr gut sehr schlecht

Haben Sie bereits Erfahrung mit Sketching-, Animations- oder Filmschnittprogrammen?

ja

nein

Page 104: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 95

Falls ja, welche Art von Programmen haben Sie bereits selbst genutzt? ________________________________________________________________ ________________________________________________________________ Erfahrung – Gruppenarbeit Haben Sie bereits Erfahrungen mit Gruppenarbeiten außerhalb Ihres Studiums gemacht (z.B. in Vereinen oder Gremien)?

ja

nein

Haben Sie bereits Erfahrungen mit Gruppenarbeit im Rahmen Ihres Studiums gemacht?

ja

nein

Falls ja, wie häufig haben Sie innerhalb Ihres Studiums (vor diesem Kurs) an bedeutungsvollen Gruppenprojekten (die mehr als 25% der Gesamtnote ausgemacht haben) teilgenommen?

0 – 2

3 – 5

6 – 9

10 und mehr

Falls ja, wie empfinden Sie den Einsatz von Gruppenarbeit in bedeutungsvollen Projekten im Studium (die mehr als 25% der Gesamtnote ausmachen)?

sehr gut sehr schlecht

Page 105: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 96

Fragebogen A) Gesamteindruck des Prototyps Bitte geben Sie mithilfe der folgenden Fragen Ihren Gesamteindruck zu dem Storyboarding-Prototypen wieder Ich war mit der Leistung und den Funktionen des Systems zufrieden

Stimme völlig zu Stimme überhaupt nicht zu

Es war einfach für mich, neue Ideen und Richtungen zu erschließen

Stimme völlig zu Stimme überhaupt nicht zu

Es war sehr einfach über das System Ideen und Konzepte mit andern Leuten zu teilen

Stimme völlig zu Stimme überhaupt nicht zu

Ich würde mich freuen dieses System regelmäßig zu nutzen

Stimme völlig zu Stimme überhaupt nicht zu

Ich war im Stande kreativ zu sein während der Aktivität

Stimme völlig zu Stimme überhaupt nicht zu

Meine Aufmerksamkeit richtete sich ausschließlich auf die Kreativaktivität, sodass Ich das System völlig vergaß

Stimme völlig zu Stimme überhaupt nicht zu

Das System half mir Ideen und Veränderungen zu verfolgen

Stimme völlig zu Stimme überhaupt nicht zu

Ich hatte Spaß bei der Verwendung des Systems

Stimme völlig zu Stimme überhaupt nicht zu

Die Ideen die ich produzieren konnte, waren den Aufwand wert

Stimme völlig zu Stimme überhaupt nicht zu

Das System unterstütze mich expressiv zu sein (sich bildreich, rhetorisch, emotional auszudrücken)

Stimme völlig zu Stimme überhaupt nicht zu

Ich war so stark mit der Designaktivität beschäftigt, dass ich dabei das System gar nicht mehr bemerkte

Stimme völlig zu Stimme überhaupt nicht zu

Das System unterstützt die Arbeit mehrerer Nutzer

Stimme völlig zu Stimme überhaupt nicht zu

Page 106: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 97

B) Sketching-Funktionen

Das Sketchen (Zeichnen, Radieren, Bildbearbeitung, Textbearbeitung) fiel mir einfach.

Stimme völlig zu Stimme überhaupt nicht zu

Es war ersichtlich, wie man Ebenen zu einem Frame hinzufügt

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt Es war einfach, Ebenen als Templates abzuspeichern

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt Es war einfach, Frames zu einem Storyboard hinzuzufügen

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt Es wäre sinnvoll, ganze Frames als Templates abzuspeichern

Stimme völlig zu Stimme überhaupt nicht zu

Haben Sie Anmerkungen zu den Sketching-Funktionalitäten?

________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________

Page 107: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 98

C) Zusammenarbeit mit anderen Teammitgliedern Die angefertigten Storyboards ließen sich gut anderen Teammitgliedern präsentieren

Stimme völlig zu Stimme überhaupt nicht zu

Es war ersichtlich, wie Sketche und Storyboards für andere Teammitglieder freigegeben werden können

Stimme völlig zu Stimme überhaupt nicht zu

Wie ähnlich ist die Ansicht am Wanddisplay einer Pinnwand, an denen Designer arbeiten?

Sehr ähnlich Überhaupt nicht ähnlich

Wie ähnlich ist die Tabletansicht einem Einzelarbeitsplatz für Designer?

Sehr ähnlich Überhaupt nicht ähnlich

Page 108: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 99

Haben Sie Anmerkungen zu den verschiedenen Oberflächen bzw. zu der Zusammenarbeit?

________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________

Wie Ihnen das Hinzufügen (Einsortieren) von Sketchen zu einem Storyboard mittels Drag & Drop gefallen?

Sehr gut Sehr verbesserungswürdig

Wie hat Ihnen das Freigeben (Duplizieren) von Objekten gefallen?

Sehr gut Sehr verbesserungswürdig

Page 109: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 100

Wie hat Ihnen die Präsentationssicht im Storyboard gefallen?

Sehr gut Sehr verbesserungswürdig

Wie hat Ihnen die Comic-Ansicht (Übersicht) im Storyboard gefallen?

Sehr gut Sehr verbesserungswürdig

Page 110: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 101

D) Animation von Storyboards

Die Erstellung von Animationen ist mir leicht gefallen.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Ich habe verstanden, wie Animationen erstellt werden können.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt Die Animationssteuerung (Aufnahme / Abspielen, …) ist verständlich.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt Wie hat Ihnen die Manipulationsanimation gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt Wie hat Ihnen die Skalierungsanimation gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt

Wie hat Ihnen die Rotationsanimation gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt

Wie hat Ihnen die Erscheinen- bzw. Verschwinden-Animation gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt

Wie hat Ihnen die Zeichenanimation (Aufnahme während des Zeichnens) gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt

Page 111: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 102

Haben Sie Animationstypen vermisst?

Ja Nein

Falls ja, welche? ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________

Die Animationsvorschaubilder im Zeichenbereich haben mich unterstützt.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Die Andeutung von nicht sichtbaren Objekten im Zeichenbereich hat mich unterstützt.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Die Animationsfarben haben mich unterstützt.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Die Animationszeitleiste ist verständlich.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Haben Sie weitere Anmerkungen zu Animation in Storyboards?

________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________

Page 112: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 103

E) Fragen zur Bedienbarkeit Ich denke, dass ich dieses System gerne häufig nutzen würde

Stimme völlig zu Stimme überhaupt nicht zu

Ich fand das System unnötig komplex

Stimme völlig zu Stimme überhaupt nicht zu

Ich denke, das System war einfach zu benutzen

Stimme völlig zu Stimme überhaupt nicht zu

Ich denke, ich würde die Hilfe eines Technikers benötigen, um das System benutzen zu können

Stimme völlig zu Stimme überhaupt nicht zu

Ich halte die verschiedenen Funktionen des Systems für gut integriert.

Stimme völlig zu Stimme überhaupt nicht zu

Ich halte das System für zu inkonsistent.

Stimme völlig zu Stimme überhaupt nicht zu

Ich kann mir vorstellen, dass die meisten Leute sehr schnell lernen würden, mit dem System

umzugehen.

Stimme völlig zu Stimme überhaupt nicht zu

Ich fand das System sehr mühsam zu benutzen.

Stimme völlig zu Stimme überhaupt nicht zu

Ich fühlte mich bei der Nutzung des Systems sehr sicher.

Stimme völlig zu Stimme überhaupt nicht zu

Ich musste viele Dinge lernen, bevor ich das System nutzen konnte.

Stimme völlig zu Stimme überhaupt nicht zu

Page 113: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 104

Was hat Ihnen am Prototypen besonders gut bzw. besonders schlecht gefallen?

________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________

Haben Sie generelle Verbesserungsvorschläge zum System?

________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________

Vielen Dank für Ihre Teilnahme!

Page 114: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 105

1. Begrüßung, Willkommensschreiben und

Einverständniserklärung 5 min

Hallo, willkommen…

Vielen Dank.

Kurz das Labor und die Studie erklären…

Demographischer Fragebogen

2. Tutorial und Explorationsphase 20 min Vorstellung der Clients: (Menübuttons, Objekte, Hintergründe)

Vorstellung des Drawing Pads (Sketchingfunktionen, Ebenen, Bilder, Texte)

Vorstellung des Storyboards (Unterschied zum Drawing Pad, Frames, Sichten)

Erklärung der grundsätzlichen Animationsfunktion (Selektieren, Aufnahmebutton,

Zeitleiste, Abspielen)

Erklärung der Animationstypen (Translation, Rotation, Skalierung, Sichtbarkeit)

Erklärung der Animationsandeutungslinien

Vorstellung der Templates

Drag & Drop (Frames + Templates, Hinzufügen von Drawing Pads zu Storyboards)

Freigabe der Objekte zwischen den Clients

3. Vorstellung des Szenarios 5 min

4. Bearbeitung des Szenarios 50 min

Achten auf: o Kickoff nur sehr kurz halten

o Einhaltung der Zeitrahmen (Hinweis bei 5 min und 2 min vor Ende)

o Verbale Verhaltensweisen

o Nichtverbales Verhalten

Ablauf: Phase Dauer Kodierung

1. Kick-Off 5 min Kickoff

2. Privates Sketchen Session 1 10-15 min Privat1

3. Gruppendiskussion 1 10-15 min Gruppe1

4. Privates Sketchen Session 2 10 min Privat2

5. Gruppendiskussion 2 10 min Gruppe2

5. Fragebogen 10 min

6. Gruppeninterview 15 min

7. Bedanken 5 min

Auszahlen -> Unterschrift!!!

Page 115: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 106

Phase: Bemerkung:

Page 116: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g A : S t u d i e n u n t e r l a g e n E r s t e S t u d i e | 107

Gruppeninterview:

1. Wie empfindet ihr es auf diese Art zusammen zu arbeiten?

2. Ist es für euch angenehmer, nur die Objekte freizugeben, die ihr wollt?

3. Sollte das Verschicken von Objekten vom Wand-Display nur zu dem Tablet-

PC erfolgen, von dem es ursprünglich stammt? (Nur zum ursprünglichen Er-

steller)

4. Findet ihr es besser, direkt im Storyboard-Objekt zu sketchen, anstatt im

Drawing Pad?

5. Ist Animation in Storyboards sinnvoll?

6. Ganz allgemein, wie unterstützt dich Animation beim kreativen Designpro-

zess, kann es dich unterstützen?

7. Konntest du deine Ideen durch Animation besser den anderen Teammitglie-

dern kommunizieren?

8. Wird der Workflow gut unterstützt?

Page 117: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 108

ANHANG B: STUDIENUNTERLAGEN ZWEITE STUDIE

In diesem Anhang werden alle studienrelevanten Testunterlagen zur ersten Studie, die

der Proband während der Studie erhalten hat, sowie der Versuchsleiterleitfaden zusam-

mengetragen.

1. Willkommensschreiben

2. Pre-Questionnaire

3. Aufgabenstellungen zu den drei Aufgaben

4. ASQ zu den drei Aufgaben

5. Abschlussfragebogen

6. Versuchsleiterleitfaden mit Ablaufplan, Notizen für jede Phase und Interviewfra-

gen der Focus Group

Page 118: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 109

HERZLICH WILLKOMMEN

Zunächst möchte ich mich bei Ihnen bedanken, dass Sie sich bereit erklärt haben, an der Untersuchung

teilzunehmen. Bevor es nun gleich losgeht, möchte ich Ihnen mithilfe dieser kurzen Einführung vermitteln, um

was es bei dieser Untersuchung überhaupt geht und welche Rolle Sie dabei spielen.

Im Rahmen meiner Master-Arbeit wurde eine digitale Anwendung erstellt, mit der es möglich ist,

selbsterstellte Zeichnungen zu animieren. Im Zuge dieser Studie möchte ich Sie bitten, die Anwendung anhand

der vorgegebenen Aufgaben auszuprobieren und anschließend zu bewerten. Anzumerken ist, dass hierbei nicht

Sie bewertet werden, sondern Sie das System bewerten, um Probleme aufzuzeigen.

Um eine bessere Auswertung der gewonnenen Daten zu erreichen, wird eine Videoaufzeichnung des Tests

vorgenommen. Durch die Unterzeichnung dieses Formulars erklären Sie sich damit einverstanden. Im

Gegenzug verpflichte ich mich, falls von Ihnen nicht anders gewünscht, die Aufzeichnung anonymisiert und

lediglich zu Auswertungszwecken zu verwenden.

Sie können den Versuch jederzeit ohne Nennung von Gründen abbrechen. Falls Sie während des Versuchs noch

weitere Fragen zur Funktionsweise der Anwendung haben, können Sie diese jederzeit stellen.

Abschließend wünsche ich Ihnen viel Spaß und bedanke mich noch einmal für Ihre Teilnahme.

Hiermit erkläre ich mich mit den oben genannten Punkten einverstanden:

Name, Vorname

des Studienteilnehmenden ____________________________________________

Sind Sie damit einverstanden, dass die Foto- und Videoaufzeichnungen der Benutzerstudie für

Publikationszwecke genutzt werden? ( ) ja ( ) nein

Datum und Unterschrift ____________________________________________

Hiermit verpflichtet sich die Untersuchungsleitung, die Videoaufzeichnung sowie sämtliche sonstigen gewonnenen Daten – falls nicht anders gewünscht - lediglich zu Auswertungszwecken im Rahmen dieser Untersuchung zu verwenden:

Name, Vorname

des Versuchsleiters ____________________________________________

Datum und Unterschrift ____________________________________________

Page 119: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 110

FRAGEBOGEN

Herzlichen Dank, dass Sie sich bereit erklärt haben an dieser Untersuchung teilzunehmen. Bevor wir

anfangen, benötigen wir von Ihnen noch einige Angaben zu Ihrer Person.

Wir möchten Ihnen hiermit noch einmal mitteilen, dass alle Daten vertraulich behandelt werden.

Zur Person

Alter: ________

Geschlecht: männlich weiblich

Ihre momentane Tätigkeit (bei Studium bitte Name des Studiengangs + Fachsemesterzahl angeben) ________________________________________________________________ Erfahrung – Geräte mit Touchscreen

Haben Sie bereits Erfahrung mit technischen Geräten, die über einen Touchscreen verfügen?

ja

nein

Falls ja, welche Art von Geräten haben Sie bereits selbst genutzt? (mehrere Antworten möglich)

Smartphone/Tablet

Grafiktablet mit Stift

Convertible-PC (Laptop mit drehbarem Touchdisplay)

sonstiges: ______________________

Falls ja, wie häufig nutzen Sie diese Art von Technologien?

sehr selten sehr häufig

Falls ja, wie bewerten Sie generell die Bedienung dieser Art von Technologien?

sehr gut sehr schlecht

Page 120: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 111

Erfahrung – Programme und Animation

Mit welchen der folgenden Programmarten haben Sie bereits Erfahrungen gemacht?

Zeichen- bzw. Bildbearbeitungsprogramme

Animationsprogramme

Filmschnittprogramme

keinem der genannten

Welche konkreten Programme haben Sie bereits selbst genutzt?

________________________________________________________________

________________________________________________________________ ________________________________________________________________

Falls Sie selbst noch keine Animationen erstellen haben, wie hoch ist Ihr Interesse, selbst Animationen erstellen zu können?

sehr hoch sehr niedrig

Falls Sie selbst bereits Animationen erstellt haben, wie bewerten Sie ihre Erfahrungen mit Animationsprogrammen?

sehr gut sehr schlecht

Falls Sie selbst bereits Animationen erstellt haben, was haben Sie animiert?

________________________________________________________________

________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________

Page 121: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 112

AU

FGA

BE

1

- D

as M

änn

chen

wir

ft e

inen

Bal

l. D

er B

all h

üp

ft m

ehrm

als

auf

der

Erd

e au

f.

Page 122: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 113

AU

FGA

BE

2

- D

er B

oge

nsc

tze

vers

chie

ßt

ein

en P

feil.

- D

er P

feil

flie

gt in

Ric

htu

ng

ein

es M

änn

chen

s, d

as e

inen

Ap

fel a

uf

dem

Ko

pf

hat

. Er

trif

ft d

en A

pfe

l un

d f

liegt

zu

sam

men

mit

ihm

wei

ter.

- W

ähre

nd

der

Pfe

il fl

iegt

, ban

gt d

as M

änn

chen

, wel

ches

den

Ap

fel a

uf

dem

Ko

pf

hat

, um

sei

n L

eben

. Dab

ei v

erän

der

t si

ch d

er A

usd

ruck

au

f se

inem

Ges

ich

t. Is

t d

er A

pfe

l erf

olg

reic

h v

om

Ko

pf

gesc

ho

ssen

, so

ist

es

wie

der

ber

uh

igt.

Page 123: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 114

AU

FGA

BE

3

- Ei

n T

able

t so

ll b

edie

nt

we

rden

.

- W

ird

ein

Fin

ger

auf

das

Tab

let

gele

gt, s

o d

reh

t si

ch d

ie H

and

ein

wen

ig, u

m d

ie B

erü

hru

ng

anzu

deu

ten

.

Die

Bew

egu

ng

der

Han

d e

rfo

lgt

auf

ein

en S

chla

g (E

s ve

rgeh

t ke

ine

Zeit

).

- Zu

näc

hst

wir

d e

ine

bla

ue

Lin

ie m

it e

inem

Fin

ger

geze

ich

net

.

- Im

An

sch

luss

wir

d e

ine

Mu

lti-

Tou

ch-G

este

gen

utz

t, u

m d

ie b

lau

e Li

nie

kle

iner

zu

ska

liere

n.

Page 124: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 115

ZWISCHENFRAGEBOGEN

Aufgabe 1

Ich bin damit zufrieden, wie einfach ich die Aufgabe erledigen konnte.

sehr zufrieden sehr unzufrieden

Ich bin mit dem Zeitaufwand zufrieden, mit dem ich die Aufgabe erledigen konnte.

sehr zufrieden sehr unzufrieden

ZWISCHENFRAGEBOGEN

Aufgabe 2

Ich bin damit zufrieden, wie einfach ich die Aufgabe erledigen konnte.

sehr zufrieden sehr unzufrieden

Ich bin mit dem Zeitaufwand zufrieden, mit dem ich die Aufgabe erledigen konnte.

sehr zufrieden sehr unzufrieden

Page 125: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 116

ZWISCHENFRAGEBOGEN

Aufgabe 3

Ich bin damit zufrieden, wie einfach ich die Aufgabe erledigen konnte.

sehr zufrieden sehr unzufrieden

Ich bin mit dem Zeitaufwand zufrieden, mit dem ich die Aufgabe erledigen konnte.

sehr zufrieden sehr unzufrieden

Page 126: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 117

FRAGEBOGEN A) Fragen zur Bedienbarkeit des Prototyps

Bitte geben Sie mithilfe der folgenden Fragen Ihren Gesamteindruck zu dem Prototypen wieder. Ich denke, dass ich dieses System gerne häufig nutzen würde.

Stimme völlig zu Stimme überhaupt nicht zu

Ich fand das System unnötig komplex.

Stimme völlig zu Stimme überhaupt nicht zu

Ich denke, das System war einfach zu benutzen.

Stimme völlig zu Stimme überhaupt nicht zu

Ich denke, ich würde die Hilfe eines Technikers benötigen, um das System benutzen zu können.

Stimme völlig zu Stimme überhaupt nicht zu

Ich halte die verschiedenen Funktionen des Systems für gut integriert.

Stimme völlig zu Stimme überhaupt nicht zu

Ich halte das System für zu inkonsistent.

Stimme völlig zu Stimme überhaupt nicht zu

Ich kann mir vorstellen, dass die meisten Leute sehr schnell lernen würden, mit dem System

umzugehen.

Stimme völlig zu Stimme überhaupt nicht zu

Ich fand das System sehr mühsam zu benutzen.

Stimme völlig zu Stimme überhaupt nicht zu

Ich fühlte mich bei der Nutzung des Systems sehr sicher.

Stimme völlig zu Stimme überhaupt nicht zu

Ich musste viele Dinge lernen, bevor ich das System nutzen konnte.

Stimme völlig zu Stimme überhaupt nicht zu

Page 127: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 118

B) Erstellung von Animationen

Die Erstellung von Animationen ist mir leicht gefallen.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Ich habe verstanden, wie Animationen erstellt werden können.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt Die Animationssteuerung (Aufnahme, Abspielen, …) ist verständlich.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt Wie hat Ihnen die Manipulationsanimation gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt Wie hat Ihnen die Skalierungsanimation gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt

Wie hat Ihnen die Rotationsanimation gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt

Wie hat Ihnen die Erscheinen- bzw. Verschwinden-Animation gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt

Wie hat Ihnen die Zeichenanimation (Aufnahme während des Zeichnens) gefallen?

Sehr gut Sehr verbesserungswürdig Nicht genutzt

Page 128: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 119

Die Animationsvorschaubilder im Zeichenbereich haben mich unterstützt.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Die Andeutung von nicht sichtbaren Objekten im Zeichenbereich hat mich unterstützt.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Die Animationsfarben haben mich unterstützt.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Die Animationszeitleiste ist verständlich.

Stimme völlig zu Stimme überhaupt nicht zu Nicht genutzt

Vielen Dank für Ihre Teilnahme!

Page 129: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 120

1. Begrüßung, Willkommensschreiben und

Einverständniserklärung 5 min

Hallo, willkommen…

Vielen Dank.

Kurz das Labor und die Studie erklären…

Demographischer Fragebogen

2. Tutorial und Explorationsphase 20 min Vorstellung des Storyboards (Sketchingfunktionen, Ebenen)

Erklärung der grundsätzlichen Animationsfunktion (Selektieren, Aufnahmebutton,

Zeitleiste, Abspielen)

Erklärung der Animationstypen (Translation, Rotation, Skalierung, Sichtbarkeit)

Erklärung der Animationsandeutungslinien

Erscheinen / Verschwinden zu bestimmten Zeitpunkten -> Zeichnen, Springen

Vorstellung der Templates

Drag & Drop (Templates)

3. Aufgaben 25 min

Achten auf: o Einhaltung der Zeitrahmen (Hinweis bei 2 min vor Ende)

o Verbale Verhaltensweisen

o Nichtverbales Verhalten

Ablauf: o Einleitung 3min

o Springenden Ball animieren 5 min

o Fahrendes Auto 10 min

o Bombe explodiert 15 min

4. Fragebogen 5 min

5. Interview 10 min

6. Bedanken 3 min

Auszahlen -> Unterschrift!!!

Page 130: Animation als Sketchingtechnik für Storyboards - Konstanzhci.uni-konstanz.de/downloads/Thesis_LauraLorenz.pdf · 2.2.2 Storyboard-Varianten ... Traditionelle 2D-Animation mit einer

A n h a n g B : S t u d i e n u n t e r l a g e n Z w e i t e S t u d i e | 121

Phase: Bemerkung: