DESIGN
Jak używać animacji, żeby pomagały stronie
Ruch może budować charakter i wyjaśniać działanie. Najlepiej działa wtedy, gdy użytkownik nadal ma pełną kontrolę nad treścią.
Poznaj realizację Każdy efekt powinien mieć rolę
Wejście sekcji może wskazywać kolejność czytania, a zmiana przycisku potwierdzać reakcję na działanie. Delikatny ruch grafiki potrafi nadać stronie charakter. Gdy jednak wszystko porusza się jednocześnie, trudniej rozpoznać, co jest ważne. Projektujemy hierarchię: mocniejszy akcent w wybranym miejscu i spokojniejsze zachowanie pozostałych elementów. Najpierw sprawdzamy, czy treść działa bez animacji, a potem dodajemy ruch wspierający jej odbiór.
Czytelność przed efektem
Nagłówek powinien dać się przeczytać, a przycisk nacisnąć bez czekania na zakończenie długiej sekwencji. Ważnej informacji nie chowamy wyłącznie w efekcie najechania, ponieważ telefon nie ma kursora. W portfolio podgląd strony musi zachować proporcje oraz możliwość powiększenia. Ruch może występować wokół niego, ale nie powinien stale deformować tekstu. To szczególnie istotne, gdy sama realizacja jest najważniejszym dowodem umiejętności studia.
Telefon zmienia warunki
Mały ekran ma mniej miejsca, a użytkownik często przewija stronę w ruchu lub przy słabszym połączeniu. Ciężka scena może opóźnić dostęp do oferty. Dlatego wariant mobilny projektujemy osobno: upraszczamy dekoracje, ograniczamy nakładanie elementów i zachowujemy wygodne cele dotykowe. Nie zakładamy, że pomniejszenie kompozycji komputerowej rozwiąże wszystkie problemy. Test obejmuje także poziomy układ telefonu i dłuższe teksty w przyciskach.
Kontrola ruchu
Użytkownik może mieć ustawione ograniczenie animacji w systemie. Strona powinna je uwzględniać i nadal pokazywać pełną treść. Przy ciągłych dekoracjach warto dodać przełącznik zatrzymania ruchu. Jego działanie musi obejmować również nowe elementy otwierane później, na przykład dialog. Zatrzymanie nie może pozostawiać formularza niewidocznego w początkowym stanie animacji. Sprawdzamy te sytuacje podczas odbioru, a nie dopiero po zgłoszeniu problemu.
Wydajność i stabilność
Animowane elementy nie powinny niespodziewanie przesuwać tekstu w trakcie czytania. Obrazom nadajemy wymiary, a układy projektujemy tak, by zachować miejsce na zawartość. Efekty uruchamiamy tam, gdzie mają zastosowanie, zamiast stale przeliczać całą stronę. W razie potrzeby wybieramy prostszy wariant dla mniejszych urządzeń. Wynik sprawdzamy w działającym serwisie, ponieważ sama prezentacja projektu graficznego nie pokazuje kosztu jego zachowania w przeglądarce.
Co proponujemy w praktyce
Dla strony studia można połączyć subtelne odsłanianie sekcji, reakcje kart na fokus i najechanie, płynne przejścia oraz interaktywne demonstracje. Dla panelu CRM ważniejsza będzie informacja o zapisaniu rekordu i zmianie statusu. Złożone animacje przestrzenne traktujemy jako osobny element produkcji, jeśli mają uzasadnienie w marce. Nowoczesny efekt jest przydatny wtedy, gdy wspiera działanie strony i nie wymaga od użytkownika poświęcania wygody na rzecz samego widowiska.
CZYTAJ DALEJ
Jak przygotować brief, który przyspieszy projekt
Siedem decyzji, które pomagają wycenić stronę i uniknąć niespodzianek. Nie musisz znać technologii — potrzebujemy wiedzy o Twojej firmie.
Poznaj szczegóły 01