Když jsem v roce 2014 kreslil rozmístění prvků pro modelový e-shop s kávou, dávalo smysl popsat hlavičku, homepage, kategorii a detail produktu skoro jako stavebnici. Logo vlevo, košík vpravo, filtry tady, tlačítko koupit tam.
Základní očekávání lidí se moc nezměnila. Změnil se ale kontext: většina návrhu se musí obhájit na mobilu, nabídky bývají složitější a každý další skript soutěží o rychlost i pozornost. Proto už nedoporučuji slepě kopírovat rozmístění. Doporučuji projít úkoly zákazníka.
Hlavička má orientovat, ne předvést všechny možnosti
V hlavičce člověk hledá značku, navigaci, vyhledávání, účet a košík. Nemusí tam být všechno současně stejně hlasité. Priorita se mění podle sortimentu a fáze nákupu.
- Logo vede na úvodní stránku a má srozumitelný textový název.
- Vyhledávání je dobře dostupné tam, kde lidé znají produkt nebo parametr.
- Košík ukazuje stav a neztrácí se po vložení položky.
- Kontakt nebo pomoc je dohledatelná, ale nesoutěží s nákupem.
- Menu funguje dotykem, klávesnicí i bez přesného míření myší.
Obří vysouvací menu může být užitečné pro široký sortiment. U deseti kategorií bývá spíš efektní objížďkou. Google doporučuje, aby byly kategorie a produkty dosažitelné běžnými odkazy v navigaci; samotné vyhledávací pole nemusí robotům zpřístupnit celý katalog. Principy popisuje dokumentace k struktuře e-commerce webu.
Homepage má rozdělit provoz, ne odvyprávět celý katalog
Na úvodní stránce potřebuji rychle poznat, co obchod prodává, pro koho je a kudy pokračovat. Místo automatického slideru raději použiji jednu jasnou prioritu a několik stabilních vstupů do hlavních nákupních situací.
Nejprodávanější produkty mohou pomoct. Stejně tak sezónní kategorie, poradna nebo důvod, proč obchodu věřit. Každý blok ale musí mít práci. „Aby stránka nebyla prázdná“ není práce.
Kategorie pomáhá zmenšit výběr
Kategorie není SEO text nalepený nad mřížkou produktů. Je to rozhodovací nástroj. Název a krátký úvod vymezí nabídku, filtry zmenší výběr a řazení pomůže podle situace zákazníka.
- Filtry pojmenujte podle jazyka zákazníků, ne interních polí databáze.
- Po použití filtru ukažte aktivní volby a umožněte je snadno zrušit.
- Důležité podkategorie zpřístupněte jako odkazy, ne jen jako hodnotu ve skriptu.
- U produktu v seznamu ukažte údaje potřebné k porovnání; zbytek patří do detailu.
- Prázdný výsledek má nabídnout cestu zpět, ne slepou uličku.
Drobečková navigace pomáhá lidem pochopit polohu v katalogu a může pomoci vyhledávači porozumět hierarchii. Pokud používáte strukturovaná data, držte se aktuální dokumentace Google k breadcrumbům.
Detail produktu musí odpovědět před tlačítkem i po něm
Viditelné tlačítko do košíku je základ, ne celý detail. Před rozhodnutím člověk potřebuje název, cenu, variantu, dostupnost, dopravu, vrácení, fotografie a informace odpovídající riziku nákupu.
U kávy rozhoduje původ, chuť, pražení, gramáž a způsob přípravy. U vrtačky budou důležitější parametry, kompatibilita a servis. Univerzální pořadí neexistuje. Existuje univerzální otázka: co potřebuje zákazník vědět, aby koupil správnou variantu a později ji nevrátil?
Recenze a zkušenosti mají být věrohodné a vztahovat se ke konkrétnímu produktu. Doporučené zboží má doplnit volbu, ne odvést člověka od téměř dokončeného nákupu. Sociální tlačítko na detailu produktu bych stále nepovažoval za prioritu. Už jsme snad přežili dobu, kdy byl like button odpovědí na všechno.
Košík a pokladna mají odstranit překvapení
V košíku musí jít upravit množství, varianta i odstranění položky. Celkovou cenu, dopravu a termín doručení ukazuji co nejdřív, ne až po třetím kroku a registraci.
Nákup bez účtu je často rozumný výchozí stav. Pokud účet přináší skutečný užitek, lze jej nabídnout po objednávce. Formulář má používat správné popisky, automatické doplňování a chybové zprávy, které řeknou, co opravit. Dotykové cíle musí být dostatečně velké; aktuální kritérium popisuje WCAG 2.2 v bodu Target Size.
Měřte úkoly, ne barvu tlačítka
A/B test může pomoci, když má firma dost provozu, jednu hypotézu a umí určit rozhodující metriku. Týdenní střídání bannerů bez dostatečného vzorku je pískoviště. Jen z něj nevznikne spolehlivý závěr.
Sleduji použití hledání a filtrů, přidání do košíku, chyby formuláře, opuštění jednotlivých kroků, vrácení zboží a dotazy na podporu. Čísla doplňuji pozorováním lidí a jejich otázkami. Analytika ukáže kde. Člověk často vysvětlí proč.
Podklad k měření najdete v článku Google Analytics 4. Kontrolu výkonu rozebírám v článku Jak zrychlit web.
E-shop nemusí být originální v tom, kde má košík. Má být přesvědčivý v tom, proč koupit právě tento produkt právě tady.
Pro práci s argumenty na produktové a prodejní stránce pokračujte článkem Důležité prvky prodejní stránky. Celý webový základ je v návodu Jak začít webový projekt.