Ruch ma głęboki wpływ na doświadczenia użytkowników produktów cyfrowych, ale jeśli elementy interfejsu nie wykazują podstawowych zasad projektowania ruchu, użyteczność jest osłabiona. W kontekście interfejsów użytkownika, ruch jest czymś więcej niż tylko dekoracją wizualną. Jest on siłą przyciągającą, która wzmacnia zaangażowanie produktu i rozszerza zasięg komunikacji projektowej.

Nasz świat jest światem ruchu. Nawet w nieruchomych chwilach, liście drżą, a płuca rozszerzają się. W dziedzinie cyfrowego projektowania produktów, wydaje się, że ruch jest drugą naturą, przedłużeniem codzienności, którą można wykorzystać przy niewielkim wysiłku. Gdyby tylko to było prawdą.

Wystarczy zapytać każdego, kto animował elementy interfejsu użytkownika po raz pierwszy. Godziny wysiłku dają amatorskie rezultaty. Coś tak prostego jak karta wsuwana na ekran wygląda niezręcznie. Dlaczego tak jest?

Teoretycznie poruszenie elementów interfejsu użytkownika jest łatwe. Zdefiniuj punkty na wcześniej wyznaczonej ścieżce, a oprogramowanie potęguje luki. W rzeczywistości to nie działa w ten sposób. Narzędzia i techniki są niezbędne, ale ich siła opiera się na zasadach. Jeśli ruch ma zwiększyć użyteczność produktów cyfrowych, musi opierać się na niezmiennych zasadach zachowania, które mają zastosowanie do nieskończonej liczby przypadków użycia.

Pochodzenie projektu ruchowego

Małżeństwo projektowania ruchu i UX jest stosunkowo nowe, ale jego korzenie sięgają Disneya. Frank Thomas i Ollie Johnston byli jednymi z najbardziej cenionych animatorów Walta Disneya i kluczowymi twórcami takich klasyków jak Pinnochio, Bambi i Fantasia. Ich 12 Podstawowe zasady animacji pozostają wpływowe w dziedzinie grafiki film owej, telewizyjnej i cyfrowej.

Zasady Disneya destylują podstawowe prawa ruchu fizycznego na rzecz ożywionego opowiadania historii. Umożliwiają one rysowanym postaciom poruszanie się i emocje, ale nie odpowiadają one odpowiednio na potrzeby interaktywnego ruchu nowoczesnych interfejsów użytkownika.

Współcześni projektanci starają się wypełnić tę lukę. Jednym z bardziej ilustracyjnych przykładów jest 10 Zasad Projektowania Ruchu, adaptacja Disneya autorstwa eksperta w dziedzinie animacji Jorge R. Canedo Estrada. Wciąż jednak, jeśli mają być one zastosowane w całości do cyfrowego projektowania produktów, wymagają tłumaczenia.

Najbardziej ambitną próbą reorientacji zasad ruchu wokół interaktywnych elementów UI (i ich znaczenia UX) jest praca Issary Willenskomer. Manifest UX w Ruchu. Jego głębia jest zdumiewająca, ale nie jest to lekki odczyt.

Ustanawiając 12 Zasad UX w Ruchu, Willenskomer:

• Odróżnia projektowanie ruchu od animacji UI
• Wyraża, w jaki sposób ruch wspomaga użyteczność
• Rozpakowuje wewnętrzne funkcjonowanie zachowań ruchu rdzeniowego

Motion Design i UX: Ważne wyróżnienia

Zanim zajmiemy się zasadami projektowania ruchu, ważne jest, aby podkreślić kluczowe różnice, które pojawiają się w całym manifeście Willenskomera.

Motion Is More than Ornamentation

Motion design nie jest synonimem animacji UI. Jest to o tyle istotne, że animacja UI jest prawie zawsze traktowana jako kosmetyczna refleksja nie mająca wpływu na UX (poza dodaniem uroku). Motion nie jest ornamentacją, to zachowanie, a zachowanie może tylko pomóc lub utrudnić korzystanie z animacji.

Dwa rodzaje interakcji: Real-time vs. Non-real-time

Projektowanie ruchu dotyczy dwóch podstawowych interakcji: w czasie rzeczywistym i nierzeczywistym.

• Interakcje wczasie rzeczywistym dostarczają natychmiastowych informacji zwrotnych, gdy użytkownicy manipulują elementami interfejsu użytkownika na ekranie. Innymi słowy, zachowania związane z ruchem reagują natychmiast na dane wprowadzone przez użytkownika.
• Interakcjew czasie innym niż rzeczywisty mają miejsce po wprowadzeniu danych przez użytkownika, co oznacza, że przed kontynuacją użytkownik musi na krótko zatrzymać się i obserwować wynikające z nich zachowania w ruchu.

Obsługa ruchu wspiera użyteczność

Projekt ruchowy musi wspierać użyteczność na cztery różne sposoby.

