So integrieren Sie Motion Design in den UX-Workflow

Als UX-Profis spielen wir eine Schlüsselrolle dabei, die Messlatte für Kundenerlebnisse höher zu legen. Eine einfache Liebe zum Detail ist oft das, was dem Kunden signalisiert, dass wir an ihn denken. Im digitalen Raum konzentrieren wir uns auf Benutzerinteraktionen innerhalb von Anwendungsgeräten und -prozessen.

Mit der ständig steigenden Rechenleistung von Desktops, der Verfeinerung von Browsern und der Verwendung nativer Apps lernen wir jeden Tag neue Wege kennen, um die Grenzen dessen zu erweitern, was eine gut gestaltete Benutzeroberfläche ausmacht. Bei richtiger Verwendung kann Bewegung ein wichtiges Hilfsmittel sein, um Ihren Benutzern zu helfen, ihre Ziele zu erreichen.

Weiterführende Literatur zu SmashingMag:

• Die Zusammenfassung der ultimativen Animations-Tutorials
• Einpassen von After Effects in einen UX-Workflow
• Die Kunst des Filmtiteldesigns im Laufe der Kinogeschichte
• Erweiterte Animationen in Photoshop erstellen
  

Wann ist Animation in Betracht zu ziehen?

Als UX-Designer sind Sie höchstwahrscheinlich Teil der Entdeckungsphase Ihres Projekts, wenn Sie sie nicht selbst leiten. Dies kann Stakeholder-Interviews, Personas, Markeninterviews, Usability-Tests, Journey-Mapping, Kontextanfragen usw. umfassen. Während dieser Phase erfahren Sie viel über Ihre Benutzer, aber höchstwahrscheinlich werden sie nie direkt herauskommen und Ihnen sagen, dass sie es sind brauchen Animation oder Bewegung. Woher wissen Sie also, ob Animation in einem UI-Design eine Überlegung wert ist?

Wenn Sie mit Benutzern sprechen, hören Sie möglicherweise Feedback wie:

• „Ich weiß nicht, worauf ich mich konzentrieren soll.“
• „Was ist hier das Wichtigste?“
• „Ich habe keine Lust, dieses Tool zu verwenden.“
• "Woher weiß ich, was ich als nächstes tun soll?"
• „Woher weiß ich, dass ich meine Aufgabe erledigt habe?“
• „Ich verstehe nicht, was mir diese Daten sagen.“

Aussagen wie diese könnten Möglichkeiten aufzeigen, Bewegung zu nutzen, um das Erlebnis zu verbessern.

Buy-In vom Team bekommen

An diesem Punkt denken Sie als Designer vielleicht über einige erste Ideen nach, wie Bewegung das Erlebnis verbessern kann. Wie bekommen Sie Buy-in für Ihre Ideen? Der Versuch, ein Team aus Stakeholdern, Produktmanagern, Kunden und Entwicklern davon zu überzeugen, dass es „einfach das Richtige ist“, zusätzliche Zeit und Geld für Animationsverbesserungen aufzuwenden, wird Sie nur so weit bringen. Wie schaffen Sie sich Zeit für den zusätzlichen Aufwand in der ohnehin schon anspruchsvollen Zeitleiste Ihres typischen Projekts? Wie überzeugen Sie das Team davon, dass Animation die richtige Lösung für ein bestimmtes UX-Szenario ist?

Der schnellste und universellste Weg, um die Zustimmung Ihres Teams zu gewinnen, besteht darin, Ihre Animationsideen an den Bedürfnissen und Zielen der Benutzer auszurichten. Dadurch wird sichergestellt, dass Sie nicht nur Animationen für sich selbst erstellen, ohne dass der Benutzer in irgendeiner Weise davon profitiert.

So richten Sie die Animation an den Benutzeranforderungen aus

Wenn Animationskonzepte auf spezifische Benutzerbedürfnisse ausgerichtet sind, beginnen sie ihren Wert zu offenbaren. Dies verhindert auch, dass Sie über bedeutungslose, übermäßig komplexe Animationen nachdenken. Vermeiden Sie es, die Zeit und Mühe aller zu verschwenden, insbesondere wenn eine Animation für Ihr Publikum keinen Mehrwert bietet.

