Onboarding nového návštěvníka e-shopu: UX prvních 30 sekund

Člověk, který váš e-shop vidí poprvé, o vás nic neví. Přišel z vyhledávání, reklamy, srovnávače nebo odkazu od známého. Nemá k vám důvěru ani návyk a nezná vaši navigaci. A rozhoduje se rychle. V prvních vteřinách si odpoví, jestli tu zůstane.

Tomu, co se v tu chvíli děje, říkáme onboarding návštěvníka. Nejde o registraci ani o průvodce aplikací. Jde o to, co musí nový návštěvník pochopit, aby pokračoval dál: kde je, jestli je to bezpečné a kudy k tomu, co hledá. A taky o to, co mu v tom brání.

Co ukazují výzkumy o prvních vteřinách

Nielsen Norman Group v analýze doby strávené na stránkách uvádí, že uživatelé často odcházejí během 10 až 20 sekund. Pravděpodobnost odchodu je nejvyšší hned na začátku, protože lidé jsou vůči nové stránce skeptičtí. Když ale návštěvník vydrží zhruba 30 sekund, odcházejí lidé už mnohem pomaleji. Doporučení NN/g: hodnotu stránky je potřeba sdělit do 10 sekund.

Ještě rychlejší je vizuální dojem. Studie Lindgaard a kol. z roku 2006 publikovaná v časopise Behaviour & Information Technology ukázala, že lidé hodnotí vizuální přitažlivost webu už po 50 milisekundách expozice a jejich hodnocení se shoduje s hodnocením po delší době. Čistý, konzistentní vzhled tedy není kosmetika. Je to první filtr, přes který návštěvník web posuzuje.

Prvních 30 sekund si můžete rozdělit na tři fáze:

0–3 sekundy: rychlost a stabilita

Než návštěvník cokoli přečte, musí se stránka načíst. Google a DoubleClick v roce 2016 publikovali zjištění, že 53 % návštěv mobilních webů skončí, pokud se stránka načítá déle než 3 sekundy. Číslo je staršího data a týká se webů obecně, ale směr platí dál: pomalé načtení odhání lidi dřív, než vůbec uvidí nabídku.

Dnes rychlost měříme přes Core Web Vitals. Google považuje za dobrou hodnotu LCP (vykreslení největšího prvku) do 2,5 sekundy a CLS (posun layoutu) do 0,1, obojí u 75 % návštěv. Pro první dojem je důležitá hlavně stabilita. Když se po vteřině odsune text kvůli banneru, cookie liště nebo widgetu recenzí a návštěvník klikne vedle, působí web nespolehlivě.

Co kontrolovat:

• Hlavní obrázek ve správné velikosti a moderním formátu, bez odloženého načítání.
• Rezervované místo pro bannery, lišty a widgety, aby nic neposkakovalo.
• Skripty třetích stran: chat, recenze, remarketing. Každý zpomaluje a ne všechny musí běžet hned.
• Měření na skutečném mobilu, ne jen na rychlém počítači v kanceláři.

Podrobně v článku Core Web Vitals pro e-shopy.

3–10 sekund: kde jsem a co tu prodávají

V této fázi návštěvník hledá potvrzení, že je na správném místě. Pomáhá mu:

• Srozumitelné sdělení. U homepage, co prodáváte. U kategorie a produktu jasný nadpis, fotka a cena.
• Známé rozložení. Logo vlevo nahoře, vyhledávání, košík vpravo. Nový návštěvník nechce objevovat, jak web ovládat.
• Kontinuita s tím, odkud přišel. Když klikl na reklamu na zimní boty, má vidět zimní boty, ne obecnou homepage.

Noví návštěvníci z vyhledávání, reklam a srovnávačů přitom často nepřicházejí přes homepage, ale rovnou na kategorii nebo produkt. Onboarding proto musí fungovat na každé vstupní stránce. Hlavička s výhodami a kontaktem, drobečková navigace a jasná cena na detailu jsou pro nového člověka stejně důležité jako hero na homepage. Co má dělat samotná homepage, rozebíráme v článku Homepage UX.

Cookie lišta: první překážka, kterou vidí každý

Každý nový návštěvník začíná rozhodnutím o cookies. Od 1. 1. 2022 platí v Česku podle novely zákona o elektronických komunikacích pro cookies, které nejsou technicky nezbytné, princip opt-in. Analytické a marketingové cookies tedy potřebují předchozí souhlas. Technicky nezbytné cookies souhlas nevyžadují.

