Základní UX checklist

Mít správně vyřešené UX na vašem webu přináší mnoho výhod. Kvalitní UX přispívá k vyšší konverzní míře, což znamená, že větší počet návštěvníků se promění ve skutečné zákazníky.

Pokud je váš web snadno použitelný a intuitivní, uživatelé se budou na něm pohybovat s lehkostí a budou se cítit pohodlněji. Mít vše pod kontrolou je těžké a hlavně, kde začít? Využijte náš Základní UX checklist, který jsme se rozhodli ↓ zde ↓ odkrýt z klubu NDigital.cz

Nezapomeňte pravidelně kontrolovat pomocí nahrávacích nástrojů jako Smartlook, že se uživatelé na Vašich stránkách orientují a všechny prvky fungují, jak by měly.

Použitelnost a přístupnost

• Web je uzpůsoben cílové skupině podle relevantních dat.
• Web je otestován na reálných lidech.
• Na první pohled je zřejmé, co web nabízí.
• Rozmístění informací na stránce je přehledné.
• E-shop prezentuje konkurenční výhody, pokud je má.
• V případě jazykové mutace se jazyk automaticky nastaví podle geo-ip.
• Pokud je zde možnost registrace, komunikovat její výhody.
• Po vypnutí prohlížeče nedojde k odhlášení.
• Existuje zde možnost vyresetovat heslo.
• Vyhledávání na webu je funkční. 
• Vyhledávání na webu je funkční i pro uživatele mobilu.
• Zkontrolováno, co se zobrazí, když se nic nevyhledá.
• Cookie lišta je vhodně zpracovaná. 
• Responzivní verze pro mobil je možná.
• Web funguje na všech verzích internetových prohlížečů.
• Monitoruje se dostupnost webu.
• Možnost pravidelně sledovat v nástroji jako ahrefs.

Navigace

• Odkazy z navigace a z ovládání webu fungují.
• U klikacích prvků je jasné, proč na ně má uživatel kliknout.
• Ovládací prvky jsou příjemné a čitelné i ve zhoršených podmínkách
  Zhoršené podmínky mohou být např. zesvětlený monitor. Také je potřeba dbát na to, že hezký fond nemusí být čitelný fond.
• Kontrola, kam lidé klikají přes Smartlook.
  Lze využít i jiné nástroje.
• Hamburger menu pro mobil, lze udělat kreativně.
• Možnost rychle dohledat stránku o zárukách, vrácení zboží a jiné.
• Je zde drobečková navigace.

Design

• Správné logo = Více rozměrů a všude použitý odpovídající rozměr i kvalita.
• Vizuální prvky, na které je cílová skupina zvyklá.
• Důležité prvky jsou kontrastní.
• Barevnost webu odpovídá designu firmy.
• Konverzní tlačítka jsou výrazná.
• Doprovodné fotografie jsou dostatečně kvalitní a jsou k nim práva.
• Design souvisí s cílovou skupinou na základě vámi vytvořené persony.

Košík

• Košík je výrazný a vyhledatelný.
• Má konverzní barvu.
• Je jasné, jestli v něm něco je.
• Lze snadno změnit počet položek.
• Zboží zůstane v košíku i po zavření prohlížeče.
• Informace o dopravě zdarma jsou výrazné a viditelné.
• Je zde odpočet dopravy zdarma.
• Přepočítání ceny funguje automaticky.
• Lze jednoduše odstranit nebo přidat položky.
• Z košíku je možné dostat se na detail produktu (přes nadpis i obrázek).
• Košík je viditelný i v mobilní verzi.
• Není zde menu, jelikož rozptyluje uživatele od nákupu.

Objednávka

Měřící kódy 

Měření všech reklamních systémů a propisování do Google Analytics lze pomocí testovací objednávky. Během objednávkového procesu lze pomocí Pixel Helperu a Google Tag Assistant Legacy zjistit, zda je vše v pořádku. Při správném nastavení kódu se budou zobrazovat v těchto dvou rozšířeních události. U Google Tag Assistant Legacy se to musí povolit a reloadnout stránka. Pokud se události nezobrazují, je potřeba to opravit pro co nejpřesnější měření. Pokud si o tom, jak je nahrát chcete přečíst více, můžete zde. Ale všechny systémy mají vlastní návod.

• testovací objednávka
• Jsou zde pouze kódy, které potřebujete.

Google Ads zkontrolovat:

Google návod na implementaci

• Purchase
• košík
• správné ID pixelu
• správné ID konverze
• v košíku odeslané události s ID

