5 wichtige Animationsmuster und deren Verwendung

Animation kann sehr mächtig sein Webdesign-Tool . Bevor wir jedoch jedes Element unserer Designs animieren, müssen wir lernen, wann und wie wir dieses neue Tool verwenden. Mit großer Kraft geht große Verantwortung einher und so weiter. Und da die Animation mit vielen anderen Bedenken hinsichtlich der Entwicklungs- und Entwurfszeit konkurrieren muss, ist es sinnvoll, unsere Ressourcen dort einzusetzen, wo sie am weitesten entfernt sind.

Dieser Artikel enthält einige grundlegende Animationsmuster und zeigt Ihnen, wie Animation auf ein größeres System angewendet wird. Dann lernen Sie, wie Sie kognitive Engpässe und niedrig hängende Früchte erkennen und so die Wirkung der Animationen maximieren, in die Sie investieren, um die zu verbessern Benutzererfahrung .

  • Dies ist ein Auszug aus Rachel Nabors 'Animation at Work - kauf es hier

Wenn Sie sich so viele Beispiele für Animationen im Web und in In-App-Oberflächen angesehen haben wie ich, treten bestimmte Muster auf. Diese Muster sind hilfreich, um den Zweck einer Animation zu identifizieren und kurz und bündig für andere zu verbalisieren.



Hier sind die Kategorien, die ich am häufigsten verwendet habe: Übergänge, Ergänzungen, Feedback, Demonstrationen und Dekorationen. Schauen wir uns jeden einzelnen an und sehen, wie sie sich auf die Benutzererfahrung auswirken.

01. Übergänge

Übergänge Bringen Sie Benutzer von Ort zu Ort in den Informationsraum oder wechseln Sie sie von einer Aufgabe in eine andere. Diese haben in der Regel massive Auswirkungen auf den Inhalt der Seite und ersetzen große Teile der Informationen.

Das Web wurde ursprünglich als eine Reihe verknüpfter Dokumente konzipiert. Durch Klicken auf einen Link löschte der Browser den Bildschirm, was häufig zu einem verräterischen Weißblitz führte, bevor die nächste Seite von Grund auf neu erstellt wurde. Während dies im Zusammenhang mit verknüpften textbasierten Dokumenten sinnvoll war, ist es in einer Zeit, in der Seiten viele umfangreiche Designelemente gemeinsam haben und zur selben Domäne gehören, weniger sinnvoll. Es verschwendet nicht nur die Ressourcen des Browsers, immer wieder dasselbe Seitenlayout neu zu erstellen, sondern erhöht auch die kognitive Belastung der Benutzer, wenn sie den Inhalt der Seite neu ausrichten und neu bewerten müssen.

Animation, insbesondere Bewegung, kann die Orientierung des Benutzers in einem Informationsraum erleichtern, indem diese Anstrengung auf den visuellen Kortex des Gehirns verlagert wird. Durch die Verwendung eines Übergangs zwischen Änderungen im Aufgabenfluss oder Positionen in der Informationsarchitektur wird idealerweise verstärkt, wo sich der Benutzer befunden hat, wohin er sich bewegt und wo er sich jetzt auf einen Schlag befindet.

Wenn ein Benutzer beispielsweise auf der SB Dunk-Seite von Nike (siehe oben) auf einen Navigationspfeil klickt, wird der aktuelle Sneaker aus dem Weg geräumt, während sich der nächste Sneaker aus der entgegengesetzten Richtung bewegt. Diese Übergänge zeigen dem Benutzer deutlich, wie er entlang eines linearen Kontinuums von Turnschuhen navigiert, wodurch er seinen Platz im Auge behält und das räumliche Modell der Durchsicht einer realen Reihe von Turnschuhen verstärkt.

