Mikrointerakcje to drobne, krótkie reakcje interfejsu na działanie użytkownika, na przykład zmiana wyglądu przycisku po najechaniu, animacja polubienia lub wskaźnik wysłania formularza. Dają informację zwrotną i uprzyjemniają korzystanie.
Z czego się składają?
- Wyzwalacz – akcja użytkownika lub zdarzenie systemu.
- Reguły – co ma się stać.
- Informacja zwrotna – animacja, dźwięk, zmiana stanu.
- Pętle i tryby – jak długo trwa i czy się powtarza.
Wydajność i dostępność
Animuj właściwości transform i opacity, a nie wymiary, i respektuj ustawienie prefers-reduced-motion. Nadmiar ruchu może wywoływać dyskomfort i spowalniać interfejs (INP).
Przykłady to animacja przycisku „Lubię to”, komunikat po wysłaniu formularza czy potwierdzenie dodania do koszyka. Szanuj ustawienie prefers-reduced-motion dla osób wrażliwych na ruch.
Czy każda animacja to mikrointerakcja?
Nie. Mikrointerakcja ma konkretną funkcję: potwierdza akcję, wskazuje stan lub kieruje uwagę. Ozdobna animacja bez takiej roli jest tylko dekoracją.
Zobacz w praktyce
Refaktoryzacja JavaScript – jak poprawić Interaction to Next Paint (INP) 
Proces projektowania UX krok po kroku – od badań do testów 
Core Web Vitals - poradnik jak poprawić wskaźniki