Erwecken Sie Mikrointeraktion und Benutzeroberflächenanimation durch die Zusammenarbeit zwischen Entwicklern und Designern zum Leben

Wir können durch Mikrointeraktion und Benutzeroberflächenanimation eine wunderbare Erfahrung für Benutzer schaffen!

Hallo, mein Name ist Kyo Kim und ich arbeite seit ungefähr zwei Jahren als Produktdesigner bei Capital One. Ich habe während meiner gesamten Arbeit Mikrointeraktionen und Animationen verwendet, einschließlich einiger mobiler Projekte, die Sie möglicherweise selbst verwendet haben. Bevor ich anfing, in der Technologie zu arbeiten, war mein Hintergrund im Film. Im Film dreht sich alles um das Erzählen und Bearbeiten von Geschichten, um eine Geschichte zu erstellen, die das Publikum einbezieht. und vieles davon wird durch die Verwendung von Übergängen erreicht. Ich finde diese Fähigkeiten heute nützlich, wenn ich Erfahrungen und Geschichten für digitale Werkzeuge erstelle.

Beim Entwerfen denke ich über Faktoren nach, die den Benutzern eine großartige und erfreuliche Erfahrung mit Übergängen und Geschichtenerzählen ermöglichen.

Damit ein Produkt seinen Nutzern ein angenehmes Erlebnis bietet, muss es mehr als nur ein ansprechendes Design und beeindruckende Animationseffekte bieten.

Unabhängig davon, ob es sich bei dem Produkt um ein App-, Web- oder ein anderes digitales Produkt handelt, muss es die Benutzer ansprechen, für sie angenehm zu bedienen sein und ihnen die Möglichkeit geben, sich direkt und sinnvoll mit dem Produkt zu befassen Weg.

Mikrointeraktionen haben die Fähigkeit, das Benutzererlebnis auf eine Art und Weise angenehm und befriedigend zu gestalten, die viele Designelemente nicht können. Bevor wir im Kontext des Produktdesigns auf Mikrointeraktionen eingehen, beginnen wir mit den Grundlagen.

Was sind Sie? Warum ist es gut für die Benutzererfahrung? Warum sollten Designer und Entwickler sie in ihre Arbeit einbeziehen? Wie können Produktdesign-Teams zusammenarbeiten, um sie zu verbessern?

Was sind Mikrointeraktionen und warum sollten wir uns um sie kümmern?

Was sind Mikrointeraktionen oder Benutzeroberflächenanimationen? Leute bezeichnen sie oft als hübsche Animationen, Bewegungsgrafiken oder Bewegtbilddesign. Sie sind jedoch viel mehr als das.

Im Gegensatz zu anderen Animationsformen, die nur dazu dienen, die Illusion von Bewegung zu erzeugen, wird der Benutzer durch Mikrointeraktionen direkt angesprochen, sodass er eine Vielzahl von Aufgaben ausführen und auf intuitive und effektive Weise mit dem Produkt interagieren kann.

Wenn wir dies auf die Prinzipien eines guten Systemdesigns zurückführen, wird das Systemfeedback für den Benutzer verbessert und ermöglicht. Bei korrekter Ausführung werden Benutzer Mikrointeraktionen als eine Meldung vom Benutzer annehmen, dass er (das System) das tut, was er tun soll, als Reaktion auf die Anforderungen des Benutzers.

Auch wenn Sie nicht wissen, was Mikrointeraktionen sind, treten Sie regelmäßig mit ihnen in Kontakt. Jedes Mal, wenn Sie eine App oder ein webbasiertes Produkt verwenden, um eine bestimmte Aufgabe zu erledigen - sei es das Lesen von Nachrichten, der Kauf, das Spielen eines Spiels, das Erstellen eines Profils oder das Anpassen Ihrer Einstellungen und Benachrichtigungseinstellungen -, handelt es sich um jede einzelne Aktion, die Sie ausführen eine Mikrointeraktion. Mikrointeraktionen sind nahtlos in die Plattform eines Produkts eingebunden, sodass ihre Funktionen transparent und zugänglich sind und das Gesamterlebnis des Benutzers effektiv verbessert wird.