Schlüsselfunktionen der Animation

Animation hat folgende Funktionen:

• Benutzer in ihrer Umgebung orientieren,
• eine tiefere Ebene der Klarheit schaffen,
• dem Benutzer nützliches Feedback geben,
• ermöglicht eine fantasievollere Nutzung der Bildschirmfläche (auf und außerhalb der Leinwand),
• verstärken die Hierarchie der Elemente,
• Lenken Sie den Fokus des Benutzers,
• Hinweis darauf, was als nächstes zu tun ist,
• den Benutzer reibungslos zwischen Navigationskontexten transportieren,
• Änderungen in der Anordnung von Elementen auf dem Bildschirm erklären,
• visuelle Hinweise bereitstellen, die Benutzereingaben sofort bestätigen,
• die Botschaft einer Marke besser kommunizieren,
• Erstellen Sie Angebote, die wie eine direkte Manipulation des Bildschirms aussehen und sich anfühlen,
• Erstellen Sie eine viszerale Ästhetik und Attraktivität, die die Nutzung fördert und die Akzeptanz erhöht.

Diese Matrix veranschaulicht, wie das Feedback von Benutzern zu Animationsfunktionen zugeordnet werden kann:

„UX-Animation hat die Kraft, viele allgemeine Benutzeranforderungen zu erfüllen, um Menschen dabei zu helfen, ihre Ziele zu erreichen. Diese Matrix richtet Beispiel-Feedback aus der Benutzerforschung (oben) an Animationsfunktionen (Seite) aus.

Wenn sie auf diese Weise priorisiert wird, zeigt sie, dass Animation in erster Linie ein Werkzeug zur Verbesserung der UX sein kann und weniger ein neuartiger Weg, um Attraktivität zu schaffen.“

– Mark Di Sciullo

So integrieren Sie Animation in den UX-Workflow

Im Folgenden finden Sie eine vorgeschlagene Strategie zur Integration von Animationen in den UX-Workflow. Wenn Ihr Projekt agil ist, sollte dieser Ansatz innerhalb der Dauer eines Sprintzyklus erfolgen.

Entdecken und erkunden

Erst wenn Sie Ihr Publikum gut verstehen und bestätigen können, dass Ihr Design diesem Verständnis entspricht, sollten Sie eine Zusammenarbeit mit Ihrem Team eingehen. Legen Sie also zuerst den Grundstein.

• Recherchieren Nutzen Sie alle verfügbaren Informationen über Ihre Zielgruppe und machen Sie sich mit ihnen vertraut. Dies können Artefakte wie Personas, Customer Journey Maps, Benutzerrecherchen, Branding-Richtlinien, Styleguides usw. sein.
• Ausrichten Stellen Sie sicher, dass Ihre Animation bestimmte Benutzeranforderungen und -ziele anspricht. Wenn möglich, richten Sie Ihre vorgeschlagene(n) Animationsfunktion(en) auf spezifisches Benutzerfeedback aus (wie in der obigen Tabelle dargestellt) und zeigen Sie, wie es die Fähigkeit des Benutzers verbessern wird, seine(s) Ziel(e) zu erreichen.
• Erkunden Nehmen Sie sich Zeit, um verschiedene Inspirationsquellen zu erkunden, die Animationen präsentieren. Es gibt viele Portfolio-Websites wie Dribbble, Behance und CodePen, auf denen Sie viele Beispiele finden können, an denen Sie sich orientieren können.
• Kommunizieren Teilen Sie Ihre Absichten frühzeitig mit Ihrem Entwicklungsteam und Kunden. Lassen Sie sie wissen, dass Sie eine Lösung in Betracht ziehen, die Bewegung erfordert. Bereiten Sie sich mit den Ergebnissen Ihrer Kleinarbeit vor, indem Sie Ihre Ideen recherchieren und an den Bedürfnissen und Zielen der Benutzer ausrichten. Es alleine zu tun ist schwieriger; Arbeiten Sie mit Ihrem Entwickler zusammen. Technologen können das Mögliche erweitern. Eine frühzeitige Kommunikation verringert die Wahrscheinlichkeit, dass eine Idee vorzeitig verworfen wird.

