Życie w ruchu: przewodnik po animowaniu mobilnych wizualizacji danych

Opublikowany: 2022-07-22

W dzisiejszych czasach, dzięki technologii napędzającej gromadzenie i wytwarzanie ogromnych ilości danych, stosunkowo łatwo jest zdobyć informacje, które mogą kierować codziennymi decyzjami. Aplikacje mobilne wykorzystują tętno i inne dane biometryczne, aby śledzić cele zdrowotne i treningowe. Dostarczają w czasie rzeczywistym dane dotyczące inwestycji, wydatków osobistych i budżetowania. Mogą nawet pomóc rodzicom ocenić wzorce żywienia i snu ich noworodków.

Aby pojąć ogrom dostępnych danych, wystarczy spojrzeć na roczne raporty projektanta Nicholasa Feltona skonstruowane na podstawie jego własnych danych osobowych. Mając tak wiele informacji na wyciągnięcie ręki, najtrudniejsze jest ich zrozumienie.

Tutaj może pomóc animacja. Animowanie danych sprawia, że są one bardziej zrozumiałe, angażujące i użyteczne, zwłaszcza na małych ekranach urządzeń mobilnych. Dzięki animacji liczby stają się łatwiejsze do przyswojenia, a trendy, wzorce i narracje stają się widoczne w inny sposób. Interaktywność w czasie rzeczywistym z tymi wizualizacjami zwiększa zaangażowanie i pozwala użytkownikom głębiej eksplorować dane.

Jednocześnie nadmierna lub błędna animacja może zniweczyć swój cel, zaciemniając, a nie rozjaśniając spostrzeżenia. Podczas animowania mobilnych wizualizacji danych projektanci powinni stosować zasady projektowania ruchu — i unikać typowych pułapek.

Korzyści płynące z animowania mobilnych wizualizacji danych

Animacja nie jest zwykłym upiększeniem wizualizacji danych. Motion oferuje niezliczone korzyści i powinno być stosowane w celu osiągnięcia określonego wyniku.

Pomaganie użytkownikom w dostrzeganiu trendów i zmian to kluczowa zaleta wykorzystania ruchu w wizualizacjach danych. Nieżyjący już naukowiec Hans Rosling znany jest z animacji, w której wykreślił dane o długości życia i dochodach, aby pokazać zmiany w zdrowiu i zamożności w dziesiątkach krajów na przestrzeni dziesięcioleci. To urzekająca animacja, która wyjaśnia trendy na przestrzeni czasu i przeciwdziała powszechnym wyobrażeniom o globalnym rozwoju.

Klip z filmu „Hans Rosling's 200 Countries, 200 Years, 4 Minutes – The Joy of Stats” z BBC Four.

Badania sugerują, że animowanie statycznych wykresów może poprawić percepcję graficzną i zwiększyć zainteresowanie widzów. Na przykład, zamiast wyświetlać cały wykres naraz, elementy mogą wchodzić z różną prędkością, aby nie przytłaczać widza zbyt dużą ilością informacji. Ruchy „pomagają pokazać lub ulepszyć wizualną hierarchię elementów lub orientację osi i sposób wyświetlania danych”, mówi Tetiana Donska, londyńska projektantka UI/UX w sieci Toptal.

Animacja pomaga również projektantom efektywnie wykorzystywać ekrany urządzeń mobilnych. „Ruch w wizualizacjach danych pomaga zwiększyć świadomość przejść między różnymi stanami i zapewnia więcej informacji bez zaśmiecania doświadczenia użytkownika” — mówi Donska. Interaktywność w czasie rzeczywistym może dodatkowo utrzymać przejrzysty interfejs, ponieważ użytkownicy mogą eksplorować dane za pomocą gestów, takich jak stukanie, przeciąganie, przewijanie i powiększanie. Na przykład użytkownicy mogą przesuwać palcem wzdłuż osi, aby odsłonić różne wartości, lub stuknąć, aby odsłonić liczby.

Włączenie aktualizacji w czasie rzeczywistym do animowanych wizualizacji danych może sprawić, że będą one jeszcze bardziej atrakcyjne dla użytkowników. Olajide Akinpelu, projektant UI/UX firmy Toptal z Nigerii, mówi, że oglądanie aktualizacji danych na naszych oczach wspomaga ludzkie poznanie. Użytkownikowi odświeżającemu dane statyczne będzie trudniej wykryć zmiany; Ruch w czasie rzeczywistym pomaga im zidentyfikować spostrzeżenia, które w innym przypadku mogliby przegapić.

