Efekt parallax na stronie WWW nie jest już nowością, ale nadal potrafi robić wrażenie. Odpowiednio wykorzystany może dodać stronie głębi, ułatwić opowiadanie historii i sprawić, że użytkownik naturalnie przechodzi przez kolejne elementy serwisu.
Problem zaczyna się wtedy, gdy animacja staje się ważniejsza niż sama treść. Parallax powinien wspierać doświadczenie użytkownika, a nie zmuszać go do walki ze stroną.
Co to jest efekt parallax?
Parallax scrolling można najprościej opisać jako efekt przewijania, w którym poszczególne elementy strony poruszają się z różną prędkością. Dzięki temu użytkownik ma wrażenie przestrzeni, głębi i ruchu.
Tło może przesuwać się wolniej niż pierwszy plan, ilustracja pojawiać się w odpowiednim momencie scrollowania, a kolejne elementy kompozycji mogą reagować na położenie użytkownika na stronie. To mechanizm znany między innymi z gier komputerowych, który z czasem na dobre trafił również do web designu.
Parallax nie musi przy tym oznaczać widowiskowej animacji zajmującej cały ekran. Dzisiaj często znacznie lepiej sprawdzają się subtelne efekty – delikatne przesunięcia warstw, animowane ilustracje czy elementy reagujące na przewijanie.
Jak działa parallax na stronie internetowej?
Wrażenie głębi powstaje przede wszystkim dzięki temu, że różne elementy strony poruszają się w różnym tempie. Obiekt znajdujący się wizualnie bliżej użytkownika może przesuwać się szybciej niż tło, podobnie jak podczas patrzenia przez okno jadącego samochodu.
Współczesne efekty tego typu można realizować za pomocą CSS i JavaScriptu. Nie chodzi jednak o samą technologię. Znacznie ważniejsze jest zaprojektowanie momentów, w których ruch rzeczywiście pomaga użytkownikowi zrozumieć treść albo zwraca uwagę na coś istotnego.
Dobrze zaprojektowana animacja jest częścią interfejsu. Źle zaprojektowana staje się dekoracją, która konkuruje z tym, po co użytkownik przyszedł na stronę.
Kiedy parallax ma sens?
Efekt parallax szczególnie dobrze sprawdza się tam, gdzie strona ma opowiadać historię. Kolejne ruchy scrolla mogą odsłaniać etapy procesu, pokazywać cechy produktu albo prowadzić odbiorcę przez określony scenariusz.
Może być dobrym rozwiązaniem na stronach produktowych, landing page’ach, stronach kampanii, serwisach wizerunkowych czy rozbudowanych prezentacjach produktu. Pozwala pokazać informacje w bardziej angażujący sposób niż klasyczny układ kolejnych statycznych sekcji.
Nie oznacza to jednak, że każda strona potrzebuje parallaxu. W serwisie, którego najważniejszym zadaniem jest szybkie znalezienie informacji, wykonanie operacji albo zakup produktu, zbyt rozbudowana animacja może tylko wydłużyć drogę do celu.
Parallax powinien prowadzić użytkownika, a nie go zatrzymywać
Już w pierwotnym podejściu do projektowania stron z parallaxem ważna była ścieżka użytkownika. Ta zasada pozostaje aktualna.
Scroll może odkrywać kolejne części opowieści, ale użytkownik powinien przez cały czas rozumieć, gdzie się znajduje i co może zrobić dalej. Nie powinien być zmuszany do oglądania całej animacji tylko po to, aby dotrzeć do informacji, której potrzebuje.
Dlatego nawet efektowna strona powinna zachować czytelną hierarchię treści i intuicyjną nawigację. Jeżeli użytkownik chce przejść bezpośrednio do konkretnej sekcji, warto mu to umożliwić.
Więcej o projektowaniu UX wokół rzeczywistych potrzeb użytkowników:
Parallax na urządzeniach mobilnych
Projektowanie efektu tylko dla dużego monitora to dzisiaj zdecydowanie za mało. Na smartfonie zmienia się wielkość ekranu, sposób przewijania, proporcje grafik i wydajność urządzenia.
Animacja, która na desktopie wygląda płynnie i efektownie, na telefonie może zajmować zbyt dużo miejsca, utrudniać czytanie albo powodować niepotrzebne skoki interfejsu. Dlatego wersja mobilna nie musi być wierną kopią desktopowej.
Często lepszym rozwiązaniem jest uproszczenie ruchu, ograniczenie liczby animowanych elementów albo całkowite zastąpienie części efektów statyczną kompozycją. Najważniejsze jest zachowanie sensu projektu, a nie każdej animacji.
Efekt parallax a szybkość strony
Im bardziej rozbudowana animacja, tym ważniejsza staje się wydajność. Ciężkie grafiki, materiały wideo, wiele elementów reagujących na scroll i skomplikowane skrypty mogą zwiększyć obciążenie urządzenia oraz pogorszyć płynność przewijania.
Dlatego ruch warto projektować razem z technologią, a nie dodawać na samym końcu. Już podczas projektowania trzeba wiedzieć, które elementy rzeczywiście muszą się poruszać i jakie zasoby będą do tego potrzebne.
Efekt, który wygląda dobrze w makiecie albo prezentacji, powinien później zostać sprawdzony w prawdziwej przeglądarce, na różnych urządzeniach i przy różnych prędkościach połączenia.
O tym, co warto sprawdzić przed uruchomieniem serwisu, piszemy również tutaj:
Parallax i dostępność
Ruch na stronie nie jest neutralny dla wszystkich użytkowników. Intensywne przesuwanie dużych elementów, skalowanie czy szybkie animacje mogą utrudniać korzystanie z serwisu osobom wrażliwym na ruch.
Dlatego projektując parallax, warto uwzględnić ustawienie prefers-reduced-motion. Pozwala ono stronie rozpoznać, że użytkownik wybrał w swoim systemie ograniczenie animacji, i odpowiednio zmniejszyć lub wyłączyć niepotrzebny ruch.
Nie oznacza to, że trzeba całkowicie zrezygnować z animacji. Trzeba natomiast zadbać, aby bez niej strona nadal była zrozumiała, funkcjonalna i kompletna.
Więcej o dostępności cyfrowej:
Nie wszystko musi się ruszać
Jednym z najczęstszych błędów przy projektowaniu stron z parallaxem jest chęć animowania wszystkiego. Skoro technicznie możemy poruszyć tekst, zdjęcie, tło, ikonę i przycisk, nie oznacza to jeszcze, że powinniśmy to robić.
Ruch najlepiej działa wtedy, kiedy ma określone zadanie. Może pokazać zależność między elementami, podkreślić zmianę, skierować uwagę użytkownika albo pomóc opowiedzieć historię.
Jeżeli animację można usunąć bez jakiejkolwiek straty dla projektu, warto zadać sobie pytanie, czy rzeczywiście była potrzebna.
Dobry parallax zaczyna się od pomysłu, nie od efektu
Najciekawsze strony wykorzystujące parallax nie powstają dlatego, że ktoś na początku projektu zdecydował: „zróbmy dużo animacji”. Najpierw pojawia się pomysł na doświadczenie użytkownika, a dopiero później dobierane są środki, które pomagają go zrealizować.
Czasem będzie to rozbudowany storytelling oparty na scrollowaniu. Innym razem wystarczy subtelne przesunięcie grafiki albo pojedyncza animacja podkreślająca najważniejszy moment strony.
Parallax nadal może więc być bardzo dobrym narzędziem projektowym. Pod warunkiem, że pozostaje narzędziem, a nie staje się głównym celem serwisu.
W GoldenGrid projektujemy serwisy i produkty cyfrowe, w których warstwa wizualna, UX i technologia mają wspólnie realizować konkretny cel. Animacje i interakcje są częścią tego procesu wtedy, kiedy rzeczywiście pomagają użytkownikowi.