• Oczekiwanie: Kiedy użytkownicy wchodzą w interakcję z elementami interfejsu użytkownika, jakich zachowań ruchowych oczekują? Czy ruch spełnia oczekiwania lub powoduje dezorientację?
• Ciągłość: Czy interakcje prowadzą do spójnych zachowań ruchowych w całym procesie użytkowania?
• Narracja: Czy interakcje i wywoływane przez nie zachowania ruchowe są powiązane z logicznym przebiegiem zdarzeń, który spełnia intencje użytkownika?
• Relacja: W jaki sposób przestrzenne, estetyczne i hierarchiczne atrybuty elementów interfejsu użytkownika odnoszą się do siebie i wpływają na podejmowanie decyzji przez użytkownika? W jaki sposób ruch wpływa na relacje pomiędzy poszczególnymi elementami, które istnieją?

12 Zasady projektowania ruchu dla produktów cyfrowych

1. Easing

Ułatwiając naśladowanie sposobu, w jaki prawdziwe obiekty przyspieszają i spowalniają w czasie. Dotyczy to wszystkich elementów UI wykazujących ruch.

Przeciwieństwem łagodzenia jest ruch liniowy. Elementy interfejsu UI wykazujące ruch liniowy przechodzą od stanu stacjonarnego do stanu pełnej prędkości, a od pełnej prędkości do stacjonarnego, natychmiastowo. Takie zachowanie nie istnieje nigdzie w świecie fizycznym i wydaje się zatrzymywać dla użytkowników.

2. Przesunięcie i opóźnienie

Kiedy kilka elementów UI porusza się jednocześnie i z dużą prędkością, użytkownicy mają tendencję do grupowania ich razem i pomijają możliwość, że każdy element może mieć swoją własną funkcjonalność.

Przesunięcie i opóźnienie tworzy hierarchię pomiędzy elementami interfejsu użytkownika, które poruszają się w tym samym czasie i komunikują, że są one powiązane, ale odrębne. Zamiast pełnej synchronizacji, czas, prędkość i odstępy pomiędzy elementami są rozłożone w czasie, co daje subtelny efekt "jeden po drugim".

W miarę przemieszczania się użytkowników pomiędzy ekranami, przesunięcie i opóźnienie sygnalizuje, że istnieje wiele opcji interakcji.

3. Rodzicielstwo

Parenting łączy właściwości jednego elementu UI z właściwościami innych. Gdy zmienia się właściwość elementu rodzicielskiego, zmieniają się również powiązane z nim właściwości elementów dziecięcych. Wszystkie właściwości elementu mogą być powiązane ze sobą.

Na przykład pozycja elementu macierzystego może być powiązana ze skalą elementu dziecięcego. Gdy element rodzicielski się porusza, element dziecięcy zwiększa się lub zmniejsza.

Funkcja rodzicielska tworzy relacje między elementami interfejsu użytkownika, ustanawia hierarchię i umożliwia komunikację z użytkownikami wielu elementów jednocześnie. Z tego powodu rodzicielstwo ma największy wpływ, gdy jest stosowane w interakcjach w czasie rzeczywistym.

4. Transformacja

Transformacja następuje, gdy jeden element interfejsu użytkownika zmienia się w inny. Na przykład przycisk pobierania przekształca się w pasek postępu, który przekształca się w ikonę ukończenia.

Z perspektywy UX, transformacja jest efektywnym sposobem na pokazanie użytkownikom ich statusu w stosunku do celu (Widoczność statusu systemu). Jest to szczególnie pomocne, gdy progresja pomiędzy elementami UI jest powiązana z procesem ze startem i zakończeniem (np. pobieranie pliku).

5. Zmiana wartości

Prezentacje wartości (liczbowe, tekstowe lub graficzne) obfitują w cyfrowe interfejsy, pojawiające się w produktach od aplikacji bankowych przez osobiste kalendarze po strony e-commerce. Ponieważ reprezentacje te są powiązane ze zbiorami danych, które istnieją w rzeczywistości, podlegają one zmianom.

Zmiana wartości komunikuje dynamiczną naturę reprezentacji danych i informuje użytkowników, że dane są interaktywne i mogą być w pewnym stopniu zmieniane. Gdy wartości są wprowadzane bez ruchu, zmniejsza się chęć użytkowników do angażowania się w dane.

6. Maskowanie

Maskowanie jest strategicznym ujawnianiem i ukrywaniem części elementu UI. Poprzez zmianę kształtu i skali obwodu elementu, maskowanie sygnalizuje zmianę użyteczności, pozwalając jednocześnie na identyfikację samego elementu. Z tego powodu, szczegółowe wizualizacje, takie jak fotografie i ilustracje, są idealnymi kandydatami.

Z punktu widzenia użyteczności, projektanci mogą wdrożyć maskowanie, aby pokazać użytkownikom, że przechodzą przez serię interakcji.