Evropský sbor pro ochranu osobních údajů (EDPB) v roce 2023 zveřejnil zprávu pracovní skupiny k cookie lištám. Jako problematické v ní dozorové úřady označily například chybějící možnost odmítnout na první vrstvě lišty, předzaškrtnutá políčka nebo klamavý design, který odmítnutí ztěžuje.

Z pohledu UX i práva proto doporučujeme:

• Souhlasit a odmítnout stejně snadno, ideálně dvě rovnocenná tlačítka na první vrstvě.
• Lištu, která nezakryje celou stránku. Návštěvník má vidět, kde je, i než rozhodne.
• Krátký a srozumitelný text, podrobnosti až v nastavení.
• Lištu, která neposouvá layout a na mobilu nezabírá většinu obrazovky.

Víc v článku Cookie lišty a consent management.

Pop-upy, chat a další vrstvy

Typický scénář: návštěvník přijde z vyhledávání na mobilu, zavře cookie lištu, hned vyskočí okno se slevou za newsletter, v rohu se rozbalí chat a dole se objeví lišta s akcí. Za prvních deset vteřin musí zavřít tři věci a produkt stále neviděl.

Google ve své dokumentaci k vyhledávání uvádí, že okna, která zakrývají hlavní obsah hned po příchodu z výsledků vyhledávání nebo během prohlížení, zhoršují uživatelský dojem. Stránky s takovými prvky nemusí být ve výsledcích na mobilu tak vysoko. Výjimkou jsou právně nutné prvky, jako je cookie lišta nebo ověření věku, a přiměřeně malé bannery.

Praktická pravidla:

• Pop-up se slevou nezobrazovat hned. Až po určité době, po scrollu nebo při náznaku odchodu. Ne na mobilu přes celou obrazovku.
• Jedna vrstva najednou. Nejdřív cookie lišta, pak nic dalšího, dokud návštěvník nezačne web používat.
• Chat jako malá ikona, ne automaticky otevřené okno.
• Snadné zavření: velký křížek, zavření klávesou Escape, návrat fokusu na stránku. Jde o základ přístupnosti.

Jak sbírat kontakty méně rušivě, popisujeme v článku Newsletter growth.

10–30 sekund: důvěra a cesta dál

Když návštěvník zůstane, začne zjišťovat, jestli tu může bezpečně nakoupit. Nový e-shop nezná, a proto hledá signály:

• Hodnocení obchodu z ověřitelného zdroje, s počtem hodnocení.
• Kontakt a identita firmy: telefon, e-mail, adresa, IČO v patičce.
• Doprava a vrácení srozumitelně a na viditelném místě, ne až v obchodních podmínkách.
• Známé platební metody.
• Funkční vyhledávání a navigace, které reagují hned. Drobné mikrointerakce, třeba našeptávač nebo potvrzení přidání do košíku, dávají jistotu, že web funguje.

Pozor na přehánění. Deset odznaků, odpočítávadlo a „posledních 5 kusů" u každého produktu působí na nového návštěvníka spíš podezřele. Nepravdivé tvrzení, že je zboží dostupné jen velmi krátce, navíc zákon o ochraně spotřebitele řadí mezi klamavé obchodní praktiky.

Jak na to prakticky: test prvních 30 sekund

Postup, který zvládnete za odpoledne:

1. Vyberte tři nejčastější vstupní stránky z analytiky, typicky homepage, hlavní kategorii a nejprodávanější produkt.
2. Otevřete je v anonymním okně na mobilu přes mobilní data, bez uložených cookies.
3. Zapněte stopky a zapisujte: kdy se objeví obsah, kdy cookie lišta, co dalšího vyskočí, co musíte zavřít.
4. Po 10 sekundách si odpovězte: vím, co tu prodávají? Vidím cenu, dopravu, kontakt?
5. Změřte Core Web Vitals v nástroji PageSpeed Insights a porovnejte s hranicemi 2,5 s pro LCP a 0,1 pro CLS.
6. Zkontrolujte cookie lištu: jsou souhlas a odmítnutí stejně snadné?
7. Požádejte tři lidi, kteří e-shop neznají, ať po 10 sekundách řeknou, co prodáváte a jestli by nakoupili.

Výsledek vám ukáže, kde nový návštěvník ztrácí trpělivost. Pokud chcete důkladnější pohled, UX audit máme hotový do 10 dnů a vstupní stránky v něm procházíme z pohledu nového i vracejícího se zákazníka. Úpravy, u kterých není jasné, jestli pomohou, třeba načasování pop-upu nebo podobu cookie lišty, ověřujeme A/B testy v rámci CRO.