WEB A UX
ISKM50
Markéta Bartoníčková
363689@mail.muni.cz
+420 728 014 956

ZÁKLADNÍ POJMY
•Použitelnost webu = jednoduchost jeho používání a snadná naučitelnost zacházení s ním
•Přístupnost webu = dostupnost informací na webu bez ohledu na použité zařízení, jeho nastavení a
fyzický stav uživatele
•UX (User Experience) = uživatelská přívětivost
•CRO (Conversion Rate Optimization = optimalizace konverzního poměru) = souhrn aktivit na zlepšení
obchodní výkonnosti či úspěšnosti webu

POUŽITELNOST WEBU
•Web není umělecké dílo, ale obchodní nástroj.
•Nejčastější funkce: chceme, aby co nejvíce návštěvníků provedlo konverzi.
=> Lidé musejí snadno a rychle pochopit, co web nabízí.
=> Web je musí bez zásadních překážek a zklamání vést k provedení konverze.
•Laicky řečeno: „Rychle jsme našli, co jsme chtěli, a koupili jsme si to.“ = dobrá použitelnost.
•Princip je stejný i u webů, které nic neprodávají – jen se místo nákupu jedná o jiné cíle (např.
nalezení informace).

PROČ MUSÍTE ROZUMĚT WEBŮM
•Markeťák typicky není web developer, programátor ani kodér.
 ALE
•Marketingové aktivity přivádějí lidi na web.
•Markeťák potřebuje webu rozumět, jak po stránce fungování, tak z hlediska chování návštěvníků.
•Bez funkčního webu, na kterém lidé plní předpokládané cíle, nemusí mít marketingové aktivity
smysl.

UŽIVATELÉ
•… se na webu chovají jinak, než si majitel webu myslí.
•… to mají v hlavě poskládané jinak než webdesignér, ajťák, grafik nebo majitel firmy.
•… web neznají, jsou na něm poprvé, je to pro ně neznámé prostředí.
•… neznají navigaci nebo funkce, které si za dlouhá léta osvojil webmaster, marketingový tým nebo
majitel firmy.
•… nejsou ochotni na webu zdlouhavě hledat cestu k nákupu. Jiné weby jsou jen o pár kliků dál.
Pokud se jim něco nelíbí nebo se na webu nevyznají, odcházejí.

FIRMY (MAJITELÉ, ZAMĚSTNANCI)
•… mají často silný názor, jak by měl web vypadat a fungovat.
Problém je, že jejich názor je většinou špatný. „Líbí/nelíbí“ není argument.
•… mají zkreslené názory na to, jak ostatní lidé jejich web používají – protože se ho naučili
používat, i když je špatný.
•… mají tendenci mluvit do vzhledu a funkčností webu.
Je snazší udělat si názor na web než na marketingový kanál nebo nástroj (web „nějak vypadá“ i v
očích laika, ale např. Ads je španělská vesnice).

JAK ZLEPŠOVAT POUŽITELNOST
• Cílem je mít web, který je pro uživatele co nejpříjemnější, snadný k navigaci a k ovládání.
• Někdy stačí změnit několik prvků, jindy je potřeba výraznější zásah.
• V každém případě by zásahy do webu měly být prováděny na základě racionálních úvah, ne dojmů a
ad-hoc vyřčených názorů.

JAKÉ TYPY INFORMACÍ MÁME
Data
•O chování lidí na webu
•kde odcházejí,
•kolik z nich si vloží zboží do košíku, ale nedokončí nákup,
•kam klikají,
•kam se dívají,
•kam scrollují,
•co vidí a co nevidí,
•zda umí dokončit konverzi apod.

JAKÉ TYPY INFORMACÍ MÁME
Data
●Analýza dat z Google Analytics
●Nasazení nástrojů na tvorbu teplotních map a scroll map
●Uživatelské testování (pozorování reálných lidí)
●Snímání oční kamerou
Pohled experta
●Člověk se na základě teorie a praxe naučí identifikovat problémy i bez dat. Ale vždy je dobré
lidský názor konfrontovat s daty.

JAK VYPADÁ PROCES
•Sběr dat, interpretace, analýzy, testování
•Prioritizace změn
•Provedení změn
•Další testování, sběr dat…

TEPLOTNÍ MAPA KLIKŮ



TEPLOTNÍ MAPA S OČNÍ KAMEROU



F-SHAPE



SCROLL MAP



PŘÍKLADY PROBLÉMOVÝCH PRVKŮ
• Nelogické ovládací prvky
• Malé ovládací prvky na mobilu (uživatel se na ně netrefí prstem)
• Malé nadpisy
• Fotka produktu v malém rozlišení
• Flash, motion grafika (hlavně kvůli mobilům)

OPTIMALIZACE
KONVERZNÍHO POMĚRU


CRO
• = Conversion rate optimization = optimalizace konverzního poměru
• Konverzní poměr = počet konverzí / počet návštěv
• Cílem je zvýšit počet konverzí při zachování počtu návštěv webu => Při stejných nákladech na
marketing vyděláte více
• Co se řeší
• Konverzní (nákupní) cesta
• Průchod košíkem
• Dokončení objednávky

PŘÍKLADY PROBLÉMOVÝCH PRVKŮ
• Modré nákupní tlačítko na modrém podkladu
• Zbytečně moc polí ve formuláři
• Špatná validace polí ve formuláři
• Nemožnost vyplnit pole na mobilu
• Chybějící hláška, která potvrzuje úspěšné odeslání formuláře













VŠECHNO ŠPATNĚ (ALE FUNGUJE TO)
[USEMAP]


ZÁKLADNÍ POUČKY
• Rozmístění prvků na stránce, jak je uživatel zvyklý
• Logo vlevo nahoře, proklik vede na homepage
• Kontakt v záhlaví
• Přihlášení / registrace / nákupní košík vpravo v záhlaví
• Vyhledávací pole v záhlaví s tlačítkem Hledat

ROZMÍSTĚNÍ PRVKŮ



ROZMÍSTĚNÍ PRVKŮ



ZÁKLADNÍ POUČKY
• Jednotnost napříč celým webem
• Menu vypadá na všech stránkách stejně
• Konverzní cesta se vyznačuje stejnou barvou
• Stejné prvky (barvy, tvar tlačítek)













NEJDE JEN O DESIGN
•Technické problémy
•Funkční prvky webu
•Informační architektura – uspořádání prvků na webu
•Prvky jiného typu
•Pokud je např. informace o výši poštovného uvedena až v posledním kroku nákupu (a poštovné je z
hlediska návštěvníků neobvykle vysoké), může to podstatnou část lidí odradit od dokončení
objednávky.

ZDROJE
[USEMAP] [USEMAP]