Leben in Bewegung: Ein Leitfaden zur Animation mobiler Datenvisualisierungen

Veröffentlicht: 2022-07-22

Heutzutage, da die Technologie die Sammlung und Produktion riesiger Datenmengen vorantreibt, ist es relativ einfach, Informationen in die Hände zu bekommen, die Ihre täglichen Entscheidungen leiten können. Mobile Apps nutzen die Herzfrequenz und andere biometrische Daten, um Gesundheits- und Trainingsziele zu verfolgen. Sie liefern Echtzeitdaten zu Investitionen, persönlichen Ausgaben und Budgetierung. Sie können Eltern sogar dabei helfen, die Ernährungs- und Schlafgewohnheiten ihrer Neugeborenen einzuschätzen.

Um die schiere Menge an verfügbaren Daten zu erfassen, schauen Sie nicht weiter als die Jahresberichte des Designers Nicholas Felton, die aus seinen eigenen persönlichen Daten erstellt wurden. Bei so vielen Informationen, die Ihnen zur Verfügung stehen, ist es schwierig, sie zu verstehen.

Hier kann Animation helfen. Animierte Daten machen sie verständlicher, ansprechender und nützlicher, insbesondere auf den kleinen Bildschirmen mobiler Geräte. Mit Animation werden Zahlen leichter verdaulich und sonst übersehene Trends, Muster und Erzählungen werden sichtbar. Die Echtzeit-Interaktivität mit diesen visuellen Elementen fördert das Engagement und ermöglicht es den Benutzern, Daten eingehender zu untersuchen.

Gleichzeitig kann eine übermäßige oder fehlgeleitete Animation ihren Zweck zunichte machen und Erkenntnisse eher verdunkeln als erhellen. Beim Animieren mobiler Datenvisualisierungen sollten Designer Bewegungsdesign-Prinzipien anwenden und gängige Fallstricke vermeiden.

Die Vorteile der Animation mobiler Datenvisualisierungen

Animation ist nicht nur eine Verschönerung von Datenvisualisierungen. Bewegung bietet unzählige Vorteile und sollte mit dem Ziel angewendet werden, ein bestimmtes Ergebnis zu erzielen.

Benutzern dabei zu helfen, Trends und Veränderungen wahrzunehmen, ist ein wesentlicher Vorteil der Verwendung von Bewegung in Datenvisualisierungen. Der verstorbene Akademiker Hans Rosling ist bekannt für eine Animation, in der er Lebenserwartungs- und Einkommensdaten aufzeichnete, um die Veränderungen von Gesundheit und Wohlstand für Dutzende von Ländern über Jahrzehnte zu zeigen. Es ist eine fesselnde Animation, die Trends im Laufe der Zeit verdeutlicht und gängigen Vorstellungen über globale Entwicklungen entgegenwirkt.

Ein Clip aus „Hans Roslings 200 Länder, 200 Jahre, 4 Minuten – The Joy of Stats“ über BBC Four.

Untersuchungen legen nahe, dass die Animation statischer Diagramme die grafische Wahrnehmung verbessern und das Interesse des Betrachters steigern kann. Anstatt beispielsweise ein Diagramm auf einmal anzuzeigen, können Elemente mit unterschiedlichen Geschwindigkeiten eingegeben werden, um den Betrachter nicht mit zu vielen Informationen zu überfordern. Bewegungen „helfen, die visuelle Hierarchie von Elementen oder die Ausrichtung von Achsen und die Darstellung von Daten zu zeigen oder zu verbessern“, sagt Tetiana Donska, eine in London ansässige UI/UX-Designerin im Toptal-Netzwerk.

Animation hilft Designern auch dabei, die Bildschirme mobiler Geräte effizient zu nutzen. „Bewegung in Datenvisualisierungen hilft dabei, ein Bewusstsein für Übergänge zwischen verschiedenen Zuständen zu schaffen, und liefert mehr Informationen, ohne die Benutzererfahrung zu überladen“, sagt Donska. Interaktivität in Echtzeit kann außerdem eine übersichtliche Benutzeroberfläche aufrechterhalten, da Benutzer die Daten durch Gesten wie Tippen, Ziehen, Scrollen und Zoomen erkunden können. Beispielsweise könnten Benutzer einen Finger entlang einer Achse schieben, um verschiedene Werte anzuzeigen, oder tippen, um Zahlen anzuzeigen.

Durch die Integration von Echtzeit-Updates in animierte Datenvisualisierungen können sie für Benutzer noch ansprechender werden. Olajide Akinpelu, ein in Nigeria ansässiger UI/UX-Designer von Toptal, sagt, dass das Sehen der Datenaktualisierung vor unseren Augen die menschliche Wahrnehmung unterstützt. Ein Benutzer, der statische Daten aktualisiert, wird es schwerer haben, Änderungen zu erkennen; Bewegungen in Echtzeit helfen ihnen dabei, Einblicke zu gewinnen, die ihnen sonst entgehen könnten.

