Animation im UX/UI-Design: Wie und wann?

Sollten Sie Animationen in Ihrem UX/UI-Design verwenden? Darauf geben wir Ihnen sofort die Antwort: ja. Warum, wie und wann oder wo — das werden wir in diesem Blog behandeln.

Warum sollten Sie Animationen im UX/UI-Design verwenden?

Wie wir alle wissen (und erleben), ist die Aufmerksamkeitsspanne der Menschen immer kürzer geworden. Wir sind es gewohnt, ständig stimuliert zu werden und Langweilig und fad wird es einfach nicht mehr reichen. Aus diesem Grund waren Videos der letzte Schrei, als sie zum ersten Mal auf Websites auftauchten. Deshalb ist TikTok so beliebt.

Es geht nicht nur um die Nutzerbindung. Bewegungseffekte sind eine Möglichkeit für den Designer, mit dem Besucher der Website zu kommunizieren. Es kann hilfreich sein, das „e“ in Bewegung hinzuzufügen, wenn Sie verstehen, was wir meinen.

Animation kann auf der Website viele verschiedene Dinge sein (wie wir später noch besprechen werden) und das eine, was wir glauben, sollte es sein, ist: unterhaltsam und/oder praktisch.

Was heißt das?

Bewegungseffekte können dabei helfen, den Nutzer intuitiv durch die Website oder eine Anwendung zu führen.

Sie können einer normalerweise langweiligen und sich wiederholenden Aufgabe ein wenig Aufsehen verleihen.

Sie können den Unterschied ausmachen, ob der Benutzer auf der Website bleibt oder abklickt.

Und nein, wir wollen nicht noch mehr Druck und Stress in dein Leben bringen, indem wir das sagen. Es ist genau das Gegenteil: Wir möchten Sie dazu inspirieren, abstrakt zu denken. Sich eine ganze Welt vorzustellen, die das Produkt umgibt.

Stellen Sie sich ein Maskottchen vor, das zum Leben erwachen könnte; stellen Sie sich die Bewegung und die Farben vor, die durch die Seite fliegen könnten, während der Benutzer scrollt; fangen Sie den Geist des Produkts ein und lassen Sie ihn auf den Seiten der Website erstrahlen.

Versuchen Sie wie immer, sich in die Lage des Benutzers zu versetzen. Gibt es etwas an dem Produkt, über das sie sich vielleicht wundern könnten? Gibt es etwas, das erklärt werden muss? Gibt es eine Geschichte zu erzählen?

Wann?

Wie bei allem liegt der Schlüssel zur Verwendung von Animationen im UI/UX-Design darin, übertreibe es nicht. Wir haben einige Vorschläge, was Sie entwerfen könnten. Kombinieren Sie, finden Sie heraus, was für die Marke funktioniert, und seien Sie kreativ — wann immer Sie können.

Es ist langweilig, darauf zu warten, dass eine Seite geladen wird. Aus diesem Grund sind Animationen auf dem Ladebildschirm am häufigsten. Das Hauptziel von Ladebildschirmen besteht darin, den Besucher darüber zu informieren, dass er am Ziel ankommen wird. Möglicherweise muss er nur eine Weile warten. Warum also nicht, während sie warten, Ihrer Ladeseite ein wenig Flair verleihen, um sie interessanter zu gestalten? Es muss nicht schrullig sein, aber es kann das Produkt ergänzen.

Denken Sie darüber nach, wie eine Ladebildanimation mit dem verknüpft werden könnte, was die Website verkauft.

Ist es ein Restaurant? Machen Sie eine Animation, wie eine Pizza zubereitet wird.

Farbe verkaufen? Wie wäre es mit einem Pinsel, der über einen Bildschirm malt?

Wenn Sie darüber nachdenken, sind die Möglichkeiten endlos.

Die Hover-Animation ist ebenfalls offensichtlich. Diese Art der Animation wird heutzutage sogar etwas erwartet, da Benutzer bereits daran gewöhnt sind, zu sehen, ob ein Element anklickbar ist, wenn sie den Mauszeiger darüber bewegen (den Cursor über das Element bewegen, aber nicht darauf klicken).

Aber du musst es nicht fad machen. Verwenden Sie Farbe oder ein interessantes Detail, um der Hover-Animation ein wenig Charme zu verleihen.

Das Hero-Bild im Webdesign bezieht sich auf ein Bild, das Aufmerksamkeit erregt, das normalerweise in der Above-the-Fold-Zone der Webseite unter dem Header der Website platziert wird. Es ist das Erste, was Webseitenbesucher sehen werden, daher müssen wir nicht betonen, wie wichtig es sein kann.

