Opakovaně navrhuješ nebo redesignuješ web / e-shop a potřebuješ kontrolovat stejné činnosti?
Inspiruj se checklistem Lukáše Dubiny, který ti pomůže zhodnotit web z pohledu UX.
Měj na paměti, že:
- UX nelze navrhnout a hodnotit univerzálně, protože velmi úzce souvisí s byznysem,
- Nn všechny body checklistu proto budou relevantní pro tvůj projekt a platí zde heslo „to záleží“,
- nejedná se o kontrolní checklist funkčnosti celého webu před spuštěním,
- checklist by měl sloužit jako inspirace, nikoliv modla.
Checklist připravil UX designér Lukáš Dubina. Před použitím si určitě pročti Lukášova doporučení, jak s ním správně zacházet.
Ukázka veřejné šablony ve Freelu
Použij tuto šablonu ve svém Freelu
= UX checklist hodnocení webu
👨💻 Použitelnost a přístupnost
- Web je navržen podle relevantních dat a chování cílové skupiny (ideálně dle uživatelského průzkumu)
- Web je otestován na reálných lidech
- Na první pohled je zřejmé, co web nabízí
- Máme stanovené metody pro získávání a vyhodnocování zpětné vazby od uživatelů webu
- Rozmístění informací na stránce je přehledné
- Aktivní SSL certifikát → web běží na zabezpečeném HTTPS
- E-shop prezentuje konkurenční výhody na všech důležitých stránkách
- Web správně pracuje s personalizací (např. naposledy navštívené produkty → pokud na webu používáte)
- V případě jazykové mutace se automaticky nastaví jazyk dle geo-ip
- Při registraci uživatele na e-shopu komunikuji výhody registrace
- Po přihlášení uživatele a zavření prohlížeče nedojde k odhášení
- Je možné vyresetovat heslo, když ho uživatel zapomněl
- Captcha je funkční a lze přes ní pokračovat dále (ideálně použít neviditelnou)
- Vyhledávání → funguje (i po přihlášení uživatele / na mobilu apod...)
- Vyhledávání → umí našeptávat a pracovat s překlepy
- Cookie lišta je vhodně zpracovaná (lze jednoduše zavřít, obsahuje srozumitelný obsah)
- Widgety a doplňkové prvky (např. Heureka widget) nepřekrývají nevhodně obsah webu (hlavně na menších obrazovkách)
- Mobil → responzivní verze a je otestovaná pomocí Google Mobile Friendly tool (https://search.google.com/test/mobile-friendly)
- Hlavní obsah a ovládání funguje ve všech verzích internetových prohlížečů dané cílové skupiny (např. Chrome, IE, Firefox → zjistíte z Google Analytics)
- Hlavní obsah a ovládání fungují i bez zapnutého JavaScriptu
- Funguje plné zobrazení napříč prohlížeči a zařízeními (mobile, tablet, desktop)
- Existuje tisková verze stránek (pokud návštěvníci z cílové skupiny nebo segmentu často tisknou)
- Existuje napojení na sitemapu
- Existuje robots.txt
- Web indexují roboti vyhledávačů (není zakázáno ještě z vývoje)
☝ Navigace
- Všechny odkazy z navigace a z ovládání webu fungují
- U všech klikacích prvků je srozumitelné, že se na ně uživatel může kliknout
- Textové odkazy jsou odlišené od standardního textu (barva, podtržení, efekt po najetí myši)
- Ovládací prvky jsou příjemné a čitelné i ve zhoršených podmínkách (světlý monitor, na slunci, v noci...)
- Funguje ovládání webu pomocí klávesnice (např. tabulator)
- Drobečková navigace → doprovází uživatele na důležitých stránkách a pomáhá v orientaci
- Slider / carousel → pokud existuje, všechny slidy mají odkaz a vedou na danou stránku (pokud není záměr prezentovat bez odkazu)
- Mobil → navigace pomocí “hamburger menu” obsahuje popisek “MENU”
- Mobil → existuje varianta navigace jinak než pomocí “hamburger menu”
- Mobil → ovládací prvky (ikony, odkazy) mají dostatečnou velikost (cca 7 x7mm / 48 x 48px) a mají dostatečný odstup (cca min. 5mm / 32px)
🖌 Design
- Na webu je správné logo
- Web má favicon
- Web používá vizuální prvky, na které jsou lidé z cílové skupiny zvyklí
- Důležité prvky (ikony, nadpisy, tlačítka) jsou dostatečně kontrastní
- Barevnost webu odpovídá design manuálu firmy
- Konverzní tlačítka jsou výrazná, čitelná a v jednotném stylu
- Konverzní cesta je barevně definovaná a koreluje s konverzními tlačítky
- Vykreslování grafiky podporuje display typu HD a typu Retina (Apple)
- Použité doprovodné fotografie na webu jsou dostatečně kvalitní
- Použité doprovodné fotografie na webu mají práva (licenci, souhlas autora) pro použití
🚀 Rychlost webu
- Web a kód dosahuje požadovaného skóre v Google Page Speed Insights (https://developers.google.com/speed/pagespeed/insights/) nebo v Webpagetest.org (https://www.webpagetest.org/)
- Vykreslování webu nezpomalují nevhodně implementovaná videa nebo skripty
- Web neobsahuje datově a rozměrově příliš velké obrázky (např. zbytečné animace na pozadí)
- Web neobsahuje zbytečné prvky (např. animace, banery, reklamy) které neplní daný účel
- Web používá co nejméně externích fontů (eliminace např. načítání několika Google fontů v mnoha řezech)
- Grafika šablony a hlavního designu je komprimovaná (např. přes (https://tinypng.com/) nebo Compressor.io (https://compressor.io/) → otestujte ZDE (https://webspeedtest.cloudinary.com/) )
- Fotografie produktů mají optimální datovou velikost (ideálně do 100 Kb)
- Fotografie ve výpisu produktů jsou zmenšené oproti detailu produktu
- Fotografie v dlaždicích (podkategorie) jsou zmenšené oproti výpisu produktů
- Na webu nejsou schované zbytečné skripty (nebo zapomenuté a neaktivní měřící kódy)
- Existuje minifikace a komprimace CSS a JS
- Existuje cachování statického obsahu
🛒 Košík
- Košík je výrazný a nalezitelný (vpravo nahoře)
- Košík je v konverzní barvě
- Je jasné, zda je košík prázdný nebo plný (prezentuje počet položek + hodnotu zboží)
- Lze snadno měnit počet položek zboží v košíku
- Lze snadno měnit počet položek před přidáním do košíku (v kategorii, v detailu produktu)
- Zboží zůstane uložené v košíku i po zavření prohlížeče
- Informace o dopravě zdarma jsou výrazné a viditelné
- Odpočet dopravy zdarma je výrazný a viditelný (pokud používáte)
- Odebrání zboží z košíku funguje (i po přihlášení / na mobilu / různé verze operačního systému)
- Odebrání zboží z košíku → po odebrání všech položek motivuje uživatele k opětovného naplnění (např. vhodným obsahem a výzvou)
- Přepočítávání ceny zboží funguje automaticky (není nutný reload stránky ani dodatečné tlačítko)
🎁 Objednávkový proces
- Objednávku lze dokončit
- Nezobrazuji navigaci, patičku a prvky, které mohou odvádět pozornost
- Nevyžaduji registraci (lze nakoupit bez registrace, pokud to není obchodní záměr)
- Web prezentuje možnost přihlášení (pokud u nás zákazník už nakupoval)
- Krokovač prezentuje počet kroků v objednávce (+ jejich textový popis)
- Krokovač je v konverzní barvě
- Viditelně prezentuji kontakt (telefon, chat...jakoukoliv pomoc s nákupem)
- Obsah košíku (seznam produktů, ceny) se zobrazuje ve všech krocích
- Obsah košíku prezentuje konečnou cenu + poštovné před odesláním objednávky
- Slevový kupon → ideálně defaultně schovaný (minimalistická verze)
- Platba → web nabízí metody platby, které zákazníci z dané skupiny preferují
- Platba → po dokončení platby kartou dojde k přesměrování uživatele zpět na e-shop, kde mu poděkuji
- Platba → při neúspěšné platbě (např. karta zamítnuta) dojde k přesměrování uživatele zpět na e-shop kde mu vysvětlím další postup
- Doprava → web nabízí metody dopravy, které zákazníci z dané skupiny preferují
- Doprava → pokud změním zemi doručení, změní se nabízené a dostupné metody dopravy
- Doprava → osobní odběr obsahuje doprovodnou informaci (adresu, otevírací dobu, odkaz na mapu)
- Formuláře → jsou nastavená a rozpoznatelná povinná a nepovinná pole
- Formuláře → chybové hlášky jsou správně (gramatika, diakritika)
- Formuláře → vyžadují jen nutné údaje
- Formuláře → mají vhodné popisky (labely) u všech políček
- Formuláře → popisky (labely) jsou buď nad nebo vedle inputu (nedávejte dovnitř)
- Formuláře → inputy (vstupní pole) jsou výrazné a nesplývají s pozadím
- Formuláře → formát a velikost pole je nastavená dle vstupu (např. u PSČ omezení na 5 znaků + správná klávesnice (numerická na mobilu)
- Formuláře → input u telefonu nevyžaduje předvolbu (+420 / +421) ale nabízí ji formou předpřipraveného selectboxu (snižuje se riziko špatného vyplnění)
- Formuláře → pokud vyžaduji citlivé údaje (datum narození, telefon) uživatel je seznámen s účelem využití (např. Zadejte číslo Vašeho mobilního telefonu, aby Vás mohl kurýr kontaktovat)
- Formuláře → před odesláním objednávky srozumitelně prezentují obch. podmínky a ochranu os. údajů
- Po odeslání formuláře se zobrazí děkovací hláška (děkovací stránka)
- Děkovací stránka → prezentuje úspěšné dokončení + co má uživatel dále udělat
- Děkovací stránka → vhodné místo pro mikrokonverze (pošlete uživatele na blog, požádejte o like na Facebooku / Instagramu...)
📂 Kategorie
- Obsahuje textový popis (např. pomoc s výberem, záleží na segmentu, nemusí být nutné)
- Odkazy na podkategorie mají fotku, název a prezentují ideálně i počet produktů
- Náhled produktu obsahuje název, cenu, dostupnost a fotku zboží
- Výpis a řazení produktů lze upravit (řazení dle nejprodávanější, nejlevnější...)
- Jsou graficky nastylované štítky (nejprodávanější, top produkt, sleva, doprava zdarma…)
- Filtrace (dle parametrů) je dostatečně výrazná (pokud není záměr uživatelsky nepoužívat)
- Aktivní filtr (dle parametrů) se dá jednoduše zrušit (deaktivovat)
- Stránkování obsahuje info o celkovém počtu stránek a produktů na stránce
- Pokud je třeba, existuje pomocník výběru zboží (např. dle účelu, jak vybrat...)
👕 Detail produktu
- Obsahuje srozumitelný název produktu
- Fotografie jsou dostatečně velké
- Fotografie prezentují více úhlů pohledu (detail zboží, materiál, využití v reálném životě)
- Konverzní tlačítko je výrazné a kontrastní (je umístěné ideálně nad foldem)
- Cena je výrazná a definuje, zda je s DPH nebo bez DPH
- Pokud je zboží ve slevě, je vidět o jakou slevu se jedná (% + původní cena)
- Dostupnost → je vidět, zda je zboží skladem a kdy dorazí (možno i počet kusů skladem)
- Varianty → volba je jednoduchá a srozumitelná (např. barva, velikost...)
- Varianty → dostupnost skladem prezentovat pro každou variantu zvlášť
- Varianty → u volby velikosti u jakéhokoli sortimentu existuje tabulka nebo pomoc s volbou správné velikosti
- Jsou graficky nastylované štítky (nejprodávanější, top produkt, sleva, doprava zdarma…)
- Popis produktu → je stručný, snadno čitelný, výstižný, komunikuje benefity produktu
- Recenze, hodnocení → pokud dává smysl, zobrazte je a umožněte přidávat nové
- Interakce s produktem → hlídací pes, zaslání produktu emailem, wishlist...otestujte zájem
- Související produkty → zobrazují se relevantní (u kalhot pásek, u telefonu nabíječka...)
- Podobné produkty → zobrazují se relevantní (možné použít upselling → lepší a dražší zboží)
- Srovnání produktů → pokud umí vaše tech. řešení, umožněte porovnávat produkty (vhodné u tech. webů)
- Odpočet dopravy zdarma funguje → vhodné umístit poblíž konverzního tlačítka
- Existuje prezentace konkurenčních výhod (ideálně nad foldem)
- Parametry a specifikace jsou naformátované v přehledné tabulce (a proklikatlené do dané filtrace nebo kategorie)
- Kód, EAN → vhodné prezentovat jen u technických webů (nebo např. velkoobchodu)
- Sociální sítě → většinou nikdo nepoužívá (zabírají místo, zpomalují web → otestujte)
- Pokud je zboží ve více kategoriích, existují prokliky do daných sekcí (ideálně úplně dole)
⚙️ Patička
- Obsahuje kontaktní údaje (telefon, e-mail, prodejnu, pobočky, výdejní místa)
- Obsahuje informace pro zákazníky (doprava, platba, obch. podmínky, reklamace, GDPR)
- Obsahuje prvky důvěryhodnosti (certifikáty, ocenění, loga partnerů, Heureky, Apek, zabezpečení...)
- Copyright © obsahuje rok od-do (např. 2001 - 2019)
- Newsletter → existuje výzva k odběru (pokud používám) včetně benefitů, proč se přihlásit
- Odkazy na sociální sítě (IG, Facebook...) prezentuji pomocí relevantních ikon
- Ideální místo pro prezentaci metod dopravy a platby (pomocí ikon)
👑 Obsah
- Textace tlačítek je pochopitelná (např. Odeslat objednávku)
- Texty jsou vhodným fontem (podpora českých znaků)
- Texty mají vhodnou barvu (dostatečný kontrast vůči pozadí)
- Texty mají dostatečnou velikost (desktop 16px+, mobil 14px+ )
- Odstavce jsou jednoduše čitelné (vhodná délku řádků + proklad)
- Obsah vyvolává správné emoce, kterých chceme na webu dosáhnout (odeslání poptávky / objednávky)
- Obsah koreluje s positioningem značky (vykání / tykání, formální / neformální, archetyp...)
- Jsou navržené všechny důležité stránky (vstupní stránky - landing pages, filtrační, statické)
- Nadpisy jsou výrazné a větší než klasický text
- Nadpisy jsou odlišené pomocí HTML tagů H1 - H5
- Web používá konzistentní formátování → nadpisy, text odstavce, odrážky, tabulky
- Délka řádku textu je uživatelsky dobře čitelná (80-100 znaků pro desktop, 40-50 znaků pro mobil)
- Existuje vhodně otextovaná chybová stránka 404
- Důležité stránky (homepage, top produkty, kategorie a landing pages) mají nastavený Open Graph titulek, popisek a obrázek pro sdílení na sociálních sítích
- Vložený iframe se správně zobrazuje na všech zařízeních (častá chyba - např. deformace Youtube videa na mobilu)
✉️ Kontakt
- Prezentuji preferovanou formu kontaktu
- Telefonní číslo je ve správném formátu
- U telefonu zobrazuji informaci s časem, kdy se zákazník může dovolat
- Telefonní kontakt na mobilním zařízení funguje na “klik” (tapnu a volám)
- U kamenné prodejny prezentuji mapu a adresu s otevírací dobou
- U jména kontaktní osoby prefentuji reálnou fotku osoby (paní z fotobanky se sluchátky a mikrofonem fakt NE)
📈 Základní analytika a skripty
- Měřící kód Google Analytics je umístěn
- Google Analytics správně měří došlé objednávky (měna, tržby bez DPH, bez dopravy...)
- Google Analytics má nastaven měření cílů (dokončení obj., přihlášení k newsletteru...)
- Google Analytics automaticky posílá upozornění při poklesu návštěvnosti (např. z vyhledávačů o X%...)
- Google Analytics je propojen s vyhledáváním na webu
- Google Analytics má vyloučené nerelevantní návštěvy (roboti, platební brány…)
- Zdroj / médium jsou správně označené
- Web má správně nastaveny konverzní kódy (PPC, zbožové srovnávače, FB pixel, Glami, Affiliate...)
- Web je propojený s Google Search Console
- Web správně generuje feedy (Heureka, Zbozi.cz, Google...)
- Web je napojený na mousetracking (Hotjar, Smartlook, MYX….)
- Ze všech analytických nástrojů jsou vyloučeny vlastní návštěvy a celé firmy (IP adresy)
🤐 Bullshit check
- Na webu nemáme nadpis ani text “Vítejte na našem webu...”
- Na webu nemáme text “Jsme mladá a dynamická firma…”
- USP neprezentuje to, co lidé očekávají od e-shopu automaticky (např. “Pohodlný nákup z domova 24/7")
- Na webu nemáme certifikáty typu: Ověřená firma, Spolehlivá firma, Živá firma, Prověřená společnost (pokud to není v korelaci s cílovou skupinou)