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

1,175 views

Published on

Případová studie uživatelského testování návru webu Měšec.cz s využitím oční kamery a wireframů

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,175
On SlideShare
0
From Embeds
0
Number of Embeds
283
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • LP – popis kdy, co, atp. TB - za
  • LP – popis kdy, co, atp. TB - za
  • LP - lepší odpověď na co? horší na proč? Ideální na „kam“ Zde bych si převzal já povídání o metodice a konfiguraci.
  • WUD 2009: Co prozradí oční kamera a jak testovat wireframy webu

    1. 1. Co prozradí oční kamera a jak testovat wireframy World Usability Day 2009 Tomáš Bláha (Eyetracker.cz), Adam Fendrych (Dobrý web)
    2. 2. Měšec.cz <ul><li>20 000 návštěv denně </li></ul><ul><li>Vývoj od 01/2009 </li></ul><ul><ul><li>Analýzy </li></ul></ul><ul><ul><li>Interní rozhovory </li></ul></ul><ul><ul><li>Vývoj UI </li></ul></ul>
    3. 3. Testovací materiál
    4. 4. Testovací materiál
    5. 5. Průběh testování <ul><li>12 testerů </li></ul><ul><li>15 minut oční kamera </li></ul><ul><li>15 minut wireframy </li></ul><ul><li>Přenos a záznam zvuku a videa </li></ul>
    6. 6.
    7. 7. Proč takto? <ul><li>Oční kamera </li></ul><ul><ul><li>Otestovat grafické řešení </li></ul></ul><ul><ul><li>Ověřit některé teze </li></ul></ul><ul><ul><ul><li>Viditelnost reklam </li></ul></ul></ul><ul><ul><ul><li>Srozumitelnost navigace </li></ul></ul></ul><ul><li>Wireframy </li></ul><ul><ul><li>Neomezené množství k otestování </li></ul></ul><ul><ul><li>Srozumitelnost složitějších žebříčků a tabulek </li></ul></ul>
    8. 8. Uživatelské testování 20. 10. 2009 Testování použitelnosti webu s i bez oční kamery
    9. 9. Uživatelské testování 20. 10. 2009 Testování použitelnosti webu s i bez oční kamery
    10. 10.
    11. 11. Proč zapojit oční kameru? <ul><li>ZPŘESŇUJE VÝSLEDKY </li></ul><ul><li>Přesné informace, kam se respondent dívá a kterým prvkům věnoval pozornost </li></ul><ul><li>Oční kamera neukazuje jen prvky, které uživatel vidí, ale také, kterých si nevšiml nebo zcela ignoroval </li></ul><ul><li>Respondent není vyrušován a může se chovat přirozeně </li></ul><ul><li>Respondent nás nemůže jednoduše podvést podvést </li></ul>
    12. 12. M et odika <ul><li>Think aloud – metodika (nejen) pro „klasické“ uživatelské testování </li></ul><ul><li>Uživatel přemýšlí nahlas a komentuje své chování </li></ul><ul><li>Bez oční kamery nebo s oční kamerou </li></ul><ul><li>Paralelně s in-depth interviews </li></ul><ul><li>PEEP ( post experience eye tracked protocol ) </li></ul><ul><li>Metodika přímo pro eyetracking </li></ul><ul><li>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 . </li></ul>SPECIÁLNĚ PRO OČNÍ KAMERU
    13. 13. Konfigurace testování 20. 10. 2009 Testování použitelnosti webu s i bez oční kamery Oční kamera Ovládací počítač Pozorovací monitor
    14. 14. Konfigurace testování 20. 10. 2009 Testování použitelnosti webu s i bez oční kamery Oční kamera Ovládací počítač Pozorovací monitor
    15. 15. 20. 10. 2009 Testování použitelnosti webu s i bez oční kamery
    16. 16. Konfigurace testování 20. 10. 2009 Testování použitelnosti webu s i bez oční kamery Oční kamera Ovládací počítač Pozorovací monitor
    17. 17.
    18. 18. Konfigurace testování 20. 10. 2009 Testování použitelnosti webu s i bez oční kamery Oční kamera Ovládací počítač Pozorovací monitor
    19. 19.
    20. 20. <ul><li>Video záznam </li></ul>Výstupy
    21. 21. <ul><li>Gaze plot </li></ul>Výstupy 1 2
    22. 22. <ul><li>Gaze plot </li></ul>Výstupy 1 2
    23. 23. <ul><li>Heat mapa </li></ul>Výstupy kliky myší
    24. 24. <ul><li>Gaze opacity </li></ul>Výstupy
    25. 25. <ul><li>Events tracking </li></ul>Výstupy
    26. 26. <ul><li>AOI analýza </li></ul>Výstupy
    27. 27. Klíčové body přípravy testu <ul><li>Příprava! </li></ul><ul><li>Hypotézy! </li></ul><ul><li>Zadaný úkol přímo ovlivňuje podobu výstupu! </li></ul><ul><li>Vždy objevíte něco nečekaného </li></ul><ul><li>Boj mezi kvalitativní metodikou a touhou zjistit kvantitativní výsledky </li></ul><ul><li>Cíl „chci jen zjistit kam se uživatelé dívají“ není dobrý. </li></ul>
    28. 28. www.mesec.cz 20. 10. 2009 Testování použitelnosti webu s i bez oční kamery
    29. 29. Chování na HP
    30. 30. Volné pozorování 20-30s Plnění úkolu Prvních 5 s Chování na HP
    31. 31. volné pozorování plnění úkolů Chování na HP
    32. 32. volné pozorování plnění úkolů Chování na HP
    33. 33. volné pozorování plnění úkolů Chování na HP
    34. 34. volné pozorování plnění úkolů Chování na HP
    35. 35. volné pozorování plnění úkolů Chování na HP
    36. 36. Problémová oblast
    37. 37. <ul><li>Spodní část stránky ignorována díky ohraničení bannery </li></ul>Problémová oblast
    38. 38. Čtyřnavigace nad článkem
    39. 39.
    40. 40. 20. 10. 2009
    41. 41. 20. 10. 2009
    42. 42. Testování wireframů <ul><li>Co zjistíte </li></ul><ul><ul><li>Srozumitelnost prvků </li></ul></ul><ul><ul><li>Orientaci na stránce </li></ul></ul><ul><ul><li>Názvosloví </li></ul></ul><ul><li>Co nezjistíte </li></ul><ul><ul><li>Funkčnost – technické řešení </li></ul></ul><ul><ul><li>Grafika </li></ul></ul>
    43. 43. Hi-fi, lo-fi, klikání <ul><li>Náčrtky </li></ul><ul><li>Wireframy </li></ul><ul><li>Interaktivní wireframy </li></ul>
    44. 44.
    45. 45. Testování wireframů <ul><li>Co nelze </li></ul><ul><ul><li>Zadávat testovací úkoly </li></ul></ul><ul><ul><li>Nechat uživatele samostatně pracovat </li></ul></ul><ul><li>Jak se ptát </li></ul><ul><ul><li>Kde byste hledal… </li></ul></ul><ul><ul><li>Co znamená tato položka… </li></ul></ul><ul><ul><li>Co se stane po kliknutí na… </li></ul></ul>
    46. 46.
    47. 47.
    48. 48.
    49. 49.
    50. 50.
    51. 51. Shrnutí – hlavní výhody <ul><li>Oční kamera </li></ul><ul><ul><li>Odpověď na otázku „Kam se uživatel dívá?“ (nebo nedívá) </li></ul></ul><ul><ul><li>Méně ovlivněné chování uživatele </li></ul></ul><ul><li>Wireframy </li></ul><ul><ul><li>Velmi snadné změny </li></ul></ul><ul><ul><li>Rychlá příprava </li></ul></ul><ul><ul><li>Možnost ptát se během testu </li></ul></ul>
    52. 52. Děkujeme za pozornost <ul><li>Tomáš Bláha </li></ul><ul><ul><li>e-mail: tomas.blaha @ eyetracker.cz </li></ul></ul><ul><ul><li>telefon: 777 350 850 </li></ul></ul><ul><li>Adam Fendrych </li></ul><ul><ul><li>e-mail: adam.fendrych @ dobryweb.cz </li></ul></ul><ul><ul><li>telefon: 277 004 652 </li></ul></ul>

    ×