Oczywiście, aby przejścia i ruchy wydawały się naturalne bez rozpraszania użytkownika, łatwiej powiedzieć niż zrobić.

Techniki animacji i wizualizacji danych dla urządzeń mobilnych

Wizualizacja danych nie ogranicza się do złożonych zestawów danych reprezentowanych przez tradycyjne wykresy i wykresy. Nawet przycisk „Lubię to”, który odzwierciedla nastroje użytkowników w aplikacji społecznościowej, jest sposobem na wizualizację danych.

Niezależnie od złożoności, podczas animowania wizualizacji danych w grę wchodzi wspólny zestaw zasad i technik. Cztery techniki, na których skupiamy się w tym artykule — zmiana wartości; łagodzenie, przesunięcie i opóźnienie; rodzicielstwo; i powiększanie — staraj się nasycić ruch w środowisku UX naturalnością ruchu w świecie rzeczywistym, zgodnie z wrodzonymi oczekiwaniami użytkowników oraz poczuciem ciągłości i narracji. W końcu celem jest pomoc użytkownikom w zrozumieniu abstrakcyjnych danych, a nie tylko ich zaangażowanie lub zachwycenie.

Zmiana wartości

Podczas pokazywania zmian wartości wraz z animacją, zamiast wyświetlania statycznej liczby, licznik liczbowy podkręca się lub słupek podnosi się przed lądowaniem na ostatniej wartości. Może to być potężny sposób na przekazanie postępu lub wzrostu – lub jego braku. Oznacza to również, że dane mogą ulec zmianie, a w niektórych przypadkach animowanie wartości wskazuje na interaktywność.

Pulpit oceny kredytowej z napisem „Top of the Charts”. Okrągły licznik jest animowany, aby wzrosnąć z 300 do 850, co jest aktualną oceną kredytową użytkownika. Wraz ze wzrostem liczb zmieniają się z czerwonego na zielony. — Zmiany wartości umożliwiają użytkownikom zobaczenie wpływu ich zachowania. Surowy Asiwal

Wizualizacje zmiany wartości są powszechne w środowisku mobilnym, w tym w aplikacjach fitness, edukacyjnych i finansowych. Na przykład w aplikacji do nauki języków pasek może rosnąć stopniowo, aż do uzyskania końcowego wyniku na teście. Zmiana wartości pokazuje postęp i może zapewnić użytkownikowi poczucie spełnienia, zachęcając go do kontynuowania ścieżki uczenia się.

Stosowanie zmiany wartości do linii na wykresie to kolejny sposób na przedstawienie zmian w czasie. Na wykresie słupkowym pokazującym produkt krajowy brutto (PKB) różnych krajów, na przykład, ruch może ujawnić trajektorie gospodarek krajowych względem siebie. Takie wizualizacje nazywane są wyścigami na wykresach słupkowych.

Wygładzanie, przesunięcie i opóźnienie

W świecie fizycznym obiekt nie może natychmiast przejść od zera do 20 mil na godzinę. W cyfrowym świecie można jednak tworzyć ruch bez przyspieszania i zwalniania. Ale to nie znaczy, że powinieneś. Dla ludzkiego oka taki ruch wydaje się nienaturalny, dlatego korzystne jest nadanie elementom graficznym naturalnej prędkości wejścia i wyjścia – znanej jako luz.

Przesunięcie wprowadzenia różnych elementów interfejsu użytkownika i opóźnienie ich szybkości może dodatkowo sygnalizować użytkownikom, że wyświetlane są różne zmienne, i może pomóc w ustaleniu hierarchii między nimi. Na przykład w aplikacji do handlu akcjami najpierw może pojawić się wartość akcji użytkownika, a następnie wartości indeksów ogólnych. Przesunięcie i opóźnienie ułatwiają użytkownikom zrozumienie liczb i wykresów, niż gdyby były prezentowane wszystkie naraz.