Natürlich ist es leichter gesagt als getan, Übergänge und Bewegungen natürlich erscheinen zu lassen, ohne den Benutzer abzulenken.

Animations- und Datenvisualisierungstechniken für Mobilgeräte

Die Datenvisualisierung ist nicht auf komplexe Datensätze beschränkt, die durch herkömmliche Diagramme und Grafiken dargestellt werden. Sogar eine „Gefällt mir“-Schaltfläche, die die Stimmung der Benutzer in einer sozialen App erfasst, ist eine Möglichkeit, Daten zu visualisieren.

Unabhängig von der Komplexität kommen beim Animieren von Datenvisualisierungen eine Reihe gemeinsamer Prinzipien und Techniken ins Spiel. Die vier Techniken, auf die wir uns in diesem Artikel konzentrieren – Wertänderung; Lockerung, Offset und Verzögerung; Erziehung; und Zoomen – zielen darauf ab, Bewegung in der UX-Umgebung mit der Natürlichkeit der Bewegung in der realen Welt zu erfüllen und den angeborenen Erwartungen und Sinnen der Benutzer für Kontinuität und Erzählung zu entsprechen. Das Ziel besteht schließlich darin, den Benutzern zu helfen, abstrakte Daten zu verstehen, und nicht nur, sie zu begeistern oder zu begeistern.

Wertänderung

Wenn Sie Wertänderungen mit Animation anzeigen, wird statt einer statischen Zahl ein numerischer Zähler nach oben getickt oder ein Balken steigt, bevor er auf einer endgültigen Zahl landet. Dies kann ein wirkungsvoller Weg sein, um Fortschritt oder Wachstum – oder deren Fehlen – zu vermitteln. Es bedeutet auch, dass die Daten Änderungen unterliegen, und in einigen Fällen weisen animierte Werte auf Interaktivität hin.

Ein Kredit-Score-Dashboard mit der Aufschrift „Top of the Charts“. Ein kreisförmiger Zähler wird animiert, von 300 auf 850 zu steigen, was der aktuellen Kreditwürdigkeit des Benutzers entspricht. Wenn die Zahlen zunehmen, wechseln sie von Rot zu Grün. — Wertänderungen ermöglichen Benutzern, die Auswirkungen ihres Verhaltens zu sehen. Rauer Asiwal

Visualisierungen von Wertänderungen sind in der gesamten mobilen Landschaft weit verbreitet, einschließlich in Fitness-, Bildungs- und Finanz-Apps. In einer Sprachlern-App kann ein Balken beispielsweise schrittweise ansteigen, bis er bei einem Test ein Endergebnis erreicht. Wertänderungen zeigen Fortschritte und können dem Benutzer ein Erfolgserlebnis vermitteln und ihn ermutigen, einen Lernpfad fortzusetzen.

Das Anwenden von Wertänderungen auf die Linien in einem Diagramm ist eine weitere Möglichkeit, Änderungen im Laufe der Zeit zu demonstrieren. In einem Balkendiagramm, das beispielsweise das Bruttoinlandsprodukt (BIP) verschiedener Länder zeigt, kann die Bewegung die Flugbahnen der Volkswirtschaften relativ zueinander aufzeigen. Solche Visualisierungen werden Balkendiagrammrennen genannt.

Nachlassen, Offset und Verzögerung

In der physischen Welt kann ein Objekt nicht sofort von null auf 20 Meilen pro Stunde beschleunigen. In der digitalen Welt hingegen kann man Bewegung ohne Beschleunigung oder Verzögerung erzeugen. Aber das bedeutet nicht, dass Sie sollten. Für das menschliche Auge erscheint eine solche Bewegung unnatürlich, weshalb es vorteilhaft ist, grafischen Elementen natürliche Eingangs- und Ausgangsgeschwindigkeiten zu geben – bekannt als Easing.

Das Versetzen der Einführung verschiedener UI-Elemente und das Verzögern ihrer Geschwindigkeit kann den Benutzern weiter signalisieren, dass unterschiedliche Variablen angezeigt werden, und es kann helfen, eine Hierarchie zwischen ihnen aufzubauen. In einer Aktienhandels-App kann beispielsweise der Wert der Aktien eines Benutzers zuerst erscheinen, gefolgt von denen der allgemeinen Indizes. Versatz und Verzögerung machen es Benutzern leichter, Zahlen und Diagramme zu verstehen, als wenn sie alle auf einmal präsentiert würden.

