Konzeption und Umsetzung eines CSS-Frameworks auf Basis von Disneys Prinzipien der Animation
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Konzeption und Umsetzung
eines CSS-Frameworks auf Basis
von Disneys Prinzipien der
Animation
Bachelorarbeit
ausgearbeitet von
Hendrik Pawlowski
zur Erlangung des akademischen Grades
Bachelor of Science (B.Sc.)
vorgelegt an der
Technischen Hochschule Köln
Campus Gummersbach
Fakultät für Informatik und
Ingenieurwissenschaften
im Studiengang
Medieninformatik
Erster Prüfer:in: Prof. Christian Noss
Technische Hochschule Köln
Zweiter Prüfer:in: Prof. Hans Kornacher
Technische Hochschule Köln
Gummersbach, Februar 2021
2
Adresse: Hendrik Pawlowski
Richardstraße 18
49074 Osnabrück
pawlowskihendrik@web.de
Kurzfassung
Das Ziel dieser Bachelorarbeit besteht in der Konzeption und Umsetzung eines
CSS-Frameworks auf der Basis von Disneys zwölf Prinzipien der Animation. Da-
zu wird die folgende Forschungsfrage gestellt: Welche Relevanz haben Disneys
zwölf Prinzipien der Animation im Kontext von UI-Animationen und wie las-
sen sie sich auf Elemente im Bereich Web umsetzen? Um diese Forschungsfrage
zu beantworten, wurden die Prinzipien analysiert und in einem UI/UX-Kontext
betrachtet. Dabei wurden potenzielle Einsatzmöglichkeiten für die Verwendung
der Prinzipien und deren mögliche Auswirkungen auf die User Experience be-
schrieben. Um zu demonstrieren, wie eine Umsetzung der Prinzipien für gängige
Elemente im Web aussehen könnte, wurde die Konzeption und Implementierung
eines CSS-Frameworks durchgeführt. Dabei konnte festgestellt werden, welche
Prinzipien für UI-Animationen geeignet oder ungeeignet sind und wie diese mit-
hilfe von CSS und JavaScript implementiert werden können.
Schlagwörter: Animation, User Experience, Design, Web Development
I
Inhaltsverzeichnis
Kurzfassung I
1 Einleitung 1
1.1 Problemstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Forschungsfrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 Die zwölf Prinzipien der Animation 3
2.1 Squash and Stretch . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 Anticipation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.3 Staging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.4 Straight Ahead Action and Pose to Pose . . . . . . . . . . . . . . 9
2.5 Follow Through and Overlapping Action . . . . . . . . . . . . . . 11
2.6 Slow In and Slow Out . . . . . . . . . . . . . . . . . . . . . . . . 14
2.7 Arcs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.8 Secondary Action . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.9 Timing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.10 Exaggeration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.11 Solid Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.12 Appeal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3 Konzeption und Umsetzung des CSS-Frameworks 28
3.1 Auswahl an UI-Elementen . . . . . . . . . . . . . . . . . . . . . . 29
3.1.1 Einteilung nach Atomic Design . . . . . . . . . . . . . . . 29
3.1.2 Betrachtung bestehender CSS-Frameworks . . . . . . . . . 29
3.2 Vorgehen bei der Konzeption . . . . . . . . . . . . . . . . . . . . . 31
3.3 Verwendete Technologien und Setup . . . . . . . . . . . . . . . . . 32
II
Inhaltsverzeichnis
3.4 Storyboards und Implementierung . . . . . . . . . . . . . . . . . . 33
3.4.1 Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.4.2 Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.4.3 Card . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.4.4 Dropdown . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3.4.5 Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.4.6 Carousel . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.5 Erkenntnisse und Zusammenfassung der Prinzipien . . . . . . . . 59
4 Fazit 64
Glossar IV
Abbildungsverzeichnis VI
Tabellenverzeichnis VII
Literaturverzeichnis XII
III
1 Einleitung
1.1 Problemstellung
Webentwicklung ist mit der Veröffentlichung der ersten Webseite im Jahre 1991
ein vergleichsweise junger Teilbereich der Informatik, der sich ständig verändert
und rapide weiterentwickelt. Im Jahre 2016 hat sich die Anzahl aller Webseiten,
von 900 Millionen auf 1,7 Milliarden, fast verdoppelt.1 Durch die zunehmende
Anzahl an Webseiten steigen ebenfalls die Anforderungen an gutes User Interface
(UI)- und User Experience (UX)-Design. Animationen stellen in beiden Themen-
gebieten ein wichtiges Werkzeug dar, um die User Experience zu optimieren und
einzigartig zu gestalten. Im Jahre 1981 veröffentlichten Frank Thomas und Ollie
Johnston das Buch ”The Illusion of Life: Disney Animation”2 , in welchem zwölf
verschiedene Prinzipien der Animation aufgeführt sind, um möglichst realisti-
sche Bewegungen und Figuren zu kreieren. Die geplante Bachelorarbeit befasst
sich mit dem Thema UI/UX-Animationen in Bezug auf Disneys Prinzipien der
Animation.
1.2 Forschungsfrage
Das Ziel dieser Bachelorarbeit besteht in der Beantwortung folgender Forschungs-
frage: Welche Relevanz haben Disneys zwölf Prinzipien der Animation im Kon-
text von UI-Animationen und wie lassen sie sich auf Elemente im Bereich Web
umsetzen? Um diese Forschungsfrage zu beantworten, sollen zunächst Disneys
zwölf Prinzipien der Animation erläutert und in Bezug auf deren Relevanz im
UI/UX-Design analysiert werden. Dabei sollen die potenziellen Einsatzmöglichkeiten
der Prinzipien im User Interface verdeutlicht werden. Das Ergebnis der Ar-
1
Vgl. Armstrong, 2019.
2
Thomas u. Johnston, 1981
1
1 Einleitung
beit stellt die Konzeption und Implementierung eines Prototypen für ein CSS-
Framework dar. Dieses soll zum einen demonstrieren, wie sich die Prinzipien für
gängige UI-Elemente konzipieren lassen, und zum anderen, wie die Umsetzung
der Animationen mithilfe von Webtechnologien aussehen könnte. Der Prototyp
soll nach Fertigstellung für Entwickler:innen bereitgestellt und in eine Weban-
wendung inkludiert werden können.
1.3 Motivation
Meine Motivation für die Auseinandersetzung mit diesem Thema, ist mein persönliches
Interesse an dem Thema UI/UX-Design. Ich würde gerne nach meinem Studi-
um der Medieninformatik beruflich in Richtung Webentwicklung, mit Fokus auf
den Bereich Frontend, gehen. Da mich Design und Interaktionen mit animierten
Elementen seit einiger Zeit interessieren, nutze ich die Bachelorarbeit, um mein
Wissen in diese Richtung zu erweitern.
2
2 Die zwölf Prinzipien der
Animation
In diesem Kapitel werden die zwölf Prinzipien der Animation aus dem Buch
”The Illusion of Life: Disney Animation”1 thematisiert. Obwohl sie ursprünglich
für den Kontext von Cartoon und Zeichentrickfiguren erstellt wurden, stellen sie
ebenfalls die Grundlage für viele Arten von Animationen und Bewegungsgrafiken
aus anderen Kontexten dar. Demnach sind sie ebenfalls wichtig für den Bereich
UI/UX-Design. Bei der Arbeit mit Text oder anderen UI-Elementen können De-
signentscheidungen, die sich nach den zwölf Prinzipien richten, die Erscheinung
einer Animation oder Bewegung verbessern. Ein wesentlicher Bestandteil bei
Cartoon-Charakteren ist es, diese möglichst lebensecht darzustellen und die Il-
lusion einer physikalischen Welt zu erschaffen. Dies sind Ziele, die ebenfalls auf
die Gestaltung eines User Interface zutreffen können. UI-Elemente, die sich wie
physikalische Objekte verhalten, wirken auf Nutzer:innen natürlicher und sorgen
für eine befriedigendere und emotional verbundene User Experience.2
Außerdem erweitert das Studieren der zwölf Prinzipien das Vokabular eines:einer
Designer:in. Dieses ist essenziell, um Animationen akkurat zu beschreiben. Durch
das Wissen über die Prinzipien und deren Definitionen ist es möglich in einem
Team spezifische Eigenschaften von Bewegungen genau zu beschreiben und zu
diskutieren. Dies bietet einen Vorteil, um genaues Feedback zu geben und leichter
Iterationen durchzuführen.3
Da im Rahmen dieser Bachelorarbeit ein CSS-Framework entwickelt werden
soll, mit dem sich die Prinzipien auf Elemente im User Interface anwenden lassen
können, werden diese im Folgenden erklärt und auf ihre jeweilige Relevanz im
UI/UX-Design analysiert.
1
Thomas u. Johnston, 1981
2
Vgl. Head, 2016, S.34f
3
Vgl. Head, 2016, S.35
3
2 Die zwölf Prinzipien der Animation
2.1 Squash and Stretch
Erklärung
Das erste der zwölf Prinzipien repräsentiert die Flexibilität eines Objekts. Jedes
Objekt zeigt während der Ausführung einer Animation eine bestimmte Bewegung
innerhalb der eigenen Gestalt. Beispielsweise ist eine duckende Figur in sich zu-
sammen gezogen, während eine springende Figur nach oben gestreckt ist. Diese
beiden Zustände können als Squash und Stretch beschrieben werden. Squash
stellt dabei einen Zustand dar, in dem eine Figur abgeflacht ist. Dieser wird
meistens erreicht, indem eine starke Kraft, zum Beispiel die Schwerkraft, auf die
Figur einwirkt und diese zusammendrückt. Bei einem Stretch hingegen ist die Fi-
gur verlängert.4 Mithilfe dieses Prinzips wird Zuschauer:innen die Steifheit eines
Objekts vermittelt. Gegenstände wie beispielsweise Bücher oder Stühle sind sehr
steif und weisen eine geringe Flexibilität auf. Weiche Oberflächen, wie Kleidung
oder organische Objekte, haben eine geringe Steifheit und eine hohe Flexibilität.5
(a) (b)
Abbildung 2.1: Squash and Stretch: Bouncing Ball (Vgl. Waith-Mair, 2019)
In Abbildung 2.1 (a) und (b) sind zwei Kugeln zu sehen, welche auf einen Un-
tergrund fallen und von diesem abprallen. Der Squash and Stretch wird jedoch
nur auf die Kugel in Abbildung (b) angewandt. Die Kugel wird hier bei hoher
Geschwindigkeit in Bewegungsrichtung langgezogen und bei einem Aufprall ab-
geflacht dargestellt. Dies verdeutlicht das abrupte Bremsen und bereitet auf das
4
Vgl. Thomas u. Johnston, 1981, S.48
5
Vgl. Hinman, 2012
42 Die zwölf Prinzipien der Animation
Wegspringen im Anschluss vor. Wichtig bei diesem Prinzip der Animation ist,
dass das Volumen der Figur, also die Größe der Oberfläche immer gleich bleibt.6
Relevanz im UI/UX-Design
Im User Interface kann Suqash and Stretch ebenfalls dazu genutzt werden, um das
Material, aus dem UI-Elemente bestehen, zu vermitteln. Dabei wird das jeweilige
UI-Element, basierend auf einer bestimmten Bewegung, verformt. Das Verhalten
ist dabei dasselbe wie bei einer Cartoonfigur: Bewegt sich das Element schnell,
so wird es langgezogen und stößt es gegen ein anderes, so wird es gequetscht.
Aus der Intensität der Verformung kann das Material des Elements abgeleitet
werden.7
(a) (b)
Abbildung 2.2: Squash and Stretch: Flipboard (Vgl. Hinman, 2012)
In Abbildung 2.2 (a) ist eine Anwendung zu sehen, die ein Flipboard mit un-
terschiedlichen Artikeln darstellt. Das Umblättern wird durch eine Animation
visualisiert. Durch das steife Verhalten der einzelnen Seiten beim Umblättern
suggeriert die Anwendung dem:der Nutzer:in, dass das Material, auf dem sich
die Artikel befinden, hart ist. Das Interface in Abbildung 2.2 zeigt eine An-
wendung zum Lesen von Büchern. Durch den Squash and Stretch Effekt beim
Umblättern wird hier ein flexibler und dünner Untergrund suggiert, wie bei dem
eines Buches. In beiden Fällen wird das Material des Elements im User Interface
6
Vgl. Thomas u. Johnston, 1981, S.50f
7
Vgl. Head, 2016, S.56
52 Die zwölf Prinzipien der Animation
vermittelt. Die Metapher von Flipboard und Buch, werden durch die Animation
beim Umblättern unterstützt.8
2.2 Anticipation
Erklärung
Das zweite Prinzip beschäftigt sich mit der Erwartung von Nutzer:innen ge-
genüber einer Animation. Zuschauer:innen sollen hierbei auf eine kommende Be-
wegung vorbereitet werden, bevor diese auftritt. Beispielhaft für diese Vorberei-
tung wäre eine Sequenz, bei der eine Figur zunächst leicht in die Hocke geht
oder Anlauf nimmt, bevor sie anfängt zu laufen. Dieses Prinzip dient dazu einer
Aktion mehr Klarheit zu verschaffen und Zuschauer:innen nicht mit plötzlichen
Aktionen zu verwirren.9
Abbildung 2.3: Anticipation: Oswald reaching out for a sandwich (Vgl. Waith-
Mair, 2019, S.53)
Ein weiteres Beispiel für dieses Prinzip ist in Abbildung 2.3 zu sehen. Die
Zeichentrickfigur Oswald holt zunächst mit seiner Hand nach oben aus, bevor
diese in seine Tasche gleitet und ein Sandwich daraus hervor holt.
Relevanz im UI/UX-Design
Anticipation findet im User Interface Verwendung, wenn Nutzer:innen auf zukünftige
Ereignisse vorbereitet werden. In der realen Welt bestehen Bewegungen aus einer
8
Vgl. Hinman, 2012
9
Vgl. Thomas u. Johnston, 1981, S.53
62 Die zwölf Prinzipien der Animation
Vorbereitung, der eigentlichen Aktion und einem Ergebnis. Anticipation bezieht
sich hierbei auf das Vorbereiten einer Aktion und könnte realisiert werden, in-
dem beispielsweise ein Element zunächst ausholt, bevor es sich in die eigentliche
Richtung bewegt. Dies dient dazu Nutzer:innen einen Hinweis zu geben, was als
nächstes passiert, wodurch ihre Erwartungen erfüllt werden.10 Die Erfüllung der
Erwartungen ist ebenfalls in den Grundsätzen der Dialoggestaltung11 festgehal-
ten und somit von Relevanz im UX-Design.
Anticipation kann außerdem bei der Navigation durch ein System eingesetzt
werden.12 Bei den Übergangen zwischen verschiedenen Ansichten können soge-
nannte Skeleton Screens verwendet werden, um Nutzer:innen vor dem Laden des
Inhalts schon auf das Layout der Seite vorzubereiten. Elemente wie Texte oder
Bilder werden hierbei durch geometrische Figuren mit ähnlicher Form nachge-
ahmt.13
Ein weiteres Beispiel für den Einsatz von Anticipation wäre in der Umsetzung
von Gestural User Interfaces. Hier können Nutzer:innen Hinweise gegeben wer-
den, wie sich Objekte im User Interface bewegen können und ob sie sich mithilfe
von Gesten steuern lassen.14
(a) (b)
Abbildung 2.4: Lockscreen camera of iPhone (Vgl. Head, 2016, S.138)
10
Vgl. Hinman, 2012
11
Vgl. ISO 9241:110, 2009
12
Vgl. Hinman, 2012
13
Vgl. Krofegha, 2020
14
Vgl. Hinman, 2012
72 Die zwölf Prinzipien der Animation
In Abbildung 2.4 (a) und (b) ist der Lockscreen eines Smartphones zu sehen.
Sobald man auf das Kamerasymbol tippt, wird der gesamte Lockscreen ein kleines
Stück nach oben animiert, wie in (b) zu sehen ist. Dies gibt Nutzer:innen einen
Hinweis darauf, dass die Kamera mithilfe eines Swipes aktiviert werden kann.15
2.3 Staging
Erklärung
Das dritte Prinzip beschäftigt sich mit dem Leitgedanken, dass eine gezeigte
Aktion so präsentiert werden soll, dass diese klar und unmissverständlich ist.
Sie soll so inszeniert sein, dass Zuschauer:innen die Handlung verstehen und die
Persönlichkeit von Figuren oder die Stimmung einer Szene jederzeit zu erkennen
sind. Die Geschichte ist bei der Inszenierung der wichtigste Bestandteil. Nachdem
entschieden wurde, dass eine Handlung oder Aktion für eine Geschichte relevant
ist, bestimmt die Inszenierung, wie sie umgesetzt werden soll. Mögliche Bestand-
teile der Inszenierung sind die Länge der Szene, die Wahl der Kameraperspek-
tive oder die verwendete Musik. Bei einer gruseligen Szene kann beispielsweise
mit passenden Symbolen, wie einem verlassenen Haus oder heulendem Wind
gearbeitet werden. Dadurch wird Zuschauer:innen die Atmosphäre der Szene un-
missverständlich übermittelt. Unpassend wäre hierbei z.B. ein helles Bett mit
Blumenmotiv.16
Relevanz im UI/UX-Design
Einem Design Klarheit zu geben ist ein generelles Ziel von UI/UX-Design. Bei
Cartoon Animationen muss spezifisch darauf geachtet werden, dass Bewegungen
und Handlungen unmissverständlich sind, da Figuren und Gegenstände dauer-
haft in Bewegung sind und sich die Szene verändert. In einer User Experience
hingegen ist Klarheit ein allgemeines Ziel, welches durch das gesamte Design
und Layout erfüllt werden soll.17 Der Zustand, in dem sich ein System befin-
det, sollte zu jedem Zeitpunkt zu erkennen sein. Dadurch wissen Nutzer:innen,
15
Vgl. Head, 2016, S.137f
16
Vgl. Thomas u. Johnston, 1981, S.54f
17
Vgl. Willenskomer, 2016
82 Die zwölf Prinzipien der Animation
welche Veränderungen ihre vorangegangenen Interaktionen bewirkt haben und
können ihre nächsten Schritte leichter planen.18 Dies kann im User Interface
auf jede Bewegung und Navigation zwischen verschiedenen Ansichten des Sys-
tem übertragen werden. Beispielsweise bei den Übergangen zwischen Eltern- und
Kindansichten helfen Zoom Animationen dabei, die Beziehung zwischen den ver-
schiedenen Screens zu verdeutlichen.
2.4 Straight Ahead Action and Pose to Pose
Erklärung
Bei dem vierten Prinzip handelt es sich eher um einen konkreten Ansatz, wie eine
Aktion animiert werden kann, und weniger um ein abstraktes Prinzip oder einen
Grundgedanken. Hierbei gibt es zwei unterschiedliche Möglichkeiten nach denen
Animator:innen eine Szene umsetzen. Bei der Möglichkeit Straight Ahead wird
jedes Bild der Szene nacheinander gezeichnet, ohne weiter voraus liegende Bilder
zu planen. Die Handlung der Szene ist jedoch bekannt. Animator:innen können
im Laufe der gezeichneten Bilder Ideen sammeln, was eine große Spontanität und
Freiheit bietet. Straight Ahead eignet sich für schwer berechenbare Bewegungen,
wie beispielsweise Feuer oder spritzendes Wasser.
Bei dem Pose to Pose Ansatz werden die Handlungen und Aktionen, die in
einer Szene passieren, geplant. Animator:innen zeichnen hierbei zunächst wich-
tige Posen innerhalb der Bewegungen und füllen die Lücken anschließend mit
Zwischenbildern auf. Diese Möglichkeit bietet eine größere Kontrolle über die
Handlung der Szene, als Straight Ahead. Des Weiteren sehen Animator:innen
bereits früh in dem Animationsprozess, wie die Bewegung aussehen wird, da
die Schlüsselmomente schon feststehen. Pose to Pose eignet sich für die meisten
Bewegungen, wie beispielsweise sich bewegende Figuren.
Es ist ebenfalls möglich beide Ansätze miteinander zu kombinieren, sollten sich
bestimmte Bereiche einer Szene mit Straight Ahead und andere mit Pose to Pose
besser umsetzen lassen.19
18
Vgl. Nielsen, 1994
19
Vgl. Thomas u. Johnston, 1981, S.57f
92 Die zwölf Prinzipien der Animation
Relevanz im UI/UX-Design
Da Straight Ahead Action and Pose to Pose zwei unterschiedliche Prozesse be-
schreiben, wie Cartoon-Zeichnungen umgesetzt werden können, lässt sich dieses
Prinzip nur schwer auf einen UI/UX-Kontext übertragen. Pose to Pose lässt
sich dennoch mit der Verwendung von Keyframes vergleichen.20 Durch Keyfra-
mes können zwischen Start und Ende einer Animation weitere Schlüsselmomente
festgelegt werden. Die Eigenschaften eines Elements können somit zu beliebigen
Zeitpunkten in der Animation verändert werden, wodurch sich beispielsweise
Richtungswechsel implementieren lassen. Die Schlüsselmomente verhalten sich
dabei ähnlich wie eine Pose aus dem Pose to Pose Ansatz. Die Animation kann
dadurch insgesamt individueller gestaltet werden.21 Simplere Animationen, bei
denen lediglich ein Start- und ein Endpunkt nötig ist, lassen sich im Web-Kontext
in CSS mithilfe von Transitions umsetzen. Unter diese Beschreibung fallen UI-
Animationen, wie beispielsweise Buttons, die ihre Hintergrundfarbe ändern wenn
Nutzer:innen darüber hovern, oder eine Hamburger-Navigation, die ihre Position
verändert und in das User Interface eingeführt wird.22
Abbildung 2.5: Straight Ahead Technique in Fruit Ninja (Vgl. Hinman, 2012)
Straight Ahead Action hingegen wird im UI/UX-Design verwendet, wenn un-
gewöhnliche oder dynamische Bewegungen gewünscht sind. In Abbildung 2.5 ist
das User Interface eines Spiels zu sehen, bei dem Früchte zerschnitten werden
20
Vgl. Willenskomer, 2016
21
Vgl. Ng, 2017
22
Vgl. Mozilla Corporation, oJd
102 Die zwölf Prinzipien der Animation
und dabei Flecken auf der dahinter liegenden Wand hinterlassen. Die Explosion
der Früchte und das Spritzen stellt eine ungewöhnliche und dynamische Bewe-
gung dar, bei der ein Straight Ahead Ansatz ratsam wäre. Die Mehrheit der
Animationen und Übergänge, die in User Experiences verwendet werden, folgen
jedoch dem Pose to Pose Ansatz.23
2.5 Follow Through and Overlapping Action
Erklärung
Während das Staging den Anfang einer Animation darstellt und auf eine Aktion
vorbereitet, beschäftigt sich das folgende Prinzip mit dem Ende einer Animati-
on. Das Problem bei dem Ende einer Animation besteht darin, dass in keinem
Szenario alle Teile einer Figur gleichzeitig zum Stehen kommen, sondern dies
nacheinander geschieht. Mithilfe von Follow Through lässt sich dieses Problem
korrigieren. Hierbei lassen sich die Elemente einer Figur in verschiedene Kate-
gorien einteilen. Schwingende Körperteile, wie beispielsweise Arme oder Hände,
brauchen länger, um zum Stehen zu kommen, als der Rest der Figur. Auch lose
Haut, wie z.B. Wangen oder ein dicker Bauch, sind noch in Bewegung, obwohl
die Figur selber bereits stehen geblieben ist. Abgesehen von Körperteilen können
Figuren weitere Anhängsel besitzen, wie einen Mantel oder eine Mütze. 24
In Abbildung 2.6 ist ein Zwerg zu sehen, der seinen Kopf zunächst nach rechts
und anschließend wieder zurück dreht. Die Wangen des Zwerges repräsentieren
hierbei lose Haut und brauchen eine längere Zeit, um zum Stehen zu kommen,
als der Kopf selber. Sie sind noch in Bewegung, obwohl der Zwerg seinen Kopf
bereits gedreht hat.
Overlapping Action hingegen beschreibt die Überlappung mehrerer Bewegun-
gen. Damit ist jedoch keine räumliche, sondern eine zeitliche Überlappung ge-
meint, also mehrere Animationen, die gleichzeitig passieren. Jedes Körperteil
bewegt sich dabei mit leichten Variationen in Dauer und Geschwindigkeit. Eine
Bewegung sollte niemals komplett zu Ende gehen, bevor die nächste startet. Die
23
Vgl. Hinman, 2012
24
Vgl. Thomas u. Johnston, 1981, S.60f
112 Die zwölf Prinzipien der Animation
Abbildung 2.6: Follow Through: Surprised Dwarf (Vgl. Waith-Mair, 2019, S.61)
Überlappung mehrerer Bewegungen und Aktionen wirkt natürlicher, da dies in
der realen Welt ebenfalls auftritt.25
Relevanz im UI/UX-Design
Im UI/UX-Design kann mithilfe des Prinzips Follow Through and Overlapping
Action die Hierarchie zwischen verschiedenen Elementen verdeutlicht werden.
Durch Animationen und Übergänge kann Nutzer:innen vermittelt werden, in
welcher Beziehung bestimmte Elemente zueinander stehen.26 Overlapping Acti-
on beschreibt dabei das Verhalten, wenn ein UI-Element animiert wird, obwohl
die Animation eines anderen Elements noch nicht beendet ist. Soll eine ganze
Gruppe, bestehend aus demselben Elementtyp, animiert werden, so ist es ratsam
nicht jedes mal darauf zu warten bis die Animation eines Elements komplett
fertig ist, bevor das nächste starten darf. Im Motion Design wird dieses Konzept
Offset genannt und wird meist auf Objekte angewandt, statt auf Charaktere.27
Die Nützlichkeit von Offsets besteht darin, die Beziehungen von Elementen mit
Hilfe von Zeit zu definieren. Dadurch, dass die Elemente nacheinander animiert
werden, nehmen Nutzer:innen diese als getrennte Objekte wahr.28
25
Vgl. Hinman, 2012
26
Vgl. Hinman, 2012
27
Vgl. Head, 2016, S.45f
28
Vgl. Willenskomer, 2017
122 Die zwölf Prinzipien der Animation
Abbildung 2.7: Startscreen of Windows Phone (Vgl. Hinman, 2012)
In Abbildung 2.7 ist der Übergang auf die Startseite eines Windows Smart-
phones zu sehen. Die einzelnen Kacheln auf der Startseite tauchen hierbei nicht
alle gleichzeitig auf, sondern werden mit Offsets animiert. Durch diese zeitliche
Verschiebung können Nutzer:innen die Elemente bereits individuell wahrnehmen
und erhalten so einen ersten Eindruck der räumlichen Hierarchie der Seite.29
Ähnlich wie bei dem Prinzip der Ähnlichkeit, bei der Objekte mit denselben
visuellen Charakteristika für Nutzer:innen zugehörig erscheinen, verhält es sich
auch mit Animationen. Elemente, die sich gleich verhalten und dieselben Anima-
tionen besitzen, werden als verbunden wahrgenommen. In Abbildung 2.7 werden
alle Kacheln mit derselben Bewegungsart animiert. Somit nehmen Nutzer:innen
diese als denselben Elementtyp wahr.30
Follow Through manifestiert sich im User Interface anders als in Cartoon Ani-
mationen, da es sich nicht um Charaktere handelt, welche aus vielen verschiede-
nen Körperteilen bestehen, sondern um Objekte. Follow Through wird im User
Interface eingesetzt, indem sich ein Element über sein Ziel hinaus bewegt und
wieder ein Stück zurück kommt, bevor es schließlich stehen bleibt. Anders als die
Cartoon Figur, bei der mehrere Körperteile noch in Bewegung sind, obwohl sie
schon stehen geblieben ist, ist es im User Interface das gesamte Element, welches
sich noch weiter bewegt. Diese überschreitende Bewegung wirkt auf Nutzer:innen
so, als hätte das Element zu viel Energie und Schwung, um bei dem ersten Pas-
sieren der finalen Position bereits darauf stehen zu bleiben.31
29
Vgl. Hinman, 2012
30
Vgl. Harley, 2020
31
Vgl. Head, 2016, S.43f
132 Die zwölf Prinzipien der Animation
2.6 Slow In and Slow Out
Erklärung
Sobald Animator:innen mit den wichtigsten Posen einer Szene fertig waren, muss-
ten diese, wie schon bei dem Prinzip Pose to Pose beschrieben, mit Zeichnungen
dazwischen aufgefüllt werden. Die Posen sollten von dem Publikum möglichst gut
wahrgenommen werden können. Aus diesem Grund wurden die Zwischenzeich-
nung so gesetzt, dass sie sich möglichst nah an der aktuellen oder der nächsten
Pose befanden. In der Mitte der beiden Posen befand sich, wie auch in Abbildung
2.8 anhand einer springenden Kugel zu erkennen, nur eines oder wenige Bilder.
Abbildung 2.8: Slow In and Slow Out: Jumping Ball (Vgl. Hinman, 2012)
Durch diese Vorgehensweise entstand ein weiterer Effekt: Bewegungen wirk-
ten nicht mechanisch, sondern natürlicher. Wie auch im realen Leben beginnt
eine Bewegung zunächst langsam bevor sie schneller wird und langsam wieder
bremst.32
Relevanz im UI/UX-Design
Dieses Prinzip lässt sich mit demselben Effekt auf Elemente im User Interface an-
wenden. Auch im Bereich UI/UX-Design wird Slow In and Slow Out verwendet,
um Bewegungscharakteristika der physikalischen Welt auf das User Interface zu
übertragen. Ziel dabei ist es, dass Bewegungen im User Interface intuitiver und
realer wirken. Das gesamte System lässt sich somit leichter benutzen und fühlt
sich für Nutzer:innen natürlicher an.33 Im Gegensatz dazu wirken Elemente, die
32
Vgl. Thomas u. Johnston, 1981, S.63
33
Vgl. Mortensen, 2019
142 Die zwölf Prinzipien der Animation
sich linear bewegen, mechanisch.34 Im User Interface kann dieses Prinzip mit der
Umsetzung von Easings verglichen werden.
Abbildung 2.9: Example of an Easing Curve (Vgl. Sitnik u. Solovev, oJ)
Ein Easing kann mithilfe einer Easing Kurve, wie der in Abbildung 2.9, be-
schrieben werden. Eine Easing Kurve zeigt auf der x-Achse den Grad der Fort-
schreitung einer Animation und auf der t-Achse die Zeit. An den Stellen, an
denen die Kurve flacher ist, ist die Animation langsamer und an den steilen
Stellen schneller.35 Die gezeigte Abbildung ist ein Beispiel für eine Slow In And
Slow Out Animation. Die Kurve ist zunächst flach, wird im Laufe der Bewegung
jedoch steiler und flacht gegen Ende wieder ab.
2.7 Arcs
Erklärung
Das siebte Prinzip beschäftigt sich mit den Bewegungen von Objekten. Im Ge-
gensatz zu mechanischen Objekten, wie Autos oder Fahrräder, führen organi-
sche Objekte keine komplett geraden Bewegungen aus. Bewegungen von Men-
schen, Tieren oder Pflanzen folgen, bis auf wenige Ausnahmen, meist einem bo-
genförmigen Pfad. (Vgl. Hinman, 2012) Organische Objekte, die eine komplett
gerade Bewegung auf der Leinwand ausführen, wirken starr und nicht natürlich.
In Abbildung 2.10 ist exemplarisch eine Hand zu sehen, die sich von oben nach
unten bewegt, um schließlich auf etwas zu zeigen. Die Bewegung erfolgt dabei in
einem Bogen.
34
Vgl. Head, 2016, S.58
35
Vgl. Brownhill, 2015
152 Die zwölf Prinzipien der Animation
Abbildung 2.10: Arcs: Pointing Finger (Vgl. Thomas u. Johnston, 1981, S.63)
Relevanz im UI/UX-Design
Da User Interfaces normalerweise entlang eines Grid Systems36 ausgerichtet wer-
den, neigen Designer:innen dazu Bewegungen entlang gerader Linien zu gestal-
ten. Ob sich ein Element entlang eines Bogens bewegen soll, hängt jedoch da-
von ab, welche Wirkung das System vermitteln soll.37 Mechanische Objekte, wie
beispielsweise Autos oder Züge, bewegen sich in geraden Linien. Pflanzen, Tie-
re und andere organische Dinge hingegen neigen dazu Bewegungen in Bögen
auszuführen. Je nachdem, welche Wirkung in einem System erwünscht oder zu
dessen Marke passt, kann die jeweilige Form der Bewegung verwendet werden.38
2.8 Secondary Action
Erklärung
Das achte Prinzip beschäftigt sich mit der Idee, eine Aktion durch eine weite-
re, sogenannte Secondary Action, zu unterstützen. Die Secondary Action spielt
dabei eine untergeordnete Rolle und dient lediglich dazu die Hauptaktion zu un-
terstützen. Sie soll weder mit der Aussage der Hauptaktion konkurrieren, noch
die Szene dominieren und in den Vordergrund rücken. Die Secondary Action
sollte so umgesetzt sein, dass sie für Zuschauer:innen klar erkennbar ist, gleich-
zeitig aber nicht ablenkt. Dies wird realisiert, indem Animator:innen zunächst
die Hauptaktion ausarbeiten bis diese genügend ausgereift ist und die Aussage
36
Vgl. Google Ireland Limited, oJf
37
Vgl. Joyce, 2018
38
Vgl. Oliynyk, 2018
162 Die zwölf Prinzipien der Animation
der Szene übermittelt. Anschließend arbeiten Animator:innen die Szene erneut
durch, um potenzielle Möglichkeiten für Secondary Actions zu identifizieren.
Der Unterschied von Secondary zu Overlapping Actions besteht darin, dass
eine Overlapping Action immer das Ergebnis der primären Aktion ist. Eine Se-
condary Action ist jedoch unabhängig von der primären Aktion. Beispiele für
Secondary Animations wäre eine traurige Person, die sich, während sie sich um-
dreht, eine Träne von ihrer Wange wischt.39
Abbildung 2.11: Secondary Animation: Running Squirrel (Vgl. Hinman, 2012)
In Abbildung 2.11 ist eine Animation, in Form eines laufenden Eichhörnchens,
zu sehen. Die Hauptaktion besteht hierbei aus der Bewegung der Beine und des
Körpers. Die Bewegung des Eichhörnchenschwanzes stellt dabei die Secondary
Action dar. Diese macht die Szene realistischer.40
Das Ziel von Secondary Actions besteht darin die Szene zu bereichern, einer
Aktion mehr Natürlichkeit und einem Charakter mehr Persönlichkeit zu verlei-
hen.41
Relevanz im UI/UX-Design
Im UI/UX-Design lässt sich dieses Prinzip ebenfalls anwenden. Auch hier besteht
das Ziel darin, eine primäre Animation durch eine weitere zu unterstützen, ohne
jedoch von dieser abzulenken. 42 Im User Interface finden sich einige Elemente, die
in Beziehung mit anderen stehen, beispielsweise eine hierarchische Beziehung zwi-
schen Eltern- und Kindelement oder eine räumliche Beziehung, bei der sich ver-
schiedene Elemente gleichzeitig bewegen. Solche Szenarien bieten die Möglichkeit
eine Secondary Action zu konzipieren.43 Aber auch animierte Microinteractions
39
Vgl. Thomas u. Johnston, 1981, S.64f
40
Vgl. Hinman, 2012
41
Vgl. Thomas u. Johnston, 1981, S.65
42
Vgl. Oliynyk, 2018
43
Vgl. Head, 2016, S.52f
172 Die zwölf Prinzipien der Animation
stellen potenzielle Optionen für Secondary Actions dar. Microinteractions nutzen
Animationen, um Nutzer:innen Feedback nach einer Interaktion zu vermitteln.
Dieses Feedback ist subtil gehalten und erkennbar mit dem Element verbunden,
welches als Trigger der Animation fungiert. Zu Microinteractions gehören In-
teraktionsmöglichkeiten wie beispielsweise Benachrichtigungen, Pull-To-Refresh
Animations oder Scrollbars.
(a) (b) (c) (d)
Abbildung 2.12: Twitters like heart animation (Vgl. Twitter International Com-
pany, oJ)
In Abbildung 2.12 ist eine Microinteraction zu sehen, mit deren Hilfe Nut-
zer:innen einen Beitrag mit einem Herz markieren können. Bei einem Klick auf
das graue Herz-Icon wird die Primary Action ausgeführt. Hierbei färbt sich das
Herz-Icon rot, schwillt kurz an und skaliert sich anschließend wieder auf Normal-
größe. Unterstützt wird die Animation von einer weiteren Aktion, der Secondary
Action. Diese besteht aus Kreisen und Partikeln hinter dem Herz-Icon, die sich
nach außen ausbreiten und schließlich wieder verschwinden. Diese weitere Aktion
unterstreicht die Primary Action und hilft dabei, Nutzer:innen ein Feedback für
die erfolgreiche Interaktion zu geben.44
2.9 Timing
Erklärung
Die Anzahl der Zeichnungen oder Bilder, die während einer Bewegung verwendet
werden, bestimmen den Zeitraum, den diese andauert. Mithilfe von Timing kann
eine Aktion klar dargestellt werden, wodurch Zuschauer:innen die Handlung und
Geschichte der Szene besser verstehen.45 Timing kann die physikalischen Cha-
rakteristika einer Figur, wie beispielsweise Gewicht oder Größe, zu verdeutlichen.
44
Vgl. Head, 2016, S.52
45
Vgl. Thomas u. Johnston, 1981, S.65
182 Die zwölf Prinzipien der Animation
Große und schwere Figuren bewegen sich z.B. langsamer als kleine und leichte.46
Diese physikalischen Charakteristika können ebenfalls die Aussage einer Szene
beeinflussen. Je nachdem, wie viele Zeichnungen zwischen zwei verschiedenen
Posen verwendet werden, kann diese Aussage deutlich variieren. Eine beispiel-
hafte Pose könnte eine Figur sein, die ihren Kopf leicht zu ihrer rechten Schulter
geneigt hat. In der zweiten Pose könnte sie den Kopf nach links gedreht und das
Kinn leicht erhoben haben.
In Tabelle 2.1 ist links die Anzahl an Zeichnungen zwischen diesen zwei ver-
schiedenen Posen aufgeführt. Rechts stehen mögliche Effekte, die durch die re-
sultierenden Geschwindigkeiten erzielt werden können. Bei keinen oder wenigen
Zeichnungen zwischen den beiden Posen dreht sich der Kopf der Figur schnell
und es sieht aus, als würde sie von einem Gegenstand, wie beispielsweise einer
Pfanne, geschlagen werden. Bei mehreren Zwischenbildern jedoch könnte die Fi-
gur auch etwas interessantes gesehen und ihren Kopf langsam gedreht haben.
Tabelle 2.1: Effect of Drawings inbetween two Poses
Amount of drawings Effect
inbetween
No inbetweens The Character has been hit by a tremendous
force.
One inbetween The Character has been hit by a brick, rolling
pin, frying pan.
Two inbetweens The Character has a nervous tic, a muscle
spam, an uncontrollable twitch.
Three inbetweens The Character is doging the brick, frying
pan.
Four inbetweens The Character is giving a crisp order, ”Get
going!Move on!”
Five inbetweens The Character is more friendly, Över here.
Come on - hurry!”
Six inbetweens The Character sees a good-locking girl, or the
sports car he always wanted
Seven inbetweens The Character tries to get a better look at
something
(Vgl. Thomas u. Johnston, 1981, S.66)
46
Vgl. Hinman, 2012
192 Die zwölf Prinzipien der Animation
Relevanz im UI/UX-Design
Abgesehen von der Tatsache, dass unterschiedliche Geschwindigkeiten unter-
schiedliche Wirkungen hervorrufen, muss bei dem Thema Timing im User In-
terface ein weiterer Aspekt berücksichtigt werden: Eine Animation sollte schnell
genug sein. Auf der einen Seite muss sie so langsam sein, dass sie von Nutzer:innen
nachvollzogen werden kann und auf der anderen Seite so schnell, dass diese nicht
unnötig warten müssen.47 Zu schnelle Animationen sind schwer nachzuvollzie-
hen und sehen nicht wie eine einheitliche Bewegung aus. Langsame Animationen
hingegen wirken aufdringlich und verlangsamen den User Flow. Im Allgemeinen
liegt die Dauer einer Animation im User Interface meist zwischen 100-500 Milli-
sekunden. Dies hängt von der Komplexität des Elements, dessen Größe und wie
weit es sich bewegt ab.48 Eine Animation, die dazu dient ein einfaches Feedback
zu geben, sollte sich in einem Zeitrahmen von etwa 100 bis 150 Millisekunden be-
wegen. Dies ist die Grenze, in der es sich für Nutzer:innen anfühlt, als würde das
System sofort auf deren Eingaben reagieren. Die Animation erzeugt die Illusion,
es würde physikalisch mit dem Objekt interagiert werden.49 Unter diese Kate-
gorie fallen alle Animationen, die dazu da sind, sofortiges Feedback zu geben,
wie beispielsweise Checkboxes oder Toggle Switches. Für größere Animationen,
in welchen sich die Ansicht eines Systems erheblich verändert oder neue Elemen-
te im User Interface eingeführt werden, ist ein längerer Zeitraum, etwa 200-300
Millisekunden, angebracht. Je größer ein Element ist und je weiter es wandert,
desto länger sollte auch die Animation dauern.50
2.10 Exaggeration
Erklärung
Das folgende Prinzip beschreibt die Übertreibung einer Aktion. Dies wird er-
reicht, indem die Essenz einer Bewegung oder einer ganzen Szene identifiziert
und anschließend wie bei einer Karikatur überladen dargestellt wird. Zum Bei-
spiel sollen fröhliche Personen noch fröhlicher dargestellt werden und traurige
47
Vgl. Google Ireland Limited, oJc
48
Vgl. Laubheimer, 2020
49
Vgl. Nielsen, 1993
50
Vgl. Laubheimer, 2020
202 Die zwölf Prinzipien der Animation
Personen noch trauriger. Durch diese Verzerrung der Realität und das Dramati-
sieren der wichtigsten Elemente wird eine Übertreibung erreicht.51
In Abbildung 2.13 sind die beiden Hauptfiguren der Zeichentrickserie Ren und
Stimpy zu sehen. Stimpy wird in dem Bild von dem wütenden Ren gewürgt. Die
Übertreibung wurde hierbei umgesetzt, indem der Kopf und die Augen von Stim-
py deutlich größer dargestellt wurden und in verschiedene Richtungen schauen.
Außerdem schaut seine Zunge heraus und Rens Hand ist ebenfalls vergrößert.
Abbildung 2.13: Exaggeration: Ren and Stimpy (Vgl. Hinman, 2012)
Relevanz im UI/UX-Design
Exaggeration tritt ebenfalls im User Interface auf und verfolgt dabei dasselbe
Ziel wie bei Cartoon Animationen. Wie bei einer Karikatur soll die Essenz einer
Aktion übertrieben dargestellt werden, um diese unmissverständlich zu vermit-
teln. Die wichtigen Aspekte und Bewegungen eines Elements werden mithilfe
dieses Prinzips in den Vordergrund gerückt.52 Dies geschieht unter anderem da-
durch, dass Bewegungen die Aufmerksamkeit der Nutzer:innen auf sich lenken.
Die wichtigsten Elemente in einer User Journey können demnach mit Anima-
tionen versehen werden, um Nutzer:innen die Bedienung des User Interface zu
erleichtern. Nachdem mehrere Eingabefelder (Inputs) ausgefüllt wurden, könnte
sich bei einem Fehler der Input bewegen, der den Fehler verursacht hat. Durch
diese Bewegung wird die Aufmerksamkeit von Nutzer:innen sofort auf das aktu-
ell wichtigste Element im User Flow fokussiert und die Essenz, in diesem Falle
51
Vgl. Thomas u. Johnston, 1981, S.66f
52
Vgl. Head, 2016, S.59f
212 Die zwölf Prinzipien der Animation
eine Fehlermeldung, wird unmissverständlich klar.53 Des Weiteren dient dieses
Prinzip dazu, die Hierarchie zwischen verschiedenen Elementen zu vermitteln.
Elemente mit extravaganten Bewegungen lenken nicht nur die Aufmerksamkeit
auf sich, sondern werden auch automatisch als wichtiger und bedeutender wahr-
genommen.54 Während in Cartoon Animationen versucht wird eine Aktion zu
übertreiben, muss bei der Umsetzung im User Interface darauf geachtet werden,
dass diese Übertreibung für den Kontext angemessen ist. Sollte die Ansicht eines
Systems mehrere animierte Elemente besitzen, so ist es wichtig das Gesamtbild
ausgewogen zu halten. Zu viel Bewegung im User Interface könnte Nutzer:innen
verwirren oder gar nerven, was sich negativ auf die User Experience auswirkt.55
2.11 Solid Drawing
Erklärung
Das Prinzip Solid Drawing dient dazu Animationen so zu gestalten, dass diese
die Gesetzmäßigkeiten des dreidimensionalen Raumes erfüllen. Dies wird durch
das Berücksichtigen von Anatomie, Gewicht, Balance und Licht und Schatten
erreicht.56 Es ist von Vorteil als Animator:in zeichnen zu können, da Figuren
aus verschiedenen Perspektiven und mit unterschiedlichen Positionen dargestellt
werden müssen. Eine wichtige Technik, um einen Charakter möglichst realistisch
wirken zu lassen, bestand darin sogenannte Zwillinge zu vermeiden. So wurden
Körperteile genannt, die in einer Zeichnung genau wie ihr Gegenstück aussahen.
Ein Zwilling in einer Zeichnung lässt diese flach und steif wirken.57
In Abbildung 2.14 (a) und (b) ist Mickey Mouse in zwei unterschiedlichen
Positionen zu sehen. Abbildung (a) stellt hierbei die unrealistische Position dar,
da Mickey gerade zur Kamera steht und somit keine Perspektive entsteht, die die
Figur dreidimensional aussehen lassen würde. Außerdem sieht jedes Körperteil,
wie z.B. Ohr, Auge oder Hand exakt wie das Gegenstück aus. Die Zeichnung
beinhaltet demzufolge Zwillinge, welche vermieden werden sollten. Dies trägt
ebenfalls dazu bei, dass die Zeichnung unrealistischer aussieht. In Abbildung
53
Vgl. Pawlowski, 2020, S.10f
54
Vgl. Head, 2016, S.61
55
Vgl. Hinman, 2012
56
Vgl. Hinman, 2012
57
Vgl. Thomas u. Johnston, 1981, S.67
222 Die zwölf Prinzipien der Animation
(a) (b)
Abbildung 2.14: Mickey Mouse (Vgl. Thomas u. Johnston, 1981, S.68)
2.14 (b) ist Mickey jedoch leicht zu seiner linken Seite geneigt und somit in
Perspektive gesetzt. Dadurch unterscheiden sich ebenfalls seine Körperteile von
ihren Gegenstücken und die Zeichnung sieht realistischer und dreidimensionaler
aus.
Relevanz im UI/UX-Design
Auch im UI/UX-Design ist es von Vorteil Elemente und Figuren so zu gestalten,
dass sie wie solide Objekte aussehen oder sich verhalten und somit die Gesetze
der physikalischen Welt widerspiegeln. Das Ziel dieses Prinzips ist ähnlich wie das
bei der Verwendung eines Easings: Durch für Nutzer:innen bekannte Eigenschaf-
ten sollen User Interfaces natürlicher und intuitiver wirken und somit leichter
zu bedienen sein. Bei diesem Prinzip geht es jedoch nicht um eine einzelne Ei-
genschaft, wie beispielsweise der Geschwindigkeit bei einem Easing, sondern um
das gesamte Element. Elemente im User Interface besitzen nach diesem Prinzip
ein Gewicht und ein Volumen und reagieren auf Kräfte wie Trägheit, Schwerkraft
und Reibung. Diese Kräfte spiegeln sich in jeder Bewegung wieder, die ausgeführt
wird.58 Dieser Grundgedanke ist zum Beispiel die Basis von Googles Material De-
sign System. Material fungiert hierbei als Metapher für physikalisches Material
oder einer Textur und wie dieses auf Lichteinstrahlung reagiert und Schatten
wirft. Die dabei entstehenden Oberflächen orientieren sich an den Medien Papier
und Tinte.59 Auch die Eigenschaften von Dreidimensionalität werden im Material
58
Vgl. Layton u. Fry-Pierce, 2018
59
Vgl. Google Ireland Limited, oJd
232 Die zwölf Prinzipien der Animation
Design System behandelt. Um Elemente erhöht darzustellen und auf einer ima-
ginären z-Achse zu verschieben, können Schatten verwendet werden. Dadurch,
dass der Schatten eines Elements wächst, sieht es erhabener aus, als würde es
sich nach oben bewegen.
Abbildung 2.15: Floating Action Button over List View (Vgl. Google Ireland
Limited, oJa)
Wie in Abbildung 2.15 zu sehen ist, kann dieser Effekt die hierarchischen Bezie-
hungen zwischen verschiedenen Elementen vermitteln. Dadurch, dass der Floa-
ting Action Button in der unteren, rechten Ecke mit einem Schatten versehen
ist und sich im Sichtfeld vor der List View befindet, wird er als unabhängig und
hierarchisch wichtiger empfunden.60
Zurückzuführen sind die positiven Eigenschaften von physikalischem Verhal-
ten im User Interface auf das Objektwissen, welches Menschen im Säuglingsalter
erlernen. Objektwissen ist in der Wahrnehmung von fundamentaler Bedeutung
und beschäftigt sich damit, wie Menschen physikalische Objekte erfahren und
mit diesen interagieren. Beispielsweise können Objekte von anderen Objekten
verdeckt werden, existieren jedoch weiterhin. Im User Interface lässt sich diese
Gesetzmäßigkeit auf Off-Screen Elemente übertragen. Obwohl eine ausklappbare
Navigation deaktiviert ist, wissen Nutzer:innen trotzdem, dass diese weiterhin
60
Vgl. Google Ireland Limited, oJb
242 Die zwölf Prinzipien der Animation
existiert, obwohl sie nicht zu sehen ist. Weitere Beispiele wären, dass sich Objek-
te erst bewegen, wenn eine Kraft auf diese einwirkt, oder dass sie nicht einfach
verschwinden und an einer anderen Stelle auftauchen können, sondern sich be-
wegen müssen. Dieses Objektwissen von Nutzer:innen hilft dabei Systeme zu
gestalten, die einfach zu verstehen sind und Erwartungen erfüllen. Es wäre hin-
gegen verwirrend, wenn sich Objekte jedes Mal anders verhalten würden und das
Objektwissen neu erlernt werden müsste.61
2.12 Appeal
Erklärung
Das zwölfte und letzte Prinzip beschäftigt sich mit der Idee, dass ein Charakter
ansprechend anzusehen sein soll. Damit ist nicht das gute Aussehen des Charak-
ters gemeint, sondern ob dieser interessant ist. Obwohl das Empfinden darüber
grundsätzlich subjektiven Ursprungs ist, existieren verschiedene Merkmale, die
diese Wirkung eines Charakters optimieren können.62 Befriedigendes Design, Ein-
fachheit und Charme führen beispielsweise dazu, dass sich Zuschauer:innen einen
bestimmten Charakter gerne anschauen, weil er durch diese Merkmale automa-
tisch ansprechender wird. Im Gegenzug dazu kann kompliziertes Design, zu viele
Details oder schlechte Proportionen und Formen dazu führen, dass eine Figur
nicht gerne betrachtet wird.63
Die Verwendung verschiedener Formen für unterschiedliche Charaktere oder
Objekte kann diese ebenfalls interessanter wirken lassen. Dadurch entsteht Ab-
wechslung im Charakterdesign und es bereitet Zuschauer:innen mehr Spaß die
Szene zu betrachten. Das Prinzip Exaggeration kann eine Figur ebenfalls anspre-
chender wirken lassen. Durch die Karikatur eines Charakters werden die Merkma-
le, die diesen Charakter definieren, deutlicher dargestellt bis eine Übertreibung
entsteht.64
61
Vgl. Mortensen, 2019
62
Vgl. Moos, 2019
63
Vgl. Thomas u. Johnston, 1981, S.69f
64
Vgl. Moos, 2019
252 Die zwölf Prinzipien der Animation
Relevanz im UI/UX-Design
Appeal ist das Prinzip, welches am wenigsten greifbar ist. Im Grunde genommen
ist es Ziel des gesamten UI-Design Prozesses die Elemente im User Interface so
zu gestalten, dass diese interessant wirken und eine gewisse Ästhetik ausstrahlen.
Erreicht werden kann dies beispielsweise durch interessante Formen, konsisten-
tes Design, gut gewählte Proportionen und Minimalismus.65 Ein gutes Design
zu erstellen ist essenziell für die Benutzung eines Systems, da es die Usability
fördert und eine positivere User Experience hervorruft. Nutzer:innen nehmen ein
attraktiveres Produkt oder System als besser nutzbar wahr und schließen durch
dessen positives und ästhetisches Erscheinungsbild auch auf eine gute Funktio-
nalität. Solche Systeme machen Nutzer:innen ebenfalls toleranter gegenüber we-
niger gravierenden Usability-Problemen.66
Animationen, die gut in ihre Umgebung passen und dem Kontext angemessen
sind, neigen dazu auf Nutzer:innen ansprechender zu wirken. Im Kontext eines
Cartoons geht es bei diesem Prinzip darum einen Charakter so zu gestalten, dass
dieser heraussticht. Dieses Ziel ist jedoch für ein Element im User Interface nicht
zutreffend, da zu viele herausstechende Animationen auf die User Experience
eher abträglich wirken. Nutzer:innen könnten durch zu viele Eindrücke verwirrt
werden, weswegen Animationen normalerweise subtil verwendet werden.67 Eine
Ausnahme stellen jedoch Wartezeiten für Nutzer:innen dar, wie beispielsweise
der initiale Aufruf einer Seite.68 Auch bei animierten Ladebalken kann mit Ein-
drücken und Bewegungen oder kreativen Illustrationen gearbeitet werden, um
Nutzer:innen von der Wartezeit abzulenken und eventuell sogar zu unterhalten.
In Abbildung 2.16 ist ein Ladebalken in Form eines Golfballs zu sehen, der
beim vollständigen Laden in das Loch ganz rechts fällt. Diese Animation lässt
ein System ansprechender wirken und lenkt zudem die Aufmerksamkeit von Nut-
zer:innen, sodass ihnen die Wartezeit kürzer vorkommt.69
65
Vgl. Head, 2016, S.63
66
Vgl. Moran, 2017
67
Vgl. Head, 2016, S.63
68
Vgl. Shapiro, 2015, S.47f
69
Vgl. Babich, 2016a
262 Die zwölf Prinzipien der Animation
Abbildung 2.16: Progress Indicator as a Visual Disctraction (Vgl. Babich, 2016a)
273 Konzeption und Umsetzung des
CSS-Frameworks
Nachdem nun die zwölf Prinzipien von Disney analysiert und im Hinblick auf
deren Relevanz im UI/UX-Design betrachtet wurden, beschäftigt sich das folgen-
de Kapitel mit der Konzeption und Umsetzung eines Prototypen für ein CSS-
Framework.
Ein CSS-Framework dient dazu, Entwickler:innen bei der Umsetzung von We-
banwendungen zu unterstützen. Statt bei jedem Projekt mit dem gesamten Sty-
ling neu anzufangen, kann diese Arbeit durch CSS-Frameworks abgenommen
werden. Sie bieten dabei eine Zusammenstellung an vordefinierten Designs für
verbreitete Elemente und Interaktionen.1
Aufgrund des Zeitrahmens kann lediglich ein Prototyp eines CSS-Frameworks
umgesetzt werden. Dieser soll demonstrieren, wie sich die zwölf Prinzipien der
Animation für gängige UI-Elemente konzipieren lassen und wie eine Umsetzung
mithilfe von Web Technologien aussehen könnte.
Bei der Konzeption wird zunächst ein Katalog an gängigen UI-Elementen ge-
sammelt, die implementiert werden sollen. Für jedes dieser UI-Elemente sollen
nun Animationen konzeptioniert werden, die sich an den 12 Prinzipien orientie-
ren. Mithilfe von Storyboards sollen die Animationsideen skizziert und dokumen-
tiert werden. Im Zuge dessen wird erläutert, welche Prinzipien in der jeweiligen
Animationsidee umgesetzt wurden.
In der Umsetzung werden dann die dokumentierten Animationen in ein CSS-
Frameworks implementiert. Durch dieses Framework sollen sich die 12 Prinzipien
der Animation auf UI-Elemente im Kontext Web anwenden lassen.
1
Vgl. Lawrence, 2019
283 Konzeption und Umsetzung des CSS-Frameworks
3.1 Auswahl an UI-Elementen
Das folgende Kapitel beschäftigt sich mit der Auswahl der UI-Elemente, die im
Rahmen des CSS-Frameworks implementiert werden sollen. Damit der Prototyp
möglichst aussagekräftig ist, werden gängige Elemente aus dem Bereich Web
ausgewählt.
3.1.1 Einteilung nach Atomic Design
Atomic Design beschreibt eine Methode mit fünf unterschiedlichen Stadien: Ato-
me, Moleküle, Organismen, Templates und Pages. Mithilfe dieser Stadien lassen
sich hierarchische User Interfaces erstellen. Atome stellen dabei das Fundament
dar, aus denen alle weiteren Elemente im User Interface bestehen. Vereinfacht
gesagt sind Atome jene HTML-Elemente, die nicht weiter heruntergebrochen
werden können, wie beispielsweise Labels, Inputs oder Buttons. Moleküle sind
relativ einfache Gruppen aus mehreren Atomen, die jedoch trotzdem als Ein-
heit fungieren. Durch das Kombinieren mehrerer Atome erhalten Moleküle einen
Zweck, wie beispielsweise ein Label, das ein Input-Feld beschreibt. Alleinstehend
jedoch wäre ein Label bedeutungslos, da es nichts beschreiben kann. Organismen
stellen komplexe UI-Elemente dar, die aus mehreren Organismen und/oder Ato-
men bestehen können. Organismen demonstrieren, wie die einfacheren Kompo-
nenten Atome oder Moleküle im Kontext funktionieren und zusammenarbeiten.
Beispielhaft für ein Organismus wäre eine Navigation, die aus mehreren Links,
Searchboxes und auch einem Logo bestehen kann.
Die für den Prototyp auszuwählenden Elemente orientieren sich an dem Ato-
mic Design Prinzip. Für jedes der ersten drei Stadien sollen zwei UI-Element
umgesetzt werden.
3.1.2 Betrachtung bestehender CSS-Frameworks
Im Jahre 2020 wurde Bootstrap von der State-of-CSS-Umfrage als das beliebteste
CSS-Framework eingestuft.2 Weitere bekannte Frameworks sind beispielsweise
Materialize CSS, welches auf dem Material Design System von Google basiert,
und Bulma.
2
Vgl. Benitti u. Greif, 2020
293 Konzeption und Umsetzung des CSS-Frameworks
Tabelle 3.1: UI-Elemente des Bootstrap Frameworks
UI-Element Atomic Design Stadium Dokumentation
Form Control Atom Link
Select Molekül Link
Check Atom/Molekül Link
Radio Atom/Molekül Link
Switch Atom/Molekül Link
Range Atom/Molekül Link
Input Group Molekül Link
Accordion Molekül Link
Alert Atom Link
Breadcrumb Molekül Link
Button Atom Link
Card Molekül Link
Carousel Organismus Link
Close Button Atom Link
Dropdown Molekül Link
Tabs Molekül Link
Navbar Organismus Link
Pagination Molekül Link
Popover Molekül Link
Progress Molekül Link
Spinner Atom Link
Toast Molekül Link
Tooltip Molekül Link
(Vgl. Otto u. Thornton, 2011)
Die in Tabelle 3.1 aufgeführten UI-Elemente orientieren sich an den Elementen,
die ebenfalls in der Dokumentation von Bootstrap aufgelistet sind. Sie finden je-
doch ebenfalls Verwendung in den anderen, bereits genannten CSS-Frameworks.
In jeder Zeile befindet sich zudem ein Link zur Dokumentation des jeweiligen
Elements. Mithilfe des Atomic Design Ansatzes wurden die aufgelisteten UI-
Elemente in die verschiedenen Stadien von Atom bis Organismus eingeteilt. Die
Einteilung orientiert sich hierbei an den oben beschriebenen Charakteristika des
jeweiligen Stadiums.
In dem geplanten Prototypen werden folgende UI-Elemente umgesetzt:
Button (Atom)
303 Konzeption und Umsetzung des CSS-Frameworks
Switch (Atom)
Card (Molekül)
Dropdown (Molekül)
Carousel (Organismus)
Navigation (Organismus)
Aufgrund des gegebenen Zeitrahmens wurden zwei Elemente pro Stadium aus-
gewählt. Die Auswahl innerhalb der Stadien geschah dabei zufällig.
3.2 Vorgehen bei der Konzeption
Eine der wichtigsten Grundgedanken bei der Inklusion von Animationen in einen
Design Prozess ist, dass eine Animation immer einen Zweck haben sollte. Die-
ser liegt meistens darin, die Bedienung des User Interface verständlicher zu ge-
stalten, damit Nutzer:innen ihre Ziele schneller und einfacher erreichen können.
Bewegung sollte immer eingesetzt werden, um die User Experience eines Sys-
tems zu verbessern. Dadurch, dass sich Animationen an den Erfordernissen von
Nutzer:innen orientieren, soll zudem vorgebeugt werden, dass bedeutungslose,
unpassende oder überflüssige Bewegung im User Interface entsteht.3 Um zu eva-
luieren an welchen Stellen eines Systems Animationen hilfreich sein würden, ist
es zunächst wichtig, die Hauptaufgaben zu identifizieren, die Nutzer:innen mit
dem System ausführen können. Anschließend sollte sich die Frage gestellt wer-
den, ob eine dieser Aufgaben oder Interaktionen von zusätzlichen Mechanismen,
wie Feedback, Fokus, Demonstration oder Orientierung, verbessert werden kann.
Diese Mechanismen bieten die Möglichkeit für Animationen und Bewegung.4
In Bezug auf den zu entwickelnden Prototypen ist dieser Grundgedanke wich-
tig, damit die erstellten Animationen einen Zweck im User Interface erfüllen und
nicht überflüssig sind.
Das konkrete Vorgehen lässt sich wie folgt beschreiben: Für jedes der gewählten
UI-Elemente werden Animationsideen erstellt und mithilfe eines Storyboards
3
Vgl. Di Sciullo, 2016
4
Vgl. Head, 2016, S.205f
313 Konzeption und Umsetzung des CSS-Frameworks
skizziert. Für die Erstellung von Animationsideen wurde kein konkretes Vorge-
hensmodell gefunden, weshalb dieser Prozess der Kreativität obliegt. Für jedes
UI-Element werden nun die zwölf Prinzipien der Animation betrachtet. Bei je-
dem Prinzip soll dabei erläutert werden, inwiefern dieses auf die Animationsidee
zutrifft.
Bei der anschließenden Umsetzung soll demonstriert werden, wie sich die Ani-
mationen und Interaktionen mit den UI-Elementen mithilfe von gegebenen Web
Technologien umsetzen lassen.
3.3 Verwendete Technologien und Setup
Da es sich bei dem geplanten Prototypen um ein CSS-Framework handelt, ist die
am meisten verwendete Technologie CSS. Für die Umsetzung wurde hierfür der
CSS-Präprozessor Sass ausgewählt. Sass stellt unter anderem Funktionalitäten
bereit, wie die Erstellung von Variablen, Schleifen oder das sogenannte Nesting,
bei dem CSS-Klassen ineinander geschrieben werden können. Durch diese Funk-
tionen wird die Wartung und Pflege großer Stylesheet-Dateien vereinfacht. Eine
Sass-Datei kann durch Kompilierung in eine CSS-Datei umgewandelt werden,
damit diese in ein HTML-Dokument eingebunden werden kann. Durch die Ver-
wendung mehrerer Sass-Dateien soll die Struktur des Prototypen verständlicher
werden.5
Sollten innerhalb des CSS-Frameworks Animationen umgesetzt werden, die
über die Komplexität der gegebenen Sass-Funktionalitäten hinausgehen, wird
zudem die Skriptsprache JavaScript verwendet.
Das Projekt wird auf der Internetseite GitHub als Repository hochgeladen und
ist unter der folgenden URL zu erreichen: https://github.com/hendrikpawlowski/
bachelorarbeit-hendrikpawlowski-WS-2020-2021. Innerhalb des Repository
besitzt jedes Element eine eigene SCSS-Datei. Diese sind unter dem Pfad ./as-
sets/scss/ zu finden.
Des Weiteren wird aus dem Repository mithilfe von GitHub Pages eine Inter-
netseite bereitgestellt, die als Dokumentation des CSS-Frameworks dient. Diese
ist unter der folgenden URL zu erreichen: https://hendrikpawlowski.github.
5
Vgl. Weizenbaum u. Eppstein, 2018a
32Sie können auch lesen
