E-commerce patří k nejkonkurenčnějším oblastem na webu. Váš produkt může být vynikající, ceny férové a doručení rychlé, ale pokud rozhraní Vašeho webu vytváří tření, zákazníci odejdou ke konkurenci, která jim nakupování usnadní. Vzory uživatelského rozhraní jsou stavební kameny plynulého nákupního zážitku a výběr těch správných může mít přímý, měřitelný dopad na tržby. V Kosmowebu jsme vytvořili a optimalizovali e-shopové weby pro značky po celé České republice i za jejími hranicemi a pět vzorů níže jsou ty, které opakovaně přinášejí nejsilnější výsledky.
Než se ponoříme do konkrétností, stojí za zmínku, že UI vzory nejsou univerzální. Vzor, který skvěle funguje pro módní e-shop s tisíci položek, může být nevhodný pro specializovaný obchod prodávající dvacet řemeslných výrobků. Kontext rozhoduje a testování by mělo vždy ověřit Vaše volby. Přesto se těchto pět vzorů osvědčilo v dostatečném počtu projektů na to, abychom je považovali za nezbytné výchozí body pro jakýkoli e-commerce design.
Přilepená navigace
Přilepená navigace udržuje hlavní menu Vašeho webu viditelné při scrollování. V e-commerce, kde produktové stránky mohou být dlouhé a stránky kategorií ještě delší, ztráta přístupu k navigaci nutí uživatele scrollovat celou cestu nahoru, aby mohli vyhledávat, procházet jinou kategorii nebo zkontrolovat košík. Toto přerušení narušuje plynulost nakupování.
Přilepenou navigaci jsme implementovali pro prodejce bytového vybavení, jehož produktové stránky obsahovaly rozsáhlé popisy, více galérií obrázků, fotografie zákazníků a sekce souvisejících produktů. Na mobilu stránky běžně přesahovaly výšku deseti obrazovek. Před zavedením přilepené navigace museli uživatelé, kteří se proscrollovali hluboko do produktové stránky a rozhodli se porovnat jiný výrobek, scrollovat zpět nahoru nebo použít tlačítko Zpět v prohlížeči. Analytika ukázala, že značný počet relací končil právě při těchto návratech nahoru.
Po přidání úzké přilepené lišty obsahující logo, vyhledávací pole, menu kategorií a ikonu košíku se průměrný počet prohlížených produktů na relaci zvýšil o 16 %. Přilepená lišta nám také poskytla přirozené místo pro zobrazení tlačítka „Zpět nahoru“ a trvalého počtu položek v košíku, což posilovalo nákupní momentum.
Klíčem k efektivní přilepené navigaci je umírněnost. Přilepený prvek by měl být dostatečně kompaktní, aby nezabíral příliš prostoru na obrazovce, zejména na mobilu. Obvykle snižujeme výšku hlavičky o 30–40 % při přechodu ze statické na přilepenou a skrýváme nepodstatné prvky, přičemž ponecháváme pouze hlavní navigační nástroje.
Nekonečné scrollování
Nekonečné scrollování neboli postupné načítání obsahu, jakmile uživatel dorazí na konec stránky, může být silným nástrojem zapojení pro stránky s výpisem produktů. Pokud je implementováno správně, eliminuje tření z klikání na „Další stránku“ a udržuje uživatele v nepřetržitém proudu procházení, který připomíná scrollování sociálních sítí.
Nekonečné scrollování má však důležité výhrady. Může frustrovat uživatele, kteří chtějí dosáhnout patičky webu (kde se nacházejí kontaktní údaje, podmínky a další odkazy). Může ztížit uživatelům uložení záložky nebo sdílení konkrétní pozice ve výpisu. A může způsobit problémy s výkonem, pokud se do DOM načtou stovky produktových karet bez čištění.
Náš preferovaný přístup je hybridní model: automaticky načíst první tři stránky při scrollování uživatele a poté zobrazit tlačítko „Načíst další“. Uživatelé tak získají plynulý počáteční zážitek z procházení a zároveň si zachovají pocit kontroly. Implementujeme také aktualizace URL při načítání nových dávek, takže tlačítko Zpět v prohlížeči vrátí uživatele na přibližnou pozici místo odeslání na začátek.
Pro módní e-shopového klienta s více než 2 000 produkty v kategorii tento hybridní přístup zvýšil průměrnou hloubku procházení z 18 produktů (první stránka) na 54 produktů na relaci. Tlačítko „Načíst další“ poskytlo uživatelům přirozený bod k pozastavení, kde mnozí aplikovali filtry, které na začátku přeskočili, což vedlo k cílenějšímu procházení a vyššímu poměru přidání do košíku.
Personalizovaná doporučení
Doporučování produktů není nic nového, ale sofistikovanost doporučovacích systémů se výrazně zvýšila. Kromě základního přístupu „zákazníci, kteří koupili toto, koupili i“ moderní doporučovací systémy dokáží zohlednit historii prohlížení, čas strávený v konkrétních kategoriích, sezónní trendy a dokonce geografickou polohu uživatele.
Umístění doporučení je stejně důležité jako jejich relevance. Bloky doporučení umisťujeme do tří strategických míst: na stránky produktů („Mohlo by se Vám líbit“), do nákupního košíku („Doplňte svou objednávku o“) a na domovskou stránku pro vracející se návštěvníky („Vybráno pro Vás na základě nedávných návštěv“). Každé umístění slouží jinému účelu. Doporučení na produktové stránce podněcují prozkoumávání. Doporučení v košíku zvyšují hodnotu objednávky. Doporučení na domovské stránce přivádějí vracející se uživatele přímo k relevantnímu obsahu.
Pro českého prodejce outdoorového vybavení jsme implementovali doporučovací systém kombinující historii nákupů s regionálními meteorologickými daty. Když teploty v oblasti uživatele klesly, systém nabídl zimní vybavení, které prohlíželi, ale nekoupili. Tato kontextová relevance způsobila, že doporučení působila nápomocně, nikoli vtíravě. Bloky doporučených produktů vygenerovaly 21 % celkových tržeb webu v prvním čtvrtletí po nasazení.
Slovo varování: špatně nastavená doporučení mohou mít opačný účinek. Ukazovat uživateli produkty, které již koupil, nebo doporučovat položky zcela mimo jeho prokázané zájmy, působí necitlivě. Investujte do logiky za Vašimi doporučeními, nejen do UI, které je zobrazuje.
Zjednodušený platební proces
Pokladna je místo, kde dochází k nejzávažnějším odchodům. Uživatel našel produkt, rozhodl se, že ho chce, přidal ho do košíku a zahájil nákupní proces. Ztratit ho v této fázi znamená ztratit téměř dokončený prodej. Každé zbytečné pole, matoucí popisek nebo neočekávaný náklad, který se během platby objeví, je potenciální bod odchodu.
Řídíme se souborem klíčových principů pro design pokladny. Minimalizovat počet polí na naprosté minimum. Používat automatické doplňování adresy ke snížení psaní. Zobrazit všechny náklady, včetně dopravy a daní, před dosažením kroku s platbou. Výrazně nabízet nákup bez registrace, protože vynucování vytvoření účtu v této fázi je jedním z nejspolehlivějších způsobů, jak přijít o zákazníka. A nabídnout více platebních možností, protože uživatel preferující PayPal, který vidí pouze pole pro kreditní kartu, může nákup raději opustit.
Pro specializovanou službu doručování potravin jsme přepracovali pokladní proces, který byl vytvořen vývojáři bez UX vedení. Původní průběh měl samostatnou stránku pro dodací adresu, samostatnou stránku pro fakturační adresu (přestože byly v 92 % objednávek shodné), stránku pro preference doručení a platební stránku. Sloučili jsme vše do jediné scrollovatelné stránky s chytrými sekcemi, které se rozbalovaly a sbalovaly podle vstupu uživatele. Sekce fakturační adresy měla výchozí nastavení „stejná jako dodací“ a rozbalila se pouze při odškrtnutí. Preference doručení byly prezentovány jako jednoduché radio buttony místo samostatné stránky.
Zjednodušená pokladna snížila průměrnou dobu dokončení ze čtyř minut na méně než dvě a celková míra dokončení objednávek se zlepšila o 26 %. Přístup na jedné stránce také usnadnil implementaci validace v reálném čase, takže uživatelé zachytili chyby okamžitě místo toho, aby je objevili po kliknutí na „Další“.
Uživatelské recenze a hodnocení
Sociální důkaz je jedním z nejsilnějších faktorů konverze v e-commerce. Když zákazníci vidí, že skuteční lidé produkt zakoupili a byli s ním spokojeni, jejich důvěra v nákup dramaticky roste. Recenze a hodnocení slouží jako signál důvěry, který samotný marketingový text nedokáže nahradit.
Design Vašeho recenzního systému ovlivňuje jeho účinnost. Hvězdičkové hodnocení by mělo být viditelné na první pohled, a to jak na stránkách výpisu, tak v horní části stránek produktů. Text recenzí by měl být snadno skenovatelný s možností filtrovat podle hodnocení, řadit podle data či užitečnosti a vyhledávat konkrétní klíčová slova. Zahrnutí údajů o recenzentovi, jako je ověření nákupu, fotografie a doba používání, zvyšuje důvěryhodnost.
Pro prodejce spotřební elektroniky jsme vytvořili recenzní systém se strukturovanými poli pro výhody a nevýhody vedle volného textu. Tento formát učinil jednotlivé recenze užitečnějšími a umožnil nám agregovat častá pro a proti do souhrnného bloku v horní části sekce recenzí. Zákazníci mohli na první pohled vidět, že například 78 % recenzentů chválí výdrž baterie, zatímco 15 % zmiňuje, že zařízení je těžší, než čekali. Tento strukturovaný souhrn snížil čas strávený čtením jednotlivých recenzí přibližně o 30 % a zároveň zvýšil důvěru zákazníků v nákupní rozhodování.
Podpora psaní recenzí je stejně důležitá. Dobře načasovaný follow-up e-mail zaslaný sedm až deset dní po doručení, kdy zákazník měl čas produkt používat, v naší zkušenosti soustavně generuje nejvyšší míru odezvy. Přiložení přímého odkazu na formulář recenze, předvyplněného názvem produktu a číslem objednávky, odstraňuje z procesu tření. U elektronického prodejce tento automatizovaný systém požadavků na recenze zvýšil počet odeslaných recenzí měsíčně z přibližně 45 na více než 200 a vytvořil tak rozsáhlou knihovnu sociálních důkazů prospěšnou každému dalšímu zákazníkovi.
Těchto pět UI vzorů — přilepená navigace, chytré scrollování, personalizovaná doporučení, zjednodušená pokladna a propracované recenze — tvoří základ, ke kterému se v Kosmowebu vracíme prakticky u každého e-commerce projektu. Řeší základní výzvy online obchodu: udržet uživatele v zájmu, pomoci jim najít to, co hledají, budovat jejich důvěru a odstraňovat bariéry nákupu. Pokud jsou implementovány promyšleně a důkladně testovány, patří k investicím s nejvyšší návratností, které může e-commerce podnik učinit pro svůj uživatelský zážitek.