Przekonujące i poruszające — przewodnik po zasadach projektowania ruchu

Opublikowany: 2022-03-11

Ruch ma ogromny wpływ na wrażenia użytkownika produktów cyfrowych, ale jeśli elementy interfejsu nie wykazują podstawowych zasad projektowania ruchu, użyteczność jest zagrożona. W kontekście interfejsów użytkownika ruch jest czymś więcej niż tylko ozdobą wizualną. Jest to nieodparta siła, która zwiększa zaangażowanie w produkt i rozszerza zasięg komunikacji projektowej.

Nasz świat to świat ruchu. Nawet w spokojnych chwilach liście drżą, a płuca rozszerzają się. W sferze projektowania produktów cyfrowych 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ła prawda.

Po prostu zapytaj każdego, kto pierwszy raz zajmuje się animowanymi elementami interfejsu użytkownika. Godziny wysiłku przynoszą rezultaty amatorskie. Coś tak prostego, jak karta przesuwająca się po ekranie, wygląda niezręcznie. Dlaczego?

W teorii poruszanie elementów interfejsu użytkownika jest łatwe. Zdefiniuj punkty na z góry określonej ścieżce, a oprogramowanie tworzy animacje między przerwami. W rzeczywistości to nie działa w ten sposób. Narzędzia i techniki są niezbędne, ale swoją moc czerpią z zasad. 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.

Początki projektowania ruchu

Mariaż motion design i UX jest stosunkowo nowy, ale jego korzenie sięgają Disneya. Frank Thomas i Ollie Johnston należeli do najbardziej cenionych animatorów Walta Disneya i kluczowych współtwórców takich klasyków jak Pinnochio , Bambi i Fantasia . Ich 12 podstawowych zasad animacji ma wpływ na animowaną grafikę filmową, telewizyjną i cyfrową.

Zasady Disneya destylują podstawowe prawa ruchu fizycznego na rzecz animowanej opowieści. Umożliwiają narysowanym postaciom poruszanie się i wykonywanie emotikonów, ale nie odpowiadają one odpowiednio potrzebom interaktywnych ruchów nowoczesnych interfejsów użytkownika.

Współcześni projektanci próbowali wypełnić tę lukę. Jednym z bardziej ilustracyjnych przykładów jest 10 Zasad Projektowania Ruchu , adaptacja Disneya autorstwa eksperta animacji Jorge R. Canedo Estrady. Jednak wnioski na wynos wymagają tłumaczenia, jeśli mają być stosowane holistycznie w projektowaniu produktów cyfrowych.

Zasady grafiki ruchomej — *10 zasad projektowania ruchu* autorstwa Jorge R. Canedo Estrada.

Najbardziej ambitną próbą przeorientowania zasad ruchu wokół interaktywnych elementów interfejsu użytkownika (i ich znaczenia dla UX) jest Manifest UX w ruchu Issary Willenskomer. Jego głębia jest zdumiewająca, ale nie jest to lekka lektura.

Ustanawiając 12 Zasad UX w Ruchu , Willenskomer:

Odróżnia projekt ruchu od animacji interfejsu użytkownika
Wskazuje, w jaki sposób ruch wspomaga użyteczność
Rozpakowuje wewnętrzne działanie podstawowych zachowań ruchowych

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

Przed omówieniem zasad projektowania ruchu ważne jest, aby podkreślić kluczowe różnice, które pojawiają się w manifeście Willenskomer.

Ruch to coś więcej niż ozdoba

Projektowanie ruchu nie jest równoznaczne z animacją interfejsu użytkownika. Jest to kluczowe, ponieważ animacja interfejsu użytkownika jest prawie zawsze traktowana jako kosmetyczna refleksja bez wpływu na UX (poza dodaniem uroku). Ruch to nie ozdoba, to zachowanie, a zachowania mogą tylko pomóc lub utrudnić wrażenia użytkownika.

Dwa typy interakcji: w czasie rzeczywistym i nie w czasie rzeczywistym

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