Das Hinzufügen von Animationen zum Hero-Bild erhöht die Originalität und kann dazu beitragen, dass der Besucher auf der Website bleibt. Es kann eine Geschichte über die Marke erzählen, es kann zeigen, worum es bei der Marke geht, oder das Produkt näher erklären.

Denken Sie daran, dass der Stil Ihrer Animation dem Geschmack Ihres Kernpublikums entsprechen sollte. Das Aussehen und die Haptik sind subjektiv, was knifflig sein kann — aber genau aus diesem Grund sind ein gutes Briefing und ein gutes Verständnis Ihrer Zielgruppe so wichtig.

Das Herz funkelt und wird dann auf Twitter rot. Das Verschieben von Interaktionsschaltflächen auf Facebook wie „Gefällt mir“, „Liebe“, „Traurig“ usw. Dies sind alles Mikrointeraktionen.

Kleine, aber wichtige Details, die Ihrem Design ein bisschen mehr Spaß machen.

Dan Shaffer, der diesen Begriff in seinem Buch geprägt hat „Mikrointeraktionen: Gestalten mit Details“, sagt:

„Eine Mikrointeraktion ist ein in sich geschlossenes Produktmoment, das sich um einen einzigen Anwendungsfall dreht — ein winziges Stück Funktionalität, das nur eine Sache tut. Es sind kleine Momente, die langweilig und unvergesslich oder unterhaltsam und fesselnd sein können. Sie sind überall.“

Und genau wie Funktionen die Anwendung/das Produkt nützlich machen, machen Mikrointeraktionen sie praktisch.

Wie?

Es gibt verschiedene Software, mit der Sie Ihr Design und Ihre Illustration zum Leben erwecken können.

Adobe After Effects ist vielleicht der erste, der uns in den Sinn kommt, wenn wir über Animation nachdenken. Es ist eine wirklich gute Software, besonders wenn Sie ein erfahrener Designer sind. Für Anfänger mag es etwas überwältigend erscheinen - aber lassen Sie sich davon nicht abschrecken. Das Gute ist, wenn Sie erst einmal gelernt haben, wie man in einer solchen Software entwirft, ihre Umgebung und Grundlagen erlernt hat, wird sich dieses Wissen als nützlich erweisen, wenn man eine solche ähnliche Software verwendet.

Andere Software, die Sie verwenden könnten:

Maya — Software für 3D-Animationen und visuelle Effekte

Nuke — eine knotenbasierte Anwendung für digitales Compositing und visuelle Effekte

Blender - kostenloses Open-Source-2D/3D-Computergrafik-Software-Toolset

Sie können mit Adobe After Effects beginnen oder einige Nachforschungen anstellen und nach Software suchen, von der Sie glauben, dass sie Ihren konkreten Bedürfnissen besser entspricht; Es geht darum, einfach mit der Animation zu beginnen. Sobald Sie die Grundlagen beherrschen, wird es viel einfacher sein, fortgeschrittenere Software und Aufgaben in Angriff zu nehmen.

Ein Tipp: Brainstorming

Bevor du dich entscheidest, was du animieren möchtest und wie, mach ein Brainstorming! Besprechen Sie es mit Freunden und Kollegen und überfliegen Sie das Internet.

Ästhetik ist wichtig, aber auch Funktionalität. Humor ist großartig, aber wird Ihr Kernpublikum ihn auch lustig finden?

Manchmal, wenn wir keine Ideen mehr haben oder uns festgefahren fühlen, kann das bloße Besprechen mit Freunden, Familie, Kollegen usw. eine Idee in Ihrem Kopf auslösen! Wenn Sie das nächste Mal Probleme haben, probieren Sie es aus. Lass uns wissen, ob es geklappt hat.

Fazit

Um es zusammenzufassen:

• Animationen (ebenso wie Videos) erhöhen die Nutzerbindung und die Nutzerbindung und verleihen einer Marke den besonderen Schwung, den sie braucht, um sich von den anderen abzuheben
• Nutze es, um deiner Kreativität freien Lauf zu lassen und dich auf clevere und lustige Weise in verschiedenen Segmenten der Website auszudrücken: Held, Ladebildschirm, Hover-Animationen, Mikrointeraktionen usw.
• Unterhalten Sie den Besucher, halten Sie ihn auf der Website und schon haben Sie einen potenziellen Kunden
• Entwerfen Sie die Animation in einem Stil, der zu Ihrem Kernpublikum passt und bei ihm ankommt. Ein starker visueller Stil schränkt zwar die Zielgruppe ein, bei der sie ankommt, ist aber in der Regel besser als ein verwässertes Design, das ein breiteres Publikum erreichen könnte
• Animationen können helfen, den Besucher aufzuklären oder ihm eine Geschichte zu erzählen.
• Es gibt verschiedene Software, die Sie je nach Ihren Bedürfnissen und Ihrem Wissensstand verwenden können