---
title: "Mikrointerakcja: co to jest? Słownik pojęć"
description: "Mikrointerakcja to drobna reakcja interfejsu na jedno działanie użytkownika, np. zmiana przycisku po naciśnięciu albo animacja licznika w koszyku."
url: https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/
---

[Strony www](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=www)

# Mikrointerakcja

Inaczej microinteraction, mikrointerakcje

Mikrointerakcja to drobna reakcja interfejsu na jedno działanie użytkownika, np. zmiana przycisku po naciśnięciu albo animacja licznika w koszyku. Pokazuje, że system przyjął polecenie i co dzieje się dalej.

## W skrócie

-   Animacja trwa zwykle krócej niż pół sekundy
-   Cztery części według Dana Saffera: wyzwalacz, reguły, informacja zwrotna, pętle i tryby
-   Strona powinna respektować systemowe ustawienie ograniczenia ruchu (prefers-reduced-motion)

## Usługa

-   [UI / UX design](https://fluostudio.pl/uslugi/product-design/ui-ux-design/)

Przycisk „Wyślij” zamienia się w kręcące się kółko, a potem w zielony znaczek. Pole hasła na bieżąco pokazuje, czego jeszcze brakuje. Licznik koszyka podskakuje o jeden. Nikt o tym nie myśli, dopóki tego nie zabraknie. Wtedy człowiek nie wie, czy formularz poszedł, i wysyła go drugi raz.

## Po co są

-   **Potwierdzają.** Widać, że system przyjął polecenie. Nie trzeba zgadywać.
-   **Uprzedzają błąd.** Pole podpowiada w trakcie pisania, a nie dopiero po wysłaniu.
-   **Pokazują stan.** Ładowanie, postęp, zapisane zmiany, włączona opcja.
-   **Dają marce charakter.** Ruch może być częścią identyfikacji, tak jak kolor czy krój pisma. Takie zasady zapisuje się w [motion guidelines](https://fluostudio.pl/baza-wiedzy/slownik/motion-guidelines/), a za tempo ruchu odpowiada [easing](https://fluostudio.pl/baza-wiedzy/slownik/easing/).

## Na komputerze i na telefonie

Na komputerze wiele mikrointerakcji startuje po najechaniu kursorem: karta produktu się unosi, zdjęcie zmienia kadr, ilustracja zaczyna się ruszać. Telefon nie ma kursora, więc trzeba zmienić wyzwalacz. Na telefonie uruchamiamy te efekty przy przewijaniu, gdy element wjeżdża na ekran. Takie szczegóły odróżniają przemyślaną [responsywność](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/) od zwężonego układu.

## Kiedy ruch przeszkadza

Ruch dla ruchu męczy. Animacja, która trwa sekundę, za dziesiątym razem irytuje. Część osób ma też w systemie włączone ograniczenie ruchu, bo przesuwające się elementy wywołują u nich zawroty głowy albo mdłości. Przeglądarka przekazuje to ustawienie stronie, a ta może pokazać spokojniejszą wersję, bez zbędnych animacji.

## W naszych projektach

-   ### [Pokket](https://fluostudio.pl/projekty/pokket/)

    Na pokket.pl tło hero zmienia kolor ze smakiem, a w siatce produktów tło kafla pod kursorem ożywa i saszetki nakładają się na siebie.

## Zobacz też

-   [Strony www UI UI (user interface) to interfejs, czyli wszystko, co człowiek widzi na ekranie i czego używa: przyciski, pola formularzy, menu, ikony, typografia i kolory.](https://fluostudio.pl/baza-wiedzy/slownik/ui/)
-   [Animacja i wideo Motion design Motion design to projektowanie ruchu w grafice. Animowane logo, ikony, napisy, wykresy i przejścia pokazują charakter marki i tłumaczą rzeczy szybciej niż statyczny obraz.](https://fluostudio.pl/baza-wiedzy/slownik/motion-design/)
-   [Animacja i wideo Easing Easing to sposób, w jaki animowany element przyspiesza i zwalnia. Dzięki niemu ruch nie jest mechanicznie równy, tylko rusza i hamuje jak prawdziwy przedmiot.](https://fluostudio.pl/baza-wiedzy/slownik/easing/)
-   [Animacja i wideo Lottie Lottie to format animacji wektorowych zapisanych w pliku JSON, najczęściej eksportowanych z After Effects. Na stronach i w aplikacjach zwykle waży mniej niż film i jest ostry w każdym rozmiarze.](https://fluostudio.pl/baza-wiedzy/slownik/lottie/)
-   [Strony www Responsywność Responsywność to zdolność strony do dopasowania układu do szerokości ekranu. Ten sam serwis na komputerze, tablecie i telefonie pokazuje te same treści, ułożone tak, żeby dało się je wygodnie czytać i obsługiwać.](https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/)
-   [Animacja i wideo Motion guidelines Motion guidelines to zasady ruchu marki: tempo, krzywe przyspieszania i hamowania, wejścia i przejścia, animacja logo i zakazy. Dzięki nim spot, post i aplikacja ruszają się tak samo.](https://fluostudio.pl/baza-wiedzy/slownik/motion-guidelines/)
-   [Strony www UX UX (user experience) to doświadczenie człowieka, który korzysta ze strony, aplikacji albo usługi: czy szybko znajduje to, czego szuka, rozumie, co ma zrobić, i kończy sprawę bez frustracji.](https://fluostudio.pl/baza-wiedzy/slownik/ux/)

Hasło pojawia się też w: [Front-end](https://fluostudio.pl/baza-wiedzy/slownik/front-end/), [Klatka kluczowa](https://fluostudio.pl/baza-wiedzy/slownik/klatka-kluczowa/), [Prototyp](https://fluostudio.pl/baza-wiedzy/slownik/prototyp/)

## Strona ma sprzedawać, działać szybko i dawać się łatwo edytować. Porozmawiajmy o Twojej.

Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań.

[Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)