Design und Storyboard

• Skizzieren Wie bei jedem Designprozess ist der beste Ausgangspunkt Papier, ein Whiteboard und/oder eine Zeichen-App. Dieses Medium bringt die kreativen Säfte auf ungehemmte, iterative Weise zum Fließen. Du brauchst:
  • ein Block Papier oder ein Notizbuch (Storyboard-Vorlagen sind ideal);
  • ein Whiteboard;
  • jedes Zeichenprogramm oder jede App (SketchBook Pro, Mischief, Photoshop);
  • Bonuspunkte, wenn Sie ein Pen (Stylus) Display oder Pen Tablet verwenden.
• Storyboard Sobald Sie einige Gedanken und Ideen haben, erstellen Sie ein Storyboard der Schlüsselzustände Ihrer Animationen. Verlassen Sie sich auf einfache Anmerkungen, um sich den Ablauf vorzustellen. Dies ist eine effektive Möglichkeit, Ihre Ideen frühzeitig im Prozess mit anderen zu kommunizieren.
• Teilen Sie Skizzen und Storyboards sind großartige Tools, um frühzeitig Feedback von Ihrem Team zu erhalten. Scheuen Sie sich nicht, Ihre Skizzen und Storyboards zu teilen. Sie sind großartige Tools, um Ihr Team dazu zu bringen, zu verstehen, was Sie erstellen möchten, und um wertvolle Erkenntnisse für die Zusammenarbeit zu sammeln.
• Entscheiden Sie basierend auf der verfügbaren Zeit, was als Prototyp erstellt werden muss und wie Ihre Animation überprüft und/oder benutzergetestet wird. Anschließend müssen Sie den richtigen Ansatz für die Erstellung Ihres Prototyps auswählen.

Prototyping-Animation

Prototypen setzen Ihre Ideen schnell um, bevor Sie viel Zeit mit dem Codieren verbracht haben. Aus UX-Perspektive besteht der Hauptzweck eines Prototyps darin, Ihre Ideen den Benutzern früh im Designprozess vorzustellen, wenn Verfeinerungen und Iterationen einfacher und weniger kostspielig sind.

Es gibt zwei Hauptmethoden, um sich der Prototyping-Animation zu nähern. Das Spektrum reicht von hochgradig explorativen Prototypen unter Verwendung einer der vielen Anwendungen auf dem Markt bis hin zum direkten Sprung in einen codierten Prototyp, der die genaueste Darstellung dessen bietet, was in einer Produktionsumgebung machbar ist.

Die Entscheidung, ob eine Prototypanwendung verwendet oder ein codierter Prototyp erstellt werden soll, läuft auf Folgendes hinaus:

• Wie viel Genauigkeit ist erforderlich, um die Wechselwirkungen zu erklären?
• Wie viel Zeit steht zur Verfügung? (Zeit ist gleich Kosten. Haben Sie Zeit, ein neues Tool zu lernen?)
• Mit welchen Tools oder Ansätzen fühlen Sie sich derzeit am wohlsten?
• Wie komplex oder anspruchsvoll ist die Bewegung?

Verwenden Sie Ihr eigenes Urteilsvermögen, um den richtigen Ansatz zu bestimmen. Wenn Sie eine Bewegung einfach und schnell mit einer einfachen Photoshop-Timeline-Animation kommunizieren können, ist dies genauso effektiv wie ein vollständig codierter Prototyp.

Anwendungen für Prototyping

Anwendungen für das Prototyping rationalisieren unsere Vorstellung von Animationen in einer Benutzeroberfläche. Jeden Tag werden Designern immer mehr Werkzeuge zur Verfügung gestellt. Diese Tools entwickeln sich schnell weiter und umfassen Funktionen zum Erstellen von Übergängen, Transformationen und Tweens.

Welche Anwendung Sie wählen, hängt davon ab, ob die Bewegungskonzepte eher explorativ sind. Berücksichtigen Sie auch, wie schnell ein Prototyp erstellt werden muss, wie er überprüft wird, wie er mit Benutzern getestet wird und wie komfortabel der Designer mit der Anwendung ist.

