WEB A UX VIKMB64 •Markéta Bartoníčková •363689@mail.muni.cz •+420 728 014 956 ZPÁTKY KE STRATEGII BICHLE.CZ •Co děláme? •Proč? •Koho by to mělo zajímat? (Kdo je naše cílovka?) •Jaký je její nákupní cyklus? •Co chce v jednotlivých fázích slyšet? •Jaké kanály v jakých fázích použijeme? ÚISK •Co děláme? •Proč? •Koho by to mělo zajímat? (Kdo je naše cílovka?) •Jaký je její nákupní cyklus? •Co chce v jednotlivých fázích slyšet? •Jaké kanály v jakých fázích použijeme? WEB A UŽIVATELSKÁ PŘÍVĚTIVOST PROČ MUSÍTE ROZUMĚT WEBŮM •Markeťák typicky není web developer, programátor ani kodér ALE •Marketingové aktivity přivádí lidi na web •Markeťák tedy potřebuje webu rozumět, a to 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 POUŽITELNOST WEBU •Web není umělecké dílo :) Web je pro firmy obchodní nástroj. •Nejčastější funkce: chceme, aby co nejvíce návštěvníků provedlo konverzi •Aby se to stalo, musí lidé 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ý také u webů, které nic neprodávají – jen se místo nákupu jedná o jiné cíle (např. nalezení informace) ZÁKLADNÍ POJMY •Použitelnost webu/stránky = jednoduchost jeho používání a snadná naučitelnost zacházení s ním. •Přístupnost webu/stránky = vlastnost, která zajišťuje dostupnost informací na webu bez ohledu na použité zařízení, jeho nastavení a fyzický stav uživatele •UX (User Experience) = uživatelský prožitek •Conversion rate optimization (optimalizace konverzního poměru) = Souhrn aktivit, které mají za cíl zlepšit obchodní výkonnost či úspěšnost webu. Bez dodatečných nákladů na marketing. 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 často neznají, jsou na něm poprvé, je to pro ně zcela 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 velmi 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í často 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, a to mnohem více než do „vnitřností“ různých marketingových kanálů. •Je to většinou tím, že 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ř. AdWords je španělská vesnice). JAK ZLEPŠOVAT POUŽITELNOST •Cílem je mít web, který je pro uživatele co nejvíce příjemný, 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 •Metod je mnoho: •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, apod. 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 návštěv / počet konverzí • Cílem je zvýšit počet konverzí při zachování počtu návštěv webu • Proč? 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 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Ů 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]