Testování webového rozhraní oční kamerou

Transkript

1 ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ FAKULTA ELEKTROTECHNICKÁ Testování webového rozhraní oční kamerou Semestrální projekt C2 předmětu A7B39TUR Řešitelé: Veronika Černohorská, Luboš Černý, Václav Dobeš, Jakub Dražan Vypracovali: Veronika Černohorská, Václav Dobeš

2 Obsah 1 ÚVOD CÍLOVÁ SKUPINA PŘÍPRAVA TESTOVÁNÍ HYPOTÉZY TESTOVANÁ ROZHRANÍ Blancheporte A Blancheporte B SCREENER TESTOVÉ ÚKOLY POTESTOVÉ DOTAZOVÁNÍ TESTOVÁNÍ POPIS ZPŮSOBU TESTOVÁNÍ TESTOVACÍ PROSTORY POUŽITÉ NÁSTROJE TESTOVACÍ VZOREK VÝSLEDKY TESTOVÁNÍ LOGY POST DOTAZNÍKY TEPLOTNÍ MAPY (HEAT MAPY) ZÍSKANÉ Z PROGRAMU I4TRACKING DATA PARTICIPANTA Č.8 WEB VERZE A DATA PARTICIPANTA Č.16 SPODNÍ ČÁST WEBU A DATA PARTICIPANTA Č.14 WEB B VYHODNOCENÍ HYPOTÉZ ZÁVĚR PŘÍLOHY TESTOVANÁ ROZHRANÍ Blancheporte A Blancheporte B TESTOVÁNÍ Screener Testovací úkoly Post-test dotazník

3 1 Úvod Tento projekt vznikl jako semestrální práce do předmětu Testování uživatelských rozhraní, v zimním semestru 2012 na Elektrotechnické fakultě ČVUT. Naším cílem bylo za pomoci technologie vyvinuté na naší fakultě, ústrojí kamery pro snímání pohybu oka, zanalyzovat chování většího množství uživatelů na webových stránkách obchodu Blancheporte. K tomuto webu nám byly předloženy dvě varianty úvodní stránky a naším úkolem bylo otestovat je z hlediska přehlednosti a grafického zpracování. Na základě nasbíraných dat ze vzorku uživatelů definovaných v bodě 2, jsme potvrdili, či vyvrátili hypotézy, určené zadavatelem tohoto projektu, jejichž znění je v bodě Cílová skupina Internetový obchod Blancheporte je zaměřen na ženy ve věku let. V internetovém prostředí tento věkový rozsah znamená určitou uživatelskou bariéru z důvodu dovedností této skupiny s užíváním osobního počítače. Vzhledem k omezeným možnostem, především po stránce motivační pro participanty, jsme se snažili tento vzorek nasimulovat z řad studentů naší fakulty, kteří s předmětem TUR nepřišli nikdy do styku. Stejně tak naši participanti pocházeli z řad široké veřejnosti našich známých a přátel, tak, abychom se co nejvíce přiblížili požadované cílové skupině našeho testovaného produktu. Na základě screeneru jsme se pak z této množiny snažili vybrat rovnoměrně rozprostřený vzorek lidí, kteří mají s nákupy oblečení na internetu zkušenosti a naopak, a zároveň také udržet odpovídající poměr ženy/muži. 3 Příprava testování Na začátku tohoto projektu bylo určit, jakých cílů chceme testováním a analýzou dat dosáhnout. Ty se vztahují na níže uvedené hypotézy, které se z nasbíraných dat snažíme potvrdit, nebo vyvrátit. 3.1 Hypotézy Před začátkem testování bylo nutné stanovit hypotézy, které následně utvářely směr celého testu. Tyto hypotézy jsme dostali od zadavatele a v závislosti na nich následně vytvořili sadu úloh pro participanty tak, abychom byli na konci testování schopni vyvodit závěry a tyto hypotézy buď potvrdit, nebo vyvrátit Hypotéza 1 Uživatelé, kteří na web přicházejí s potřebou vybrat a koupit nějaké zboží, například kalhoty, ignorují výrazné promo nabídky na úvodní stránce Hypotéza 2 Umístění vyhledávacího pole v hlavní obsahové části stránky zlepšuje jeho okamžitou 3