Im Folgenden finden Sie eine Liste beliebter Prototyping-Anwendungen für UX-Animation:

• Adobe Photoshop Durch die Verwendung der Zeitleiste können Kompositionen, die auf einer Photoshop-Leinwand beginnen, einfach in Frame-Animationen umgewandelt werden. Photoshop ist sehr nützlich für die Bewegungserkundung zusätzlich zu bestehenden Kompositionen.
• Adobe After Effects Dieses Tool ist ein Kraftpaket für grenzenlose kreative Erkundung. Die Gefahr bei der übermäßigen Verwendung dieses Tools besteht darin, dass es sehr einfach ist, etwas zu erstellen, das mit aktuellen Front-End-Technologien nicht erstellt werden kann. Risiko beiseite, es lohnt sich zu überlegen, wie After Effects in einen UX-Workflow passt, denn dieses Tool bietet viele kreative Einsatzmöglichkeiten, insbesondere zum Erkunden neuer Möglichkeiten und zum Ausreizen von Bewegungen.
• Keynote Ja, Keynote. Eine selbstspielende Präsentation, die die „Magic Move“-Eigenschaften nutzt, ist eine schnelle Möglichkeit, UI-Interaktivität und Bewegung zu zeigen. Thoughtbot bietet einen wunderbaren Überblick über Prototyping-Animation mit Keynote.
• Adobe Edge Animate Diese Umgebung ermöglicht es Designern, Motion-UI-Konzepte mithilfe von Keyframe-ähnlichen Animationen zu erkunden. Seine generierte Ausgabe basiert auf proprietären JavaScript-Bibliotheken, was viele Entwickler misstrauisch gegenüber der Produktionsreife von Animationen machen wird, die mit diesem Tool erstellt wurden.
• Axure 8 (in Beta) Diese aufregende neue Version von Axure fügt mehr Animationsmuster mit vielen interessanten Beschleunigungsoptionen hinzu. Axure bringt Sie dazu, während Ihrer frühen Wireframing-Bemühungen über Bewegung nachzudenken. Die Animation erfolgt hauptsächlich über Ereignisse ( onPageLoad , OnClick , OnHover , OnMouseOver usw.) und enthält kein Keyframing. Es bringt einen Designer jedoch dazu, auf eine Weise zu denken, die es ihm erleichtert, mit einem Entwickler zu kommunizieren.
• InVision Diese hochgradig kollaborative browserbasierte Anwendung enthält eine Reihe animierter Übergänge und Gesten. Das Screen-Flow-Prototyping-Tool (mit dem Sie Prototypen um eine Reihe von Bildschirmen herum erstellen, die über Interaktionen verbunden sind) ist ideal, um schnell anklickbare Hotspots einzurichten, ohne übermäßig komplex zu werden. Alle Bewegungen treten entweder bei Klickereignissen oder Seitenumleitungen auf. Sehen Sie sich Ihr Design ganz einfach auf jedem Gerät an. Es enthält sogar kostenlose Testfunktionen für mobile Benutzer, sodass Sie Ihre Benutzerstudien innerhalb von InVision durchführen können. Es ist auch geplant, mehr zeitleistenbasierte Animationsfunktionen zu integrieren. Sehr cool.
• Flinto Mit diesem mobilen App-Prototyping-Tool für den Mac können Sie schnell Bildschirme verknüpfen und animierte Übergänge anwenden. Es hat viele Animationsübergangseigenschaften, die fein abgestimmt werden können, um die Bewegung genau richtig zu machen. Das Iterieren in diesem Screen-Flow-Prototyping-Tool ist einfach, indem neue Screens per Drag-and-Drop auf alte gezogen werden.
• Prinzip Dieses Prototyping-Tool für mobile Apps, auch für den Mac, ermöglicht es Ihnen, eine Zeitleiste zu verwenden, um animierte Übergänge mit Keyframes zu versehen.
• Proto.io Diese browserbasierte App enthält einige ausgefeilte Animationsfähigkeiten. Durch die Verwendung von „Interaktionen“ und „Zuständen“ kann ein Designer komplexe Bewegungen prototypisieren und sogar Keyframe-ähnliche Animationen erstellen.