Interakcje w czasie rzeczywistym zapewniają natychmiastową informację zwrotną, gdy użytkownicy manipulują elementami interfejsu użytkownika na ekranie. Innymi słowy, zachowania ruchowe natychmiast reagują na działania użytkownika.
Interakcje nie w czasie rzeczywistym następują po wprowadzeniu danych przez użytkownika, co oznacza, że użytkownicy muszą na chwilę zatrzymać się i obejrzeć wynikowe zachowanie ruchu przed kontynuowaniem.

Animacja w formie ruchomej grafiki przedstawiająca interakcję w czasie rzeczywistym na urządzeniu mobilnym — Interakcje w czasie rzeczywistym: zachowania ruchu natychmiast reagują na działania użytkownika. (Stan Jakusewicz)

Podstawy grafiki ruchomej — Interakcje inne niż w czasie rzeczywistym: po interakcji użytkownicy muszą chwilę poczekać i obserwować zachowania ruchowe. (Witalij Rubcow)

Ruch wspiera użyteczność

Projekt ruchu musi obsługiwać użyteczność na cztery różne sposoby.

Oczekiwanie: Kiedy użytkownicy wchodzą w interakcję z elementami interfejsu, jakich zachowań ruchowych spodziewają się zobaczyć? Czy ruch spełnia oczekiwania, czy powoduje zamieszanie?
Ciągłość: czy interakcje powodują spójne zachowania ruchowe w całym doświadczeniu użytkownika?
Narracja: Czy interakcje i wywołane 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 są ze sobą powiązane i wpływają na podejmowanie decyzji przez użytkownika? Jak ruch wpływa na istniejące relacje między różnymi elementami?

12 zasad projektowania ruchu dla produktów cyfrowych

1. Łagodzenie

Łagodzenie naśladuje sposób, w jaki obiekty w świecie rzeczywistym przyspieszają i spowalniają w czasie. Dotyczy to wszystkich elementów interfejsu użytkownika wykazujących ruch.

Przeciwieństwem easingu jest ruch liniowy. Elementy interfejsu użytkownika wyświetlające ruch liniowy natychmiastowo przechodzą ze stanu stacjonarnego do pełnej prędkości i z pełnej prędkości do stacjonarnego. Takie zachowanie nie występuje nigdzie w świecie fizycznym i wydaje się, że użytkownicy zatrzymują się.

Przykłady grafiki ruchomej — Karty interfejsu użytkownika i odpowiadające im krzesła poruszają się szybko, ale dzięki easing dochodzą do płynnego i kontrolowanego zatrzymania. (Saptarshi Prakash)

2. Przesunięcie i opóźnienie

Gdy kilka elementów interfejsu użytkownika porusza się w tym samym czasie i z dużą szybkością, użytkownicy mają tendencję do grupowania ich razem i pomijania możliwości, że każdy element może mieć własną funkcjonalność.

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

Gdy użytkownicy podróżują między ekranami, przesunięcie i opóźnienie sygnalizują, że istnieje wiele opcji interakcji.

Scenorys z grafiką ruchową z animacją przesunięcia i opóźnienia — Ta aplikacja kryptowalutowa wprowadza jednocześnie kilka elementów interfejsu użytkownika. Ich pojawienie się jest nieco rozłożone, aby poinformować użytkowników, że elementy są powiązane, ale odrębne. (Studio Gapsy)

3. Rodzicielstwo

Rodzicielstwo łączy właściwości jednego elementu interfejsu użytkownika z właściwościami innych. Gdy zmienia się właściwość w elemencie nadrzędnym, zmieniają się również połączone właściwości elementów podrzędnych. Wszystkie właściwości elementów mogą być ze sobą połączone.

Na przykład pozycja elementu nadrzędnego może być powiązana ze skalą elementu podrzędnego. Kiedy element nadrzędny się porusza, element podrzędny zwiększa lub zmniejsza rozmiar.

Rodzicielstwo tworzy relacje między elementami interfejsu użytkownika, ustanawia hierarchię i umożliwia wielu elementom komunikowanie się z użytkownikami jednocześnie. Z tego powodu rodzicielstwo ma największy wpływ, gdy jest używane w interakcjach w czasie rzeczywistym.

