The value in motion: rola ruchomej grafiki w budowaniu doświadczeń użytkownika


Ciężko wyobrazić sobie współczesny interfejs bez ruchomych elementów graficznych. Nawet, gdy na pierwszy rzut oka ich nie dostrzegasz, są obecne w postaci przejść między ekranami, hoverów, hintów, a czasem „grubszych” elementów. Zastanawiasz się pewnie – czy jest to aż tak istotne? Czy nie mogę żyć bez ruchomej grafiki w moim interfejsie? Czy jest ona w stanie dodać realną wartość do aplikacji, czy też stanowi zwykły ozdobnik?

Burzymy przekonania

Na dobry początek przeanalizujmy podstawowe przekonania związane z wykorzystaniem ruchomej grafiki w interfejsach:

„Ruchoma grafika nie jest kluczowym aspektem UX”

Zgodnie z tym stwierdzeniem, najistotniejszymi czynnikami decydującymi o kształcie cyfrowego produktu są badania, UI oraz inżynieria napędzająca ów produkt. W konsekwencji funkcjonuje przeświadczenie, że ruchoma grafika jest oddzielnym bytem, który nie ma większego znaczenia z punktu widzenia użyteczności.

„Ruchoma grafika to tylko dodatek”

Konsekwencją tego przekonania są próby dodawania ruchomej grafiki na samym końcu procesu tworzenia produktu (projektowanie statycznych widoków i wprawianie ich w ruch na etapie kodu), kiedy zespół złożony z projektanta/projektantów i developerów wspólnie myśli jak dodać trochę „smaku” do gotowego produktu.

„Ruchoma grafika to animacja”

To przekonanie ma swoje źródło w klasycznej animacji. Opiera się na przekonaniu pierwszym: że ruchoma grafika nie jest czynnikiem kreującym doświadczenie użytkownika i jest postrzegana wyłącznie, jako element dodający osobowości produktowi.

„Ruchoma grafika zależy od kontekstu”

Zgodnie z tym przekonaniem, określony typ ruchomej grafiki pasuje do określonego typu kontekstu, np. animowanego menu. Jest to analogiczne do błędnego założenia, że każdy przycisk powinien być tego samego niebieskiego koloru, który przeszedł wszystkie rygorystyczne testy użyteczności.

Jak ruchoma grafika wpływa na użyteczność?

Na tym etapie istotne jest rozróżnienie pomiędzy ‘stanem’ i ‘działaniem’. Stan dowolnego obiektu jest z natury statyczny, podczas, gdy działanie odbywa się w określonym przedziale czasu, jest związane z ruchem i zazwyczaj oznacza zmianę stanu. Przykładowo, przenosząc kursor myszy „nad” przycisk, zostaje on wprowadzony w stan „po najechaniu” (hover), niemniej jest to efekt końcowy określonego działania – „najechania” kursorem. Zarówno stan i działanie możemy wykorzystać w sposób oczekiwany, wspomagający percepcję i świadomość użytkownika – jak i zupełnie niezamierzony, zaburzający naturalny flow i w efekcie wprowadzający w błąd. To z kolei może mieć bezpośrednie przełożenie na ergonomię i użyteczność naszego interfejsu.

Działania realtime i non-realtime

Wszelkie działania, odbywające się na skutek różnych interakcji w określonych przedziałach czasu, możemy podzielić na te, które dzieją się w czasie rzeczywistym (realtime) oraz takie, które dzieją się dopiero po zakończeniu interakcji (non-realtime = post-interactive). Działania realtime są efektem bezpośredniej manipulacji (np. dragging, swiping), a zatem mają wpływ na stan interfejsu dokładnie w tym momencie, w którym zostają wywołane przez użytkownika. Działania non-realtime odbywają się dopiero po manipulacji (np. scroll po kliknięciu, otwarcie okna typu modal) i w czasie swego trwania „blokują” uwagę użytkownika.

Prędkość (czas trwania)

