EVALUACE doc. Ing. Martin Klepek, Ph.D. Ing. Tereza Pražáková Design a správa webové stránky PROCES TVORBY WEBU OBJEVOVÁNÍ EVALUACE VÝZKUM TVORBA Dle Jana Řezáče (Web ostrý jako břitva) VÝZKUM 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 EVALUACE – TESTOVÁNÍ POUŽITELNOSTI •Použitelnost je definována 5 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? EVALUACE – TESTOVÁNÍ POUŽITELNOSTI •Testování se skládá z několika částí, jejichž rozsah se může různit. •Opomenutí některé z nich však může mít na jeho přínos negativní dopad Výsledek obrázku pro usability test EVALUACE – 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.Výběr respondentů – vzorek účastníků testování by měl odpovídat cílové skupině 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ů. 3.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. 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í. EVALUACE – TESTOVÁNÍ POUŽITELNOSTI (postup) 5.Analýza výsledků testování – je potř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ů – seznámení s průběhem testování, komentář k výsledkům a detailní výklad aplikace doporučených opatření. 7. EVALUACE – MOUSE TRACKING •Mouse (cursor) tracking – Přesné sledování pohybu uživatele na webu. •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ýstup - tepelné mapy, které ukazují na nejfrekventovanější místa výskytu kurzoru. EVALUACE – MOUSE TRACKING •Výstup v podobě tepelné mapy. •Červená teplá místa zobrazují kde se pohyboval kurzor uživatele. Výsledek obrázku pro clickmaps EVALUACE – EYE TRACKING •Eye tracking - technologie, která sleduje pohyby a fixace oka, čímž zaznamenává, kam se osoba dívá. •Umožňuje analyzovat, na které části obrazovky nebo materiálu uživatel nejvíce zaměřuje svůj pohled. • •Usadíte respondenta za počítač, zapnete eye tracking, provedete kalibraci a zadáte respondentovi úkol na daném webu. •Výsledkem jsou fixační mapy či heat mapy, které znázorňují, kam se respondent díval a jak dlouho. •Nezbytná fyzická účast při testování – nelze realizovat na dálku. • • EVALUACE – EYE TRACKING •Výstup v podobě tepelné mapy. •Červená teplá místa zobrazují kde se uživatel díval. SouvisejÃcà obrázek EVALUACE – EYE TRACKING Výsledek obrázku pro heatmaps eyetracking EVALUACE – EYE TRACKING SouvisejÃcà obrázek •Pokud se osoba dívá do objektivu, lidé se zaměřují na její tvář. •Pokud se osoba dívá na text, lidé se zaměřují na obsah textu. EVALUACE – EYE TRACKING Výsledek obrázku pro path eyetracking •Path analysis (analýza cesty pohybu očí) umožňuje oproti tepelným mapám zobrazit, jak oči uživatele putovaly po webové stránce. EVALUACE – A/B TESTOVÁNÍ •A/B testování představuje metody, které umožňují testovat dvě či více variant určité webové stránky. •Výzkumník 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. EVALUACE – A/B TESTOVÁNÍ Výsledek obrázku pro ab testing https://splitmetrics.com/resources/what-is-ab-testing-and-why-it-matters-for-mobile-developers/ EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) •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. 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 EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) 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. Jak vidíme, nejvíce uživatelé klikají na první produkty, kategorie a poté na průvodce výběrem kování a kontakty na hlavní navigaci. https://lh5.googleusercontent.com/tY_rI-0rusjEPQ1DQSYdbzApaaehCPw_lg35d2ged42VYEKS7arxKcQx807qijf8L X0mtQTX6uYPaDSebRBuA9vFksa5bkDSD7921_mbp1Pf4cQhDcjyG3sCi6neCGAJ4ulo8-5L EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) •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í velké množství produktů, aby by byly filtry přínosné? EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) •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í. EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) •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. https://lh5.googleusercontent.com/Y-t8IzLbtWr5yky2DfK9iOu3zQmHmk-Q3_qKB8A1vT1fR9cHuFMr2qeM8Mm17VQqC vH3rGzup5Nnx2S9LraKYXb8XizyAaWi-K8YJSyl6GN2-Ne47kdS0fdbuBr2zh1qjBbo2Jho EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) •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 %. EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) 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. (Filtrace, navigace, formuláře…). EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) •Dobře optimalizovaný objednávkový proces je jednou z nejdůležitějších 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. •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. EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) https://lh5.googleusercontent.com/vBsQzfiRFB-EJNYMKNirrpiCx57swCx_78mwKpEXjJ10zE2Llw-TSMvnDKHzdFuR6 lbOYm3dk5D6BzcllQ2oAQUWlevgBqIoJJFm2Xa2n8_chyOdoZxtTpKnx6C5aTebiu6Usdp5 EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) •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. EVALUACE (PŘÍPADOVÁ STUDIE HOT JAR) Týmová práce doc. Ing. Martin Klepek, Ph.D. Ing. Tereza Pražáková Design a správa webové stránky •https://1url.cz/@dss-feedback-2024 •Pokračování na seminární práci.