Welche Animationen man verwenden sollte, um die UX Ihrer Web-App zu verbessern

Bei Yalantis sind wir große Fans von kreativen und schönen Animationen. Wir glauben, dass gut gestaltete Animationen maßgeblich zur Anziehungskraft und Benutzerfreundlichkeit von Web- und Mobilapps beitragen können. Wenn sie richtig eingesetzt werden, sind effektive Animationen in der Lage, eine starke Verbindung zwischen Nutzern und dem Inhalt auf dem Bildschirm aufzubauen.

Wenn Sie Ihre Web-App benutzerfreundlicher gestalten möchten, lesen Sie diesen Beitrag weiter: Wir werden die verschiedenen Arten von Webanimationen besprechen und Ihnen erklären, wie Sie Ihr eigenes Cross-Browser-Web-App-Design optimieren können.

Zunächst lassen Sie uns die Arten von UI-Animationen in Webanwendungen untersuchen und sehen, wofür man sie verwenden kann.

Wird geladen

Benutzer müssen oft warten, während die Inhalte geladen werden: Website-Seiten, PDF-Dateien, Tabellen, Karten, Videos und andere Inhalte. Um die Wartezeit zu erhellen und das Gefühl zu vermitteln, dass Ihre App schneller läuft, können Sie eine der unzähligen Arten von Ladevorgangsanimationen verwenden, die sich drehen, springen oder verschwinden. Sie können auch Skelettbildschirme, kurze Cartoons, Fortschrittsbalken und formveränderliche Animationen in Betracht ziehen.

[Ladevorgang animiert]

Willkommen-Animationen

Die erste Eindruck eines Benutzers ist entscheidend, und fantastische Begrüßungsanimationen können Ihnen dabei helfen, die Nutzer von Anfang an zu begeistern. Darüber hinaus können sie die Nutzer unterhalten und dazu animieren, Ihr Produkt erneut zu nutzen. Lassen Sie uns die häufigsten Arten von Willkommensanimationen untersuchen, um zu verstehen, wie sie Menschen begeistern.

• Partikelanimationen

Diese Animationen sind eine der auffälligsten und können auf der Startseite einer Webapp erscheinen. Sie helfen Nutzern, sich zu entspannen und bieten eine Art Meditation. Die Partikelanimationen können interaktiv oder nicht-interaktiv sein.

Interaktive (oder Echtzeit-)Partikelanimationen reagieren auf die Bewegungen des Mauszeigers des Benutzers. Die meisten Nutzer bevorzugen die Möglichkeit, Animationen steuern zu können, und eine Webanwendung mit dieser Art von Animationen kann hypnotisch wirken. Partikelliebe, Die Website von Edan Kwan bietet ein perfektes Beispiel für Echtzeitanimationen.

Nicht-interaktive Partikelanimationen erfordern keine Beteiligung des Benutzers, können aber auch beeindrucken. Darüber hinaus können diese Animationen auch im Hintergrund ausgeführt werden.

[Nicht-interaktive Partikelanimation]

Typografie- (oder Schrift-)Animationen gehören ebenfalls zur Kategorie der Partikelanimationen. Typografie-Animationen umfassen Bilder bewegender Buchstaben und können entweder interaktiv oder nicht-interaktiv sein. Wenn Sie sehen möchten, wie eine interaktive Typografie-Animation aussehen kann, besuchen Sie die Seite Homepage von Yalantis.

• Hintergrundvideo

Wenn Sie die Canvas United Auf der Startseite wird ein schallloser Hintergrundvideo angezeigt, das den zentralen Text ergänzt. Das Video ist sehr schnell, sodass die Nutzer es mehrmals ansehen können und so dazu angeregt werden, mehr Zeit auf der Website zu verbringen.

• 3D-Animationen

3D-Animationen bieten Designern mehr Möglichkeiten, realistische und komplexe Grafiken zu erstellen, die die Aufmerksamkeit auf sich ziehen. Einige Designexperten verfolgen einen Trend, bei dem 2D-Objekte mit 3D-Objekten kombiniert werden, wodurch tiefere und raffiniertere Erlebnisse geschaffen werden können.