4 nalezitelnost Hypotéza 3 Odkazy umístěné v horní části záhlaví, nad logem webu, jsou pro uživatele velmi špatně nalezitelné Hypotéza 4 Výrazné barevné odlišení hlavní horizontální navigace navede uživatele rychleji na cestu k výběru zboží z nabízených kategorií Hypotéza 5 Delším textovým blokům uživatelé při řešení typických úloh (nákup zboží) nevěnují pozornost Hypotéza 6 Identifikace formuláře pro přihlášení k odběru novinek je pro uživatele rychlejší, pokud je na stránce rovnou vidět vstupní pole formuláře. 3.2 Testovaná rozhraní Pro test byla zadavatelem dodána dvě různá rozhraní, na kterých měl test probíhat Blancheporte A Rozhraní (viz příloha A) pro tento test označované jako A, bylo z důvodu omezených možností programu určeného pro testování oční kamerou a z toho plynoucí nečitelnosti nutno upravit. Touto úpravou je myšleno rozdělení na horní a dolní polovinu tak, aby se texty a obrázky na použitém monitoru daly přečíst a rozeznat Blancheporte B S rozhraním (viz příloha B) označovaném jako B se při přípravě testu pracovalo mnohem snáze. 3.3 Screener Pro výběr participantů testu jsme vytvořili předtestový dotazník (screener). Tento dotazník má dvě verze. Jednu předávanou uživateli k vyplnění a druhou pro moderátory a zadavatele ukazující požadované rozvržení testovacího vzorku. 4

5 SCREENER rozvržení Otázka Vaše pohlaví? Váš věk? Jak často nakupujete na internetu? Nakupujete na internetu oblečení? Jaké znáte e-shopy s oblečením? Jaké je Vaše zaměstnání? Odpověď Počet lidí, kteří takto odpověděli Muž 9 Žena Jednou týdně 0 Jednou měsíčně 9 Jednou za půlrok 7 vůbec 1 5 Ne 12 Jiné než Blancheporte 17 Student 16 Ostatní Testové úkoly y vytvořené pro testování měli za cíl potvrdit či vyvrátit zadané hypotézy. Úloha číslo jedna byla zaměřena na hypotézy 1 a 4. V druhé úloze byla testována hypotéza číslo 2. Třetí úloha ověřovala hypotézu 3 a čtvrtá úloha měla za cíl hypotézu 6. Pro ověření hypotézy číslo 5 se využijí výsledky uživatele při práci na úkolech na daném rozhraní. 3.5 Potestové dotazování Tento dotazník (viz 5.2.3) je určen pro potvrzení zjištění z hlavního testu. Otázky, jak jsou formulovány, si kladou za cíl ověření pravdivosti výsledků u hypotéz 1, 2, 3 a 5. 5

6 4 Testování Testování webového rozhraní oční kamerou Před samotným začátkem testu bylo nutné specifikovat minimální požadavky na prostředí, ve kterém se bude testovat. Z důvodu vysoké citlivosti oční kamery bylo nutné, aby participant, účastnící se testu, seděl na pevné židli. Pro testování byla zvolena kvantitativní metoda umožňující srovnání určitých ukazatelů. 4.1 Popis způsobu testování Testování bylo vedenou formou moderovaného sezení s participantem, kterému byly moderátorem v průběhu testu předkládány úlohy, o jejichž splnění se následně participant snažil. Participant následně o splnění úlohy moderátora informoval. 4.2 Testovací prostory Pro testování byla použita laboratoř Usability Lab Katedry počítačové grafiky a interakce na Karlově náměstí 13. Laboratoř je rozdělena do dvou částí. Část pro participanty je vybavena dvěma kamerami na zdech, reproduktory, mikrofonem, webkamerou a počítačem. Vedlejší místnost, určená pro přihlížející a vedoucí testu, je vybavena projektorem, monitory pro zobrazení záznamu přenášeného z kamer na zdech vedlejší místnosti, počítačem pro ovládání kamer a logování a záznam činnosti participanta, mikrofonem a pultem pro ovládání zvuku. 4.3 Použité nástroje Testování probíhalo na notebooku značky Dell s připojeným monitorem značky Sun a oční kamerou. Rozlišení bylo nastaveno na 1280x1024. V rámci testování byly využity aplikace I4Tracking pro záznam a vyhodnocení pohybu oka a Morae pro záznam a logování celého průběhu testu. 4.4 Testovací vzorek Pro testování byla vybrána skupina lidí většinou z řad studentů s pravidelně rozloženým množstvím můžu a žen. Uživatel ze skupiny má zkušenostmi s nákupem na internetu. 6