Eine Animation, die verschiedene Dashboards in einer App für persönliche Finanzen zeigt. Das erste Dashboard zeigt das Gesamtguthaben des Benutzers, den pro Tag ausgegebenen Betrag und ein Tortendiagramm, das eine Kategorie („Unterhaltung“) im Verhältnis zu den Gesamtausgaben hervorhebt. Der nächste Bildschirm zeigt Trendangebote und empfohlene Aktienkäufe. Das dritte Dashboard zeigt die gesamten monatlichen Ausgaben des Benutzers und die Ausgaben in drei Hauptkategorien: Hausmiete, Kleidung und Lebensmittel. Ein Balkendiagramm zeigt den Prozentsatz der Gesamtausgaben für jede Kategorie, wobei die Prozentsätze mit unterschiedlichen Geschwindigkeiten angezeigt werden. — In dieser persönlichen Finanzanimation werden Elemente wie Kategorie und Prozentsatz des Monatsbudgets mit unterschiedlichen Geschwindigkeiten eingeführt, um den Benutzern ein klareres Verständnis ihrer Ausgaben zu vermitteln. thrc.eth

Erziehung

Parenting erstellt Beziehungen zwischen UI-Komponenten. Wenn sich eine Eigenschaft (z. B. Position, Skalierung oder Farbe) im übergeordneten Element ändert, ändert sich auch eine Eigenschaft im untergeordneten Element. Wenn beispielsweise in einem Liniendiagramm ein Punkt auf einer Linie das übergeordnete Element ist, kann der Benutzer sehen, wie sich der Wert (das untergeordnete Objekt) ändert, wenn der Benutzer den Punkt zieht.

Parenting ist ein effektiver Weg, um die Interaktivität zu erhöhen und Hierarchien zu schaffen.

Ein animierter Telefonbildschirm mit der Aufschrift "Wie war Ihre Fahrt?" oben. In der Mitte des Bildschirms befindet sich das Gesicht einer Figur. Unten ist ein Schieberegler, der, wenn er bewegt wird, den Gesichtsausdruck der Figur und die Antwort auf die Frage ändert („Glücklich“, „Großartig“, „Okay“, „Traurig“ oder „Wütend“). — Wenn der Benutzer seine Fahrt mit dem Schieberegler (übergeordnetes Objekt) bewertet, ändert sich der Ausdruck der Figur (untergeordnetes Objekt). Sachin Das

Zoomen

Durch das Zoomen können Benutzer problemlos von einer Vogelperspektive der Daten zu einer detaillierteren Ansicht wechseln. Es kann eine nützliche Technik sein, wenn große Datenmengen präsentiert werden, wie sie normalerweise auf dem Desktop angezeigt werden. Eine Aktienverfolgungs-App kann beispielsweise eine wöchentliche Ansicht der Preise für eine bestimmte Aktie laden und es Benutzern ermöglichen, hinein- oder herauszuzoomen, um tägliche oder jährliche Daten anzuzeigen.

Eine der häufigsten Formen der Datenvisualisierung sind Karten, die in Fitness-, Bike-Sharing- und Ride-Hailing-Apps weit verbreitet sind. Zoomen ist in diesem Zusammenhang ein entscheidendes Werkzeug, da die Beschränkungen des mobilen Bildschirms das, was in einem einzigen Bild dargestellt werden kann, stark einschränken.

Eine animierte Fitness-App, die das Dashboard des Benutzers anzeigt. Wenn „Radfahren“ angetippt wird, wechselt der Bildschirm zu einer Karte und zoomt auf einen Punkt, der den Benutzer darstellt, der sich entlang der Route bewegt. Unter der Karte befinden sich Herzfrequenzinformationen, ein Trainingstimer und ein Tracker für die zurückgelegte Distanz. — Benutzer können zoomen, um ihre detaillierte Trainingsroute in dieser Fitness-App anzuzeigen. Rizal Ramadan

Motion Design Fallstricke, die es zu vermeiden gilt

Edward Tufte, dem Mann, dem zugeschrieben wird, buchstäblich das Buch über moderne Datenvisualisierung geschrieben zu haben, hatte eine einfache Maxime: „Zeigen Sie vor allem die Daten.“

Konzentrieren Sie sich auf die Übermittlung von Informationen. Attribute wie Farbe, Form und Bewegung sollten nur verwendet werden, um das Verständnis der Daten zu verbessern. Fremde visuelle Elemente – oder „Chart Junk“, wie Tufte es nannte – lenken von diesem Zweck ab.

Auf Mobilgeräten, wo Bildschirmbenutzer möglicherweise abgelenkt werden, können zu viele bewegliche Teile in einer Datenvisualisierung überwältigend sein.