Przejścia grafiki ruchomej — W tym przypadku pozycja niebieskiego suwaka kontroluje krycie maski tła, rozprzestrzenianie się efektu poświaty wokół żarówki oraz wartość liczbową skali natężenia światła. (Ayoub Kada)

4. Transformacja

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

Z perspektywy UX transformacja jest skutecznym sposobem na pokazanie użytkownikom ich statusu w odniesieniu do celu (Widoczność statusu systemu). Jest to szczególnie przydatne, gdy progresja między elementami interfejsu użytkownika jest połączona z procesem z początkiem i zakończeniem (np. pobieranie pliku).

Elementy ruchomej grafiki — Transformacja sygnalizuje rozpoczęcie, środek i zakończenie pobierania. (Aaron Iker)

5. Zmiana wartości

Reprezentacje wartości (liczbowe, tekstowe lub graficzne) są bogate w interfejsy cyfrowe, pojawiające się w różnych produktach, od aplikacji bankowych, przez osobiste kalendarze, po witryny eCommerce. Ponieważ te reprezentacje są powiązane z zestawami danych, które istnieją w rzeczywistości, mogą ulec zmianie.

Zmiana wartości komunikuje dynamiczny charakter reprezentacji danych i informuje użytkowników, że dane są interaktywne i można na nie w pewnym stopniu wpływać. Gdy wartości są wprowadzane bez ruchu, zmniejsza się gotowość użytkowników do korzystania z danych.

Narzędzia do grafiki ruchomej — Wartości są wprowadzane za pomocą ruchu, aby pokazać użytkownikom, że mają możliwość wpływania na dane. (Taras Migulko)

6. Maskowanie

Maskowanie to strategiczne odsłanianie i ukrywanie części elementu interfejsu użytkownika. Zmieniając kształt i skalę obwodu elementu, maskowanie sygnalizuje zmianę użyteczności, jednocześnie umożliwiając identyfikację samego elementu. Z tego powodu szczegółowe wizualizacje, takie jak zdjęcia i ilustracje, są idealnymi kandydatami.

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

Efekty grafiki ruchomej — Maskowanie służy do przejścia od przechwytywania obrazu przez przesłanie do włączenia do witryny sklepu internetowego. (WYBIERZ)

7. Nakładka

W przestrzeni 2D nie ma głębi, a elementy UI mogą poruszać się tylko wzdłuż osi X lub Y. Nakładka tworzy iluzję rozróżnienia pierwszego planu/tła w przestrzeni 2D interfejsów użytkownika. Symulując głębokość, nakładka umożliwia ukrycie i odsłonięcie elementów zgodnie z potrzebami użytkownika.

Hierarchia informacji jest ważnym czynnikiem przy stosowaniu nakładki. Na przykład pierwszą rzeczą, jaką użytkownicy powinni zobaczyć w aplikacji do robienia notatek, jest lista ich notatek. Następnie nakładka może być używana do odsłaniania dodatkowych opcji dla każdej wiadomości, takich jak Usuń lub Archiwizuj .

Proces grafiki ruchomej — Nakładka umożliwia użytkownikom szybkie archiwizowanie lub usuwanie wpisów w tej aplikacji do notatek. (Karan Kapoor)

8. Klonowanie

Klonowanie to zachowanie ruchu, w którym jeden element interfejsu użytkownika dzieli się na inne. To sprytny sposób na podkreślenie ważnych informacji lub opcji interakcji.

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

Zastosowania ruchomej grafiki — Użytkownicy mogą pewnie klikać kolorowe kółka, ponieważ wyraźnie pochodzą one z ikony „Dodaj notatki”. (Ariuka)

9. Zaciemnienie

Wyobraź sobie drzwi z matowego szkła. Otwarcie wymaga interakcji, ale można (do pewnego stopnia) dostrzec, co czeka po drugiej stronie.