Obwohl diese "Aktionen" verschiedene Formen annehmen, gehören zu den häufigsten Beispielen:

  • Wenn wir einen Artikel in einen virtuellen Warenkorb verschieben.
  • Wenn wir zwischen zwei Optionen auf einem CTA-ähnlichen Umschaltknopf wählen.
  • Wenn wir nach unten ziehen, um einen Newsfeed zu aktualisieren und das neueste Update anzuzeigen.
  • Wenn wir in langen Feeds oder Seiten nach oben und unten scrollen.

Wenn wir eine Mikrointeraktion entwerfen, müssen wir prüfen, ob dies wirklich notwendig und für die Benutzererfahrung von entscheidender Bedeutung ist. Andernfalls kann es zu einer effektiven Ablenkung des Benutzerformulars mit Ihrem Produkt oder zu Bildrauschen kommen.

Prinzipien der Mikrointeraktion

Es gibt drei Prinzipien, die ich bei der Gestaltung von Mikrointeraktionen immer berücksichtige.

  1. Kontinuität (und Subtilität)

Mikrointeraktionselemente sollten subtil sein, damit ein Benutzer in seiner Erfahrung einen kontinuierlichen Fluss hat, wenn er eine Aktion ausführt. Wenn wir zum Beispiel eine Bildlaufanimation in einem langen Feed erstellen, sollte der Benutzer sich auf den Inhalt der Seite konzentrieren können und nicht auf die Bildlaufanimation selbst.

2. Berechenbarkeit

Qualitätsmikrointeraktionen weisen ein Element der Vorhersagbarkeit auf, das es dem Benutzer ermöglicht, ein Produkt effektiv und effizient zu navigieren. Der Benutzer kann die Auswirkungen seiner Handlungen genau vorhersagen, kann sie problemlos rückgängig machen und ist zuversichtlich, dass er die erwartete Leistung erbringen kann.

3. Übertragbarkeit

Fließende Übergänge zwischen mehreren Bildschirmen und wohldefinierte Transformationen der verschiedenen Objekte in ihnen sind Schlüsselaspekte für hochwertige Mikrointeraktionen. Sie ermöglichen dem Benutzer ein intuitives Verständnis der Beziehungen zwischen Bildschirmen und den darin enthaltenen Elementen.

Wenn Mikrointeraktionen nach diesen Grundsätzen entworfen werden, stellen sie den Kontext für ein Design dar, indem sie den Benutzern die Möglichkeit geben, mit ihm zu interagieren. Eine Mikrointeraktion ist ein Momentanereignis, das eine einzelne Aufgabe abschließt. Mikro-Interaktionen sind wohl die kleinsten interaktiven Elemente eines Website- oder App-Designs und gehören zu den wichtigsten, da sie eine Vielzahl von Kernfunktionen erfüllen.

Durch Trigger (Tippen, Streichen, Ziehen usw.) werden alle im obigen Abschnitt aufgeführten Aktionen ausgelöst (Kontinuität, Vorhersagbarkeit und Umsetzbarkeit). Der Benutzer führt eine Aktion auf einer Website oder App aus, um den Vorgang zu starten (auch wenn er nach dem ersten Schritt fortgesetzt wird). Dies folgt einem Muster von Handlungsaufforderungen von einem Benutzer, Regeln für das Eingreifen, die von der Benutzeroberfläche (was wird passieren und wie), dem Feedback des Benutzers (hat es funktioniert oder nicht) und Mustern oder Schleifen (führt die Aktion aus) festgelegt werden einmal vorkommen oder nach einem Zeitplan wiederholen).

-Wie Entwickler und Designer zusammenarbeiten können, um Mikrointeraktionen zum Leben zu erwecken

Wie Sie sehen, spielen Mikrointeraktionen eine entscheidende Rolle bei der Gestaltung des Benutzererlebnisses. Aus diesem Grund werden sie zu einem immer wichtigeren Bestandteil meiner Arbeit als Produktdesigner. Nachdem ich an verschiedenen Projekten über mehrere Plattformen und Verwendungszwecke hinweg gearbeitet habe, ist mir aufgefallen, dass nicht jeder den Wert dieser Elemente erkennt und weiß, wie sie effektiv erstellt werden können. Noch wichtiger ist, dass die Teammitglieder häufig nicht wissen, wie sie ihre Ideen in Bezug auf das Entwerfen von Übergängen und Mikrointeraktionen miteinander ausdrücken sollen.