Facebook Pixel zkontrolovat:

Facebook návod na implementaci.

• Purchase
• ViewContent na produkt (svázané s ID produktu)
• Initiate Checkout
• Add To Cart
• Pageview
• správné ID

Google Analytics události zkontrolovat:

U Google Analytics mají události názvy, které jste nastavili Vy. Je potřeba je zkontrolovat podle toho, jak jste je nastavili. Cíle v Google Analytics lze nastavit na události. Pokud si nevíte rady, jak je nastavit, zde je návod.

• Purchase
• PageView
• View_Item
• Add_To_Cart
• správné ID

Sklik:

Kontrola ID přímo v kódu na:

• Homepage
• kategorii
• detailu produktu
• konverzní kód
• retargetingový kód

Ostatní pixely a konverzní kódy:

• Konverze pro zbožové srovnávače fungují.
• Remarketingové pixely fungují.

Objednávkový proces

• Objednávkový proces lze dokončit.
• Nezobrazuje se navigace, patička a prvky, které rozptylují od nákupu.
• Je vidět počet kroků v objednávce.
• Kontakt je viditelně prezentován. 
• Při úspěšné platbě je zákazník přesměrován na eshop, kde je mu poděkováno. 
• Při neúspěšné objednávce je přesměrován zpátky na eshop, kde mu je vysvětlen další postup.
• Web nabízí metody dopravy, které cílová skupina preferuje.
• Chybové hlášky jsou správně napsány (gramatika, diakritika).
• Po objednávce se zobrazí děkovná stránka (lze zde mít mikrokonverze jako like na Facebooku/Instagramu).
• Kontrola na děkovné stránce, zda hodnoty souhlasí (i u Skliku).
• Hodnoty se propisují do Google Analytics bez daně.
• Lze objednat bez registrace.

Zde jsou příklady toho, jak by měl vypadat objednávkový proces.

Kategorie

• Obsahují textový popis.
• Odkazy na podkategorie mají fotku, název a prezentují ideálně počet produktů.
• Náhled produktu obsahuje název, cenu, dostupnost a fotku zboží.
• Výpis a řazení produktů lze upravit (cena, popularita).
• Je zde filtrace.
  Například: podle velikosti, barvy, ceny,….
• Aktivní filtr lze jednoduše deaktivovat.
  Pokud si uživatel vyfiltroval třeba produkty pod 1500 Kč, lze to zrušit.
• Filtry jsou smysluplné.
• Funguje našeptávač produktů ve vyhledávání.
• TITLE, META DESCRIPTION, H1 – důležité i pro PPC (DSA kampaně)

Detail produktu

• Název produktu je srozumitelný.
• Fotografie jsou dostatečně velké a kvalitní.
• Obsahují více úhlů pohledu.
• Konverzní tlačítko je výrazné a kontrastní.
• Cena je výrazná a definuje, zda je s DPH nebo bez DPH.
• Pokud je zde sleva, je vidět o jakou slevu se jedná.
• Je viditelná dostupnost.
• Pokud jsou varianty, jsou viditelné.
• TITLE, META DESCRIPTION, H1 – důležité i pro PPC (DSA kampaně)
• ALT u obrázků
• Produkty, které se už nebudou prodávat.
  • Nejsou v interním vyhledávání.
  • V kategorii jsou nejníže.
  • Jsou ve výsledcích vyhledávání Google a Seznam.
  • V detailu produktu je alternativa nebo odkaz do kategorie.

Patička stránky

• kontakt
• obchodní podmínky
• newsletter
• odkazy na sociální sítě
• zásady používání souborů cookie
• podmínky ochrany osobních údajů

Obsah

• Textace je pochopitelná a čitelná. Žádné artistické fonty písma, které se nedají číst.
• Obsah vyvolává vhodné emoce.
  Vhodné emoce jsou ty emoce, které v uživateli chceme vyvolat (například: fear of missing out).
• Text má vhodnou velikost.
  Text musí být čitelný. Velikost se může lišit podle cílové skupiny. Nemá smysl mít web s malými písmeny, když je určený pro seniory. Nic se samozřejmě nemá přehánět.

Závěr

✔️ Splnili jste všechny body? Tak gratulujeme. Můžete se pustit do dalších našich checklistů v klubu NDigital.cz

✖️ Nebo se vám nepodařilo splnit některé body? Další návody a tipy, jak na to najdete pouze v členské sekci, tak se přidejte mezi nás. Pořádáme i pravidelné webináře a členské srazy, kde si radíme. Pojďte do toho s námi!