WUD 2009: Co prozradí oční kamera a jak testovat wireframy webu

Co prozradí oční kamera a jak testovat wireframyWorld Usability Day 2009Tomáš Bláha (Eyetracker.cz), Adam Fendrych (Dobrý web)

snímek | datum | dokument | 2

Měšec.cz

• 20 000 návštěv denně• Vývoj od 01/2009

» Analýzy» Interní rozhovory» Vývoj UI


Testovací materiál


Testovací materiál


Průběh testování

• 12 testerů• 15 minut oční kamera• 15 minut wireframy• Přenos a záznam zvuku a videa



Proč takto?

• Oční kamera» Otestovat grafické řešení» Ověřit některé teze

• Viditelnost reklam• Srozumitelnost navigace

• Wireframy» Neomezené množství k otestování» Srozumitelnost složitějších žebříčků a tabulek

snímek | datum | dokument |

Uživatelské testování

20. 10. 2009Testování použitelnosti webu s i bez oční kamery

8


Uživatelské testování


9



Proč zapojit oční kameru?ZPŘESŇUJE VÝSLEDKY• Přesné informace, kam se respondent dívá a

kterým prvkům věnoval pozornost• Oční kamera neukazuje jen prvky, které uživatel

vidí, ale také, kterých si nevšiml nebo zcela ignoroval

• Respondent není vyrušován a může se chovat přirozeně

• Respondent nás nemůže jednoduše podvést podvést

11


MetodikaThink aloud – metodika (nejen) pro „klasické“ uživatelské

testování• Uživatel přemýšlí nahlas a komentuje své chování• Bez oční kamery nebo s oční kamerou• Paralelně s in-depth interviews

PEEP (post experience eye tracked protocol)• Metodika přímo pro eyetracking• Respondent si v klidu bez zásahů moderátora projde test a

následně již společně s moderátorem interpretuje své chování nad záznamem z oční kamery.

12

SPECIÁLNĚ PRO OČNÍ KAMERU


Konfigurace testování


13

Oční kamera

Ovládací počítač

Pozorovací monitor




14

Oční kamera


Pozorovací monitor

snímek | datum | dokument | 20. 10. 2009Testování použitelnosti webu s i bez oční kamery

15




16

Oční kamera


Pozorovací monitor





18

Oční kamera


Pozorovací monitor



Video záznam

Výstupy

20


Gaze plot

21

Výstupy

1 2


Gaze plot

22

Výstupy

1 2


Heat mapa

23

Výstupy

kliky myší


Gaze opacity

24

Výstupy


Events tracking

25

Výstupy


AOI analýza

26

Výstupy


Klíčové body přípravy testu• Příprava!• Hypotézy!• Zadaný úkol přímo ovlivňuje podobu

výstupu!• Vždy objevíte něco nečekaného• Boj mezi kvalitativní metodikou a touhou

zjistit kvantitativní výsledky• Cíl „chci jen zjistit kam se uživatelé dívají“

není dobrý.

27


www.mesec.cz


28


Chování na HP


Volné pozorování 20-30s Plnění úkolu

Prvních 5 s

Chování na HP


volné pozorování plnění úkolů

Chování na HP



Chování na HP



Chování na HP



Chování na HP



Chování na HP


Problémová oblast


• Spodní část stránky ignorována díky ohraničení bannery

Problémová oblast


Čtyřnavigace nad článkem


snímek | datum | dokument | 20. 10. 2009 40

snímek | datum | dokument | 20. 10. 2009 41


Testování wireframů

• Co zjistíte» Srozumitelnost prvků» Orientaci na stránce» Názvosloví

• Co nezjistíte» Funkčnost – technické řešení» Grafika


Hi-fi, lo-fi, klikání

• Náčrtky• Wireframy• Interaktivní wireframy



Testování wireframů

• Co nelze» Zadávat testovací úkoly» Nechat uživatele samostatně pracovat

• Jak se ptát» Kde byste hledal…» Co znamená tato položka…» Co se stane po kliknutí na…







Shrnutí – hlavní výhody

• Oční kamera» Odpověď na otázku „Kam se uživatel dívá?“ (nebo

nedívá)» Méně ovlivněné chování uživatele

• Wireframy» Velmi snadné změny» Rychlá příprava» Možnost ptát se během testu


Děkujeme za pozornost

• Tomáš Bláha» e-mail: [email protected] » telefon: 777 350 850

• Adam Fendrych» e-mail: [email protected]» telefon: 277 004 652

mailto:[email protected]






Technology

WUD 2009: Co prozradí oční kamera a jak testovat wireframy webu