Ich erkannte, dass alles auf Kommunikation hinauslief - etwas ging in der Übersetzung verloren, als ich meinen Entwicklern meine Designideen erklärte. Vielleicht haben Sie dieses Zitat von Konfuzius schon einmal gehört: „Sagen Sie es mir, und ich werde es vergessen. Zeig es mir, und ich kann mich erinnern. Beziehen Sie mich mit ein, und ich werde verstehen. “Und durch Engagement schaffen wir als Team von Designern und Entwicklern großartige Erfahrungen.

Lassen Sie uns zunächst eine kurze Beschreibung des Entwurfsprozesses durchgehen.

In einer idealen Situation, wenn ein Designer eine Idee für eine Mikrointeraktion hat, wird der herkömmliche Workflow in der folgenden Reihenfolge ausgeführt:

  1. Der Designer entwickelt die visuellen Elemente und Animationseffekte, die erforderlich sind, um seine Idee zu verwirklichen.
  2. Der Designer präsentiert den anderen Teammitgliedern das endgültige Modell und die zugrunde liegenden Konzepte.

Was aber, wenn der Designprozess in der Praxis nicht so abläuft wie in der Theorie? Was ist, wenn wir ein Storyboard oder ein unvollständiges Modell präsentieren? Oder entwirft jemand anderes im Team das Modell?

In diesem Fall können Probleme bei der Präsentation oder Entwicklung auftreten. Diese Probleme fallen normalerweise in eine von drei Kategorien:

  1. Die Animationsidee wird nicht klar genug kommuniziert.

Wenn Sie versuchen, ein Animationskonzept mit Worten oder Standbildern zu beschreiben, sehen Sie möglicherweise Grimassen auf den Gesichtern Ihres Publikums. Das heißt, sie geben ihr Bestes, um Ihre Idee zu verstehen, aber sie verstehen sie nicht wirklich. Selbst wenn sie das Grundkonzept verstehen, stimmt das Bild, das sie in ihren Köpfen heraufbeschworen haben, wahrscheinlich nicht mit Ihren Vorstellungen überein. Da Menschen dazu neigen, sich bewegende Bilder, Standbilder und verbale Beschreibungen auf unterschiedliche Weise wahrzunehmen, schafft die Verwendung von Wörtern oder Bildern zur Vermittlung von Animationsideen Raum für Missverständnisse und häufig unnötige Spannungen zwischen den Mitgliedern Ihres Teams.

2. Der Designer weiß nicht, ob die Animation gut funktioniert, bis er den Prototyp des Entwicklers überprüft und testet.

Wenn Designer keine Fähigkeiten zum Erstellen von Prototypen besitzen, können sie ihre Ideen nur über ein Storyboard an Entwickler weitergeben. Selbst wenn ein Designer fest an ein Mikrointeraktionsmodell glaubt, kann er nicht sagen, ob es sein volles Potenzial entfaltet, bis der Entwickler den Prototyp fertiggestellt hat. Dies ist aus einer Reihe von Gründen problematisch, wobei die Hauptursache die hohe Wahrscheinlichkeit von Missverständnissen ist, die ein solcher Ansatz in den Prozess einführt. Darüber hinaus öffnet es den Mitgliedern des Teams die Tür zu Zweifeln und führt zu Fragen nach der Machbarkeit der Idee. Dies kann aus entwicklungspolitischer Sicht zeitaufwändig sein.

3. Der Designer und der Entwickler befinden sich nicht auf derselben Seite

