Mikrointerakce a animace v ecommerce UX: kdy pomáhají a kdy škodí

Klepnete na „Do košíku“ a nic se nestane. Tedy stane, jen to není vidět: produkt se přidal, ale počítadlo v hlavičce je mimo obrazovku. Zákazník klepne znovu a v košíku má dva kusy. Přesně takové situace řeší mikrointerakce.

Na druhé straně stojí e-shopy, kde se při každém posunu stránky něco vysouvá, točí a bliká. Vypadá to moderně, ale zdržuje to, zpomaluje web a některým lidem dělá fyzicky špatně. V článku ukazujeme, kde animace pomáhají prodávat a kde je lepší je vypustit.

Co je mikrointerakce a k čemu slouží

Mikrointerakce je drobná, jednoúčelová odezva rozhraní. Nielsen Norman Group ji popisuje čtyřmi částmi:

• spouštěč (trigger): co ji spustí, třeba klepnutí na tlačítko nebo změna stavu skladu,
• pravidla (rules): co se má stát,
• zpětná vazba (feedback): jak se to uživatel dozví,
• smyčky a režimy (loops and modes): co se stane při opakování nebo za zvláštních podmínek.

V e-shopu mají mikrointerakce tři hlavní úkoly. Ukázat stav systému (přidáno, ukládám, odesláno). Předejít chybě (heslo je příliš krátké, PSČ nesedí). A až na třetím místě dotvořit charakter značky. Pořadí je důležité: animace, která jen zdobí, je první kandidát na smazání.

Kde mikrointerakce na e-shopu opravdu pomáhají

U všech platí stejné pravidlo: zpětná vazba musí přijít rychle a musí být jasná. Samotné zabarvení tlačítka nestačí, protože ho přehlédnou lidé s horším viděním. Kombinujte změnu barvy s textem nebo ikonou.

Jak dlouho mají animace trvat

Nielsen Norman Group ve svém doporučení k délce animací uvádí, že většina animací by měla trvat zhruba 100–500 ms podle složitosti a vzdálenosti, kterou prvek urazí:

• kolem 100 ms pro jednoduchou zpětnou vazbu, jako zaškrtnutí nebo přepínač. Působí okamžitě.
• 200–300 ms pro větší změny, třeba vysunutí panelu košíku nebo otevření modálního okna.
• nad 400–500 ms už animace obtěžuje. Tam patří jen výjimečně velké přesuny na velké obrazovce.

Pravidlo, které používáme i my: hledejte nejkratší čas, při kterém animace ještě nepůsobí trhaně. A animace nesmí blokovat další akci. Zákazník nemá čekat, až dojede efekt, aby mohl pokračovat.

U delšího čekání pomáhá správný indikátor. Nielsen Norman Group doporučuje kostru obsahu nebo animaci čekání u načítání kratšího než zhruba 10 sekund a u delších operací ukazatel průběhu, aby člověk věděl, kolik ještě zbývá.

Animace, které spíš škodí

Některé oblíbené efekty ve výsledku brzdí nákup:

• Automaticky rotující slider na homepage. Baymard Institute uvádí, že 46 % e-shopů s karuselem na homepage má problémy s použitelností. Většina lidí stejně neuvidí víc než první snímek. Pokud slider používáte, první snímek musí fungovat sám o sobě a rotace musí jít zastavit.
• Obsah, který se vysouvá až při scrollování. Text a produkty, které „přilétají“, zdržují a na slabších telefonech se trhají.
• Parallax a velké pohyby pozadí. U lidí s poruchou vestibulárního ústrojí mohou vyvolat nevolnost.
• Vyskakovací okna s animací hned po příchodu. Zákazník ještě nic neviděl a už musí něco zavírat.
• Dlouhé přechody mezi kroky pokladny. Každých pár set milisekund navíc se v pokladně sčítá.

Výkon: animace nesmí zpomalit web

Animace mají přímý dopad na Core Web Vitals. Dvě metriky jsou citlivé:

• CLS měří posouvání obsahu. Banner nebo lišta, která se vysune a odsune stránku, ho zhoršuje. Dobrá hodnota je podle web.dev do 0,1.
• INP měří odezvu na interakci. Těžký JavaScript spouštěný po kliknutí zdrží vykreslení odezvy. Dobrá hodnota je do 200 ms.

Technické pravidlo z web.dev: animujte hlavně vlastnosti transform a opacity. Prohlížeč je umí zpracovat na kompozičním vlákně, takže animace běží plynule, i když je hlavní vlákno zaneprázdněné. Animace šířky, výšky nebo pozice přes top a left nutí prohlížeč přepočítávat rozvržení stránky. Na výkonném počítači to nepoznáte, na levném telefonu ano.

Další praktická rada: místo těžkých knihoven pro animace stačí na většinu mikrointerakcí čisté CSS přechody. Ušetříte stahovaná data i práci prohlížeče.

Přístupnost: pohyb musí jít omezit

Část lidí má v systému zapnuté omezení pohybu. Web se to dozví přes CSS dotaz prefers-reduced-motion a měl by na to reagovat: velké pohyby vypnout nebo nahradit jemným prolnutím. Kritérium WCAG 2.3.3 Animation from Interactions, které to řeší, je na úrovni AAA. Běžně požadovaná úroveň je AA, ale vyhovět mu je snadné a doporučujeme to vždy.

Pro shodu s úrovní AA je ale nutné splnit kritérium 2.2.2 Pause, Stop, Hide, které patří do základní úrovně A. Obsah, který se sám pohybuje, bliká nebo roluje déle než 5 sekund, musí jít zastavit, pozastavit nebo skrýt. Typicky jde o rotující slidery a běžící textové pásy. Víc o pravidlech v hesle přístupnost a v článku Accessibility a WCAG pro e-shopy.

Mikrointerakce navíc nesmí být jediným nositelem informace. Potvrzení „Přidáno do košíku“ má být čitelné i pro čtečku obrazovky, například přes živou oblast (aria-live).

Jak na to prakticky: checklist mikrointerakcí

1. Dostane zákazník po přidání do košíku jasné potvrzení i na mobilu?
2. Mají tlačítka stav načítání, aby nešlo odeslat objednávku dvakrát?
3. Ukazují formuláře chybu hned u pole a potvrzují správně vyplněná pole?
4. Trvají animace většinou do 300 ms a neblokují další akci?
5. Animujete jen transform a opacity, ne rozměry a pozici?
6. Neposouvá žádná animace obsah stránky (CLS)?
7. Reaguje web na prefers-reduced-motion?
8. Jde zastavit každý automatický pohyb delší než 5 sekund?
9. Oznamuje se potvrzení i čtečce obrazovky?
10. Jsou mikrointerakce definované jako součást komponent v design systému, aby se chovaly všude stejně?

Kde mikrointerakce chybí nebo naopak přebývají, projdeme v rámci UX auditu, který máme hotový do 10 dnů. Jestli konkrétní úprava zvedne konverze, ověříme A/B testem v rámci CRO.