Animacja przedstawiająca różne pulpity nawigacyjne w aplikacji finansów osobistych. Pierwszy pulpit nawigacyjny pokazuje łączne saldo użytkownika, kwotę wydaną dziennie oraz wykres kołowy z zaznaczeniem jednej kategorii („Rozrywka”) w odniesieniu do łącznych wydatków. Następny ekran pokazuje popularne oferty i zalecane zakupy akcji. Trzeci pulpit nawigacyjny pokazuje łączne miesięczne wydatki i wydatki użytkownika w trzech głównych kategoriach: wynajem domu, odzież i artykuły spożywcze. Wykres słupkowy pokazuje procent całkowitych wydatków dla każdej kategorii, z wartościami procentowymi ujawnianymi z różnymi prędkościami. — W tej animacji finansów osobistych elementy takie jak kategoria i procent miesięcznego budżetu są wprowadzane z różnymi prędkościami, aby dać użytkownikom lepsze zrozumienie ich wydatków. thrc.eth

Rodzicielstwo

Rodzicielstwo tworzy relacje między składnikami interfejsu użytkownika. Gdy zmienia się właściwość (taka jak pozycja, skala lub kolor) w elemencie nadrzędnym, zmienia się właściwość w elemencie podrzędnym. Na przykład na wykresie liniowym, jeśli punkt na linii jest punktem nadrzędnym, gdy użytkownik przeciąga punkt, może zobaczyć zmianę wartości (obiektu podrzędnego).

Rodzicielstwo to skuteczny sposób na zwiększenie interaktywności i tworzenie hierarchii.

Animowany ekran telefonu z napisem „Jak ci minęła jazda?” na górze. Na środku ekranu znajduje się twarz postaci. Poniżej znajduje się suwak, który po przesunięciu zmienia wyraz twarzy postaci i odpowiedź na pytanie („Szczęśliwy”, „Niesamowity”, „W porządku”, „Smutny” lub „Zły”). — Gdy użytkownik ocenia swoją jazdę za pomocą suwaka (obiekt nadrzędny), zmienia się wyrażenie postaci (obiekt podrzędny). Sachin Das

Powiększanie

Powiększanie umożliwia użytkownikom łatwe przejście z widoku danych z lotu ptaka do bardziej szczegółowego. Może to być przydatna technika podczas prezentowania dużych zbiorów danych, takich, jakie zazwyczaj można wyświetlać na komputerze. Na przykład aplikacja śledząca akcje może załadować tygodniowy widok cen dla danej akcji i umożliwić użytkownikom powiększanie lub pomniejszanie w celu ujawnienia danych dziennych lub rocznych.

Jedną z najczęstszych form wizualizacji danych są mapy, które są szeroko stosowane w aplikacjach fitness, udostępniania rowerów i wjazdów. Powiększanie jest w tym kontekście kluczowym narzędziem, ponieważ ograniczenia ekranu mobilnego znacznie ograniczają to, co można przedstawić w jednej wizualizacji.

Animowana aplikacja fitness, która pokazuje pulpit nawigacyjny użytkownika. Po dotknięciu przycisku „jazda na rowerze” ekran przełącza się na mapę i przybliża kropkę reprezentującą użytkownika, który porusza się po trasie. Pod mapą znajdują się informacje o tętnie, minutnik treningu i urządzenie do śledzenia odległości na rowerze. — Użytkownicy mogą powiększyć, aby zobaczyć szczegółową trasę treningu w tej aplikacji fitness. Rizal Ramadhan

Pułapki w projektowaniu ruchu, których należy unikać

Edward Tufte, człowiek, któremu przypisuje się dosłowne napisanie książki o współczesnej wizualizacji danych, miał prostą maksymę: „Przede wszystkim pokaż dane”.

Skoncentruj się na przekazywaniu informacji. Atrybuty takie jak kolor, kształt i ruch powinny być używane tylko w celu lepszego zrozumienia danych. Obce elementy wizualne – lub „śmieci na wykresach”, jak nazwał to Tufte – odwracają uwagę od tego celu.

Na urządzeniach mobilnych, gdzie użytkownicy ekranu mogą być podatni na rozpraszanie uwagi, zbyt duża liczba ruchomych części w wizualizacji danych może być przytłaczająca.

„Dzięki telefonom komórkowym masz już niewielki rozmiar, który wymaga skupienia”, mówi doświadczony projektant Darrell Estabrook, który dołączył do sieci Toptal w 2019 roku. W przypadku dowolnego mobilnego przepływu pracy, bez dobrze zaprojektowanych, dyskretnych kroków, „użytkownik idzie nie tak”.