7 4 Výsledky testování Všechny videozáznamy testování byly znovu zhlédnuty, jelikož při logování v ULABu nebylo možné stihnout zapsat vše důležité, co se událo a často se stalo, že se log ani nepovedl. 4.1 Logy V následujících tabulkách označuje A1 úkol zakoupení libovolných kalhot, A2 zakoupení kalhot konkrétní značky, A3 objednání tištěného katalogu a A4 přihlášení se k odběru novinek (stejně číslované úkoly i pro variantu B). Jelikož úkoly pro oba weby byly stejné, zadávali jsme je participantům v různém pořadí, abychom předešli tomu, že se participant na prvním webu naučí, jak daný úkol splnit, a pak u druhého webu už bude vědět jak na to. Bohužel jsme přišli o videa s participanty P Při zálohování dat ve Windows nastala chyba a videa zmizela, ale teplotní mapy jednotlivých testování se dochovaly. Participant 1 A1 01:23 01:24 1 A2 01:38 01:39 1 Za použití vyhledávacího políčka. A3 01:49 01:52 3 A4 02:00 02:03 3 B3 02:34 02:35 1 B4 02:42 03:16 34 Dlouho nemohl najít, písmo je jiného stylu, než ostatní odkazy B2 03:25 03:37 12 Za použití vyhledávacího políčka. B1 03:47 03:49 2 Participant 2 B1 00:07 00:11 4 B2 00:20 00:25 - Nepoužil by vyhledávač. B3 00:40 00:42 2 B4 00:49 01: :55 přihlásil by se a tam by hledal odběr novinek => nápověda A3 01:32 01:35 3 A4 01:41 01:54 13 Našel v dolní části stránky. A2 03:00 03:05 - Bez vyhledávacího políčka. A1 03:06 03:07 1 7

8 Participant 3 Testování webového rozhraní oční kamerou B1 04:34 04:50 16 B2 05:03 05:12 9 Přes vyhledávač. B3 05:19 05:27 - Nalezeno v dolní části. B4 05:33 05:46 13 A3 06:20 06:24 4 A1 06:31 06:37 6 A4 06:43 06:55 12 Nalezeno v dolní části A2 07:01 07:08 7 Přes vyhledávač Participant 4 A1 00:35 00:45 10 A2 00:56 01:00 4 Přes vyhledávač. A3 01:11 01:40 29 Hledal by to v liště, tam to nenašel, koukl na dolní část, ale nakonec to našel nahoře. A4 01:49 01:51 2 B :45 30 Delší dobu hledal. B1 02:52 02:53 1 B2 02:58 03:00 2 Přes vyhledávač. B3 03:08 03:09 1 Našel nahoře i dole. Participant 5 B1 00:27 00:30 3 B4 00:41 01:18 37 Zaregistrovala by se => nápověda. B2 01:28 01:31 3 Přes vyhledávač. B3 01:42 01:45 3 A2 01:57 01:59 2 Přes vyhledávač. A4 02:04 02:18 14 A1 02:34 02:36 2 A3 02:44 02:48 4 Participant 6 B1 00:24 00:28 4 B2 00:40 00:44 B3 01:09 01:10 1 B4 01:24 01:29 5 A3 01:53 01:54 1 A1 02:00 02:02 2 Přes dámskou modu, moderátor se zeptá, jestli je i jiný způsob, odpoví, že přes vyhledávač. 8