Codierte Prototypen

Technisch versierte Designer können auf den Punkt kommen und direkt in die Bibliotheken springen, die in ihrem Front-End-UI-Framework verfügbar sind, um mit dem Prototyping-Prozess zu beginnen. Andernfalls würde dieser Teil des Prozesses die Zusammenarbeit mit einem Entwickler erfordern.

Wenn Sie sich auf standardmäßige, sofort einsatzbereite Bewegungsmusterbibliotheken verlassen, könnte dies möglicherweise Ihre Erkundung von Lösungen einschränken, was zu langweiligen Ergebnissen führt. Gleichzeitig ist es riskant, das Machbare nicht zu berücksichtigen und führt garantiert zu Enttäuschung und Zeitverschwendung.

Ein UX-Designer, der gerne die Ärmel hochkrempelt und sich in den Code vertieft, hat mehr Kontrolle über die Details. Sie werden auch in der Realität geerdet bleiben. Dies erfordert ein gewisses Maß an Komfort im Umgang mit HTML und CSS und manchmal mit JavaScript. Designer müssen ein gutes Verständnis dafür haben, wie man in einer modernen Front-End-Entwicklungsumgebung arbeitet. Wenn Designer und Entwickler auf diese Weise zusammenarbeiten können, ist die Erfolgswahrscheinlichkeit immer hoch.

Das Folgende ist ein kleines Beispiel der vielen UI-Frameworks und -Bibliotheken, die zum Codieren von UX-Prototypen verfügbar sind.

• CSS3-Animationen Dies ist der einfachste Einstieg. Ein UX-Animator, der codierte Prototypen erstellen möchte, muss über eine solide Grundlage in CSS3 und HTML5 verfügen, um die Grundlagen der Funktionsweise einer Web-Benutzeroberfläche zu verstehen.
• Motion UI, ZURB Diese Sass-Bibliothek, ursprünglich für ZURBs Foundation for Apps, hilft Ihnen, schnell CSS-Übergänge und -Animationen zu erstellen. Erstellen Sie schnell Prototypen animierter Elemente und Bewegungen mit einem einfachen Klassen- oder Sass-Mixin.
• Transit Diese einfache Bibliothek für CSS-Übergänge und -Transformationen ist für diejenigen gedacht, die mit jQuery vertraut sind.
• Geschwindigkeit Eine robustere und gut dokumentierte JavaScript-Bibliothek, die speziell auf Bewegungsdesigner zugeschnitten ist.
• GSAP (GreenSock Animation Platform) Diese vollwertige Animationsplattform animiert alles, was JavaScript berühren kann (CSS-Eigenschaften, Canvas-Bibliotheksobjekte, SVG, generische Objekte usw.). Es wird von Google für JavaScript-Animationen empfohlen.
• Famous Als vollwertiges App-Framework (hauptsächlich für Mobilgeräte) basiert Famous auf einer Open-Source-3D-Layout-Engine, die vollständig in eine 3D-Physik-Animations-Engine integriert ist. Die Idee hinter Famous ist, dass Browser nie zum Rendern von Apps entwickelt wurden – Spiele wurden zum Rendern von Apps entwickelt. Wenn Sie flüssige Grafiken und Animationen (60 FPS) wünschen, benötigen Sie eine GPU-Beschleunigung, die Famous durch Rendern in DOM, Canvas oder WebGL ermöglicht.
• Framer Framer ist ein eigenständiges Prototyping-Framework und eine Programmierumgebung. Es lässt sich in Photoshop und Sketch integrieren. Es erzeugt zwar keinen produktionsreifen Code (und der Wechsel von JavaScript zu CoffeeScript ist fragwürdig), hilft Designern jedoch dabei, Prototypen zu teilen, die sich echt anfühlen. Durch die Unterstützung einer feinkörnigen Steuerung von gestischen Interaktionen und Bewegungen ermöglicht es Designern, diese Interaktionen genau mit Entwicklern zu kommunizieren.
• React React wurde von Facebook entwickelt und ist eine JavaScript-Bibliothek zum Erstellen großer, dynamischer, datengesteuerter, produktionsbereiter Benutzeroberflächen.