Wie Hintergrundvideos und Partikel dienen auch interaktive 3D-Animationen (die auf Tastendrücke, Mausklicks, Buttonklicks und Fingerbewegungen auf mobilen Geräten reagieren) als dekorative Elemente einer Website. Es ist üblich, sie auf den Hauptseiten zu platzieren, um die Nutzer in ihren ersten Minuten der Besuche auf einer Website willkommen zu heißen und zu unterhalten.

[3D-Objekte in der Motion Design]-

Bei der Erstellung einer neuen Website oder einer neuen Webanwendung können Sie die oben genannten Animationen auf Ihre Startseite anwenden. Außerdem können Sie, wenn Sie bereits ein digitales Produkt haben und überdenken, es neu zu gestalten, Animationen verwenden, die am besten zu Ihrer Produkt-UI passen.

Scrollen

Eine der wichtigsten Vorteile von Scrollanimationen ist, dass sie interaktive Designs ergänzen und den Benutzern Kontrolle über die Animationen geben. Sie können aus vielen verschiedenen Arten von animierten Scrollen wählen: einer Seite lang scrollen, Zeichnen des Scrollens, Hintergrundänderungen und mehr. Das Prinzip ist jedoch für alle Arten von animierten Scrollen gleich: Die Animationen bewegen sich, wenn ein Benutzer die Seite scrollt.

[Animation des Scrollens]

Bildgalerien

Wenn Sie möchten, dass die Benutzer mehrere Bilder auf demselben Bildschirm sehen können, können Sie eine Diashow oder ein Karussell hinzufügen, in dem die Bilder einzeln dargestellt werden. So können Sie nicht nur Platz auf Ihrer Website sparen, sondern auch eine Geschichte erzählen. Durch die Reihenfolge der Bilder können Sie erklären, wie Ihre Webanwendung funktioniert, welche Werte Ihr Unternehmen hat und wie es entstanden ist. Oder Sie können einfach Ihre besten Produkte aufgeführt haben, um die Aufmerksamkeit zu erregen. Darüber hinaus können Sie durch die Einstellung der Richtung für Diashows und Karussells die Benutzer dazu bringen, andere Websiteelemente zu sehen und zu nutzen.

[Objektanzeige auf einer Immobilienplattform]

Seitenanfang

Die Seitenleisten-Navigation (vertikale Schiebe-Navigation) ist die geeignetste Option zur Erstellung kompakter und übersichtlicher Webapps. Kleine animierte Menüsymbole, die stets in Reichweite auf der Seite des Bildschirms zu finden sind, ermöglichen es Nutzern, das Menü Ihrer Webapp problemlos zu erreichen, ohne scrollen zu müssen.

[Animationierte Seitenleiste]

Visuelles Feedback

Animationen können Nutzern dabei helfen, sofort zu verstehen, ob sie die richtigen Aktionen ausgeführt haben. Diese Animationen können in Warnanimationen und Hover-Effekt-Animationen unterteilt werden.

• Warnanimationen

Ihre Webanwendung kann den Benutzern mitteilen, dass sie etwas falsch machen. Zum Beispiel können Animationen die Benutzer auffordern, eine Aktion zu wiederholen oder einen Button nicht erneut zu klicken, wenn sie ein Feld falsch ausgefüllt haben oder etwas vergessen haben. Warnanimationen können die Form von roten Kreuzen, traurigen Emojis oder anderen Symbolen annehmen, die die Benutzer über ungültige Aktionen informieren.

• Hover-Animationen

Animationen mit Hover-Effekten können den Benutzern anzeigen, ob die Objekte, über die sie hinhinwinkeln, auch gedrückt werden können. Schaltflächen können leuchten, sich verändern oder eine Farbe annehmen, oder Hinweise anzeigen.

Ein weiteres Ziel von Hover-Animationen ist es, die Benutzer darüber zu informieren, dass die von ihnen durchgeführten Aktionen erfolgreich waren. Wenn beispielsweise Benutzer ein Formular absenden, kann die Animation anzeigen, dass die Absenden-Schaltfläche gedrückt wurde.

[Beispiel für animierte visuelle Rückmeldung]