Auf einer anderen Schuhseite, John Fluevog, bewegen Übergänge den Benutzer von Aufgabe zu Aufgabe (siehe oben). Nachdem ein Benutzer mit der Eingabe in das Suchfeld begonnen hat, werden die Ergebnisse vor einem dunkleren Hintergrund animiert. Dadurch wird der Benutzer vom Browserkontext zur Verfeinerung seiner Suchergebnisse überführt, wodurch sein Fokus optimiert und gleichzeitig versichert wird, dass er ohne großen Aufwand wieder zum Surfen zurückkehren kann.

02. Ergänzungen

Ergänzungen bringen Informationen auf oder von der Seite, ändern jedoch nicht den Standort oder die Aufgabe des Benutzers. Sie fügen im Allgemeinen Teile zusätzlichen Inhalts auf der Seite hinzu oder aktualisieren sie.

Während Übergänge den Benutzer von Status zu Status bewegen, bringen zusätzliche Animationen zusätzliche Informationen zum Benutzer. Denken Sie an Zeiten, in denen Informationen, die den Hauptinhalt der Seite ergänzen, angezeigt oder ausgeblendet werden: Warnungen, Dropdown-Listen und Tooltips sind gute Kandidaten für eine zusätzliche Animation beim Ein- und Ausstieg.

Denken Sie daran, dass diese Animationen den Sichtkegel des Benutzers berücksichtigen müssen: Werden sie direkt auf einen Tooltip schauen, der neben dem Cursor angezeigt wird, oder muss ihre Aufmerksamkeit auf eine Warnung an der Seite des Tablets gerichtet werden?

Wenn ein Benutzer ein Produkt zu seinem Warenkorb auf glossier.com hinzufügt, anstatt es auf eine ganz neue Warenkorbseite zu bringen, aktualisiert die Website den Benutzer lediglich hinsichtlich des Inhalts seines Warenkorbs, indem es als Seitenleiste (oben) angezeigt wird. Während ein Übergang den Benutzer aus dem Browsermodus herausholen würde, kann der Benutzer mit dieser zusätzlichen Animation den Warenkorb schließen und mit dem Einkaufen fortfahren.

Die Seitenleiste des Einkaufswagens verwendet eine zusätzliche ergänzende Animation, um das Auge des Benutzers schnell und subtil auf sich zu ziehen: Eine Fortschrittsanzeige füllt sich allmählich, um anzuzeigen, wie viel der Benutzer ausgeben muss, um kostenlosen Versand zu erhalten.

Bei diesem Warenkorbvorgang wird ein drittes Animationsmuster ausgeführt: Die Schaltfläche Zur Tasche hinzufügen erhält beim Klicken ein sich drehendes Symbol, das dem Benutzer eine Rückmeldung zum Ladezustand gibt. Apropos Feedback ...

03. Feedback

Feedback zeigt die Ursache zwischen zwei oder mehr Ereignissen an, die häufig verwendet werden, um die Interaktion eines Benutzers mit der Reaktion der Benutzeroberfläche zu verbinden.

Durch Animation können Benutzer direktes Feedback zu ihren Interaktionen geben. Ein gedrückter Knopf, eine Wischgeste - beide verbinden eine menschliche Handlung mit der Reaktion einer Schnittstelle. Oder die Kehrseite: Ein Ladespinner auf einer Seite zeigt an, dass wir auf dem Computer warten. Ohne visuelles Feedback fragen sich die Leute, ob sie tatsächlich auf die Schaltfläche 'Jetzt bezahlen' geklickt haben oder ob die Seite schließlich wirklich geladen wird.

Wenn Sie auf der Website des Monterey Bay Aquariums über eine Schaltfläche fahren, wird die Farbe von Rot nach Blau ausgeblendet, was darauf hinweist, dass das Element interaktiv ist und auf Benutzereingaben reagieren kann. Button-Hovers sind klassische Beispiele für diese Art von Animation, auch weil der Gewinn, visuellen Feedback für Benutzer zu Buttons zu geben, messbar und für das Geschäft wichtig ist.

