Zákaznice listuje na telefonu e-shopem s dekoracemi a klepne na tlačítko do košíku. Nic se nestane. Tedy, něco se stane, jen to není vidět: produkt se do košíku přidal, ale stránka to nijak nedala najevo. Klepne znovu. Teď má v košíku dva kusy. Když to zjistí v objednávce, je naštvaná a odejde.
O pár dní později na jiném e-shopu klepne na stejné tlačítko a tlačítko se na okamžik změní na „Přidáno“, ikona košíku nahoře ukáže číslo 1 a zobrazí se malé okno s produktem a tlačítkem „Pokračovat do košíku“. Žádná sláva, jen jasná odpověď. Nakoupí.
Rozdíl mezi oběma e-shopy nebyl v cenách ani v sortimentu. Byl v drobnostech, kterým se říká mikrointerakce.
Co jsou mikrointerakce a proč pomáhají nakupovat
Mikrointerakce jsou drobné reakce webu na to, co zákazník udělá: potvrzení přidání do košíku, zvýraznění vybrané varianty, ukazatel postupu v objednávce, hláška u pole s chybou. Nejsou to efekty pro ozdobu. Jejich úkolem je dát zákazníkovi jistotu, že se jeho akce povedla a co ho čeká dál. Když chybí, zákazník váhá, klepe dvakrát nebo odchází.
Postup je ve třech krocích: projít nákup na telefonu a zapsat si každé místo, kde si nejste jistí, jestli se akce povedla, doplnit tam jasnou a rychlou odezvu a zkontrolovat, že žádná animace nezpomaluje web ani neobtěžuje.
Proč na drobnostech záleží
Na počítači zákazník vidí víc a myší se trefí přesně. Na telefonu je obrazovka malá, prst nepřesný a pozornost roztříštěná. Každá nejistota, jestli se něco stalo, stojí trochu důvěry. Když se nejistoty sčítají, nákup se zadrhne.
Dobré mikrointerakce odpovídají na tři otázky:
- povedlo se to? například přidání do košíku nebo výběr varianty
- co se teď děje? například načítání nebo zpracování platby
- co mám udělat dál? například pokračovat do košíku nebo opravit pole
Kde mikrointerakce na e-shopu nejvíc pomáhají
Přidání do košíku
Nejdůležitější okamžik. Zákazník musí hned vidět, že se produkt přidal. Pomůže změna tlačítka, číslo u ikony košíku nebo malé okno s produktem a možností pokračovat do košíku nebo nakupovat dál. Na Shoptetu se podoba potvrzení po přidání do košíku liší podle šablony a nastavení. Vyzkoušejte si ji na telefonu a ověřte, že je jasná.
Výběr varianty
Když zákazník vybere velikost nebo barvu, vybraná možnost musí být jasně zvýrazněná. Pokud je varianta nedostupná, zákazník by to měl vidět hned při výběru, ne až po klepnutí na tlačítko. Pomůže i změna fotky podle vybrané barvy.
Dostupnost
Informace „posledních pár kusů“ nebo „skladem, odesíláme zítra“ u vybrané varianty pomáhá rozhodnout se. Musí ale odpovídat skutečnosti. Falešný nedostatek zboží zákazníci poznají a ztratíte důvěru.
Postup v objednávce
Ukazatel, v jakém kroku objednávky zákazník je a kolik kroků zbývá, snižuje nejistotu. Zákazník ví, že ho nečeká nekonečný formulář.
Chyby ve formuláři
Když zákazník vyplní pole špatně, chybová hláška musí být přímo u pole, srozumitelná a nesmí smazat už vyplněné údaje. „Zadejte PSČ ve tvaru 110 00“ pomůže víc než „Neplatný údaj“.
Načítání
Když se něco načítá, třeba filtrování v kategorii nebo zpracování platby, zákazník potřebuje vidět, že se něco děje. Jinak klepe znovu nebo odchází.
Košík
V košíku zákazník mění počet kusů, odebírá zboží a zadává slevový kód. Každá z těchto akcí potřebuje jasnou odezvu: změní se cena, zmizí odebraný produkt, u kódu se objeví potvrzení nebo srozumitelný důvod, proč nefunguje. Když se cena po změně počtu kusů nepřepočítá hned, zákazník neví, jestli změna proběhla.
Po dokončení objednávky
Poslední mikrointerakce je stránka s poděkováním a potvrzující e-mail. Zákazník potřebuje vidět, že objednávka prošla, jaké má číslo, co objednal, kolik zaplatil a kdy zboží dorazí. Jasné potvrzení snižuje počet dotazů „prošla mi objednávka?“ a zvyšuje šanci, že se zákazník vrátí.
Příklad: zápis ze zkušebního nákupu
Takhle může vypadat zápis majitele, který si prošel nákup na telefonu:
- výběr velikosti: vybraná velikost není zvýrazněná, nevím, jestli jsem ji vybral
- přidání do košíku: tlačítko nic neukáže, číslo u košíku se změní až po obnovení stránky
- košík: po změně počtu kusů se cena přepočítá až po několika vteřinách bez jakéhokoli ukazatele
- objednávka: špatně zadaný telefon smaže celý formulář
- poděkování: chybí informace, kdy zboží dorazí
Žádná z těchto věcí není velká chyba. Dohromady ale z nákupu na telefonu dělají sérii nejistot. Seznam je zároveň hotové zadání pro kodéra a každý bod se dá ověřit.
Mikrointerakce, které škodí
Ne každý efekt pomáhá. Některé nákup spíš brzdí:
- dlouhé animace, na které musí zákazník čekat
- vyskakovací okna, která překrývají obsah hned po příchodu
- blikající a třesoucí se prvky, které rozptylují
- falešná naléhavost, například odpočty, které se po obnovení stránky spustí znovu
- efekty, které zpomalí web na slabším telefonu
Dobrá mikrointerakce je rychlá, nenápadná a má jasný účel. Pokud nedokážete říct, na jakou otázku zákazníka odpovídá, pravděpodobně ji nepotřebujete.
Ohled na zákazníky, kterým pohyb vadí
Někteří lidé mají v telefonu zapnuté omezení pohybu, protože jim animace vadí. Dobře udělané efekty toto nastavení respektují a místo pohybu použijí jen změnu barvy. Pokud necháváte upravovat šablonu, zmiňte to kodérovi.
Jak mikrointerakce zkontrolovat na Shoptetu
1. Zkušební nákup na telefonu
Projděte celý nákup na vlastním telefonu: vyhledání produktu, výběr varianty, přidání do košíku, úprava košíku, výběr dopravy a platby, vyplnění údajů. U každého kroku si zapište, jestli bylo jasné, že se akce povedla.
2. Zkuste udělat chybu
Schválně vyplňte špatně PSČ, telefon nebo e-mail. Podívejte se, jak e-shop zareaguje. Je hláška srozumitelná? Zůstaly vyplněné údaje?
3. Zkontrolujte nedostupné varianty
Vyberte variantu, která není skladem. Je to vidět hned při výběru?
4. Projděte doplňky
Vyskakovací okna, odpočty a efekty často přidávají doplňky. Projděte si, které máte nainstalované, a u každého se zeptejte, jestli pomáhá, nebo jen ruší. Po odinstalaci nepotřebných zkontrolujte rychlost.
5. Úpravy řešte s kodérem
Pokud potvrzení po přidání do košíku nebo výběr variant ve vaší šabloně nefunguje dobře, řešte úpravu s kodérem šablony, případně hledejte doplněk v katalogu Shoptet Doplňky. Zadejte konkrétně, co má zákazník vidět a kdy.
Mikrointerakce a důvěra
Mikrointerakce nejsou jen o pohodlí. Když web reaguje předvídatelně a hned, působí spolehlivě. Zákazník si to nevysvětluje, jen má pocit, že e-shop „funguje“. Když naopak tlačítko nic neukáže, cena se přepočítá se zpožděním a chyba smaže formulář, zákazník si začne klást otázku, jestli se na tento e-shop dá spolehnout i s platbou a doručením.
U menších e-shopů, které zákazník nezná, je to obzvlášť důležité. Každý drobný signál spolehlivosti pomáhá vyvážit to, že značka není známá.
Kde začít, když nemáte kodéra po ruce
Mnoho věcí můžete zlepšit bez zásahu do šablony: zkrátit a zpřesnit texty chybových hlášek tam, kde je máte pod kontrolou, odinstalovat doplňky s rušivými efekty, doplnit do e-mailu s potvrzením objednávky informaci o termínu doručení a zkontrolovat, že informace o dostupnosti u produktů odpovídají skladu. Úpravy chování tlačítek a výběru variant si nechte na chvíli, kdy budete mít kodéra.
Co měřit
- poměr přidání do košíku na mobilu před úpravou a po ní
- počet objednávek s nechtěně zdvojenými kusy
- podíl zákazníků, kteří začnou objednávku, ale nedokončí ji
- rychlost produktové stránky po přidání nových efektů
Typické chyby
- Žádné potvrzení přidání do košíku. Zákazník klepe znovu nebo neví, co se stalo.
- Efekty pro efekty. Každá animace musí mít účel.
- Falešná naléhavost. Poškozuje důvěru, jakmile ji zákazník prokoukne.
- Obecné chybové hlášky. Zákazník neví, co opravit.
- Kontrola jen na počítači. Mikrointerakce se nejvíc projeví na telefonu.
Časté otázky
Co jsou mikrointerakce na e-shopu?
Drobné reakce webu na akce zákazníka, například potvrzení přidání do košíku, zvýraznění vybrané varianty, ukazatel postupu v objednávce nebo hláška u chybně vyplněného pole.
Zvyšují mikrointerakce prodeje?
Ty, které zákazníkovi dávají jistotu, že se akce povedla, a ukazují, co dál, pomáhají. Efekty bez účelu nebo falešná naléhavost spíš škodí.
Jak zjistím, jestli můj e-shop dává zákazníkům dost zpětné vazby?
Projděte celý nákup na telefonu a u každého kroku si zapište, jestli bylo jasné, že se akce povedla. Zkuste také schválně udělat chybu ve formuláři.
Zpomalí animace e-shop?
Mohou, zejména na slabších telefonech. Po přidání jakýchkoli efektů nebo doplňků zkontrolujte rychlost stránky pro mobil.
Praktický checklist
- po přidání do košíku zákazník hned vidí potvrzení
- vybraná varianta je jasně zvýrazněná
- nedostupné varianty jsou vidět už při výběru
- informace o dostupnosti odpovídá skutečnosti
- v objednávce je vidět, v jakém kroku zákazník je
- chybové hlášky jsou u pole a srozumitelné
- vyplněné údaje se po chybě nesmažou
- při načítání je vidět, že se něco děje
- žádná animace nezdržuje ani nezpomaluje web
- nepotřebné doplňky s vyskakovacími okny a efekty jsem odinstaloval
Autor: Jan Bartoníček