Ludzkie oko potrzebuje średnio 230 ms na dokonanie skutecznej obserwacji (zakres dla całej populacji to 70 – 700 ms). Dobór optymalnego czasu trwania działania zależy od wielu czynników, np. wielkości animowanych obiektów, stopnia złożoności animacji, czy też jej ogólnego charakteru. Powszechnie przyjmuje się, że działanie powinno trwać pomiędzy 100 a 500 ms. Google w swoich wytycznych sugeruje wartości rzędu 200-300 ms dla urządzeń mobilnych, ok. 400-450 ms (ok. 30% dłuższe) dla tabletów i ok. 150-200 ms (ok. 30% krótsze) dla wearables. W interfejsach desktopowych, gdzie jesteśmy przyzwyczajeni do błyskawicznych reakcji, czasy działania powinny oscylować w granicach 150-200 ms.

Easing

Rzeczywiste obiekty nie rozpoczynają, ani nie kończą ruchu nagle – i zwykle nie mają stałej prędkości. W osiągnięciu naturalnego efektu ruchu pomagają nam funkcje wygładzające (easing functions), które pozwalają określić częstotliwość zmian danego parametru w czasie. To nie oznacza oczywiście, że powinniśmy zrezygnować ze stosowania ruchu liniowego – wyobraźmy sobie choćby obracającą się kulę ziemską.

Kolejność

Właściwa kolejność pomaga użytkownikowi zrozumieć istotę interakcji. W najprostszym przypadku, kilka obiektów może przemieszczać się wspólnie. Zróżnicowanie kolejności, w jakiej się poruszają, podkreśli różnice w hierarchii oraz skieruje uwagę użytkownika na obiekty najistotniejsze z punktu widzenia interakcji.

Ciągłość

Oprócz doboru odpowiedniego czasu trwania, typu i kolejności przejść, niezmiernie ważne jest właściwe operowanie tzw. przejściami współdzielonych obiektów (pojęcie funkcjonujące w świecie Androida pod nazwą Shared Element Transitions, znane także jako View Controller Transition na iOS). Określają one jak zachowują się, podczas przejścia między dwoma widokami, obiekty wspólne dla tych widoków.

Kontrast

Zazwyczaj każda animacja posiada obiekt kluczowy, na którym koncentruje się uwaga użytkownika. Zjawisko to wspomagane jest przez odpowiedni dobór czasu trwania przejścia obiektu, zwiększenie jego wielkości czy wysunięcie na pierwszy plan. Aby zachować kontrast pomiędzy kluczowym obiektem a pozostałymi składowymi animacji, przejścia tych drugich powinny mniej rzucać się w oczy.

Spójność

Parametry poszczególnych przejść w ramach tego samego interfejsu powinny być spójne – w przeciwnym razie redukujemy czytelność interfejsu dla użytkownika i zwiększamy ryzyko popełnienia przez niego błędu na skutek niewłaściwej interpretacji. Aktualnie coraz więcej Design Systemów oprócz kolorów, czcionek oraz komponentów szczegółowo definiuje także poszczególne typy przejść i interakcji, co pomaga w budowaniu spójnych interfejsów, a w konsekwencji poprawia doświadczenia ich użytkowników.

Mikrointerakcje

Szczególnym przypadkiem ruchomej grafiki w interfejsach użytkownika są tzw. mikrointerakcje – zwarte przedziały czasu, w trakcie których – obcując z produktem – wykonujesz określoną akcję związaną z pojedynczym przypadkiem jego użycia. Gdy ustawiasz budzik w smartfonie, „lajkujesz” post w serwisie społecznościowym, zmieniasz hasło do ulubionego sklepu, sprawdzasz skrzynkę mailową – za każdym razem wywołujesz mikrointerakcję z interfejsem, z którego korzystasz. Wbrew temu, co możesz myśleć, zastosowanie mikrointerakcji nie jest ograniczone do świata stron internetowych, aplikacji czy urządzeń mobilnych. Styczność z nimi masz praktycznie wszędzie: gdy korzystasz z biletomatu w autobusie, windy w biurze, gdy nastawiasz klimatyzację w salce, a nawet, gdy używasz bezdotykowego podajnika mydła w toalecie.

Mikrointerakcje sprawdzają się podczas:

  • wykonywania pojedynczego zadania,
  • łączenia ze sobą urządzeń,
  • interakcji z jednym typem danych, np. temperaturą,
  • kontrolowania „na żywo” określonego parametru, np. głośności,
  • zmiany konkretnego ustawienia,
  • wyświetlania lub tworzenia niewielkiego objętościowo contentu, np. alertu
  • włączania lub wyłączania określonej funkcji.

Mimo tego, że masz nieustającą styczność z mikrointerakcjami, zazwyczaj nie zauważasz ich świadomie i nie przywiązujesz do nich uwagi. Przynajmniej dopóki wszystko działa tak, jak powinno. Pomimo tego transparentnego, zwartego charakteru, mikrointerakcje są jednym z kluczowych elementów decydujących o tym, czy jedynie akceptujesz dany produkt, czy też naprawdę go lubisz.

Struktura mikrointerakcji

Skuteczność mikrointerakcji wynika nie tylko ze zwartego charakteru, ale także ze specyficznej konstrukcji. Dobrze zaprojektowana mikrointerakcja kładzie nacisk na wszystkie cztery elementy poniższej konstrukcji:

  1. Trigger (wywołanie) – jest to moment rozpoczęcia mikrointerakcji – może być wywołany przez użytkownika (manual trigger) lub przez system, po spełnieniu określonych warunków (system trigger).
  2. Rules (reguły) – określają co i w jakiej kolejności powinno się wydarzyć po wywołaniu mikrointerakcji – zapewniają naturalne przejście od wywołania do reakcji.
  3. Feedback (reakcja) – pozwala zrozumieć reguły – może mieć charakter wizualny, dźwiękowy lub dotykowy.
  4. Loops & Modes (powtórzenia i mechanizmy działania) – określają jak długo trwa interakcja, czy wymaga powtórzenia – słowem, co dzieje się z daną mikrointerakcją na przestrzeni czasu.

Funkcje mikrointerakcji

Mikrointerakcje, ze względu na ich rodzaj, przeznaczenie, percepcję możemy uszeregować na kilka różnych sposobów.

Architektura informacji i hierarchia
Są to mikrointerakcje związane z nawigacją, pomagające użytkownikowi zrozumieć relacje pomiędzy poszczególnymi elementami interfejsu lub poszczególnymi interfejsami.

Feedback i status
Służą do przekazywania użytkownikowi na bieżąco informacji na temat aktualnego statusu (ich własnego lub aplikacji).

Instruowanie i edukacja
Pomagają użytkownikowi zrozumieć aktualnie wykonywane akcje, szczególnie w przypadku, gdy użytkownik korzysta z nich po raz pierwszy.

Wywoływanie emocji i budowanie wizerunku
Animowane ikony, splash screen, ekran ładowania aplikacji – to interakcje uzupełniające informacje zawarte w aplikacji: zwiększają zainteresowanie i zaangażowanie użytkownika, wspomagają proces kreowania wizerunku marki i pomagają zbudować grupę lojalnych użytkowników.

Czy to na pewno dobry pomysł?

Rozpływając się nad zaletami animacji oraz ich pozytywnym wpływem na użyteczność, nie zapominajmy o tym, że ruchome obiekty przyciągają uwagę w znacznie większym stopniu niż obiekty statyczne. W wariancie pesymistycznym, może to skutkować dekoncentracją użytkownika i oderwaniem jego uwagi od realizacji głównego celu. Od rodzaju ruchu, jego skali i gwałtowności zależy, w jakim stopniu będzie przyciągać uwagę użytkownika. Musimy zatem pamiętać, aby używać animacji świadomie, adekwatnie do hierarchii obiektów i ich relacji – aby pomagać, a nie przeszkadzać użytkownikowi w osiąganiu założonych celów.

Wartość (w) ruchu

Artykuł zatytułowałem angielskim “The value in motion”, głównie ze względu na trudność w przełożeniu istoty tego sformułowania na język polski. „Wartość ruchu”? A może „Wartość w ruchu”? Wyobraziłem sobie abstrakcyjny obrazek z biegnącą po ulicy wartością… 🙂 Niezależnie od tego, właściwe wykorzystanie animacji i ruchu to kluczowy element UX. Odpowiednie stosowanie mikrointerakcji zwiększa ergonomię i szybkość użytkowania, buduje świadomość, ma zasadniczy wpływ na success rate oraz zmniejsza ryzyko popełnienia błędu przez użytkownika. To właśnie stanowi o wartości ruchomej grafiki i jej zasadniczym wpływie na user experience Twojej aplikacji.

Źródła