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

Podobné dokumenty
Eye Tracking. Testování uživatelského rozhraní internetového obchodu Blancheporte za pomoci oční kamery

Test s uživatelem - Synkron

České vysoké učení technické v Praze

Kvalitativní test s uživatelem - VLC Media Player

Test s uživatelem Ashampoo Burning Studio

Semestrální práce C1- Test s uživatelem

Městská cyklonavigace [IM-WMC]

České vysoké učení technické v Praze Fakulta elektrotechnická. Testování uživatelského rozhraní test s uživateli. VLC media player

Rozhraní YouTube.com! Semestrální práce C! Testování použitelnosti v laboratoři!

Testování webové aplikace

Uživatelský test desktopové aplikace Google Maps

Testování použitelnosti webové aplikace Studentagency.cz. Tomáš Ivanič Ondřej Chvíla Lukáš Chvátal Jakub Berka Petr Frantál

Navigace na webových stránkách

Návod na použití prezentační techniky

Představení notebooku Uživatelská příručka

Uživatelský manuál na obsluhu mobilní aplikace CMOB

Seminární práce obecné a technické pokyny

Testování s uživateli - KMPlayer

Seminární práce z fyziky stručné pokyny

Rezervační systém TROJHŘIŠTĚ hriste.pist.cz

UŽIVATELSKÝ MANUÁL.

Testování aplikace Discord

Testování zařízení Emtec D850h Movie Cube. České vysoké učení technické v Praze Fakulta elektrotechnická

TECHNICKÁ UNIVERZITA V LIBERCI FAKULTA UMĚNÍ A ARCHITEKTURY. Studijní program: B8206 Výtvarná umění. Obor: Vizuální komunikace BAKALÁŘSKÁ PRÁCE

Testování webových stránek

České vysoké učení technické v Praze

Podmínky použití webu Shopletaky.cz Seznam kapitol


Rychlý průvodce Barbone Boss. Prohlídka notebooku Barbone Boss. Pohled zepředu

Využití webových kapacit v cestovním ruchu

1. krok Přihlaste se. Klikněte na políčko Přihlášení

Obrazovka. Návod k aplikaci

Inspiron 13. Nastavení a technické údaje. řada v 1. Model počítače: Inspiron Regulační model: P69G Regulační typ: P69G001

Výzva k podání nabídky včetně zadávací dokumentace na veřejnou zakázku malého rozsahu

Test uživatelského rozhraní aplikace Google Maps

UŽIVATELSKÁ PŘÍRUČKA KLÁVESNICE

M I S Y S - W E B. Intranet řešení systému MISYS. Verze Příručka uživatele

Projekt Vzdělávání dotykem CZ.1.07/1.3.00/ WORD 2013 práce s textovými soubory. Autoři: Jan Heller a David Peterka

České vysoké učení technické v Praze Fakulta Elektrotechnická

o Cena zahrnuje kompletní náklady na výrobu objednaného zboží a základní balení zboží (do fólie po 5 až 10 kusech).

CTUGuide (XXX-KOS) D1

P edstavení notebooku

Prostorová orientace. Dítě pojmenovává, co je na obrázku nahoře, co dole, co je vpravo, vlevo; co je vpravo nahoře, vlevo dole

Testováni AIMP3. Martin Vrabel, Danylo Tkachenko, Sergey Krasotin, Lukas FIgura. Akademicky rok: 2014/2015

Dálkové ovládání HP Mobile Remote Control (pouze u vybraných modelů) Uživatelská příručka

Přídavný modul čtečky ClearReader +

ÚVOD 3 SEZNÁMENÍ SE SYSTÉMEM 4

TESTOVÁNÍ UŽIVATELSKÉHO ROZHRANÍ ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE NÁSTŘEL VYPRACOVALI: PETR JAROŠ, MARTIN PŘÍHODA, RADIM VESELÝ, MIROSLAV PAPÍRNÍK

Zadavatel: Česká republika Ministerstvo zemědělství IČ:

emachines D620 řady Stručné pokyny

Stav: červen TRACK-Guide

Radka Vyoral Krakovská - OBCHODNÍ PODMÍNKY platné k: , 23:27

- doplnění dotazu před provedením výmazu dlaždice nebo všech dlaždic

DHL Freight MICROSITE

MANUÁL uživatelská příručka Speciální IT systémové řešení

Testová ní zář í zení HTC Desiře HD

Metodický materiál. Cvičné příklady a témata pro soutěž OFFICE - ZŠ. Ing. Zdeněk Matúš, Mgr. Čestmír Glogar, 2015,

v posluchárně CH1 Návod k obsluze ovládacího panelu EXTRON MLC226

1 Obsah. Obsah Scénář č. 3 nalezení kalendáře akcí... 13

Testujeme notebook pro opravdové hráče: Toshiba X200

Dálkové ovládání HP Mobile Remote Control (pouze u vybraných modelů) Uživatelská příručka

Moderní způsob výuky fyziky

Modul výsledky zkoušek

VHF/UHF demodulátor (TV pøijímaè) videosignálu a monofonního zvuku v I.-V. pásmu TV s digitálním ladìním kanálù

Uživatelský manuál Radekce-Online.cz

WDV5270 HD "Lagoon" Uživatelský manuál

E.C.S. řada nová generace obrat o 360 ( Systém vyvinut ve Florencii v r.2009 )

Office podrobný průvodce. Tomáš Šimek

Zpravodajský web pro televizi Michal Hanzlík

Semestrální práce A2 z předmětu A7B36TUR. Testování uživatelského rozhrání internetového serveru YouTube.com

Helios RED a Internetový obchod

ISPOP 2016 MANUÁL K VYPLNĚNÍ FORMULÁŘŮ PRO OHLAŠOVÁNÍ ÚDAJŮ PRO VODNÍ BILANCI