„Mit Mobilgeräten haben Sie bereits einen kleinen Formfaktor, der Konzentration erfordert“, sagt der erfahrene Designer Darrell Estabrook, der 2019 dem Netzwerk von Toptal beigetreten ist. Bei jedem mobilen Workflow ohne gut gestaltete, diskrete Schritte „geht der Benutzer irgendwie schief.“

Estabrook fügt hinzu: „Bei allen Datenvisualisierungen müssen Sie sich fragen, welche Informationen Sie dem Benutzer geben, damit er die nächste Entscheidung treffen kann … einen Knopf zu drücken oder eine E-Mail zu schreiben oder tiefer zu graben. Was müssen Sie tun, um ihnen diese [Informationen] zur Verfügung zu stellen?“

Sie können fokussierte und effektive mobile Datenvisualisierungen entwerfen, indem Sie diese Fallstricke vermeiden:

Ressourcenintensive Visuals, die keinen großen Mehrwert bringen

Das Rendern von Bewegung in visuellen Elementen kann am Backend ressourcenintensiv sein und sich negativ auf die Leistung und das Benutzererlebnis am Frontend auswirken. Große Datensätze oder Daten, die eine umfangreiche Codierung erfordern, erhöhen dieses Risiko. Bevor die Ressourcen in die Erstellung solcher Visuals gesteckt werden, sollten sich Designteams und Kunden über das gewünschte Ergebnis im Klaren sein – und dass sich der Aufwand lohnt.

Auffällige oder überflüssige Animation

Animierte Datenvisualisierungen sollten den Zweck einer Anwendung unterstützen. Eine Sprachlern-App könnte Bewegung verwenden, um den Fortschritt der Benutzer hervorzuheben, während eine Investitions-App auf subtile Weise verwertbare Daten hervorheben könnte. Unabhängig von der Art der App sollten Designer jedoch in den meisten Fällen auf auffällige Animationen wie fallendes Konfetti oder Feuerwerk verzichten. Sie riskieren nicht nur eine spielerische Darstellung, was zu einer ungesunden Interaktion mit einer App führen könnte, sondern sie können auch verschleiern oder übertreiben, was die Daten tatsächlich vermitteln.

Übermäßig interaktive Visuals

Die Arbeit mit Daten erfordert ein gewisses Maß an Präzision, und Benutzer benötigen einen angemessenen Teil ihres Smartphone-Bildschirms – 7 bis 10 mm gelten im Allgemeinen als Best Practice – um Gesten erfolgreich auszuführen. Zu viel Interaktivität könnte sich als umständlich und frustrierend erweisen. Es ist vorteilhaft, eine Aktion nach der anderen zu priorisieren.

Inkonsistenter Stil

Datenvisualisierungen sollten sich in den Gesamtstil und die Funktionalität einer Anwendung einfügen, was Apple in seinen Human Interface Guidelines als ästhetische Integrität bezeichnet.

Laut Akinpelu, dem in Nigeria ansässigen UX/UI-Designer, hilft die Aufrechterhaltung der stilistischen Konsistenz „in der Art des verwendeten Übergangs, der Art der Animation, der Farbmischung“ den Benutzern, durch Datensätze zu navigieren.

Eine Checkliste mit dem Titel „Effektive Datenvisualisierungen sollten“ mit vier abgehakten Punkten: „Klare Ziele haben“, „Für den Zweck einer App geeignet sein“, „Eine Hauptaktion gleichzeitig priorisieren“ und „Konsistente Übergänge, Animationen und Farben beibehalten“. ." — Vermeiden Sie mit diesen Best Practices häufige Fallstricke beim Animieren von Daten.

Mit steigenden Datenmengen Schritt halten

Daten sind zu einem festen Bestandteil unseres Lebens geworden, von Arbeit und Schule bis hin zu Gesundheit und Finanzen. Mit immer ausgefeilteren Smartphones und der Verbreitung der 5G-Konnektivität werden sicherlich auch das Datenvolumen – und das Anwendungspotenzial – wachsen.

Animation kann ein wichtiges Werkzeug sein, um Menschen dabei zu helfen, all diese Informationen zu verstehen. Motion erleichtert es Benutzern, wichtige Kennzahlen, Trends und Beziehungen zu verstehen. Wie bei jeder UX-Funktion können Animationen jedoch überstrapaziert oder missbraucht werden, was letztendlich dazu führen kann, dass Daten weniger verständlich sind. Durch den Einsatz von Motion-Design-Prinzipien und -Techniken können Designer animierte mobile Datenvisualisierungen erstellen, die ansprechend und aufschlussreich sind.

Weiterführende Literatur im Toptal Design Blog

Überzeugend und bewegend: Ein Leitfaden zu Motion Design-Prinzipien
Der zunehmende Einfluss der Motion-Design-Industrie
Begeistern Sie Benutzer mit diesen Best Practices für das Design mobiler Apps