Mit Hilfe von visuellen Feedbackanimationen wird Ihr Produktdesign intuitiver. Sie können diese Art von Animation auch auf Ihr mobiles Produkt anwenden. Erfahren Sie mehr darüber, wie Sie Animationen erfolgreich in Ihrer mobilen Anwendung nutzen können, indem Sie einen unserer Experten kontaktieren. Neueste Artikel.

Storytelling

Kreative animierte Storytelling können viel Informationen schnell vermitteln und Ihre Geschichte fesselnd machen. Beispielsweise können Sie stattdessen eine Animation erstellen, die den Bauprozess darstellt, anstatt einen langen Artikel über Ihre neue Hotelkonstruktion zu schreiben. Hier sehen Sie ein Beispiel dafür, wie eine solche animierte Storytelling aussehen könnte:

[Beispiel für animierte Storytelling]

Nun, da Sie die wichtigsten Animationstypen kennen, ist es an der Zeit, zu lernen, wie Sie diese in Ihre App einbauen können. Der übliche Ablauf ist wie folgt:

• Ein Designer erstellt ein Konzept und demonstriert es einem Frontend-Entwickler.
• Der Frontend-Entwickler überprüft die Animationskomplexität und wählt die Technologie aus, die sie implementieren soll. Oftmals greift der Entwickler auf CodePen Aus einer Auswahl von Tausenden von bereits fertigen Lösungen wählen.
• Der Frontend-Entwickler testet, ob die Animation für die grundlegenden Anwendungsfälle ordnungsgemäß funktioniert.

Lassen Sie uns die beliebtesten Technologien für die Erstellung beeindruckender Webanimationen betrachten.

CSS

CSS-Animationen helfen Ihnen, durch eine Reihe von Keyframes zwischen verschiedenen Zuständen zu wechseln. Mit leistungsstarken CSS-Animationen benötigen Sie keine externen Bibliotheken. Sie können Elemente Ihrer Webseite im Document Object Model (DOM) animieren, indem Sie CSS-Eigenschaften auf sie setzen. CSS-Animationen eignen sich auch für responsive Entwicklung, da Sie Ihre Animationen mithilfe von Media-Queries anpassen können. Anstatt Objekte für Keyframe- und Timing-Eigenschaften zu erstellen, können Sie deren Werte einfach direkt übergeben.

Bei CSS-Animationen hingegen können Sie keine komplexen Physikeffekte erstellen und realistische Bewegungen nachahmen. Und CSS-Animationen funktionieren nicht, wenn Sie mehr als drei Animationen hintereinander benötigen. Es ist besser, komplexe und sequentielle Animationen in JavaScript zu schreiben.

JavaScript

JavaScript-Animationen bieten mehr Power und Flexibilität als Übergänge oder CSS-basierte Animationen und können auch dazu verwendet werden, DOM-Elemente auf einer Seite zu bewegen. Basis-JavaScript verfügt über seine eigene Animation-Funktionalität, aber die meisten Animationen werden über zusätzliche Bibliotheken durchgeführt, die die Performance stark beeinflussen. JavaScript-Animationen werden häufig verwendet, um Objekte zu animieren, die sich hin und her bewegen, pausieren, stoppen und verlangsamen.

SVG

SVG steht für skalierbare Vektorgrafiken. SVG-Animationen sehen scharf aus, da Vektoren keine Pixelbegrenzungen haben. Egal, wie Sie die Seite vergrößern oder verkleinern – SVG-Dateien behalten ihre Qualität, genau wie Rasterbilder.

SVG-Elemente lassen sich mit CSS animieren. Allerdings verfügt SVG auch über eine eigene Syntax für Animationen, die SMIL genannt wird. SMIL ist leistungsfähiger als CSS für SVG-Animationen, da man mit CSS nicht einige SVG-Eigenschaften wie die Form eines Pfads animieren kann.

Canvas

Mit Canvas-Animationen erzielen Sie hervorragende Performance beim Animatieren einer großen Anzahl von Visualisierungen. Ein Canvas bietet einen visuellen Raum, in dem Sie komplexe Animationen mit leistungsstarker Rendering-Performance erstellen können. Canvas-Animationen basieren auf der Arbeit mit Pixeln. Mit Pixeln können Sie komplexe Zeichnungen und Interaktionen erstellen, die die Performance nicht beeinträchtigen.