Zaciemnienie działa w ten sam sposób. Przedstawia użytkownikom interfejs, który wzywa do interakcji, jednocześnie pokazując podpowiedź ekranu do naśladowania. Typowymi przykładami są menu nawigacyjne, ekrany kodów dostępu i okna folderów/plików.

Obieg grafiki ruchomej — Obscuration przedstawia użytkownikom ważne interakcje, jednocześnie pozwalając im zachować orientację w narracjach produktów. (Kyle Abarquez)

10. Paralaksa

Paralaksa jest wyświetlana, gdy dwa (lub więcej) elementy interfejsu użytkownika poruszają się w tym samym czasie, ale z różnymi prędkościami. Tu znowu intencją jest ustanowienie hierarchii.

Elementy interaktywne poruszają się szybciej i pojawiają się na pierwszym planie.
Elementy nieinteraktywne poruszają się wolniej i schodzą na dalszy plan.

Paralaksa kieruje użytkowników w stronę interaktywnych elementów interfejsu użytkownika, jednocześnie umożliwiając nieinteraktywnym elementom pozostawanie na ekranie i zachowanie jedności projektu.

Tworzenie ruchomej grafiki — W przypadku paralaksy najważniejsze elementy interaktywne poruszają się najszybciej, podczas gdy elementy nieinteraktywne poruszają się wolniej i schodzą na dalszy plan. (Tubik)

11. Wymiarowość

Wymiarowość sprawia, że wydaje się, że elementy interfejsu użytkownika mają wiele interaktywnych stron, podobnie jak obiekty w świecie fizycznym. Zachowanie jest osiągane przez sprawianie, że elementy wyglądają tak, jakby były składane, obracane, unoszące się lub wyposażone w realistyczne właściwości głębokości.

Jako urządzenie narracyjne wymiarowość oznacza, że różne strony elementu interfejsu użytkownika są połączone i zapewniają płynne przejścia między ekranami.

12. Dolly i Zoom

Dolly i zoom pozwalają użytkownikom „podróżować” w przestrzeni przez elementy interfejsu użytkownika lub zwiększać ich skalę, aby odsłonić wyższy poziom szczegółowości.

Dolly: Dolly występuje, gdy punkt widzenia użytkownika zbliża się (lub oddala) od elementu interfejsu użytkownika. Wyobraź sobie osobę z aparatem podchodzącą do kwiatka, aby zrobić bliższe ujęcie.
Powiększenie: w przypadku powiększenia punkt widzenia użytkownika i element interfejsu użytkownika pozostają stałe, ale element zwiększa się (lub zmniejsza) na ekranie użytkownika. Teraz wyobraź sobie, że osoba pozostaje na miejscu i używa funkcji zoomu aparatu, aby powiększyć kwiat.

Animacja grafiki ruchomej — Dolly: Punkt widzenia użytkownika wydaje się zbliżać do obrazu tła. (Janosz)

Ruch to komunikacja

Interaktywne doświadczenia domagają się ruchu we wszystkich jego rześkich i subtelnych formach. Kiedy przestrzegane są zasady projektowania ruchu, nawet najbardziej podstawowe elementy interfejsu użytkownika stają się wyrafinowanymi czynnikami komunikacji międzyludzkiej. Kiedy te zasady są ignorowane, ruch ucieleśnia cechy niespotykane w świecie przyrody. Żadna ilość estetycznego splendoru nie jest w stanie przezwyciężyć powstałej niezdarności.

Związek między projektowaniem ruchu a UX produktów cyfrowych szybko dojrzewa. Pryncypialne podejście do ruchu zapobiega nadmiernemu poleganiu na ulotnej użyteczności trendów, narzędzi i technik. Co więcej, obejmuje podział między abstrakcyjnym ruchem elementów na ekranach 2D a percepcją ruchu w świecie 3D.

Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

Animacja internetowa w erze post-Flash
Krawędź projektanta — przegląd wtyczek programu Photoshop
Retrospektywa trendów w projektowaniu UX 2019
Zapoznanie się — przewodnik po procesach wprowadzania użytkowników
Zasady projektowania mobilnego UX