Estabrook dodaje: „W przypadku wizualizacji danych musisz zapytać, jakie informacje podajesz użytkownikowi, aby mógł podjąć następną decyzję… nacisnąć przycisk, napisać e-mail lub zagłębić się w szczegóły. Co musisz zrobić, aby przekazać im te [informacje]?”

Możesz projektować skoncentrowane i skuteczne wizualizacje danych mobilnych, unikając tych pułapek:

Zasobowe efekty wizualne, które nie dodają dużej wartości

Renderowanie ruchu w wizualizacjach może wymagać dużych zasobów w zapleczu i może negatywnie wpłynąć na wydajność i wrażenia użytkownika na interfejsie. Duże zbiory danych lub dane wymagające obszernego kodowania zwiększają to ryzyko. Przed zaangażowaniem zasobów w tworzenie takich wizualizacji zespoły projektowe i klienci powinni jasno określić pożądany rezultat — i że będzie to warte wysiłku.

Błyskotliwa lub zbędna animacja

Animowane wizualizacje danych powinny wspierać cel aplikacji. Aplikacja do nauki języków może wykorzystywać ruch, aby podkreślić postępy użytkowników, podczas gdy aplikacja inwestycyjna może subtelnie podkreślać przydatne dane. Niezależnie od charakteru aplikacji, w większości przypadków projektanci powinni jednak unikać krzykliwych animacji, takich jak spadające konfetti czy fajerwerki. Nie tylko ryzykują grafiką, która może prowadzić do niezdrowego zaangażowania w aplikację, ale mogą też zaciemniać lub wyolbrzymiać to, co faktycznie przekazują dane.

Nadmiernie interaktywne wizualizacje

Praca z danymi wymaga pewnego stopnia precyzji, a użytkownicy będą potrzebować przyzwoitej części ekranu smartfona – 7 do 10 mm jest ogólnie uważane za najlepszą praktykę – aby skutecznie wykonywać gesty. Zbyt duża interaktywność może okazać się kłopotliwa i frustrująca. Korzystne jest nadanie priorytetu jednej akcji na raz.

Niespójny styl

Wizualizacje danych powinny zazębiać się z ogólnym stylem i funkcjonalnością aplikacji, coś, co Apple określa w swoich wytycznych dotyczących interfejsu ludzkiego jako integralność estetyczną.

Według Akinpelu, projektanta UX/UI z Nigerii, zachowanie spójności stylistycznej „w rodzaju używanego przejścia, rodzaju animacji, mieszania kolorów” pomaga użytkownikom nawigować po zestawach danych.

Lista kontrolna zatytułowana „Skuteczne wizualizacje danych powinny” z zaznaczonymi czterema elementami: „Miej jasne cele”, „Dopasuj się do celu aplikacji”, „Nadaj priorytet jednej głównej akcji na raz” i „Utrzymuj spójne przejścia, animacje i kolory ”. — Dzięki tym sprawdzonym metodom unikniesz typowych pułapek związanych z animowaniem danych.

Nadążanie za rosnącymi danymi

Dane stały się stałym elementem naszego życia, od pracy i szkoły po zdrowie i finanse. Wraz z coraz bardziej wyrafinowanymi smartfonami i upowszechnieniem łączności 5G, ilość danych – i potencjał ich zastosowania – również z pewnością wzrośnie.

Animacja może być ważnym narzędziem pomagającym ludziom zrozumieć wszystkie te informacje. Motion ułatwia użytkownikom zrozumienie kluczowych metryk, trendów i relacji. Podobnie jak w przypadku każdej funkcji UX, animacja może być nadużywana lub niewłaściwie wykorzystywana, co może ostatecznie sprawić, że dane będą mniej zrozumiałe. Korzystając z zasad i technik projektowania ruchu, projektanci mogą tworzyć animowane wizualizacje danych mobilnych, które są wciągające i wnikliwe.

Dalsza lektura na blogu Toptal Design

Przekonujące i poruszające: przewodnik po zasadach projektowania ruchu
Rosnący wpływ branży projektowania ruchu
Zachwyć użytkowników tymi najlepszymi praktykami projektowania aplikacji mobilnych