Wenn Designer Benutzeroberflächenanimationen oder Mikrointeraktionen erstellen, versuchen sie, komplexe Designdetails wie benutzerdefinierte Bedienelemente, Skripts, Ausdrücke und andere Effekte einzubeziehen. Wenn sie den Entwicklern diese Ideen vorstellen, hören sie möglicherweise: "Es ist nicht möglich, dies in unserer Zeitleiste zu machen." Oder "Wir können es nicht genau so machen, aber wir werden es versuchen." Informieren Sie sich über die verschiedenen Details und technischen Probleme mit den Entwicklern. Diese Diskussionen können jedoch fruchtlos werden, wenn der Designer nicht über ausreichende Kenntnisse der von den Entwicklern verwendeten Tools oder Sprachen verfügt. Diese Faktoren sollten bei der Formulierung und Diskussion von Ideen berücksichtigt werden, damit die Mikrointeraktionen mit den Standardeinstellungen der Entwickler kompatibel sind und die Wahrscheinlichkeit steigt, dass das Endprodukt den Standards des Designers (und aller anderen) entspricht.

Was sind einige Lösungen für diese Probleme?

Während alle Designer und Entwickler ihre eigene Art der Kommunikation über ihre Animationskonzepte haben, möchte ich eine der Methoden teilen, die mein Team anwendet. Diese Methode war sehr erfolgreich und führte zu weniger Besprechungen und hat die Kommunikation unseres Teams drastisch verbessert.

Jetzt streiten wir uns nicht mehr darüber, ob Mikrointeraktionen einbezogen werden sollen oder nicht, sondern suchen nach Wegen, um sie noch besser zu machen!

Skeleton Interaction Concept & Interaktionshandbuch

„Das Konzept der Skelettinteraktion und der Interaktionsleitfaden lassen keinen Interpretationsspielraum, sodass ich sofort mit der Arbeit beginnen und sicher sein kann, die Vision des Designers zu erfüllen.“ –Jesse M Majcher / leitende IOS-Ingenieurin

Der Standardprozess, mit dem wir über UX-Designs kommunizieren, lässt sich für Benutzeroberflächenanimationen nicht gut übersetzen. Zunächst werden UX-Designs und -Flows weiterhin bildschirmweise und statisch erstellt. Benutzeroberflächenanimationen sind Flüsse in sich selbst, sie sind fließend und basieren auf dem Timing. Wenn wir ein statisches Design erstellen, erstellen wir ein grobes Drahtmodell, damit wir die Idee verstehen und den Ablauf diskutieren können. Auf diese Weise können wir das Design leicht überarbeiten und optimieren, bevor wir die endgültige Version erstellen. Sobald jedes Teammitglied einverstanden ist, dass das Design den Entwicklern übergeben werden kann, stellt der Designer dem Entwickler einen Style-Guide und eine rote Linie mit Details, Spezifikationen und anderen wichtigen Informationen zum Design zur Verfügung.

Wenn wir einen ähnlichen Prozess für Animationen verwenden, ist unser Prozess möglicherweise viel schneller und besser.

  1. Skeleton Interaction Concept (Bewegungsstudie)

Ein Skelett-Interaktionskonzept ähnelt dem Drahtmodell, das Sie beim Entwerfen von Flüssen erstellen würden. Der Hauptunterschied besteht darin, dass dies eine spielbare / klickbare Prototyp-Demo ist. Wenn wir dies zu einer Besprechung bringen, müssen unsere Teammitglieder nicht ihre Vorstellungskraft einsetzen, um das Konzept zu verstehen. Der Designer kann die spielbare / klickbare Demo oder das statische Storyboard verwenden, um direkt auf die visuellen und animierten Elemente des Entwurfs zu verweisen. Dies gibt jedem ein klares und genaues Gefühl für seine / ihre Idee. Im Gegenzug können die Partner ein Feedback abgeben, das für den Designer sehr spezifisch und daher sehr wertvoll ist. Gleichzeitig erhalten die Produktmanagement- und Entwicklungsteams Informationen, mit denen sie ihre interne Kommunikation und Zeitschätzung für das Projekt verbessern können.

2. Interaktionsanleitung

Sobald sich das Team auf das Konzept geeinigt hat, erstellt der Designer den Interaktionsleitfaden. Dies ähnelt einer Stilrichtlinie, da Position, Drehung, Skalierung und Timing der Elemente dargestellt werden. Wir können jedes Detail zu den Animationen hinzufügen, damit unsere Partner es besser verstehen. Wenn der Designer seinen Partnern den Interaktionsleitfaden zeigt, kann er die Bewegung und Messung des Animationskonzepts noch deutlicher erkennen. Dies ist sehr hilfreich, um die Arbeit durch Zusammenarbeit abzuschließen. Dies hilft den Designern auch dabei, ihre Animations- / Mikrointeraktionsdesigns durchdachter zu gestalten.

