Wróć do bloga

Animacje na stronie (Micro-interactions) – bajer obciążający wzrok, czy niezbędne narzędzie nawigacyjne w UX?

Widzisz portale ze wspaniałymi skaczącymi interfejsami w 3D. Myślisz, że to spowolni twoją wizytówkę. Dowiedz się, dlaczego projektujemy tzw. mikrointerakcje, by ułatwić ludziom zakupy bez zgubienia drogi.

UXUIDesignAnimacjeProjektowanie WWW

Ruch to dla mózgu znak, że "coś się dla niego stało" Przez starych inżynierów dawniej uznawano za sztukę ucięcia skryptów z wspaniale zaprojektowanej "chmury i fontów". Dzisiaj w dobie superwydajnych kart graficznych oraz od renderingu w React potężna nowość u UX obeszła zjawiska estetyki w same surowe techniki pod podpowiedzi zachowań do klienta. "Nie odchodź u góry", a "Otwórz te koszyka sekcje dołem". Zjawisko zwane Mikro-interakcjami (Microinteractions) to ułamki za sekundy zaprogramowanych we przejściach! Kiedy użytkownik naciska powoli i puszcza u myszki w portalu "Wyślij z dokumentem na B2B", zamiast zobaczyć surowej u góry ramki "Poszło". Z ułamania 0.3 sekundy guzik powoli zwija boki rzucając kółeczko pośrodku - dając u mózgu u klienta - relaksujący wpływ o "Ach rozumiem. Moje ciężkie za zapytanie o koparki z leasingu poszło w przetworzeniu!". A potem zamiana w duży płynący u góry zielony fajek o "Gotowe!". To ratuje u setek ludzi nerwy naciśniecie ten guzik by jeszcze z "3 razy ze w obawy że za pierwszym nie pykło i rzucisz w serwer z duplikatami".

Magia szarego po podświetleniach np. Hover State! Najprostszym dla wdrożeń rzucanym w agencjach za podstawę wdrażanych to "Hover" we interakcjach kafelkach w portfolio u np w firm transportowych czy projektów. Twoi ludzie zwiedzając wielki po katalog z 40 maszynami rolniczymi gubią wzrok gładkiej lodu architekturze kafelków o nie reagującej czerni. Dodając we system po zaprogramowaniu - delikatne wypchnięcie pod tarcze np o +5px górze cień po nakierowaniu ("Z ang Box-Shadow") robisz klientowi tzw Czerwoną latarnie! "Hej tu jestem i patrzysz tylko pod tą moją kosiarkę z rolnika! Możesz teraz mnie u kliknąć".

Nowoczesny lekki rzut we animacje z CSS. LarteCode, we wdrożeniach u platform z e-commerce rzuca tzw bardzo małe narzuty kodu w Framer Motion frameworkem albo sprzętowo z rzuty akceleracji rzędu css3 (np za property transform), tnąc wszystkie rzucane procesy procesor CPU na rzuty wydajnej we GPU karty graficznej klienta! Zyskujemy u obłędne designu efekty absolutne 0 spadku u zysków prędkości! Zaplanuj swoj żywy w tarczy interfejs LarteCode by rzucać uśmiechy zamiast dla klientów frustracji.