7. Nakładka

W przestrzeni 2D nie ma żadnej głębokości, a elementy interfejsu użytkownika mogą poruszać się tylko wzdłuż osi X lub Y. Nakładanie tworzy iluzję rozróżnienia przedpola/tyłu w przestrzeni 2D UI. Poprzez symulację głębokości, nakładanie pozwala na ukrycie i ujawnienie elementów zgodnie z potrzebami użytkownika.

Hierarchia informacji jest ważnym czynnikiem przy stosowaniu overlay'u. Na przykład, pierwszą rzeczą, którą użytkownicy powinni zobaczyć w aplikacji do robienia notatek, jest ich lista. Następnie nakładka może być użyta do odsłonięcia drugorzędnych opcji dla każdej wiadomości - jak Delete lub Archive.

8. Klonowanie

Klonowanie to zachowanie ruchowe, w którym jeden element interfejsu użytkownika dzieli się na inne. Jest to sprytny sposób na podkreślenie ważnych informacji lub możliwości interakcji.

Kiedy elementy interfejsu UI materializują się w obrębie interfejsu, potrzebują one wyraźnego punktu początkowego, który łączy się z elementem już znajdującym się na ekranie. Jeśli elementy po prostu pękają lub znikają znikąd, użytkownikom brakuje kontekstu potrzebnego do pewnych interakcji.

9. Obserwacja

Zdjęcie drzwi z matowego szkła. Wymagają one interakcji, aby się otworzyć, ale możliwe jest dostrzeżenie (w pewnym stopniu) tego, co czeka po drugiej stronie.

Prześwietlenie działa w ten sam sposób. Prezentuje on użytkownikom interfejs, który wymaga interakcji, a jednocześnie odsłania podpowiedź ekranu, za którym należy podążać. Menu nawigacyjne, ekrany kodów paskowych i okna folderów/plików to częste przykłady.

10. Paralaksa

Paralaksa jest wyświetlana, gdy dwa (lub więcej) elementy UI poruszają się w tym samym czasie, ale z różną prędkością. Również w tym przypadku celem jest ustanowienie hierarchii.

• Elementy interaktywne poruszają się szybciej i pojawiają się na pierwszym planie.
• Elementy nie-interaktywne poruszają się wolniej i cofają się do tła.

Paralaksa kieruje użytkowników w stronę interaktywnych elementów interfejsu użytkownika, jednocześnie pozwalając nie-interaktywnym elementom pozostać na ekranie i zachować jedność projektu.

11. Wymiarowość

Wymiarowość sprawia wrażenie, że elementy interfejsu użytkownika mają wiele interaktywnych stron, podobnie jak obiekty w świecie fizycznym. Zachowanie to jest osiągane poprzez nadanie elementom wyglądu, jakby były składane, przerzucalne, pływające lub posiadały realistyczne właściwości głębokości.

Wymiarowość, jako urządzenie narracyjne, oznacza, że różne strony elementu interfejsu użytkownika są ze sobą powiązane, co zapewnia płynne przejścia między ekranami.

12. Dolly i Zoom

Dolly i zoom umożliwiają użytkownikom "podróżowanie" przez elementy interfejsu użytkownika w przestrzeni lub zwiększenie ich skali w celu ujawnienia większej ilości szczegółów.

• Dolly: Dolly występuje, gdy punkt widzenia użytkownika zbliża się do (lub dalej od) elementu UI. Wyobraź sobie osobę z aparatem fotograficznym podchodzącą do kwiatu, aby uzyskać bliższe ujęcie.
• Zoom: Przy powiększeniu, punkt widzenia użytkownika i element interfejsu użytkownika pozostają stałe, ale element ten zwiększa (lub zmniejsza) swój rozmiar na ekranie użytkownika. Teraz wyobraź sobie, że osoba pozostaje na swoim miejscu i korzysta z funkcji zoomu aparatu, aby kwiat wydawał się większy.

Ruch jest komunikacją

Doświadczenia interaktywne wymagają ruchu we wszystkich jego zrywnych i subtelnych formach. Gdy przestrzegane są zasady projektowania ruchu, nawet najbardziej podstawowe elementy interfejsu użytkownika stają się wyrafinowanymi agentami ludzkiej komunikacji. Gdy zasady te są ignorowane, ruch uosabia cechy, których nie można znaleźć w świecie przyrody. Żadna ilość estetycznego splendoru nie jest w stanie pokonać wynikającej z tego niezdarności.

Związek pomiędzy projektowaniem ruchu a UX produktów cyfrowych szybko dojrzewa. Zasadnicze podejście do ruchu zapobiega nadmiernemu poleganiu na ulotnej użyteczności trendów, narzędzi i technik. Co więcej, rozpościera się on między abstrakcyjnym ruchem elementów na ekranach 2D a postrzeganiem ruchu w świecie 3D.