Obsah. Úvodem 11 Komu je kniha určena 11 Forma výkladu 11 Co Internet nabízí a co se dozvíte v této knize 12

Projekt Odyssea,

INSTALAČNÍ A UŽIVATELSKÝ NÁVOD. Ver 1.0 ( ) HD020. Digitální hodiny a skrytá kamera s wifi

Představení notebooku Uživatelská příručka

ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE. Semestrální práce z předmětu A7B36TUR. Testování aplikace Tuba

TESTOVÁNÍ S UŽIVATELEM Ashampoo Burning Studio

TEL , TEL , DVD srpen 2010 OBJEKT SO 01 - BUDOVA KCEV DATUM. F.1.4.i

3. Průběh rekonstrukce. Nahoře nové odpočívadlo. Uprostřed dláždění hlavních pěších tras. Dole oprava původního oplocení od ul. Fr. Čejky.

ZoomText 10.1 pro Windows. Dodatek k uživatelské příručce

CS WAVE Virtuální pracovní stůl svařování Malá verze Manuál uživatele

Dálkové ovládání HP Mobile Remote Control (pouze u vybraných modelů) Uživatelská příručka

SMĚRNICE KOMISE 2003/94/ES. ze dne 8. října 2003,

Planeta facebook. obsah 6/10. Kompletní průvodce programem

Instalační manuál

E-learningový systém Moodle

Technické podmínky pro technický automobil chemický

Mobilní dálkové ovládání HP ScrollSmart (pouze u vybraných modelů) Uživatelská příručka

COLORMANAGEMENT Potřebujeme konzistentní barvy?

Mozaika. Cirkus Berousek

PORTÁL ELEKTRONICKÝCH STUDIJNÍCH TEXTŮ

Studentský projekt s odvážnými ambicemi Aneb Zlaté české ručičky nejsou jen mýtus...

Výzva k podání nabídky včetně zadávací dokumentace na veřejnou zakázku malého rozsahu

XSL-V80P Videozvonek ZONEWAY

below belly button gynekologická ambulance mudr. simona vlčková

Testování uživatelského rozhraní

Video sada Instalační manuál

1. ZKOPÍROVÁNÍ VZOROVÉHO GOOGLE

AVG_ANTIVIR. Semestrální projekt předmětu Návrh uživatelských rozhraní Julie Partyková, Ondřej Mirtes,

Transkript:

Č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š 17.12.2012

Obsah 1 ÚVOD... 3 2 CÍLOVÁ SKUPINA... 3 3 PŘÍPRAVA TESTOVÁNÍ... 3 3.1 HYPOTÉZY... 3 3.2 TESTOVANÁ ROZHRANÍ... 4 3.2.1 Blancheporte A... 4 3.2.2 Blancheporte B... 4 3.3 SCREENER... 4 3.4 TESTOVÉ ÚKOLY... 5 3.5 POTESTOVÉ DOTAZOVÁNÍ... 5 4 TESTOVÁNÍ... 6 4.1 POPIS ZPŮSOBU TESTOVÁNÍ... 6 4.2 TESTOVACÍ PROSTORY... 6 4.3 POUŽITÉ NÁSTROJE... 6 4.4 TESTOVACÍ VZOREK... 6 4 VÝSLEDKY TESTOVÁNÍ... 7 4.1 LOGY... 7 4.2 POST DOTAZNÍKY... 10 5 TEPLOTNÍ MAPY (HEAT MAPY) ZÍSKANÉ Z PROGRAMU I4TRACKING... 13 5.1 DATA PARTICIPANTA Č.8 WEB VERZE A... 13 5.2DATA PARTICIPANTA Č.16 SPODNÍ ČÁST WEBU A... 14 5.3 DATA PARTICIPANTA Č.14 WEB B... 14 6 VYHODNOCENÍ HYPOTÉZ... 15 7 ZÁVĚR... 16 8 PŘÍLOHY... 17 8.1 TESTOVANÁ ROZHRANÍ... 17 8.1.1 Blancheporte A... 17 8.1.2 Blancheporte B... 18 8.2 TESTOVÁNÍ... 18 8.2.1 Screener... 18 8.2.2 Testovací úkoly... 19 8.2.3 Post-test dotazník... 19 2

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ě 3.1. 2 Cílová skupina Internetový obchod Blancheporte je zaměřen na ženy ve věku 40-60 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. 3.1.1 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. 3.1.2 Hypotéza 2 Umístění vyhledávacího pole v hlavní obsahové části stránky zlepšuje jeho okamžitou 3

nalezitelnost. 3.1.3 Hypotéza 3 Odkazy umístěné v horní části záhlaví, nad logem webu, jsou pro uživatele velmi špatně nalezitelné. 3.1.4 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í. 3.1.5 Hypotéza 5 Delším textovým blokům uživatelé při řešení typických úloh (nákup zboží) nevěnují pozornost. 3.1.6 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. 3.2.1 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. 3.2.2 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

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 8 11-20 4 21 30 13 31 40 0 41 50 0 51 60 0 61 70 0 71 80 0 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í 1 3.4 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

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

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 P12-16. 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:09 20 00: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

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 B4 02.15 02: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

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

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

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

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

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

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

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

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

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

8.1.2 Blancheporte B Testování webového rozhraní oční kamerou 8.2 Testování 8.2.1 Screener SCREENER Participant No 1. Vaše Pohlaví? a) Muž b) Žena 2. Váš věk? a) 11 20 b) 21 30 c) 31 40 d) 41 50 e) 51 60 f) 61 70 g) 71 80 3. Jak často nakupujete na internetu? a) jednou týdně b) jednou měsíčně 18

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í? 8.2.2 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 emailem, jak budete postupovat? 8.2.3 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