Am Donnerstag 15. 01. 2016 war Andreas bei den CocoaHeads in München. Dort haben die Teilnehmer_Innen etwas über Animations-Design für Apps erfahren.

Der Abend war sehr spannend und wir haben alle etwas mitgenommen. Ich selbst zum Beispiel einige neue Erfahrungen von der Code Seite des Animations-Designs. Deshalb vielen Dank für euren Input!

Wer dabei war, hat mitbekommen, dass wir eine Aufzeichnung gemacht haben. Wir möchten diese aus Gründen der Privatsphäre der Teilnehmer_Innen nicht frei teilen. Solltest Du an diesem Abend dabei gewesen sein, schicke uns doch eine kurze Email per Kontaktformular, Twitter oder Facebook Message. Du bekommst die Aufzeichnung zugeschickt!

Spannend war beispielsweise zu hören, wie sehr die “in Code” gegossenen Animationen doch verankert sind. Persönlich arbeiten wir anders mit Animationen. Meine Vermutung liegt immer noch darin, dass durch den veränderten Blickwinkel auf “die Sache”, das eingesetzte Werkzeug sich ändert. In Motion oder Hype sieht man eine Timeline auf der sich die Objekte verteilen und animieren lassen. Müsste ich selbst mit purem Code arbeiten wäre es schwieriger oder zumindest anders. Unser Workflow startet mit den Grafiken, und erst später geht es um die Umsetzung. Damit hat man den Vorteil bereits vorher einen Eindruck zu bekommen.

Vortrag als Slideshare

 

Nachgedachte Nachbeantwortete Fragen

Welche Elemente lohnen sich denn zu animieren?

Spontan würde ich sagen, es ist nett das Onboarding hübsch zu gestalten. Sehr schön fand ich etwa den von Telegram. So eine Art seitwärtses Parallax Scrolling mit haptischem Feedback.

A video posted by Andreas Zeitler (@zettt) on

Wichtig ist es bei Animationen subtil zu arbeiten und dem Stil der App entsprechend. Hart, kurz, zackig oder weich, elastisch, langsam und elegant. Daraus ergeben sich dann vor allem Animations-Stile, welche nicht in Frage kommen (Ausschlussverfahren).

Grundsätzlich mal bieten sich für Animationen Elemente an die eingeblendet und ausgeblendet werden sollen. Eine Lupe zur Suche kann von unten, oben, rechts oder links einfahren. Je nachdem wie dieser “Charakter spielt”, kann man diesem mit einer Animation zu einer gewissen Masse verhelfen und ein gewisses Feeling mitgeben. Soll ein Element ausgetauscht werden, bieten sich auch Animationen an. Ein ganz einfacher Fade oder Blur beispielsweise.

Animationen sind gut geeignet um einen gewissen Workflow zu zeigen und zu lernen. Zurück zum Onboarding gehend, könnte man der Benutzer_In bei der Arbeit immer mal wieder durch eine Animation die weiteren Möglichkeiten anzeigen. (Anmerkung: Bitte nicht übertreiben und vor allem eine Möglichkeit geben diese gut gemeinte Hilfe auszuschalten oder zu überspringen.)
Wie im Vortrag erwähnt kann man mit der Unterstützung durch Animationen Möglichkeiten auch anzeigen. Ich hatte ein Drag’n’Drop Target als Beispiel, welches nur Tee möchte, aber keinen Kaffee. Zieht man mit der Maus die Kaffeetasse drauf, färbt sich der Eimer rot und ein X verschliesst den Eingang. Zieht man jedoch eine Tasse Tee auf das Icon, verfärbt es sich grün und der Eingang wird frei.

tee oder kaffee

Als Beispiel fiel mir gerade noch eine Location-basierte Anwendung ein. Wenn man als Benutzer_In die Stecknadel auf der Karte verschiebt, fährt diese ja hoch (Apple Maps). Nimmt man den Finger vom Display “fällt” sie einfach nur auf die Karte an derselben Stelle an der der Finger war. Was wäre, wenn das ein wenig Comic-mässiger aussehen würde? Etwa so:

Dropped Pin

Diese Animation ist dem Spiel Crashlands entnommen. Das Original ist aufgenommen aus Apple Maps App für iOS.

Woher kommt die Inspiration zur UI Animation?

Als Beispiel für eine Cover-Ansicht hatte ich Audible genommen. Das vorgestellte “Rondell”, wie ich es genannt habe, seht ihr hier. Erste Version ist mit nur drei Covern. Die zweite Version erlaubt es auch unendlich viele Bücher immer wieder nach zu schieben.

A video posted by Andreas Zeitler (@zettt) on

A video posted by Andreas Zeitler (@zettt) on

 

Kontext und Charakter

Animationen hängen vom Kontext und dem Charakter ab.

Kontext:

  • Achtung!
  • Stopp!
  • Aufmerksamkeit (Hey, kuck mal hier!)
  • Geht/geht nicht

Charakter:

  • Charakter der App
  • Branding der App bzw. Firma
  • Charakter des zu animierenden Objekts

Links und Bits & Bobs

Anwesende können die Aufzeichnung ansehen. Den Link zum Video solltet ihr separat erhalten haben, falls nicht, tretet mit mir in Kontakt. Kommt ihr von einem anderen CocoaHeads Chapter? Sagt uns bitte Bescheid und auch ihr sollt einen Link bekommen.

Liste an Apps:

Pin It on Pinterest

Share This