Bewegte Oberflächen: Über Animation & Prototyping

Bewegte Oberflächen: Über Animation & Prototyping

08.10.2014

Wie visualisiert man Interaktionen, die man nicht vernünftig in Worte fassen kann? „Weißt eh, das Element minimiert sich dann zur Mitte hin.“ … „Hä?“ 

Wir haben es in der Konzeption gar nicht so einfach, unsere Ideen zu digitalen Interfaces aus unseren Köpfen zu bekommen. Show & Tell funktioniert für komplexeres Verhalten meistens besser als statische Skizzen und Designs. Wir borgen uns deshalb immer öfter Tools und Workflows aus der Animation aus, um Kunden (und uns selbst) zu zeigen, wie sich das fertige Produkt anfühlen könnte.

Animate me like one of your french girls:
Was ist gute Animation?

„Wie sich etwas anfühlt“ ist ein wichtiger Bestandteil eines digitalen Produkts – und die Ansprüche an die Oberflächen wachsen. 

Oft werden für Interface-Animationen (noch?) Metaphern zu Bewegungen aus dem echten Leben gezogen, um dem User die Orientierung zu erleichtern. Bester Beweis für diesen Trend sind die Guidelines für Googles visuelle Sprache „Material Design“. Ein Gefühl für organische Bewegungen bekommt man übrigens, wenn man sich (gute) Animationsfilme ansieht. Beobachtet man die Bewegungsabläufe im Detail, versteht man grundlegende Animationsprinzipien besser.

 

Hier sieht man zum Beispiel gut, dass Bewegungen niemals linear sind. Oft wird vor der eigentlichen Bewegung in die entgegengesetzte Richtung „ausgeholt“ und es gibt eine Beschleunigung oder ein Abbremsen.

Vorteile von interaktiven Prototypen

Für neue Interaktions-Ideen verwenden wir animierte und interaktive Prototypen. Diese zu erstellen hilft nicht nur der Vorstellungskraft unserer Kunden, sondern auch uns selbst. Man stößt unweigerlich auf Probleme und nicht bedachte Use-Cases, wenn man ein Element bis ins Detail „baut“. Die Interaktion des Users rückt automatisch mehr in den Vordergrund als bei einem statischen Scribble. 

Außerdem lassen sich Prototypen auch sehr gut für frühzeitige User-Tests verwenden. Feedback und Gelerntes kann dann noch besser in das Endergebnis einfließen.

Oft verwenden wir es aber auch in der Übergangsphase von Konzept zum Design um die Grundstimmung der Animationen festzulegen. Dadurch findet man eine gute Balance zwischen Objektivität, Intuition und Inspiration in Konzept und Design.

Tools & Workflows

Mein persönliches Lieblingstool für Prototypen von Bewegung und Interaktion ist Edge Animate. Es ist timeline-basiert und man kann das Ergebnis mit Javascript erweitern. Vor allem wenn man schon mit After Effects, Flash oder Ähnlichem zu tun hatte, kann man sich schnell damit anfreunden. Es produziert HTML, CSS und Javascript, das ziemlich geräteunabhängig funktioniert. Das heißt, ich arbeite nur mit den Werkzeugen, die später auch für das Endergebnis in der Entwicklung verwendet werden können.

Mit Edge Animate gestalte ich Effekte von Elementen in „Scribble“-Optik (meist aus unseren Balsamiq-Wireframes) oder aus einfachen Formen, sowie Prototypen im finalen Design. Alternativ können solche Prototypen natürlich auch ohne "Hilfsmittel" programmiert werden.

In nächster Zeit wird Animation sicher noch mehr in unsere Workflows eingewoben und unsere Tools noch besser verknüpft werden. Zum Beispiel mit dem Design- und Prototyp-Tool Macaw können Interaktionen bereits beim Gestalten eingebunden werden.

Momentan ist die Wahl der Tools & Workflows sehr von der Art des Projekts abhängig und wir haben kein Schema F für die Kreation von neuen Interface-Ideen. Aber ehrlich gesagt: Deshalb mögen wir unseren Job ja auch so ;)

 

Zum Weiter-Stöbern:

ZURÜCK
TEILEN:
comments powered by Disqus
Melanie Massinger
Melanie Massinger

Melanie ist Graphik- und Interaktionsdesignerin. Sie hat eine Vorliebe für Bücher & Geschichten und ist durch und durch Katzenmensch.

MEHR VON DIESEM AUTOR

Melanie ist Graphik- und Interaktionsdesignerin. Sie hat eine Vorliebe für Bücher & Geschichten und ist durch und durch Katzenmensch.

MEHR VON DIESEM AUTOR