9 A2 02:06 02:10 - Přes dámskou modu. A4 02:17 02:19 2 Participant 7 A1 00:34 00:38 4 A2 00:48 00:50 2 Přes vyhledávač. A3 01:10 01:14 4 A4 01:26 01:30 - Zalogoval by se nahoře, nápověda, že je to dole. B4 01:50 02:00 10 B1 02:10 02:12 2 B2 02:20 02:22 2 Přes vyhledávač. B3 02:39 02:41 2 Participant 8 A1 00:24 00:30 6 A2 00:42 00:45 3 Přes vyhledávač. A3 00:59 01:13 14 Nalezeno nahoře. A4 01:20 01:22 2 Nalezeno dole. B3 01:40 01:42 2 B1 01:48 01:49 1 B2 01:58 02:00 2 Přes vyhledávač. B4 02:06 02:14 8 Participant 9 B1 03:46 03:53 7 B2 04:02 04:04 2 Přes vyhledávač. B3 04:16 04:19 3 B4 04:30 04:36 6 A2 04:57 05:00 3 Přes vyhledávač. A4 05:04 05:24 20 Našel dole v textu. A3 05:36 05:55 19 Našel nahoře. A1 06:00 06:01 1 Participant 10 B1 01:45 01:48 3 B2 01:55 02:00 5 Přes dámskou módu, nebo přes vyhledávač. B3 02:17 02:18 1 B4 02:33 02:41 8 A3 03:08 03:11 3 Nalezeno nahoře. A2 03:15 03:16 1 Přes vyhledávač. 9

10 A4 03:28 03:37 9 A1 03:49 03:50 1 Scroll dolu, pak zase nahoru, protože si vzpomněl, že to viděl vlevo nahoře. Participant 11 B1 00:12 00:17 5 B2 00:28 00:31 3 Přes vyhledávač. B3 00:42 00:46 4 Nalezeno nahoře. B4 00:56 01:08 12 A3 01:35 01:44 9 Scroll dolu, zpět nahoru. A4 02:07 02:27 20 Scroll dolu, nalezeno v textu. A1 02:35 02:36 1 A2 02:40 02:42 2 Přes vyhledávač. 4.2 Post dotazníky Zde jsou výsledky dotazníků, které byly vyplňovány bezprostředně po ukončení hlavního testu. Participant 1 Co bylo nabízeno na úvodním velkém poutači? Ne Víte kde je vyhledávací pole na webu? Nahoře Kde byste hledal/a kontaktní údaje obchodu? Ne Na spodní část webu vůbec nekoukal. Participant 2 Co bylo nabízeno na úvodním velkém poutači? Ne Žena Víte kde je vyhledávací pole na webu? Nahoře, všiml si toho později. Kde byste hledal/a kontaktní údaje obchodu? Nahoře. Přeskakuje texty. Participant 3 Co bylo nabízeno na úvodním velkém poutači? -25% sleva Víte kde je vyhledávací pole na webu? Nahoře Kde byste hledal/a kontaktní údaje obchodu? Nahoře i dole Všimli jste si na webu textového odstavce a o čem byl? Všiml, ale nečetl. Participant 4 Co bylo nabízeno na úvodním velkém poutači? Ne Žena Víte kde je vyhledávací pole na webu? 10

11 Kde byste hledal/a kontaktní údaje obchodu? V lištách Participant 5 Co bylo nabízeno na úvodním velkém poutači? -25% sleva Víte kde je vyhledávací pole na webu? Nahoře Kde byste hledal/a kontaktní údaje obchodu? Nahoře nebo dole(u prvního webu na obou místech, u 2 asi dole) Participant 6 Co bylo nabízeno na úvodním velkém poutači? Ne Přesně obsah reklamy neví Víte kde je vyhledávací pole na webu? Kde byste hledal/a kontaktní údaje obchodu? V zápatí Participant 7 Co bylo nabízeno na úvodním velkém poutači? Ne Nevšímal si toho. Víte kde je vyhledávací pole na webu? Nahoře Kde byste hledal/a kontaktní údaje obchodu? Vpravo nahoře, nebo dole. Participant 8 Co bylo nabízeno na úvodním velkém poutači? Ne Slečna Víte kde je vyhledávací pole na webu? Nahoře Kde byste hledal/a kontaktní údaje obchodu? V lištách Participant 9 Co bylo nabízeno na úvodním velkém poutači? Ne Víte kde je vyhledávací pole na webu? Kde byste hledal/a kontaktní údaje obchodu? Dole, pravá strana. Všimli jste si na webu textového odstavce a o čem byl? Všiml, ale nečetl. Participant 10 Co bylo nabízeno na úvodním velkém poutači? Ne Víte kde je vyhledávací pole na webu? Kde byste hledal/a kontaktní údaje obchodu? Vpravo nahoře 11

