Web je čerstvě po redesignu. Na velkém monitoru v zasedačce vypadá pěkně, všichni znají nabídku a objednávku dokončí poslepu. Zákazník ale přichází z telefonu, o firmě nic neví a při první nejasnosti odchází. Právě proto nestačí kontrolovat, zda je web hezký.
Původní verzi tohoto checklistu jsme používali jako široký seznam pro weby a e-shopy. Časem se v něm nahromadily nástroje a jednotlivé poučky, které nebyly univerzální. Tato verze se vrací k podstatě: co má člověk zvládnout, co musíte ověřit a jak poznat problém dřív, než do něj začnete cpát peníze za návštěvnost.
Nejdřív určete tři nejdůležitější cesty
UX audit celého webu se snadno rozpadne do stovky připomínek. Než otevřu analytiku, vyberu proto tři cesty, které mají pro firmu největší význam. Typicky:
- nový návštěvník pochopí nabídku a pošle poptávku,
- zákazník najde produkt, vloží jej do košíku a zaplatí,
- stávající klient najde podporu, dokument nebo kontakt.
Ke každé cestě napište začátek, očekávaný konec a hlavní překážku. Checklist potom neplníte mechanicky. Kontrolujete, zda web pomáhá konkrétnímu rozhodnutí.
1. Nabídku musí pochopit člověk, který nebyl na poradě
- Je z první obrazovky zřejmé, co nabízíte a pro koho?
- Popisuje hlavní nadpis výsledek nebo problém, ne firemní slogan?
- Je vidět další krok bez lovení v menu?
- Dokáže návštěvník odlišit jednotlivé služby či varianty?
- Uvádíte podmínky a omezení, která rozhodnutí opravdu ovlivní?
Otestujte to na člověku, který firmu nezná. Dejte mu několik sekund, stránku zavřete a zeptejte se, co firma dělá a co by udělal dál. Není to vědecká studie, ale rychle odhalí jazyk, kterému rozumí jen lidé uvnitř firmy.
2. Navigace musí fungovat bez přemýšlení i bez myši
- Odpovídají názvy položek tomu, co návštěvník hledá?
- Fungují odkazy, logo i návrat na předchozí krok?
- Je mobilní menu čitelné, zavíratelné a nepřekrývá důležitý obsah?
- Je u delší struktury zřejmé, kde se člověk nachází?
- Lze všechny důležité ovládací prvky projít klávesou Tab?
- Je při ovládání klávesnicí vidět fokus a nezůstane uživatel v pasti?
Přístupnost není speciální režim pro pár lidí. Dostatečný kontrast pomůže také na telefonu na slunci a srozumitelný formulář pomůže člověku ve spěchu. Pro rychlou kontrolu můžete použít Easy Checks od W3C. Je to první průchod, nikoli potvrzení úplné shody s WCAG.
3. Obsah má vést oči i rozhodnutí
- Je na stránce jeden hlavní nadpis a logická struktura dalších nadpisů?
- Jsou odstavce čitelné a důležité informace lze najít při rychlém procházení?
- Mají odkazy a tlačítka popis, ze kterého je jasný výsledek kliknutí?
- Nezávisí význam pouze na barvě, obrázku nebo efektu po najetí myší?
- Mají informační obrázky smysluplný alternativní text?
- Neodvádějí animace pozornost od nabídky a lze respektovat omezení pohybu?
Výrazná barva sama nevytvoří konverzní tlačítko. Nejprve musí být srozumitelné, co se po kliknutí stane. „Odeslat“ je technický popis. „Domluvit úvodní hovor“ snižuje nejistotu.
4. Formulář má chtít jen to, co firma opravdu použije
- Je každé pole označeno viditelným a programově přiřazeným popiskem?
- Je zřejmé, které údaje jsou povinné a proč je potřebujete?
- Umí uživatel formulář vyplnit na telefonu a klávesnicí?
- Vysvětluje chybová hláška problém i způsob opravy?
- Zůstávají správně vyplněná data po chybě zachována?
- Dostane uživatel po odeslání jasné potvrzení a informaci, co bude dál?
W3C ve svém návodu k přístupným formulářům doporučuje chtít jen údaje potřebné pro dokončení procesu. Každé pole navíc stojí pozornost a zvyšuje práci s daty. Pokud informaci obchod nepoužije, odstraňte ji.
5. E-shop musí zvládnout celý nákup, nejen hezký detail produktu
Kategorie a hledání
- Filtry odpovídají způsobu, jak lidé vybírají, a lze je snadno zrušit?
- Je stav bez výsledků užitečný a nabízí další cestu?
- Obsahuje karta produktu název, cenu, dostupnost a čitelný obrázek?
- Zůstává řazení a filtrování použitelné na telefonu?
Detail produktu
- Jsou varianty, cena, DPH, dostupnost a doprava vysvětlené před vložením do košíku?
- Odpovídají fotografie tomu, co zákazník potřebuje posoudit?
- Je tlačítko přidání do košíku viditelné, ale neblokuje obsah?
- Má vyprodaný nebo ukončený produkt alternativu a rozumnou cestu zpět?
Košík a objednávka
- Lze položku, variantu a množství upravit bez ztráty ostatních dat?
- Je konečná cena včetně dopravy a poplatků známá včas?
- Nenutíte zákazníka k registraci bez obchodního důvodu?
- Vrátí neúspěšná platba člověka do srozumitelného stavu?
- Je potvrzení objednávky jednoznačné a neumožní nechtěné opakování nákupu?
Pravidlo „v košíku nesmí být navigace“ neplatí vždy. U jednoduchého nákupu může omezení rozptylování pomoct. U složité nabídky ale zákazník potřebuje dohledat podmínky nebo detail produktu. Ověřte chování, ne poučku.
6. Web musí přežít mobil, pomalou síť i chybu
- Načte se hlavní obsah rychle a bez velkých posunů rozložení?
- Reaguje stránka bez znatelného zpoždění na kliknutí a psaní?
- Mají obrázky správné rozměry a načítají se jen v potřebné kvalitě?
- Nezablokuje chybný externí skript objednávku nebo formulář?
- Fungují klíčové cesty v aktuálních běžných prohlížečích a na skutečných telefonech?
- Monitorujete dostupnost a chyby důležitých kroků?
Laboratorní skóre je nápověda, ne obchodní výsledek. Sledujte také reálné uživatele a hlavní cestu. Reklamní pixel nesmí být důležitější než tlačítko Koupit.
7. Měření ověřujte testem, ne přítomností kódu
U každé důležité cesty udělejte testovací poptávku nebo objednávku. Zkontrolujte, zda se událost odešle jednou, se správným názvem, hodnotou, měnou a identifikátorem transakce. Pak ověřte, že ji vidí cílový systém a že odpovídá skutečné objednávce.
- Neodesílá se nákup při pouhém otevření děkovací URL?
- Nezdvojuje se událost po obnovení stránky?
- Respektují značky stav souhlasu?
- Neobsahuje datová vrstva osobní údaje, které tam nepatří?
- Jsou v kontejneru pouze služby, které firma používá?
- Existuje vlastník měření a záznam poslední kontroly?
Pro implementaci navazuje článek Jak správně nastavit Google Tag Manager a pro význam událostí průvodce Google Analytics 4. Nahrávky relací nebo heatmapy mohou ukázat slepé místo, ale používejte je účelově, s maskováním citlivých polí a podle pravidel souhlasu. Nahrávat všechno „pro jistotu“ není výzkumný plán.
Jak checklist použít bez měsíčního workshopu
- Vyberte jednu nejdůležitější cestu a projděte ji na telefonu.
- Totéž udělejte pouze klávesnicí.
- Nechte úkol dokončit člověka mimo firmu a nemluvte mu do toho.
- Zapište místo, kde váhal, ne svůj návrh řešení.
- Ověřte problém v analytice, podpoře nebo dalších testech.
- Opravte jednu překážku a znovu projděte celou cestu včetně měření.
Nesnažte se jedním kolem prohlásit web za „UX hotový“. Nabídka, zařízení i očekávání lidí se mění. Smyslem checklistu je pravidelně najít nejdražší tření a rozhodnout, co opravit jako první.
Pokud chcete projít web v širších obchodních souvislostech, použijte také checklist online marketingu. A pokud potřebujete určit prioritu mezi UX, měřením a akvizicí, popište mi svou hlavní cestu přes kontakt.