4 Möglichkeiten, funktionale Animation im UI-Design zu verwenden
Vor nur einem Jahrzehnt wurden Benutzeroberflächen, die Animationen verwendeten, vermieden, die meistens mit Popups und blinkenden Anzeigen assoziiert wurden, aber das hat sich geändert. Heute machen Details des Interaktionsdesigns und der Animation einen grundlegenden Unterschied auf modernen Websites und in modernen Apps. Diese Denkweise kommt in Zurbs Aussage deutlich zum Ausdruck:
Wir gestalten nicht mehr nur statische Bildschirme. Wir entwerfen, wie der Benutzer von diesen Bildschirmen ausgeht, um Inhalte tatsächlich anzuzeigen.
Wenn wir bessere digitale Produkte entwerfen wollen, müssen wir die interaktive Natur der App und der Websites von Anfang an berücksichtigen.
Warum Animation funktioniert
Bewegung hat von Natur aus den höchsten Stellenwert in einer Benutzerschnittstelle. Weder Text noch statische Bilder können mit der Bewegung konkurrieren. Unsere Augen sind fest darauf fixiert, bewegten Objekten Aufmerksamkeit zu schenken - es ist fast ein Reflex. Das können wir mit dieser funktionellen Animation nutzen.
Was ist funktionelle Animation?
Funktionale Animation ist eine subtile Animation, die als Teil der Funktionalität dieses Designs in die Benutzeroberfläche eingebettet ist. Es hat einen sehr klaren und logischen Zweck:
- Reduzieren Sie die kognitive Belastung
- Blindheit verhindern
- Stellen Sie eine bessere Erinnerung in räumlichen Beziehungen her
In einem menschenzentrierten Designansatz, bei dem der Benutzer im Mittelpunkt steht, muss eine Benutzerschnittstelle intuitiv, ansprechend und menschlich sein. Funktionale Animation hilft Ihnen, diese Ziele zu erreichen.
Wie funktionale Animation UX verbessert
Unsere Erfahrung und der Eindruck einer App oder Site sind von einer Kombination von Faktoren geprägt, wobei Interaktion eine fundamentale Rolle spielt. Das Hinzufügen von Bewegung zu unserem Design kann sinnvoll und funktional sein, wenn wir die richtigen Umstände finden. Durchdachte und getestete funktionelle Animation kann mehrere Funktionen erfüllen:
1. Visuelle Rückmeldung
Gutes Interaktionsdesign liefert Feedback. Die Rückmeldung bestätigt, dass das System eine Benutzeraktion erhalten hat und zeigt das Ergebnis der Interaktion an, ob es erfolgreich war oder nicht. Animation in dieser Gruppe muss sehr subtil sein und sollte in Antwort entworfen werden.
Schaltfläche Feedback
Im richtigen Leben reagieren Schaltflächen auf unsere Interaktion und so erwarten wir, dass die Dinge funktionieren. Um für den Benutzer vorhersehbar zu sein, sollte die digitale Schnittstelle auf die gleiche Weise wirken.
Quelle: Jaron Pulver
Visualisieren Sie das Ergebnis einer Aktion
Wenn Sie der Prinzip- Show folgen, sagen Sie es nicht, können Sie animiertes Feedback verwenden, um hervorzuheben, dass etwas schief gelaufen ist. Zum Beispiel visuelle Schüttelanimation bei falscher Passcodeeingabe. Es ist wie das Kopfschütteln, als ob man "Nein, versuch es nochmal" sagen würde. Der Benutzer bemerkt die Animation und versteht sofort den aktuellen Status.
Sie können auch die Aktionen verstärken, die ein Benutzer ausführt. Wenn der Benutzer im folgenden Beispiel auf "Übermitteln" klickt, wird kurz ein Drehfeld angezeigt, bevor die App den Erfolgsstatus anzeigt. Die Häkchenanimation lässt den Benutzer glauben, dass der Prozess erfolgreich abgeschlossen wurde.
Bildnachweis: Colin Garven
2. Enthärtungszustand Änderungen
Andere gute Orte, um Animation im Design hinzuzufügen, sind in Momenten der Veränderung. Statusänderungen in der Benutzerschnittstelle, insbesondere im Internet, sind oft harte Schnitte, die es schwierig machen, sie zu verfolgen. Nichts fühlt sich unnatürlicher an als eine plötzliche Veränderung. Abrupte Änderungen in einer Schnittstelle sind für Benutzer schwer zu verarbeiten. Diese Momente der Änderung sollten durch Hinzufügen einiger Animationen zur Benutzeroberfläche gemildert werden.
Verbindungen herstellen
Animierte Übergänge sollten als Vermittler zwischen den verschiedenen Zuständen der Benutzeroberfläche fungieren und Benutzern dabei helfen zu verstehen, was passiert, wenn sich der Bildschirmzustand ändert. Der Benutzer folgt einfach der Bewegung und versteht, wie die beiden UI-Zustände zusammenhängen.
Bildnachweis: Anish Chandran
Es funktioniert auch gut für die Zuordnung von Miniaturansichten und Detailansichten:
Die Karte bewegt sich von ihrer ursprünglichen Position in eine Position im Modal und macht deutlich, dass es sich um denselben Gegenstand handelt, nur mit mehr Details.
Bildnachweis: Charles Patterson
Auf Änderungen aufmerksam machen
Animation kann dem Auge helfen zu sehen, woher ein neues Objekt kommt oder wo ein verstecktes Objekt hingeht und wieder gefunden werden kann. Wir können damit auf Änderungen aufmerksam machen, die Informationen verbergen oder offenbaren, wie das Öffnen von Seitenschubladen. Im folgenden Beispiel rutscht die Hauptnavigation aus dem Weg, wenn Sie auf das Hamburger-Symbol klicken. Diese Bewegung lässt Sie wissen, dass das Hauptmenü nicht verschwunden ist.
Bildnachweis: Tamas Kojo
3. Sichtbarkeit des Systemstatus
Als eines der Original von Jakob Nielsens 10 Heuristiken für Benutzerfreundlichkeit bleibt die Sichtbarkeit des Systemstatus eines der wichtigsten Prinzipien im Design von Benutzeroberflächen. Für Benutzer ist es sehr wichtig, ihren aktuellen Kontext im System zu jeder Zeit zu kennen und zu verstehen.
Fortschrittsindikatoren
Das Hochladen und Herunterladen von Daten bietet großartige Möglichkeiten für eine funktionierende Animation. Animierte Ladebalken legen eine Erwartung fest, wie schnell die Aktion verarbeitet wird. Die Animation kann im Fehlerfall hilfreich sein. Selbst eine nicht angenehme Benachrichtigung, wie zum Beispiel ein Daten-Download, schlägt fehl, sollte in einer netten Weise geliefert werden.
Bildnachweis: xjw
Zum Aktualisieren ziehen
Die Wartezeit eines Benutzers beginnt in dem Moment, in dem er eine Aktion einleitet, und der schlimmste Fall ist, wenn er keine Anzeichen dafür hat, dass das System ihn erhalten hat. Die Pull-to-Refresh-Aktion sollte sofort reagieren . Es ist wichtig, unmittelbar nach dem Empfang der Anfrage vom Benutzer eine visuelle Rückmeldung zu geben, um anzuzeigen, dass der Prozess eingeleitet wurde. Die Animation wird dir dabei helfen.
Bildnachweis: Tony Babel
4. Erklärungsanimation
Manchmal benötigen Benutzer ein wenig zusätzliche Hilfe, um den Benutzerfluss zu verstehen oder mit bestimmten Schnittstellenelementen zu interagieren. Dies gilt insbesondere für Benutzeroberflächen, die neue oder unbekannte Funktionen oder Interaktionen für den Benutzer enthalten.
Onboarding
User Onboarding verlangt ein fehlerfreies UX und Animationen in einem Onboarding-Flow haben einen enormen Einfluss darauf, wie sich Erstanwender mit einer App beschäftigen. Die Animation gibt Ihnen die grenzenlose Freiheit, alles, egal wie komplex oder wie trocken das Thema ist, auf unterhaltsame Weise zu vermitteln.
Bildnachweis: Anastasiia Andriichuk
Visuelle Hinweise
Animation kann einige nützliche visuelle Hinweise bieten. Erläuternde Animationen werden am häufigsten angezeigt, wenn eine Seite zum ersten Mal geöffnet wird und die Animation zeigt, wie bestimmte Elemente der Seite verwendet werden sollen. Diese Art von Animation kann in Spielen gefunden werden, die oft sehr gut mit progressiver Offenlegung umgehen und Spielmechanismen offenbaren, wenn Sie sich weiter in ein Spiel bewegen. Solche Hinweise werden nur ausgelöst, wenn der Benutzer den entsprechenden Punkt in seiner Erfahrung erreicht.
Fazit
Animation ist ein mächtiges Werkzeug, wenn es auf raffinierte Weise verwendet wird.
Wir müssen die Bewegung von Anfang an einbeziehen und sie als natürlichen Teil unseres Designs betrachten, denn Design ist mehr als nur visuelle Präsentation. Wie Steve Jobs über Design sagte: Es ist nicht nur, wie es aussieht und sich anfühlt. Design ist, wie es funktioniert.