7. VYUŽITÍ VÝZKUM PŘI DESIGNU A SPRÁVĚ WEBOVÉ STRÁNKY Ing. Martin Klepek, Ph.D. Ing. Tereza Ikášová Cílem této přednášky je přiblížit možnosti využití výzkumných metod při tvorbě webové stránky. Zároveň je možné některé z nich využívat také během provozu a správy webu. Typy výzkumu webové stránky Využití výzkumu při designu a správě webové stránky https://medium.com/house-of-%C5%99ez%C3%A1%C4%8D/ned%C4%9Blejte-u%C5%BEivatelsk%C3%BD-v%C3%BDzkum-d 0724c3fde7c DOTAZNÍKY •Efektivní (nízké náklady, rychlé vyhotovení) •Pohodlnější pro respondenta, mohou je vyplnit tehdy, když mají čas •Lze odpovídat za pomoci škál s posuvníkem. •Odpadá přepisování a kódování odpovědí jak je to u papírové formy dotazníku (menší pravděpodobnost chybovosti). •Velký potenciál mají otevřené otázky, které je možné efektivněji vyhodnocovat pomocí obsahové analýzy textu bez pracného přepisování. •V praxi se ve spojitosti s optimalizací webu moc nepoužívají, lidé nemají motivaci je vyplňovat. Navíc existují mnohem lepší varianty výzkumu, které nestojí na tom, jak si lidé myslí, že se chovají, ale na tom, jak se chovají ve skutečnosti. Využití výzkumu při designu a správě webové stránky TESTOVÁNÍ POUŽITELNOSTI •Použitelnost je atribut kvality, který posuzuje, jak snadno se dají uživatelská rozhraní používat. Využití výzkumu při designu a správě webové stránky SouvisejÃcà obrázek TESTOVÁNÍ POUŽITELNOSTI •Použitelnost je definována 5 kvalitními komponenty: •Naučitelnost: Jak snadné je pro uživatele splnit základní úkoly při prvním se-tkání s rozhraním? •Účinnost: Jakmile se uživatelé naučili rozhraní, jak rychle mohou provádět úkoly? •Zapamatovatelnost: Když se uživatelé vrátí k návrhu po období, kdy ho nepo-užívají, jak snadno mohou provádět úkoly? •Chyby: Kolik chyb udělají uživatelé, jak závažné jsou tyto chyby a jak snadno mohou tyto chyby napravit? •Spokojenost: Jak příjemné je používat design? Využití výzkumu při designu a správě webové stránky TESTOVÁNÍ POUŽITELNOSTI •Je možné testovat stávající web, konkurenční web, wireframy nebo prototyp. •Testování použitelnosti se skládá z několika částí, jejichž rozsah se může různit. Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro usability test TESTOVÁNÍ POUŽITELNOSTI - Postup 1.Analýza cílových skupin webu a jejich potřeb – Kdo jsou zákazníci? Co jim má web nabídnout? 2.Vytvoření scénáře testování – seznam úkolů, které jsou jednotlivým testerům uloženy. Jedná se o většinou typické akce cílových skupin webu. 3.Výběr testerů – vzorek účastníků testování by měl odpovídat cílovým skupinám webu. Rovněž je třeba získat zhruba rovnoměrný podíl pokročilých a nezkušených uživatelů internetu – každá skupina totiž narazí na zcela jiný typ problémů. 4.Samotný průběh testování – pod dohledem zkušeného odborníka na použitelnost plní testeři úkoly dle scénáře testování. 5. 5. 5. Využití výzkumu při designu a správě webové stránky TESTOVÁNÍ POUŽITELNOSTI - Postup 5.Analýza výsledků testování – je třeba setřídit poznatky získané během testování, zanalyzovat je, a především vymyslet nejvhodnější řešení vedoucí ke zvýšení použitelnosti webu. 6.Prezentace výsledků (zadavateli) – seznámení s průběhem testování, komentář k výsledkům a detailní výklad aplikace doporučených opatření. 7. Využití výzkumu při designu a správě webové stránky MOUSTRACKING Využití výzkumu při designu a správě webové stránky •Sledování přesného pohybu myší (mousetracking/cursortracking). •Instalovaný software sleduje pohyb myši uživatele na webové stránce a poskytuje informace o nejčastějších návštěvách. •Pro marketéra či designéra webové stránky tak tato technika přináší cenné informace o celkovém designu webového rozhraní. •Výstupem takového výzkumu jsou nejčastěji tepelné mapy, které ukazují na nejfrekventovanější místa výskytu kurzoru. • MOUSTRACKING •Výstup v podobě clickmapy – tepelné mapy. •Červená teplá místa zobrazují kde se pohyboval kurzor uživatele. Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro clickmaps EYETRACKING •Další z kategorie trackingových studií je sledování pohybu oční zornice. •V oblasti internetu se využívá pro identifikaci atraktivních míst na webové stránce. •Nad rámec mousetrackingu a webové analytiky ukazuje, kam se uživatel skutečně dívá. Je ale nutná jeho fyzická účast na měření. •Výstupem je záznam (video), jak se uživatel pohyboval po webové stránce. Součástí je tepelná mapa či analýza cesty (path), která reflektuje pohled uživatele po monitoru. •Eyetrackingové metody jsou zatím v plenkách a celoplošným standardem se stanou s poklesem cen očních kamer a softwarů, které tento výzkum zajišťují. • Využití výzkumu při designu a správě webové stránky EYETRACKING •Výstup v podobě tepelné mapy. •Červená teplá místa zobrazují kde se uživatel díval. Využití výzkumu při designu a správě webové stránky SouvisejÃcà obrázek EYETRACKING - příklady Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro heatmaps eyetracking EYETRACKING - příklady Využití výzkumu při designu a správě webové stránky SouvisejÃcà obrázek •Testování ukazuje lepší čitelnost textů pokud je dítě otočeno a není mu vidět tvář. Ta poutá v marketingové komunikaci pozornost. EYETRACKING - příklady Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro heatmaps eyetracking EYETRACKING – path analysis Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro path eyetracking •Path analysis neboli analýza cesty pohybu očí umožňuje oproti tepelným mapám zobrazit posloupnost uživatelovy pozornost. A/B TESTOVÁNÍ •A/B testování představuje metody, které umožňují na reálných uživatelích testovat dvě či více variant určité webové stránky. •Výzkumník pak pozoruje rozdíly v konverzních poměrech a je schopný vyhodnotit, která testovaná stránky je pro uživatele přívětivější, snadnější na ovládání, atraktivnější a tím také lépe plní svůj účel. •Oproti metodám dotazování je experiment formou techniky A/B testování věrohodnější, jelikož se uživatel chová zcela přirozeně a v podstatě ani neví, že je součástí výzkumu. Využití výzkumu při designu a správě webové stránky A/B TESTOVÁNÍ Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro ab testing https://splitmetrics.com/resources/what-is-ab-testing-and-why-it-matters-for-mobile-developers/ PŘÍPADOVÁ STUDIE - HOTJAR •Hotjar patří do sekce nástrojů pro na analýzu a získávání zpětné vazby z webové stránky, eshopu či webové aplikace. •Poskytuje přehled o chování návštěvníků, které se opírá data zpracovaná ve formě tepelných map, nahrávání návštěvníků a jejich chování na webu. Využití výzkumu při designu a správě webové stránky PŘÍPADOVÁ STUDIE - HOTJAR 1. Využití tepelných map (clickmapy a scrollmapy) •Pro potřeby případové studie jsme vybrali internetový obchod s kováním pro posuvné dveře Laporte.cz Využití výzkumu při designu a správě webové stránky PŘÍPADOVÁ STUDIE - HOTJAR Nejdříve se podíváme jak využít clickmapy. •Na obrázku vidíme screenshot ze vzorku 1000 návštěv všech kategorií, což je pro potřeby naší analýzy dostačující vzorek. •Nejvíce uživatelé klikají na první produkty, kategorie a poté na průvodce výběrem kování a kontakty na hlavní navigaci. Využití výzkumu při designu a správě webové stránky https://lh5.googleusercontent.com/tY_rI-0rusjEPQ1DQSYdbzApaaehCPw_lg35d2ged42VYEKS7arxKcQx807qijf8L X0mtQTX6uYPaDSebRBuA9vFksa5bkDSD7921_mbp1Pf4cQhDcjyG3sCi6neCGAJ4ulo8-5L PŘÍPADOVÁ STUDIE - HOTJAR •Co návštěvníci ale minimálně využívají jsou filtry. •Zde vzniká otázka proč? •Jsou snad špatně vyřešené designově? •Nebo jsou v takto specifickém oboru nevyužitelné? •Nebo na e-shopu není dostatečně velké množství produktů, aby by byly filtry přínosné? Využití výzkumu při designu a správě webové stránky PŘÍPADOVÁ STUDIE - HOTJAR •Hotjar nám v tomto případě sloužil jako dobrý nástroj na zjištění problému a stanovení předpokladů. •Co už nám ale neprozradí je proč tomu tak je. •Tuto cenou informaci je potřeba dále otestovat, abychom na otázky získali odpovědi. •V našem případě nepoužívaných filtrů je vhodné využít uživatelské testování či A/B testování. Využití výzkumu při designu a správě webové stránky PŘÍPADOVÁ STUDIE - HOTJAR •Scrollmapa je další velice užitečná funkce, která nám ukazuje, jak daleko uživatelé “doscrollují”. •Na obrázku jde vidět, že se jedná o stránku s produktem, kde je předpoklad, že uživatel má zájem si o produktu zjistit něco více. Využití výzkumu při designu a správě webové stránky https://lh5.googleusercontent.com/Y-t8IzLbtWr5yky2DfK9iOu3zQmHmk-Q3_qKB8A1vT1fR9cHuFMr2qeM8Mm17VQqC vH3rGzup5Nnx2S9LraKYXb8XizyAaWi-K8YJSyl6GN2-Ne47kdS0fdbuBr2zh1qjBbo2Jho PŘÍPADOVÁ STUDIE - HOTJAR •Jako první věc v popisu produktu se momentálně nachází video. •Ještě do nedávna bylo video úplně dole a dostalo se k němu pouze 20% uživatelů a přitom mělo pořád slušnou proklikovost. •Jakmile jsme ale video přemístili nahoru, narostl zájem o video přes 400%. Využití výzkumu při designu a správě webové stránky PŘÍPADOVÁ STUDIE - HOTJAR 2. Využití funnelu a nahrávání uživatelů •Hotjar nabízí možnost sledování uživatelů pomocí nahrávání obrazovky. •Sledování všech záznamů je časově neefektivní a pro nás nemá úplně vypovídající hodnotu, pokud nesledujeme konkrétní věci, jako například využívání určitého prvku na webu. •Např. filtrace, navigace, formuláře… Využití výzkumu při designu a správě webové stránky PŘÍPADOVÁ STUDIE - HOTJAR •Dobře optimalizovaný objednávkový proces je jednou z nejdůležitější věcí na internetovém obchodu. •V Hotjaru si můžeme nastavit trychtýř (funnel), který nám ukáže kolik lidí došlo až na “thank you” stránku, viz. obrázek na dalším snímku. •Takže vidíme, kolik návštěvníků se dostalo z košíku přes pokladnu až k odeslání objednávky a děkovné stránce. Využití výzkumu při designu a správě webové stránky PŘÍPADOVÁ STUDIE - HOTJAR Využití výzkumu při designu a správě webové stránky https://lh5.googleusercontent.com/vBsQzfiRFB-EJNYMKNirrpiCx57swCx_78mwKpEXjJ10zE2Llw-TSMvnDKHzdFuR6 lbOYm3dk5D6BzcllQ2oAQUWlevgBqIoJJFm2Xa2n8_chyOdoZxtTpKnx6C5aTebiu6Usdp5 PŘÍPADOVÁ STUDIE - HOTJAR •Jak vidíme na obrázku tak konverzní poměr z pokladny na “thank you” page je relativně dobrý (tyto data si můžeme ještě překontrolovat také v Google Analytics). •Ovšem jak vidíme tak je 67% dropout (úbytek) při kroku z košíku do pokladny, což už může značit jistý problém. Využití výzkumu při designu a správě webové stránky Děkuji za pozornost. Využití výzkumu při designu a správě webové stránky