3. Prototyping-Fähigkeiten für Designer

Meiner Erfahrung nach sollte der Produktdesigner der Treiber der Animation sein und der Entwickler den Support leisten, um sich auf eine erfolgreiche Designzusammenarbeit vorzubereiten. Dies bedeutet, dass der Produktdesigner den größten Teil der Verantwortung in der Partnerschaft trägt. Sie sind nicht nur dafür verantwortlich, ihre Ideen klar zu erläutern, sondern müssen auch durch einen Proof of Concept nachweisen, dass sie machbar sind. Dies bedeutet auch, dass Produktdesigner in der Lage sein müssen, ihre eigenen Animationsprototypen zu erstellen. Wenn ein Produktdesigner einen Prototyp erstellen und während eines Meetings präsentieren kann, ist die folgende Diskussion klarer und weniger zeitaufwendig, was zu einem insgesamt effektiveren Kommunikationsprozess führt.

Welche Arten von Prototyping-Tools sollten Designer kennenlernen? Es gibt viele Tools, aber nicht jeder weiß, welche für bestimmte Mikrointeraktionsaufgaben am besten geeignet sind. Hier sind meine Empfehlungen, die auf meiner persönlichen Erfahrung bei der Gestaltung dieser Elemente beruhen.

Wenn Sie mit Codierung vertraut sind:

  • Mobil: Xcode, Android Studio
  • Mobil oder Web: Framer
  • Web: CSS-Animation

Wenn Sie eine Interaktion zwischen einem bildschirmartigen Push und einem Modul entwerfen möchten:

  • Invision und Marbel

Wenn Sie detailliertere Interaktionen erstellen möchten:

  • Prinzip, Adobe CC, Origami Studio und Pixate

Wenn Sie detaillierte Interaktionen und Animationen erstellen möchten:

  • After Effects

Derzeit bin ich ein Fan von After Effect für mein Prototyping. Auch wenn es nicht interaktiv (d. H. Klickbar) ist, ist es die perfekte Möglichkeit, ein Animationskonzept zu präsentieren. Es gibt auch keine Einschränkung der Wirkung und Sie können die Detailbewegung steuern. Es ist sogar möglich, damit eine Interaktion im 3D-Raum durchzuführen, z. B. für AR und VR.

Herrliche Teaminteraktionen sorgen für herrliche Produkte

Mikrointeraktionen sind zu einem immer wichtigeren - wenn nicht sogar kritischen - Element von Web, Mobile Design und vielem mehr geworden. Auch wenn sowohl Designer als auch Entwickler den Wert von Benutzeroberflächenanimationen erkennen und motiviert sind, sie zu erstellen, haben sie häufig Schwierigkeiten, effizient und effektiv zusammenzuarbeiten. Es braucht ein starkes Team, um rechtzeitig großartige Mikrointeraktionen zu liefern. Solche Teams erfordern eine klare Abgrenzung der Rollen, effektive Kommunikationsfähigkeiten und die richtigen Prototypentools für die jeweiligen Aufgaben.

Stellen Sie sicher, dass Ihr Team über diese Eigenschaften verfügt und sich auf diese Prozesse einlässt, um Ihre Mikrointeraktionen für den Erfolg vorzubereiten. Und viel Glück bei deiner eigenen Reise mit Mikrointeraktion!

OFFENLEGUNGSERKLÄRUNG: Diese Meinungen sind die des Autors. Sofern in diesem Beitrag nicht anders angegeben, ist Capital One keinem der genannten Unternehmen angeschlossen und wird von diesen auch nicht unterstützt. Alle verwendeten Marken und sonstigen geistigen Eigentumsrechte sind Eigentum ihrer jeweiligen Inhaber. Dieser Artikel ist © 2017 Capital One.

Weitere Informationen zu APIs, Open Source, Community-Events und Entwicklerkultur bei Capital One finden Sie in DevExchange, unserem zentralen Entwicklerportal: developer.capitalone.com.