Kiedy animować UI, a kiedy lepiej tego nie robić?
Patrząc na płonące płomienie, falujące morze lub spojrzenie tygrysa zamierzającego się rzucić, wiemy że świat jest w ciągłym ruchu. Jesteśmy naprawdę dobrzy w dostrzeganiu i reagowaniu na ruch, ponieważ jest on ściśle związany z naszymi mózgami i stanowi ważną część tego, jak postrzegamy otaczający nas świat.
Kiedy siadamy i projektujemy stronę internetową, tworzymy coś, co będzie się komunikowało z naszymi odwiedzającymi. Animacje są jednym ze sposobów na wykonanie tego zadania. Często podczas projektowania stron internetowych możemy zastanawiać się nad treścią, układem, stylami czcionek i kolorami. Ale możemy również komunikować się przez ruch. Zamiast rozpatrywać animacji jako czegoś odrębnego w procesie projektowania, możemy traktować obiekty w ruchu jako inny aspekt w naszych projektach, który działa i komunikuje się równolegle z wszystkim innym. Wszystkie te rzeczy łączą się, aby stworzyć naszą markę i wrażenia, które będą tego warte.
Mamy nadzieję, że nasze projekty efektywnie przedstawiają treść, wykazują wielką dbałość o szczegóły i zadowalają naszych odwiedzających. Ponieważ nasi goście zauważają i rozumieją ruch, animacja jest ważnym i potężnym narzędziem. Prosty przykład animacji, którą widzimy wszędzie, to efekt najechania. Zachwycanie się teraz tą prostą koncepcją może wydawać się dziwne, ale gdy została przedstawiona pierwszy raz, było to wielkie wydarzenie.
Kiedy sieć nabierała kształtów, mieliśmy dokumenty połączone za pomocą hiperłączy. Chcąc wyróżnić tekst od łącza, nadawano tym drugim niebieski kolor i podkreślano. Kursor zmieniał się również na styl pointer. Po kliknięciu zmieniały kolor na fioletowy, aby pokazać że zostały aktywowane lub później, że były już odwiedzone. Kolory były wykorzystywane do informowania o statusie łącza. Sprawy miały się naprawdę dobrze.
Potem pojawił się CSS. Na początku 1998 roku pojawił się selektor hover. Nagle mogliśmy zrobić znacznie więcej. Zamiast polegać na nagłej zmianie kursora, mogliśmy nałożyć style na samo łącze, gdy kursor znajdował się nad nim. Za pomocą tej małej zmiany komunikowaliśmy więcej. Lista łączy stała się interaktywnym placem zabaw, gdy radośnie przesuwaliśmy nasze kursory, uzyskując błyskawiczną informację zwrotną od kolorów łączy. To nie była tylko zabawa – zmiana koloru daje więcej informacji o tym, co się dzieje na ekranie. Ludzie doskonale dostrzegają ruch lub zmianę obiektów, korzystając z dodatkowych informacji.
Ale możemy więcej. Zamiast zatrzymać się na zmianie koloru, możemy dodać również animacje. Animowanie zmiany koloru daje naszym oczom większą szansę na zauważenie zmiany, ponieważ przyciąga wzrok na dłuższą chwilę. Łatwiej dostrzec animowaną niż nagłą zmianę. Dzięki temu możemy dodać przejście do kotwicy CSS. Po najechaniu na łącze, przeglądarka będzie animowała kolor tekstu z niebieskiego lub fioletowego do czerwonego przez okres 0.2 sekundy. Być może to nie wiele, ale te proste narzędzia otwierają świat komunikacji, który możemy wykorzystać, aby tchnąć życie w nasze projekty.
Dzięki możliwości przekazywania informacji za pośrednictwem ruchu, możemy przyciągnąć uwagę do odświeżonych obszarów strony, zakomunikować dodanie lub usunięcie treści, pokazać naszym odwiedzającym na co robić dalej i znacznie więcej. Niektóre sposoby animacji mogą dodać wartość do projektu. Najeżdżanie na łącza jest jednym sposobem na dodanie wartości, ale może pójść dalej. Wskazówki, zmiany stylów i inne zmiany wizualne mogą znacznie ożywić strony i nakłonić odwiedzających do wybierania, naciskania lub inaczej wchodzenia w interakcję z treścią. Obszary mogą się rozwijać lub podświetlać po kliknięciu, a biało-czarne obrazy mogą zmienić się w kolorowe.
Jeśli treść na stronie nagle pojawia się lub znika, możemy to dostrzec. Ale to wszystko, co wiemy. Nie wiem gdzie się teraz znajduje i dlaczego zniknął. To jest okazja, aby dodać małą animację. Dodawanie dodatkowego wiersza do list zadań, suwaka w panelu sterowania lub minimalizowanie treści do rogu strony – wszystko to korzysta z animacji. Pokazując skąd elementy pochodzą i gdzie są przenoszone, nasi odwiedzający utrzymują połączenie ze stroną i lepiej rozumieją, jak działa. Nie jesteśmy ograniczeni do tekstu lub nieruchomych obrazów na naszych stronach internetowych. Przesuwając elementy, dodając nowe lub usuwając je, możesz wziąć gości w podróż i dostarczyć im więcej informacji.
Strona domowa Mailchimp jest tego dobrym przykładem. Na środku ekranu wykorzystali kilka elementów HTML i kilka animacji CSS, aby wytłumaczyć, jak się buduje emaile. Kiedyś mogliśmy stworzyć coś takiego za pomocą Flash, ale teraz możemy wykonać to samo bez polegania na wtyczkach i jednocześnie sprawić, że nasza strona będzie szybka, łatwo dostępna i elastyczna.
Jesteśmy świetni w dostrzeganiu rzeczy zmieniających się wizualnie. Ta cecha jest czymś, co możemy wykorzystać do przyciągania uwagi do określonych obszarów. Powszechnym zastosowaniem tego może być aktualizacja treści na stronie, która będzie migać lub zmieniać kolor. Możemy pójść dalej i sprawić, że nasz przycisk rejestracji będzie się delikatnie trząsł po załadowaniu strony, mówiąc “hej, jestem ważny”, lub sugerowany artykuł wlatuje z boku ekranu, kiedy odwiedzający dotrze do końca poprzedniego. Dbając o to, animacja jest bardzo potężnym sposobem na przyciągnięcie uwagi do tego, co chcemy.
Czymś rzadziej branym pod uwagę, jest efekt, jaki dobra animacja wywiera na odwiedzających naszą stronę, jeżeli chodzi o zaufanie. Jeśli dostrzegasz interakcję z swoim systemem operacyjnym, istnieje wiele subtelnych animacji. Okna pojawiając, zanikając, minimalizując lub maksymalizując się, pomagają zrozumieć komputer. Kiedy projektujemy strony internetowe, często zapominamy o tym i tworzymy coś płaskiego. Animacje mogą sprawić, że interakcje strony wyglądają lepiej.
W artykule na Medium.com, Michaël Villar wyjaśnia, jak proces zakupu Stripe używa animacji, aby pomóc użytkownikowi zarówno w finalizacji zamówienia, ale również w zaszczepieniu zaufania. Niesamowite dopracowanie tej animacji zwiększa ogólne wrażenia użytkowania, przekazując poziom doskonałości i dbałości o szczegóły, któremu nie można się oprzeć, tylko zaufać. Za pomocą właściwego stylu, animacje mogą sprawić, że użytkownik czuje, że używa nowoczesnego UI.
Kiedy Yahoo przechodził dużą zmianę marki w 2013, dodano subtelne animacje do każdego logo strony internetowej. Dążąc do przekazania poczucia radości, przyciągnęli uwagę do zmiany i sprawili, że ludzie o tym mówili. Strona prawdopodobnie już ich nie ma, ale możesz znaleźć przykłady animacji na stronie Astronaut Love. Kiedy Stripe używa animacji, robi to na odpowiednim poziomie, który ludzie i deweloperzy rozważający skorzystanie z ich usług wiążą z ich nazwą. W obu przypadkach animacja pomaga przyciągnąć uwagę i wzmocnić ich markę.
Animacje mogą być również zabawą. Na Hopie stworzyłem postać imieniem bouncer, który wskakuje z lewej strony, pełniąc rolę loga. Zachowując bardzo prosty wygląd strony, skoczek posiada również kotwicę, która prowadzi do strony domowej. Nie ma tutaj potrzeby animacji, ale myślę, że to podnosi trochę ton. Nie ma nic złego w odrobinie zabawy.
Animacja to potężne narzędzie. Podobnie jak łatwo wpatrywać się w płonący ogień, trudno nam ignorować animacje. Niektórzy ludzie uważają, że jest to niemożliwe. Rozważając sposób używania animacji w swoich projektach, pamiętaj, że jest to narzędzie komunikacji. Powinny być wykorzystywane oszczędnie i nigdy nie wchodzić w drogę treści lub interakcji. Nieprzyjemnie słuchać wielu ludzi rozmawiających jednocześnie lub próbować skupić się w głośnym środowisku. Zbyt wiele animacji tworzy wizualny hałas, który rozprasza i utrudnia życie twoim gościom. Mając to na uwadze, zawsze staraj się ograniczać użycie animacji, aby były subtelne.
Nigdy nie było lepszego czasu na wprowadzenie animacji do procesu projektowania. Przeglądarki stają się coraz lepsze, urządzenia bardziej potężne, a my dostajemy lepsze narzędzia do tworzenia animacji. Korzystanie z animacji wymaga oceny. Jeśli chcesz być dobry w używaniu animacji do wyróżniania treści, poprawiania konwersji lub ogólnie doskonalenia marki, nadszedł czas, aby zacząć.
