Mikrointerakce
Aktualizováno 22. 9. 2026
Mikrointerakce je malý, ucelený okamžik rozhraní, který řeší jeden úkol — třeba potvrzení přidání do košíku nebo kontrolu pole formuláře. Dává zákazníkovi zpětnou vazbu, že akce proběhla.
Rychlá fakta
- Typ
- designový pojem a technika (UX, motion design)
- Cena
- zdarma — jde o přístup k návrhu; náklad tvoří návrh a implementace
- Původ pojmu
- Dan Saffer, kniha Microinteractions: Designing with Details (O'Reilly, 2013)
- Časová náročnost zavedení
- řádově hodiny až dny na jednu mikrointerakci, týdny pro sjednocení v celém e-shopu
- Náročnost zavedení
- nízká až střední — technicky jednoduché, náročnější je konzistence a výkon
Co to je
Mikrointerakce jsou drobnosti, kterých si zákazník vědomě nevšimne, dokud nechybí. Číslo u košíku, které po přidání produktu poskočí. Zelená fajfka u správně vyplněného PSČ. Srdíčko, které se po kliknutí vyplní. Tlačítko „Odeslat objednávku", které při zpracování ukáže, že se něco děje, a nedovolí druhé kliknutí.
Pojem zpopularizoval designér Dan Saffer v knize *Microinteractions: Designing with Details* (O'Reilly, 2013). Jeho definice je jednoduchá: mikrointerakce je produktový okamžik zaměřený na jediný úkol.
Jak to funguje
Saffer popisuje mikrointerakci ve čtyřech částech:
| Část | Co to je | Příklad: přidání do košíku |
|---|---|---|
| Spouštěč (trigger) | co interakci spustí — uživatel nebo systém | kliknutí na „Do košíku" |
| Pravidla (rules) | co se smí a nesmí stát | nelze přidat víc kusů, než je skladem |
| Zpětná vazba (feedback) | jak systém dá vědět, co se stalo | tlačítko se změní na „Přidáno", číslo u košíku se zvýší |
| Smyčky a režimy (loops and modes) | co se děje v čase nebo v jiném stavu | po několika sekundách se tlačítko vrátí do výchozího stavu |
Když tuhle strukturu projdete u každého klíčového kroku nákupu, snadno najdete místa, kde zákazník nedostává žádnou odezvu a klikne podruhé, nebo odejde.
Typická místa v e-shopu: přidání do košíku, změna množství, výběr varianty (velikost není skladem), validace formuláře v checkoutu, použití slevového kódu, přidání do oblíbených, načítání dalších produktů v kategorii.
Pohyb a přístupnost
Animace některým lidem vadí. U poruch rovnovážného (vestibulárního) systému může výrazný pohyb, zvětšování nebo posouvání velkých ploch vyvolat nevolnost. Operační systémy proto mají nastavení „omezit pohyb" a web ho zjistí přes CSS dotaz prefers-reduced-motion. Když ho uživatel má zapnuté, animace vypněte nebo nahraďte jednoduchou změnou barvy či průhlednosti. Souvisí to s kritériem WCAG 2.3.3 Animation from Interactions a obecně s přístupností.
Mikrointerakce navíc nesmí být jediným nositelem informace. Chybová hláška musí být i v textu, ne jen v zatřesení pole.
Pohyb a výkon
Animace mohou zhoršit plynulost webu. Doporučení z web.dev: animujte hlavně vlastnosti transform a opacity, které prohlížeč zvládne mimo hlavní vlákno. Animace width, height, top nebo left nutí prohlížeč přepočítat rozvržení stránky a zatěžují hlavní vlákno, na kterém běží i zpracování kliknutí. Těžké JavaScriptové animační knihovny spuštěné při interakci pak mohou zhoršit odezvu měřenou metrikou INP z Core Web Vitals. Samotná mikrointerakce INP nezhorší — záleží na tom, jak je naprogramovaná.
Výhody a limity
Výhody
- Zákazník ví, že akce proběhla — méně dvojích kliknutí a nejistoty.
- Chyby ve formuláři se opraví hned, ne až po odeslání.
- Rozhraní působí dotaženě a důvěryhodně.
Limity
- Přebytek animací zdržuje a rozptyluje, hlavně na mobilu.
- Špatná implementace zatěžuje výkon.
- Bez pravidel v design systému každá stránka animuje jinak.
Checklist
- Každá akce v nákupní cestě má viditelnou odezvu do zlomku sekundy.
- Délka běžných přechodů je krátká a konzistentní (definovaná tokenem).
- Animují se jen
transformaopacity. - Při
prefers-reduced-motionse pohyb vypne nebo zjednoduší. - Informace je vždy i v textu.
Jak to řešíme v Převeďshopu
Při UX auditu procházíme nákupní cestu a hledáme místa bez zpětné vazby. Při redesignu navrhujeme mikrointerakce jako součást komponent, s pravidly pro délku a průběh animace. Na výkon dohlíží Flux, AI spolupracovník našeho týmu Design a frontend zaměřený na Core Web Vitals, takže animace kontrolujeme i z pohledu odezvy webu.