WebGL

WebGL steht für die Web Graphics Library, die hauptsächlich für schwierige Effekte und 3D-Objekte verwendet wird. Es ist auch möglich, WebGL zu verwenden, um Animationen für die virtuelle Realität (VR) zu erstellen. WebGL ermöglicht es, Grafiken mit einer Geschwindigkeit von 60 Bildern pro Sekunde anzuzeigen. Für WebGL-Animationen verwendet man außerdem ein Canvas, doch dies ist viel schwieriger und komplexer. Die meisten kreativen visuellen Effekte werden mit WebGL erstellt.

Nun kommen wir zu Werkzeugen zur Erstellung großartiger Animationen für Ihre Webseiten. Die meisten der von uns besprochenen Werkzeuge zur UI-Animation sind externe Bibliotheken, die Sie in Ihrem Projekt verwenden können.

Es gibt verschiedene JavaScript-Bibliotheken von Drittanbietern, mit denen man Animationen erstellen kann. Lassen Sie uns uns einige davon ansehen.

• GreenSock (GSAP)

GSAP ist eine beliebte JavaScript-Animationbibliothek mit vielen Optionen für Animationen. Im Grunde ist GSAP ein Property-Manipulator. Es erfasst einen Startwert und einen Endwert und interpoliert diese Werte dann 60 Mal pro Sekunde.

GSAP wird verwendet, um jede Eigenschaft einzeln zu animieren, sodass Sie alles einfach skalieren, drehen und verschieben können. Und GSAP ist flexibel, sodass es eine großartige Wahl für die Animation fast aller Dinge ist: CSS, SVG, DOM. Tatsächlich können Sie es überall dort verwenden, wo JavaScript ausgeführt wird.

[Webanimationsthema entwickelt von Yalantis]

• ScrollMagic

ScrollMagic ist eine Erweiterung, mit der Sie Scrollanimationen verwalten können. Sie eignet sich gut zum animieren von Elementen basierend auf der Scrollposition des Benutzers und zum Fixieren von Elementen an bestimmten Scrollpositionen. Mit ScrollMagic können Sie Ihrer Webseite außerdem eine Perspektivwirkung verleihen. ScrollMagic funktioniert mit mehreren Frameworks zur Erstellung von Animationen; das empfohlene Framework ist jedoch GSAP.

• Velocity.js

Velocity.js ist eine voll ausgestattete JavaScript-Animationbibliothek. WhatsApp, Uber, MailChimp und viele andere Unternehmen verwenden Velocity.js für ihre Webseiten. Diese Bibliothek wird häufig verwendet, um grundlegende Animations- und Mikrointeraktionen auf den Seiten zu erstellen. Velocity.js bietet Unterstützung für SVG, Farbanimationen, Transformationen, Loops, Scrollen und Effekte.

• Mo.js

Die Mo.js-Bibliothek eignet sich hervorragend zur Animation der Benutzeroberfläche und des UX Ihrer Webseiten, da sie benutzerdefinierte Motion-Graphics unterstützt. Mo.js ist modular aufgebaut, sodass Sie die benutzerdefinierte Bibliothek für Ihre Projekte verwenden und die hohen Dateigrößen vermeiden können. Mit Mo.js können Sie DOM- und SVG-DOM-Elemente verschieben, aber Sie können auch spezielle Mo.js-Objekte mit einzigartigen Funktionen erstellen.

• Anime.js

Anime.js funktioniert mit allen CSS-Eigenschaften, einzelnen CSS-Transformen, SVG- und DOM-Attributen sowie JavaScript-Objekten. Gleichzeitig sorgt Anime.js für eine geringe Code-Komplexität und unterstützt mehrere Timing-Optionen, Effekte, Wiedergabe-Steuerung und weitere Funktionen.

• Vivus

Vivus ist eine JavaScript-Bibliothek, die zur Animation von SVGs entwickelt wurde und ihnen das Aussehen von gezeichneten Elementen verleiht. Sie bietet drei verschiedene Animationsstile – verzögertes, synchrones und OnebyOne – die jeweils vorgeben, wie die SVG beim Zeichnen animiert werden soll. Mit Vivus können Sie einzigartige Animationen erstellen, indem Sie Animationenstile, Pfade und Zeitpunkte manipulieren.