Testen Sie mit Benutzern

Hier ist der grundlegende Prozess zum Testen mit Benutzern:

1. Zeitplan Stellen Sie eine kleine Gruppe von Teilnehmern zusammen, die Ihre Zielgruppe repräsentieren (ideal sind fünf Teilnehmer).
2. Tests durchführen Benutzertestsitzungen sind ideal, um zu überprüfen, ob Ihre Animation effektiv ist. Führen Sie die Teilnehmer durch typische Aufgaben, die in Ihrer Anwendung ausgeführt würden. Beobachten Sie, ob Ihre Animation dem Erlebnis hilft oder schadet. Idealerweise werden UX-Sessions mit Video aufgezeichnet, damit sie später aufgerufen und überprüft werden können. Wenn Sie Ihre Sitzungen aus der Ferne durchführen, nutzen Sie die Bildschirmaufzeichnungsfunktionen, die in Webkonferenzanwendungen wie GoToMeeting und WebEx verfügbar sind.
3. Feedback überprüfen Nehmen Sie sich Zeit, um über die Erkenntnisse aus den Benutzertestsitzungen nachzudenken. Stellen Sie sicher, dass die Bedürfnisse und Bedenken der Benutzer von der ersten Erkennungsphase an angemessen berücksichtigt werden.
4. Entscheiden Sobald die Benutzertests abgeschlossen sind und das Feedback überprüft wurde, können Sie eine fundierte Einschätzung darüber abgeben, ob weitere Verfeinerungen erforderlich sind oder ob Sie bereit sind, zur Produktion überzugehen.

Schlussbemerkungen

UX-Designer, die Bewegung in ihren Entwürfen berücksichtigen, werden unter Druck geraten, zu erklären, zu kommunizieren und zu verteidigen, warum der zusätzliche Aufwand erforderlich ist.

Kennen Sie Ihr Publikum und teilen Sie dem Team Ihre Absichten frühzeitig mit. Nutzen Sie die wachsende Bandbreite an Ansätzen, die heute verfügbar sind, von Papier bis Code, die Ihnen dabei helfen, die Zustimmung zu erhalten, die für eine reibungslose Integration von Animationen in Ihren Workflow erforderlich ist.

Bei UX-Animationen ist Subtilität der Schlüssel. Die Konzentration darauf, den Benutzern zu helfen, ihre Ziele zu erreichen, ist von größter Bedeutung.

Ressourcen

• „Functional Animation in UX Design“, Amit Daliot, Smashing Magazine Daliot gibt einen Überblick darüber, wie Animation im UX-Design ein Werkzeug ist, um Klarheit und Logik innerhalb einer Erfahrung zu schaffen, einschließlich vieler nützlicher Beispiele.
• „Ihre Benutzeroberfläche ist keine Disney-Animation“, Sophie Paxton, Medium Paxton, bietet großartige Einblicke in die Vermeidung von Animationen, die den Benutzer lediglich behindern.
• Animate.css, Daniel Eden Hier sind ein paar coole, lustige und browserübergreifende Animationen, die Sie in Ihren Projekten verwenden können.
• CodePen-Animationsbeispiele CodePens inspirierende Spielwiese von UI-Animationen kann zerlegt und gegabelt werden, um neue Konzepte zu erstellen oder einfach nur zu experimentieren.
• „SVG mit CSS animieren“, Chris Coyier, CSS-Tricks Beginnen Sie mit der Verwendung von Inline-SVG-Code direkt in HTML und der Animation der Elemente über CSS.
• „A Modern Web Designer's Workflow“ (Video), Chris Coyier, CSS-Tricks Obwohl einige Jahre alt, ist dies immer noch ein relevantes Beispiel für einen modernen Front-End-Workflow.
• „Animationsbeispiele“, „react.rocks“ Diese Galerie demonstriert die Leistungsfähigkeit von React für Animationen.