12 Participant 11 Co bylo nabízeno na úvodním velkém poutači? Ne Žena Víte kde je vyhledávací pole na webu? Kde byste hledal/a kontaktní údaje obchodu? Tlačítko kontakty Všimli jste si na webu textového odstavce a o čem byl? Nacházely se v něm odkazy. Participant 12 Co bylo nabízeno na úvodním velkém poutači? Ne Víte kde je vyhledávací pole na webu? Nahoře Kde byste hledal/a kontaktní údaje obchodu? Participant 13 Co bylo nabízeno na úvodním velkém poutači? Ne Pani a nabídky oblečení. Víte kde je vyhledávací pole na webu? Nahoře Kde byste hledal/a kontaktní údaje obchodu? Nahoře Participant 14 Co bylo nabízeno na úvodním velkém poutači? Ne Vybavuji si jen tu paní. Víte kde je vyhledávací pole na webu? Nahoře Kde byste hledal/a kontaktní údaje obchodu? V lištách Participant 15 Co bylo nabízeno na úvodním velkém poutači? Ne Spodní prádlo, slevu si nevybavuji. Víte kde je vyhledávací pole na webu? Nahoře Kde byste hledal/a kontaktní údaje obchodu? Úplně dole, nebo úplně nahoře Všimli jste si na webu textového odstavce a o čem byl? Všiml, ale nečetl. Participant 16 Co bylo nabízeno na úvodním velkém poutači? Ne Víc nevím, koukal jsem jen na tu pani. Víte kde je vyhledávací pole na webu? U webu se starší paní přesně ví. Kde byste hledal/a kontaktní údaje obchodu? U webu se starší paní přesně ví. 12

13 5 Teplotní mapy (heat mapy) získané z programu I4Tracking Z důvodu velkého množství obrázků zde budou uvedeny pouze ukázkové mapy. Zbytek se nachází v příloze HeatMaps.zip. Heat mapy participantů číslo 2, 9, 11, 13 byly vyřazeny, protože z nich bylo zřejmé, že se participanti v průběhu testu hýbali, rozhodili zkaliborvané kamery a data byla tím pádem nepoužitelná. 5.1 Data participanta č.8 web verze A 13

14 5.2Data participanta č.16 spodní část webu A 5.3 Data participanta č.14 web B 14

15 6 Vyhodnocení hypotéz Hypotéza 1 Uživatelé, kteří na web přicházejí s potřebou vybrat a koupit nějaké zboží, například kalhoty, ignorují výrazné promo nabídky na úvodní stránce. Na ověření této hypotézy byl zaměřen úkol 1 + první otázka v post dotazníku. Tuto hypotézu můžeme potvrdit, jelikož pouze dva participanti zaregistrovali obsah promo nabídky. Odpověď, že tam byla nějaká žena, nebereme jako dostatečnou. Heat mapy ukazují, že participanti tuto oblast očima narychlo projeli, avšak nečetli obsah. Hypotéza 2 Umístění vyhledávacího pole v hlavní obsahové části stránky zlepšuje jeho okamžitou nalezitelnost. Na ověření této hypotézy byl určen úkol 2 + druhá otázka v post dotazníku. Tato hypotéza neplatí. Porovnali jsme časy do nalezení vyhledávacího pole na webu varianty A a B. Tyto časy se výrazně neliší. V některých případech participanti nalezli políčko rychleji ve variantě A, jiní ve variantě B, jejich počet je přibližně stejný. Hypotéza 3 Odkazy umístěné v horní části záhlaví, nad logem webu, jsou pro uživatele velmi špatně nalezitelné. Na ověření této hypotézy byl určen úkol 3 + třetí otázka v post dotazníku. Tuto hypotézu můžeme potvrdit. Porovnávali jsme časy k nalezení odkazu pro objednání tištěného katalogu, který se nacházel na obou variantách v horní (u varianty B i v dolní) části. Z výsledků je patrné, že nalezení odkazu ve variantě B bylo výrazně rychlejší, než u varianty A, kde se odkaz nacházel až nad logem webu. Z heat map varianty A je patrné, že participanti sledovali obsah lišty a dále směrem dolů. Hypotéza 4 Výrazné barevné odlišení hlavní horizontální navigace navede uživatele rychleji na cestu k výběru zboží z nabízených kategorií. Na ověření této hypotézy byl určen úkol 1 + třetí otázka v post dotazníku. Tuto hypotézu můžeme vyvrátit. Porovnali jsme časy i heat mapy obou variant. Rozdíl mezi nimi není. Participanti ihned věděli, kde hledat odkaz pro zakoupení kalhot. Barevné odlišení nehrálo roli, protože lišty v obou variantách se nachází v místech, na která jsou uživatelé internetových obchodů zvyklí. Hypotéza 5 Delším textovým blokům uživatelé při řešení typických úloh (nákup zboží) nevěnují pozornost. Na ověření této hypotézy byla zaměřena otázka v post dotazníku číslo 4, popřípadě úkol 4, protože u varianty A se participanti mohli přihlásit k odběru novinek přes odkaz, který se 15

