Tepelná mapa Návrh uživatelského rozhraní FEL ČVUT Petr Stuchlík

Tepelná mapa Návrh uživatelského rozhraní 10.10.2011 FEL ČVUT Petr Stuchlík ([email protected])

PETR STUCHLÍK, A4M39NUR, FEL ČVUT

OBSAH 1.

ÚVOD ....................................................................................................................................................................................... 2 1.1

2.

ZADÁNÍ A CÍLOVÁ SKUPINA ................................................................................................................................................... 2

PŘÍPRAVA TESTŮ S UŽIVATELEM ................................................................................................................................. 3 2.1 OSLOVENÁ SKUPINA UŽIVATELŮ ............................................................................................................................... 3 2.2 SCREENER ............................................................................................................................................................................. 3 2.2.1 Veřejná část screeneru ................................................................................................................................................ 4 2.2.2 Neveřejná část screeneru ............................................................................................................................................ 5 2.3 INTERVIEW ............................................................................................................................................................................ 5 2.3.1 Poznámky k interview.................................................................................................................................................. 6 2.3.2 Vyhodnocení inerview ................................................................................................................................................. 6

3.

ANALÝZA UŽIVATELSKÝCH POŽADAVKŮ ................................................................................................................. 7 3.1 HTA MODEL SYSTÉMU .......................................................................................................................................................... 7 3.1.1 Plány hta ..................................................................................................................................................................... 7 3.2 PŘÍPADY POUŽITÍ ................................................................................................................................................................... 8 3.2.1 Osobní přehledy .......................................................................................................................................................... 8 3.2.2 Zobrazení výsledků ...................................................................................................................................................... 8 3.2.3 Správa domén.............................................................................................................................................................. 9 3.3 SKEČE SYSTÉMU .................................................................................................................................................................. 10

4.

LOW-FIDELITY PROTOTYP ........................................................................................................................................... 11 4.1 SCÉNÁŘE TESTOVÁNÍ .......................................................................................................................................................... 11 4.2 TESTOVÁNÍ PROTOTYPU ...................................................................................................................................................... 12 4.2.1 Nastavení testů .......................................................................................................................................................... 12 4.2.2 Pozorování a Vyhodnocení testů ............................................................................................................................... 14

5.

PŘÍLOHY .............................................................................................................................................................................. 16

1

2011


1.

ÚVOD Tento dokument je součástí semestrální práce pro předmět A4M39NUR na FEL ČVUT. Tento projekt si klade za cíl navrhnout uživatelské rozhraní pro webovou aplikaci spravující tepelné mapy. Systém pro správu tepelných map bude zpracovávat informace o pohybu uživatelů na webu a monitoringu jejich činnosti. Tato data je následně možné interpretovat v podobě tzv. heat-map1, ze kterých je patrné, na co uživatelé nejvíce klikají a co je na webu zajímá. Účelem takového systému není monitoring návštěvnosti, ale spíš odhalení částí webu, které jsou pro uživatele nezajímavé nebo málo viditelné.

1.1

ZADÁNÍ A CÍLOVÁ SKUPINA Navrhněte uživatelské rozhraní pro systém pracující s heatmaps – grafickými interpretacemi dat získaných monitoringem interakcí návštěvníka s webovou stránkou. Aplikace by měla být uživatelsky přívětivá a svým uživatelům ulehčovat práci v často prováděných úkonech. Cílová skupina Aplikace je cílená na odborníky v oblasti SEO, web-usability a online-marketing, kteří jsou zvyklí při své práci používat různé nástroje a software. Cílem je zaujmout firmy, které se do větší míry zabývají SEO problematikou, zejména se zaměřením na tzv. on-page faktory a reklamní kampaně, případně i jiné osoby, které podnikají na webu a je pro ně důležitý přehled o chování návštěvníků webových stránek.

1

Viz podobné řešení na: http://www.labsmedia.com/clickheat/index.html

2

2011


2.

PŘÍPRAVA TESTŮ S UŽIVATELEM V této kapitole se zaměřím na testování s uživateli, sestavím screener a připravím si otázky k interview. Charakterizuji také oslovenou skupinu uživatelů, kteří budou aplikaci později testovat, a shrnu průběh jednotlivých interview.

2.1

OSLOVENÁ SKUPINA UŽIVATELŮ Skupina participantů mého testu zastupuje cílovou skupinu, která denně pracuje na zvyšování webové návštěvnosti, čtenosti článků publikovaných online a celkově se zabývající SEO problematikou. Oslovil jsem tedy kolegy ve firmě, kde pracuji a která se zabývá webdesignem a SEO optimalizací.

2.2

SCREENER Hlavní funkce screeneru je vyfiltrovat z oslovené skupiny potencionálních účastníků testu ty, kteří neodpovídají dané cílové skupině (viz. popis uživatelů). Screener se skládá ze dvou částí – části veřejné a neveřejné. Veřejná část je předložena každému oslovenému uživateli a obsahuje jednak základní otázky filtrující potencionální testery a dále jednu, dvě otázky umožňující vybírat uživatele tak, abych v případě velkého počtu uchazečů mohl zaručit dostatečně pestrou testovanou skupinu. Neveřejná část obsahuje klíč, který na základě vyplněných odpovědí určí, zda uživatele k testu přizvat, či nikoliv.

3

2011


2.2.1

VEŘEJNÁ ČÁST SCREENERU Na jednotlivé otázky odpovídejte vždy tak, že zvolíte právě jednu z daných odpovědí (pokud nebude řečeno jinak).

1. Do které věkové skupiny patříte? a) 15 – 19 b) 20 – 29 c) 30 – 49 d) 50 a více 2. Uveďte prosím vaše zaměstnání. a) nezaměstnán b) student c) IT firma d) specializovaná SEO firma e) reklamní nebo/a marketingová agentura f) cestovní ruch g) internetový obchod h) jiné 3. Používáte ke své práci monitoring webové návštěvnosti? a) ano b) ne 4. Znáte některé z uvedených služeb pro monitoring návštěvnosti? (možno zvolit více odpovědí) a) Google Analytics b) Piwik c) AWStats d) Mint e) Clicky f) Site Meter g) Jiné: ………………………………….. 5. Používáte nějaké webové řešení PPC kampaní (např. Sklik nebo AdWords)? a) ano b) ne

4

2011


2.2.2

NEVEŘEJNÁ ČÁST SCREENERU Pokud dotazovaný odpoví podle klíče uvedeného níže, je vhodným reprezentantem cílové skupiny. Klíčové otázky (2, 3 a 4) jsou zvýrazněny. Otázka # 1. 2. 3. 4. 5.

Odpověď všechny d), e), f), g), h) a) alespoň 1 všechny Tabulka 1 - Neveřejný klíč ke screeneru

2.3

INTERVIEW Jak se uživatel staví k SEO? Q1: Myslíte si, že je pro vaše stránky důležitější počet zpětných odkazů nebo kvalitní obsah? Q2: Jaké přehledy (charakteristiky) o návštěvnosti jsou pro vás nejdůležitější? Q3: Uvítal/-a byste možnost zjistit, které oblasti webu vaše návštěvníky zajímají a které ne? Q4: Zajímá vás, kudy se na vaše stránky návštěvníci dostávají? Q5: Co vše chcete o svých návštěvnících vědět? Q6: Pracujete na SEO u velkého počtu webů najednou? Q7: Platíte jiným za linkbuilding, webovou reklamu nebo jiné kampaně?

Jaké služby uživatel potřebuje? Q8: Chtěl/-a byste vědět, na co přesně vaši návštěvníci klikají? Q9: Zajímá vás, jaké prohlížeče nebo rozlišení obrazovky návštěvníci používají? Q10: Zajímá vás, kdo, kdy a na jaké vaše reklamy kliknul nebo vám stačí, že víte, že se tak stalo? Q11: Je pro vás důležité vědět, které odkazy na webu jsou pro vaše návštěvníky nejatraktivnější? Q12: Jsou pro vás důležitá aktuální data o návštěvnosti? Q13: Srovnáváte návštěvnost vašich stránek s minulostí?

5

2011


2.3.1

POZNÁMKY K INTERVIEW Prvním participant pracuje ve firmě na pozici vedoucího SEO týmu a má na starost koordinaci projektů a komunikaci s klienty. Ke své práci používá různé SEO nástroje, některé častěji než jiné. Důležité je pro něj spolehnout se na správná data. Jelikož jeho klienty zajímají především výsledky, spoléhá se hlavně na monitoring off-page faktorů (pozice klíčových slov, ranky a počet zobrazení stránky). Chování návštěvníků je pro něj důležité např. u reklamních akcí. Druhý dotazovaný má na starost optimalizaci textů webových stránek a psaní článků. Zajímá ho především vyhledatelnost jeho článků na internetu. Vůbec ho nezajímá rozlišení obrazovky nebo prohlížeč. Chce vědět, kudy se návštěvník na článek dostal a hlavně kam z něj pokračoval dál (často vkládá do textu sponzorované odkazy).

2.3.2

VYHODNOCENÍ INERVIEW Z informací získaných z interview s dotazovanými je patrné, že by oba mohli do jisté míry ke své využít aplikaci pro monitoring chování návštěvníků. Zároveň by ale bylo dobré, aby si aplikaci mohli sami přizpůsobit k vlastním potřebám – každý zřejmě využije trochu jinou charakteristiku, jiný pohled na získaná data.

6

2011


3.

ANALÝZA UŽIVATELSKÝCH POŽADAVKŮ

3.1

HTA MODEL SYSTÉMU

Obrázek 1 - HTA model systému

3.1.1

PLÁNY HTA 4. Po spuštění systému se uživatel dostane do bodu 4. Personal dashboard (osobní plocha). Zde má k dispozici rychlý přehled změn, které nastaly od jeho posledního přihlášení. V tomto bodě je vše nastaveno podle předvoleb uživatele. 4.1 - 4.2 Jedná se o sled kroků pro nastavení/kustomizaci osobní plochy. 1. V tomto bodě je zobrazena tepelná mapa s nastavením od posledního přihlášení. Dále je k dispozici panel s možností změnit aktuální konfiguraci tepelné mapy. 1.1 – 1.2 Jedná se pravděpodobně o nejčastější průchod. Uživatel chce zobrazit tepelnou mapu pro danou webovou stránku. K tomu potřebuje vybrat doménu ze seznamu a případně i stránku (defaultně je nastavena homepage daného měřeného webu). 1.3 – 1.4 Tyto kroky slouží k zobrazení užšího výběru výsledků pomocí filtrů data a rodiny prohlížeče návštěvníka sledovaného webu. 1.3.1 – 1.3.2 Uživatel si zvolí období, ve kterém byly výsledky změřeny pomocí kalendáře. 2. Kroky slouží pro správu měřených domén. Uživatel může přidat nebo upravit sledované domény.

7

2011


3.2

3.2.1

PŘÍPADY POUŽITÍ

OSOBNÍ PŘEHLEDY Tento balíček seskupuje use cases týkající se správy a zobrazení osobních filtrů. UC01 umožní uživateli zobrazit jeho vlastní přehledy. UC02 umožňuje tyto přehledy měnit.

Obrázek 2 - Use Case balíček Osobní přehledy

3.2.2

ZOBRAZENÍ VÝSLEDKŮ

Obrázek 3 - Use case balíček Výsledky

8

2011

PETR STUCHLÍK, A4M39NUR, FEL ČVUT V tomto balíčku se nacházejí use cases pro zobrazení vlastní tepelné mapy. Use case číslo 3 je rozdělen do několika bodů. Ty umožňují vybrat zdroj dat pro tepelnou mapu nebo zúžit výsledky pomocí filtrů.

3.2.3

SPRÁVA DOMÉN Pro práci s tepelnou mapou je potřeba alespoň jednoduchá správa domén, které systém měří.

Obrázek 4 – Use case balíček Správa domén

9

2011


3.3

SKEČE SYSTÉMU

Požadavky na systém

Tepelná mapa s filtry

Uživatelský panel – pracovní plocha

10

2011


4.

LOW-FIDELITY PROTOTYP Elektronický low-fidelity prototyp aplikace je vytvořen pomocí software Balsamiq Mockups2 a je přiložen k tomuto dokumentu (A). V této kapitole jsou popsány scénáře testování tohoto prototypu v závislosti na stanovených požadavcích. Následně je popsán způsob a průběh testování. V poslední části jsou shrnuty výsledky testování a doporučení pro další iterace návrhu.

4.1

SCÉNÁŘE TESTOVÁNÍ Pro účely testování prototypu byly navrženy následující scénáře: 1. Zobrazit tepelnou mapu Úkol: Zobrazte tepelnou mapu pro stránku http://someotherdomain1.org/pageOne.html s filtrem My filter 2. Postup: V menu zvolit HeatMaps -> zvolit someotherdomain1.org v prvním select boxu -> zvolit pageOne.html v druhém select boxu -> tlačítko Show results -> v sekci Filters zvolit My filter 2 2. Smazat doménu Úkol: Odstraňte doménu doman2.com ze systému. Postup: V menu zvolit Configuration -> vybrat doménu domain2.com ze select boxu -> stisknout tlačítko Delete domain -> potvrdit 3. Vytvořit filtr Úkol: Vytvořte nový uživatelský filtr (nastavetní filtru není relevantní). Postup: V menu zvolit Configuration -> přepnout na záložku Filters -> stisknout tlačítko Add new filter -> stisknout tlačítko Save filter

2

Zkušební verze dostupná z http://www.balsamiq.com/

11

2011


4.2

TESTOVÁNÍ PROTOTYPU Cílem testování low-fidelity prototypů je odhalit případné nedostatky v návrhu uživatelského rozhraní výsledné aplikace na správu teplných map. Testováním budou pokryty následující požadavky: a. b. c. d.

Možnost zobrazit získaná data v podobě tepelných map Možnost efektivně filtrovat tepelné mapy Možnost vytvořit si vlastní filtry Možnost spravovat domény, pro které aplikace získává data

Jako metodika testování bylo zvoleno asistované testování se dvěma koncovými uživateli: každému uživateli jsou postupně zadány 3 úkoly popsané v předchozí kapitole – Scénáře testování. Jedná se o prověření základní funkcionality aplikace a efektivitu návrhu uživatelského rozhraní. Poznatky a doporučení získané během testování jsou shrnuty v poslední části této kapitoly.

4.2.1

NASTAVENÍ TESTŮ Testování elektronického prototypu probíhalo na laptopu se 14palcovou obrazovkou v prostředí kanceláře. Na laptopu byl spuštěn program Balsamiq Mockups a u každého testu vycházel uživatel z výchozí pozice, kterou byla obrazovka Dashboard. Testovaný měl k dispozici pouze myš, pomocí které se mezi jednotlivými mockups obrazovkami pohyboval.

Obrázek 5 - Testování s uživatelem

12

2011




13

2011


4.2.2

POZOROVÁNÍ A VYHODNOCENÍ TESTŮ Testování s uživatelem 1 probíhalo bez problémů. Uživatel postupoval intuitivně, bylo vidět, že ví, co dělá. K návrhu však měl zajímavou poznámku, a to, že na obrazovce „HeatMaps“ si nedokáže představit práci s vlastní tepelnou mapou, sekce „Filters“ prý podle něj zabírá moc místa pro samotný obrázek s mapou – ten by jinak mohl být větší a přehlednější.

Obrázek 8 - Málo místa pro tepelnou mapu

Uživatel číslo 2 také provedl všechny zadané úlohy bez větších obtíží. Zaznamenal jsem však zaváhání během úkolu založit nový filtr: participant byl poněkud zmaten vertical-tabbed boxem na obrazovce „Configuration“, který slouží k přepínání mezi nastavením domén a nastavením filtrů. Není jisté, zda uživatele zmátlo low-fidelity prostředí, které na uživatele působí jinak, než to reálné, nebo zda, se jedná o chybu v návrhu.

Obrázek 9 - Nepřehledný vertical tabbed-pane

14

2011

PETR STUCHLÍK, A4M39NUR, FEL ČVUT Výsledky testování s uživateli budou brány v potaz při dalších iteracích návrhu uživatelského rozhraní aplikace. Konkrétně by bylo dobré zajistit, aby tepelná mapa na obrazovce HeatMaps byla co možná největší (toho by bylo možné dosáhnout např. automatickým zobrazováním/skrýváním filtrů po najetí myši). Dále doporučuji změnit způsob oddělení konfigurace filtrů a domén, jde hlavně o zpřehlednění a o to, aby uživatel věděl, kde se momentálně v konfiguraci nachází a co má dělat dále. Možná by bylo dobré použít klasické horizontální tabbed-panes nebo jednotlivé sekce oddělit úplně do samostatných stránek.

15

2011


5.

PŘÍLOHY A. Low-fidelity prototyp (elektronický – formát Balsamiq Mockups), soubor low-fidelity.zip

16

2011

Tepelná mapa Návrh uživatelského rozhraní FEL ČVUT Petr Stuchlík

Recommend Documents