3D-Animationen

Das beliebteste Tool zur Erstellung von 3D-Animationen ist Three.js, eine JavaScript-Bibliothek, die zur Vereinfachung von WebGL verwendet wird. Dank der vordefinierten Komponenten und Methoden können Sie 3D-Animationen schneller erstellen.

[3D-Animation für das eCuris-Projekt, entwickelt von Yalantis]

Rendering von After-Effects-Animationen für das Web

Motion-Designer verwenden meistens Adobe After Effects, um Animationen zu erstellen. Dann verwenden Entwickler verschiedene Front-End-Animation-Tools. Aber es gibt eine einfachere Möglichkeit: Mit der Bodymovin-Erweiterung für After Effects können Sie Ihre Animationen im JSON-Format exportieren und die Lottie-Bibliothek verwenden, um Animationen auf Ihrer Website hinzuzufügen.

Codefreie Website-Builder

Wenn Sie eine einfache Webseite benötigen und nicht programmieren oder die oben aufgeführten Technologien verwenden möchten, können Sie Tools für Anfänger nutzen – Website-Builder. Ja, diese können nicht als Animationssoftware bezeichnet werden, aber Website-Builder ermöglichen es Ihnen oft, Objekte auf der von Ihnen erstellten Website zu animieren. Sie finden viele Website-Builder und können sich für jeden entscheiden. Dies sind nur einige Beispiele.

• Readymag

Readymag ist ein beliebtes Werkzeug zur Erstellung von Webseiten und ermöglicht die Animation von Elementen dieser Seiten. In Readymag können Sie festlegen, wann eine Animation starten soll, und grundlegende Effekte wie Verschieben, Drehen, Skalieren und Deckkraft anwenden. Wenn Sie komplexere Animationen benötigen, können Sie Schritte hinzufügen, sodass eine Animation nach der anderen erfolgt. Readymag ermöglicht es Ihnen, Ladevorgänge zu erstellen, Scrollanimationen anzuwenden und Klick- und Mausanimationen anzuwenden.

• Webflow

Webflow ermöglicht es Ihnen außerdem, mehrstufige Animationen ohne Code zu erstellen. Sie können Bewegungen an Scrollvorgänge koppeln und die Größe, den Stil und die Positionen von Elementen transformieren. Sie können außerdem Mikrointeraktionen auf verschiedenen Elementen hinzufügen, sodass diese sich bei einer Hover- oder Klickaktion bewegen oder ändern. Wenn Sie nicht von Grund auf neu anfangen möchten, können Sie Ihre Website problemlos mit vorgefertigten Animationen ausstatten.

• Wix 

Wix ist ein weiterer Website-Builder, mit dem Sie Animationen auf Ihre Website hinzufügen können. Sie können damit Schilder und Schaltflächen interaktiv gestalten, indem Sie beispielsweise Farbverläufe, Schwebungen, Schiebebewegungen, Flugbewegungen, Faltbewegungen und Drehbewegungen implementieren. Darüber hinaus gibt es die Möglichkeit, Seitenübergänge zu animieren und diese so zu gestalten, dass sie sich wechselseitig überlappen, ab-in-der-Schleife abspielen und vertikal oder horizontal verschieben, wenn man scrollt.

Animationen können Ihnen helfen, professionelle Websites zu erstellen, Websiteelemente hervorzuheben und die Nutzer dazu zu bringen, länger auf Ihrer Website zu bleiben. Es gibt viele Animationstechnologien, -werkzeuge und -techniken, mit denen Sie dynamische oder flüssige Animationen in Ihre Webapp einbauen können. Wählen Sie daher die richtigen, um Ihre Webapp einzigartig und modern zu gestalten. Aber vergeuden Sie sich nicht mit Animationen. Andernfalls können Sie am Ende eine langsame und umständliche Website erstellen, die die Nutzer abschreckt und sie nicht mehr anzieht. Möchten Sie Ihr Webapp-Design verbessern?