16 nacházel uprostřed textového odstavce. Tuto hypotézu můžeme potvrdit. Pouze jeden participant si letmo přečetl, co bylo v odstavci nabízeno, a to pouze odkaz, který byl barevně zvýrazněn. Hypotéza 6 Identifikace formuláře pro přihlášení k odběru novinek je pro uživatele rychlejší, pokud je na stránce rovnou vidět vstupní pole formuláře. Na ověření této hypotézy byl určen úkol 4. Tuto hypotézu můžeme vyvrátit. Časy mezi nalezením formuláře na webu A a B se výrazně neliší. U webu B měli někteří participanti problém odkaz najít a to především kvůli jeho umístění uprostřed stránky. U webu A vstupní pole neovlivnilo lepší viditelnost, někteří participanti dokonce našli odkaz uprostřed textového odstavce, který byl výrazně méně viditelný, než velké políčko Newsletter v dolní části stránky. 7 Závěr Shrnutí výsledků je v následující tabulce. Hypotéza Uživatelé, kteří na web přicházejí s potřebou vybrat a koupit nějaké zboží, například kalhoty, ignorují výrazné promo nabídky na úvodní stránce. Umístění vyhledávacího pole v hlavní obsahové části stránky zlepšuje jeho okamžitou nalezitelnost. Odkazy umístěné v horní části záhlaví, nad logem webu, jsou pro uživatele velmi špatně nalezitelné. Výrazné barevné odlišení hlavní horizontální navigace navede uživatele rychleji na cestu k výběru zboží z nabízených kategorií. Delším textovým blokům uživatelé při řešení typických úloh (nákup zboží) nevěnují pozornost. Identifikace formuláře pro přihlášení k odběru novinek je pro uživatele rychlejší, pokud je na stránce rovnou vidět vstupní pole formuláře. Platí? ANO NE ANO NE ANO NE 16

17 8 Přílohy 8.1 Testovaná rozhraní Blancheporte A 17

18 8.1.2 Blancheporte B Testování webového rozhraní oční kamerou 8.2 Testování Screener SCREENER Participant No 1. Vaše Pohlaví? a) Muž b) Žena 2. Váš věk? a) b) c) d) e) f) g) Jak často nakupujete na internetu? a) jednou týdně b) jednou měsíčně 18

19 c) jednou za půlrok d) vůbec 4. Nakupujete na internetu oblečení? a) b) Ne 5. Jaké znáte e-shopy s oblečením? 6. Jaké je Vaše zaměstnání? Testovací úkoly 1. Chcete si koupit kalhoty, jak budete postupovat? 2. Chcete si koupit kalhoty Guess Lambada, zvolíte jiný postup? 3. Chcete si objednat tištěný katalog, jak budete postupovat? 4. Přihlaste se k odběru novinek em, jak budete postupovat? Post-test dotazník 1. Co bylo nabízeno na úvodním velkém poutači? ANO / NE Doplňující odpověď: 2. Víte kde je vyhledávací pole na webu? ANO / NE Doplňující odpověď: 3. Kde byste hledal/a kontaktní údaje obchodu? ANO / NE Doplňující odpověď: 4. Všimli jste si na webu textového odstavce a o čem byl? ANO / NE Doplňující odpověď: 19