Die Website von Design Studio Animal verwendet einen Farbbalken oben auf der Seite sowie eine animierte Version des Logos, um den Lade- und Ladezustand der Seite anzuzeigen und gleichzeitig Interesse zu wecken und das 'wilde' Branding zu verstärken.

04. Demonstrationen

Demonstrationen erklären, wie etwas funktioniert, oder enthüllen seine Details, indem sie zeigen, anstatt zu erzählen. Dies sind meine persönlichen Lieblingsanwendungen für Animationen. Sie können sowohl unterhaltsam als auch aufschlussreich sein.

Diese Animationen relativieren Informationen, zeigen, was passiert oder wie etwas funktioniert. Dies macht demonstrative Animationen zu perfekten Partnern für Infografiken. Wie Sie sehen werden, erzählen alle demonstrativen Animationen eine Geschichte.

Auf den Seiten 'Verarbeitung ...' können Sie erklären, was mit Benutzern passiert, während sie warten. TurboTax nutzt diese Verarbeitungsseiten gut aus. Nachdem Benutzer ihre US-Steuerformulare eingereicht haben, werden verbleibende Ängste beseitigt, indem ihnen gezeigt wird, wohin ihre Informationen gehen und was sie erwarten können - und gleichzeitig die Freundlichkeit und Zugänglichkeit ihrer Marke gestärkt wird. (Es hilft auch, dass die Animation Benutzer von einem ziemlich langen Seitenladen mit etwas visuell Ansprechendem ablenkt!).

Coin verwendet bekanntermaßen demonstrative Animationen, um neugierigen Besuchern das Wertversprechen ihrer Konsolidierungskarte zu erklären, während sie durch die Website scrollen. Diese Seite ist die Essenz von 'Zeigen, nicht erzählen'.

05. Dekorationen

Es ist nicht schwer, dekorative Animationen mit demonstrativen Animationen zu verwechseln. Es gibt jedoch einen entscheidenden Unterschied: Wo Demonstrationen neue Informationen in das System bringen, sind dekorative Animationen dies nicht. Sie sind die Fette und Zucker der Animationsnahrungsmittelpyramide: Sie sind großartige Geschmacksverstärker, aber Mäßigung ist der Schlüssel.

Der beste Weg, eine rein dekorative Animation zu erkennen, ist die Frage: „Was kann ein Benutzer aus dieser Animation lernen? Führt dies sie oder zeigt es ihnen etwas, was sie sonst nicht wissen würden? ' Wenn die Antwort Nein lautet, haben Sie möglicherweise eine dekorative Animation auf Ihren Händen.

Auch wenn sie einen schlechten Ruf bekommen, können dekorative Animationen helfen, das Gewöhnliche in das Außergewöhnliche zu verwandeln. Die Website von Revisionist History verwendet dekorative Animationen mit Bedacht, um flache Illustrationen zum Leben zu erwecken. Die Animationen sorgen für gerade genug Interesse, damit der visuelle Inhalt der Seite strenger wird und sich die Benutzer auf den Podcast konzentrieren können.

Polygon.com verwendete episch animierte Illustrationen, um Mittelstücke für eine Reihe von Konsolenbewertungen zu erstellen. Diese dekorativen Animationen haben möglicherweise keine neuen Informationen hinzugefügt, aber sie haben die Marke Polygon entscheidend gestärkt. Sie halfen auch jedem Konsolen-Review, sich von der Konkurrenz abzuheben, die zu dieser Zeit nicht unterscheidbare Fotos derselben Geräte zeigte.

Dieser Artikel ist ein Auszug aus Rachel Nabors 'Animation at Work - einem E-Book mit A Book Apart Briefs, das Sie durch die Anatomie von Webanimationen, Mustern und Kommunikationsentscheidungen zwischen Teams führt. Kaufen Sie es hier.

Weiterlesen: