Podstawy projektowania animacji UI

Gdy zaczynałem swoją przygodę z projektowaniem, animacje interfejsów były z reguły zbędnymi i obciążającymi sprzęt fajerwerkami (a nierzadko  -  synonimem cyfrowej cepelii i projektowego bezguścia). Czasy się jednak zmieniły, a animacja wróciła w wielkim stylu. Interfejsy stają się bardziej subtelne i „przezroczyste”, co często idzie w parze z przejrzystością i użytecznością. Jednocześnie coraz większe znaczenie ma unikalność.

Przemyślane wykorzystanie ruchu wzbogaca interakcje, dodaje im charakteru, powoduje, że abstrakcyjne elementy zyskują więcej fizyczności, realizmu. To nic odkrywczego. Kilka lat temu Google przedstawił ideę Material Design. Jedna z trzech podstawowych zasad brzmi: Ruch tworzy znaczenie. I nie jest to pusty frazes. Animacje są nieodzownym elementem komunikacji z użytkownikiem, który tworzy iluzję obcowania z fizycznymi obiektami.

Projektowanie tylko za pomocą statycznych ekranów to archaizm. W branży UX pojawia się coraz więcej animatorów, artystów 3D, czy specjalistów od efektów wizualnych. To dlatego, że dzisiejszy projektant musi myśleć o tworzonym systemie jako dynamicznym i responsywnym - czego nieodłącznym elementem są animacje.

Narzędzia

Subiektywna lista ciekawszych narzędzi do prototypowania animacji:

Flinto

Używany na co dzień w moim zespole. Wartościowy, bo w stosunkowo krótkim czasie można stworzyć całkiem zaawansowane animacje. Duży plus także za łatwy import grafiki ze Sketcha czy Photoshopa.

Framer

Różni się tym, że tutaj animacje… kodujemy za pomocą CoffeeScript. Brzmi skomplikowanie, ale większy próg wejścia rekompensowany jest ogromnymi możliwościami. Pozwala również na import ze Sketcha i Photoshopa.

Photoshop / After Effects

Prawdopodobnie najbardziej naturalne rozwiązanie dla zwolenników pakietu Adobe.

Principle

Dość prosty program, który pozwala na bardzo szybkie tworzenie animacji. Sam za nim nie przepadam, ale ma swoich zwolenników.

Marvel

Popularne rozwiązanie wśród projektantów interfejsów mobilnych.

UX Pin

Także „nasz” UX Pin pozwala na tworzenie całkiem zaawansowanych animacji.

Każde rozwiązanie ma swoje plusy i minusy, wiele zależy też od organizacji pracy w Twojej firmie. Nie warto więc fiksować się na narzędziach. Zacznij od rozwiązania, które wydaje Ci się najrozsądniejsze, a jeśli się nie sprawdzi , poszukaj alternatyw. Zanim jednak zasiądziesz do komputera, często warto zacząć od naszkicowania koncepcji na kartce papieru. Z drugiej strony, nic nie stoi na przeszkodzie, aby tworzyć animacje bezpośrednio w kodzie.

Jak projektować?

Przestrzegaj reguł

Warto przyjrzeć się różnym interfejsom i zobaczyć, jak inni rozwiązują podobne problemy. Scroll, zmiana stanu, powiększenie, ukrycie, odświeżenie widoku, itd.  - wiele interakcji powiązanych jest z konkretnymi typami animacji. Skup się też na zrozumieniu fizyczności poszczególnych rozwiązań .  To pomoże Ci odkryć, dlaczego niektóre animacje są bardziej naturalne od innych. Oczywiście nie chodzi o to, aby powielać istniejące pomysły. Jeśli jednak starasz się być oryginalnym, upewnij się, że Twoje rozwiązanie będzie równie zrozumiałe i racjonalne.

Zapoznaj się też z teorią. Na początek sprawdź 12 podstawowymi zasad animacji przygotowanych przez animatorów Disneya . Te uniwersalne prawa obowiązują też przy animowaniu interfejsów. Zresztą zgłębienie wiedzy o klasycznej animacji pomaga w zrozumieniu tego, jak atrakcyjnie i realistycznie ożywiać obiekty - a to kluczowa umiejętność projektanta animacji.

Skup się na znaczeniu

Animacja jest świetnym sposobem na zwrócenie uwagi użytkownika, ale  nieodpowiednio użyta  może go też rozproszyć. Unikaj animacji bezwartościowych, których jedynym uzasadnieniem jest ich „fajność”. Każdy ruch powinien mieć swoją funkcję.

Animacja może:

• zwracać uwagę na ważny element systemu
• odwracać uwagę (np. angażująca animacja podczas ładowania zawartości)
• wyjaśniać charakter widoku/elementu (jak użytkownik może wejść z nim w interakcję)
• informować o stanie systemu (np. animacja ładowania)
• dostarczać informację zwrotną o akcji/zmianie stanu (np. pokazanie/ukrycie dodatkowego panelu)
• informować o wydarzeniu (np. otrzymanie nowej wiadomości)
• wspierać narrację (np. przemieszczający się wskaźnik na mapie, imitujący podróż)
• pokazywać zależność pomiędzy elementami (np. treść wiadomości „wyskakująca” z ikonki powiadomienia)

Jeśli Twoja animacja nie spełnia żadnej z wymienionych funkcji, może być niepotrzebna.

Zadbaj o spójność

Zaprojektowane animacje muszą być spójne z resztą systemu. Myśl o ruchu jako integralnej części projektowania. Nie traktuj animacji jako dodatku tworzonego pod koniec prac. Wtedy prawdopodobnie skończy jako ozdobnik, nie jako element wzmacniający interakcje.

Już na wczesnym etapie możesz zastanowić się nad ruchem wspierającym ścieżki użytkownika. Wraz ze wzrostem szczegółowości projektu, animacje mogą być doprecyzowywane.

Postaraj się też określić standardowe zasady ruchu Twojego projektu  - czas, dynamikę, używane transformacje, itp. Nie oznacza to, że każda animacja musi trwać np. 0.3 sekundy, ale założone kryteria powinny stanowić bazę pod tworzone animacje. Dzięki temu dużo łatwiej będzie zachować wewnętrzną spójność ruchu.

Bądź subtelny

Gdy zaczynamy projektować animację, łatwo przesadzić. Po uzyskaniu przyjemnego efektu przychodzi pokusa pochwalenia się tym przed użytkownikiem i upewnienia się, że nie przegapi tego, co dla niego przygotowaliśmy. Większość animacji powinna być jednak niemal niezauważalna. Nie musi absorbować całej uwagi. Z reguły lepiej, gdy pełni rolę szybkiego, niemal podświadomego bodźca, który kieruje użytkownika na odpowiednie tory.

Oczywiście nie oznacza to, że trzeba unikać ciekawych efektów przykuwających uwagę. Pamiętaj jednak o umiarze. Element zachwycający za pierwszym razem może być nieznośnie irytujący przy setnym wyświetleniu.