1. Badania eyetrackingowe
masek sklepów
Home.pl, IAI-Shop.com i Sote.pl
12 sierpnia 2011
Tomasz Tomalik
1

2. Spis treści
Wstęp ................................................................................................................ 4
Cel badania ....................................................................................................... 5
Metoda .............................................................................................................. 5
Narzędzia ................................................................................................... 5
Przebieg badania ....................................................................................... 5
Uczestnicy i uczestniczki badania ............................................................. 5
Zadania ...................................................................................................... 6
Wprowadzenie do analizy ................................................................................. 7
Rodzaj badania .......................................................................................... 7
Elementy raportu ...................................................................................... 7
Home.pl ............................................................................................................ 8
1 Podsumowanie ................................................................................... 8
2 Sposób dotarcia do produktu ............................................................. 9
3 Co widzisz? – czyli jak ważne jest poprawne nazewnictwo ............. 10
4 Lista produktów ................................................................................ 11
5 Lista produktów ............................................................................... 12
6 Karta produktu................................................................................. 13
7 Strona koszyka ................................................................................. 14
8 Logowanie/Rejestracja/Gość ........................................................... 15
9 Formularz zamówienia .................................................................... 16
10 Potwierdzenie....................................................................................17
IAI-Shop.com.................................................................................................. 18
1 Podsumowanie ................................................................................. 18
2 Sposób dotarcia do produktu ........................................................... 19
3 Lista produktów ............................................................................... 20
2

3. 4 Karta produktu................................................................................. 21
5 Koszyk .............................................................................................. 22
6 Logowanie/Rejestracja/Gość ........................................................... 23
7 Formularz zamówienia .................................................................... 24
8 Potwierdzenie danych ...................................................................... 25
9 Zapisanie danych ............................................................................. 26
10 Potwierdzenie................................................................................... 27
SOTE ............................................................................................................... 28
1 Podsumowanie ................................................................................. 28
2 Sposób dotarcia do produktu ........................................................... 29
3 Lista produktów ............................................................................... 30
4 Karta produktu................................................................................. 31
5 Koszyk/Formularz zamówienia ....................................................... 32
6 Podsumowanie zamówienia ............................................................. 33
7 Potwierdzenie................................................................................... 34
Newsletter ....................................................................................................... 35
Podsumowanie................................................................................................ 36
3

4. Wstęp
 Na początku czerwca 2011 roku przetestowaliśmy użyteczność trzech
nowych masek sklepów internetowych oferowanych przez Home.pl,
IAI-Shop.com i Sote.pl.
 Narzędziem wspierającym obserwacje był eyetracker, który
rejestrował gdzie użytkownicy spoglądali podczas poruszania się po
stronach.
 Do badań zaprosiliśmy osiem osób, które miały za zadanie dokonać
zakupów w każdym ze sklepów i zapisać się do newslettera.
 Niniejszy raport stanowi podsumowanie przeprowadzonych badań
i przedstawia najważniejsze obserwacje oraz problemy, które
napotkali użytkownicy i użytkowniczki w trakcie testów.
4

5. Cel badania
Celem badania było wykrycie problemów i błędów związanych z
użytecznością poszczególnych masek sklepów. Zastosowanie eyetrackingu
pozwoliło zaobserwować, na jakie elementy użytkownicy i użytkowniczki
skupiają uwagę, oraz które części serwisu są przez nich pomijane.
Metoda
Narzędzia
Do badania wykorzystaliśmy eyetracker Tobii T120 użyczony od firmy
Eyetracking.pl. Zastosowane urządzenie pozwoliło zmierzyć punkty padania
wzroku na ekran monitora. Najnowsza technologia eyetrackera
bezinwazyjnie zbierała dane i nie ograniczała ruchów osób badanych.
Częścią eyetrackera był monitor o przekątnej 17 cali i rozdzielczości
1280x1024.
Przebieg badania Sprzęt do badań użyczyła nam firma Eyetracking.pl
W każdym indywidualnym badaniu brał udział jeden ochotnik lub
ochotniczka oraz osoba prowadząca. Zadaniem osoby prowadzącej było
wprowadzenie uczestników i uczestniczki w badanie oraz monitorowanie
pomiaru. Średni czas badania wynosił około 20 minut.
Uczestnicy i uczestniczki badania
W badaniach wzięło udział osiem osób intensywnie korzystających z
Internetu. Wśród uczestników i uczestniczek znalazły się trzy kobiety i pięciu
mężczyzn. Z ośmiu badanych wszystkie dokonywały regularnych zakupów
przez Internet.
5

6. Zadania
 Głównym zadaniem na wszystkich trzech podstronach było kupienie
konkretnego produktu. Zadanie kończyło się na stronie z
potwierdzeniem złożenia zamówienia.
 W przypadku sklepu Home.pl użytkownicy i użytkowniczki musieli Zakup ten produkt.
kupić produkt przedstawiony na zdjęciu z prawej. W dwóch
pozostałych sklepach osoby badane dokonywały zakupu telewizora Złóż zamówienie jako gość
LCD i roweru.
(bez rejestracji)
 Treść zadania we wszystkich warunkach brzmiała podobnie:
„Zakup _____. Złóż zamówienie jako gość (bez rejestracji)”.
 Użytkownicy i użytkowniczki dokonywali zakupu bez konieczności
rejestracji. Przy wypełnianiu formularzy byli proszeni o podanie
fikcyjnych danych.
 Drugim zadaniem było zapisanie się do newslettera. We wszystkich
trzech warunkach treść zadania brzmiała tak samo: „Zapisz się na
newsletter”. Zadanie kończyło się na znalezieniu pola newslettera i
wskazaniu go kursorem myszy.
 Sytuacja badawcza miała charakter zadaniowy gdzie sprawdzano
efektywność konkretnej ścieżki zakupowej. Taki charakter testu
odbiegał od sytuacji naturalnej w której klienci mieliby możliwość
zapoznania się z testowanym serwisem.
6

7. Wprowadzenie do analizy
Rodzaj badania
Badanie miało charakter jakościowy - dane otrzymane po analizie ośmiu
osób dostarczają informacji, jakie trudności i błędy mogą okazać się
problemem dla większej ilości osób korzystających z serwisu, jednak nie
pozwalają stwierdzić jak duży procent wszystkich użytkowników napotka te
same problemy.
Elementy raportu
Raport zawiera mapy cieplne miejsc, które przyciągały wzrok największej
ilości ochotników i ochotniczek badania. Przedstawiane rysunki pokazują
punkty fiksacji, czyli świadomie zauważane obszary, z pierwszych dziesięciu
sekund przebywania na stronie.
Na mapach cieplnych znajdują się również symbole kliknięcia myszką, w
obszarach, które wybierały osoby badane.
Poza wspomnianymi wynikami eyetrackingu raport został wzbogacony
o obserwacje osoby prowadzącej.
7

8. Home.pl
1 Podsumowanie
 Rozmieszczenie elementu wyszukiwarki okazało się bardzo intuicyjne
– osoby badane nie musiały poświęcać czasu na jej znalezienie.
 Prosty i przejrzysty układ strony sprawiał, że osoby badane nie miały
problemu z poruszaniem się po sklepie i znalezieniem interesujących
ich funkcji (np. newsletter).
 Proces składania zamówienia był intuicyjny i nie sprawiał osobom
badanym problemu.
 Wyszukiwarka nieobsługująca alternatywnych nazw produktów
utrudniała wykonanie zadania.
 Niezrozumiała kategoryzacja utrudniała znalezienie produktu.
 Jedynymi przyciskami akcji na liście produktów były przyciski „dodaj
do koszyka” – brakowało akcji przejścia do karty produktu (do karty
produktu można było przejść po kliknięciu w zdjęcie)
 Komunikaty na stronie były niezauważalne – nie odróżniały się
wizualnie od reszty strony, dlatego nie skupiały uwagi osób badanych.
 Brak informacji o jednostce miary sprawił, że osoby badane nie
wiedziały czy zamawiają produkt spożywczy na sztuki czy na
kilogramy.
8

9. 2 Sposób dotarcia do produktu
 Sześć osób szukając konkretnego towaru na stronie nawigowała za
pomocą menu produktowego w lewej kolumnie strony (rysunek).
 Kolejne dwie osoby wykorzystały w tym celu wyszukiwarkę.
 W przypadku części osób ich wzrok momentalnie skupiał się na
menu, potwierdza to niewielka ilość fiksacji na innych elementach w
pierwszych 10 sekundach przebywania na stronie.
 Osoby korzystające z wyszukiwarki również spoglądały na menu, lecz
go nie wybierały.
9

10. 3 Co widzisz? – czyli jak ważne jest poprawne
nazewnictwo
 Dla wszystkich osób badanych zdjęcie z produktem przedstawiało
marchewkę jednak wyszukanie tej nazwy w sklepie nie przynosiło
żadnego wyniku. Dla dwóch użytkowników korzystających z
wyszukiwarki oznaczało to brak tego produktu w sklepie. W
rzeczywistości produkt nosił nazwę „marchew” a wyszukiwarka po
prostu nie wspierała alternatywnego nazewnictwa.
 Powyższy przykład pokazuje jak ważne jest prawidłowe
odwzorowanie słownika pojęciowego posiadanego w systemie
poznawczym użytkowników i użytkowniczek. Choć niektóre nazwy
wydają się bardziej profesjonalne i ładne użytkownicy mogą z nich w
rzeczywistości nie korzystać.
10

11. 4 Lista produktów
 Nie tylko nazwa produktu, ale również odpowiednia kategoryzacja
była istotna do efektywnego wykonania zadania. Część użytkowników
i użytkowniczek miało trudność z wyborem prawidłowej podkategorii
warzyw. Większość użytkowników decydowała się na przeglądnięcie
całej listy produktów, która w tym przypadku była na szczęście
krótka.
 Dobrym rozwiązaniem w przypadku maski sklepu Home.pl było
umieszczenie wyszukiwarki zaraz pod kategoriami produktów. Dzięki
temu zapewniono użytkownikom i użytkowniczkom płynne i
bezwysiłkowe przejście do tej funkcjonalności. Osoby badane, które
nie wiedziały którą kategorię wybrać przechodziły wzrokiem do pola
wyszukiwarki i zaczynały z niej korzystać.
 Ta obserwacja wskazuje, że klienci i klientki sklepu mogą mieć
problem ze znalezieniem konkretnego produktu ze względu na brak
odpowiedniego przyporządkowania produktu do kategorii.
 W przypadku produktów znanych i łatwych do skategoryzowania
zawężanie do podkategorii może być bardzo intuicyjne (np. Sprzęt
elektroniczny: Komputery, Drukarki, Monitory itp.). Inaczej jest z
produktami z niejasną kategoryzacją – w przykładzie na rysunku nie
każdy jest w stanie odgadnąć gdzie znajdzie się bakłażan, papryka,
burak czy brokuł. W takich sytuacjach warto podpierać się zdjęciami
ze wzorcowymi produktami danej kategorii.
11

12. 5 Lista produktów
 Pomiar fiksacji wzroku wskazał, iż użytkownicy i użytkowniczki
bardzo szybko i płynnie przechodzili z jednego zdjęcia produktu na
drugi w poszukiwaniu konkretnego towaru. Widać wyraźnie, że
zadaniowe nastawienie ograniczało zakres eksploracji strony do
konkretnych obszarów. Osoby badane po znalezieniu zdjęcia
produktu zerkały na nazwę, opis i klikały przycisk „do koszyka”.
 W sklepie nie było przycisku z odnośnikiem do karty produktu.
Przejście do niej było możliwe po kliknięciu w nazwę lub zdjęcie
produktu.
12

13. 6 Karta produktu
 Ze względu na różne warianty produktu przed dodaniem do koszyka
użytkownicy i użytkowniczki musieli podać parametry „wielkość” oraz
„ilość”. Jak widać na rysunku osoby badane określały oba parametry i
dodawały produkt do koszyka.
 Użytkownicy i użytkowniczki nie wiedziały czy podając ilość określają
sztuki czy kilogramy (produktem była marchew o wartości 2,00 zł,
lecz brakowało informacji o jednostce miary). Jeden użytkownik
stwierdził, że są to produkty na sztuki więc wpisał wartość „20” gdyby
w rzeczywistości wpisał taką kwotę mógłby otrzymać w zamówieniu
20 kilogramów marchwi zamiast 20 marchewek.
 Dla większości osób uczestniczących w testach komunikat znajdujący
się u góry karty produktu był niewidoczny. Stonowany kolor
komunikatu nie przyciągał wzroku użytkowników i użytkowniczek
(grafika obok przedstawia końcowy komunikat lecz na stronie
pojawiał się wcześniej komunikat zamieszczony poniżej)
13

14. 7 Strona koszyka
 Strona koszyka była dla użytkowników i użytkowniczek bardzo
intuicyjna. Dobrym rozwiązaniem okazało się umieszczenie tu
powerbuttonów z opcjami dostawy i płatności. Użytkownicy i
użytkowniczki nie mieli również problemu ze zmianą ilości towarów
gdy tego potrzebowali.
14

15. 8 Logowanie/Rejestracja/Gość
 Użytkownicy i użytkowniczki nie mieli problemu z wyborem
odpowiedniej opcji logowania/rejestracji.
 Ze względu na zadaniowy charakter nie skupiali się na korzyściach
płynących z rejestracji.
15

16. 9 Formularz zamówienia
 Formularz zamówienia nie sprawił trudności żadnej osobie badanej.
16

17. 10 Potwierdzenie
 Użytkownicy i użytkowniczki w miarę dokładnie przeglądali
potwierdzenie zamówienia skupiając się głównie na cenie, a następnie
na podziękowaniu.
17

18. IAI-Shop.com
1 Podsumowanie
 Duża liczba elementów na stronie utrudniała skanowanie strony
wzrokiem i wyszukiwanie istotnych informacji (np. menu produktowe
i newsletter). Brak rozróżnienia graficznego ważnych elementów
potęgował ten efekt.
 Dobra kategoryzacja produktów sprawiała, że użytkownicy i
użytkowniczki bez problemu odnajdowali produkt posługując się
menu.
 Proces zamówienia zawierał niespodziewany krok „potwierdzenie
danych”, który dezorientował osoby badane. Myślały one, że
zamówienie zostało złożone i wychodziły ze strony. Tymczasem był to
krok pośredni przed właściwym zamówieniem towaru – część osób
kończyła zadanie przed złożeniem zamówienia.1
 Strona z potwierdzeniem zamówienia była trudna do skanowania
wzrokiem, brakowało wizualnego wartościowania treści.
1 Dotyczyło to strony, której zadaniem było maksymalizowanie ilości rejestracji. Jest to opcjonalna strona, która domyślnie jest wyłączona, a na czas testów została omyłkowo aktywowana.
18

19. 2 Sposób dotarcia do produktu
 Użytkownicy i użytkowniczki nie mieli problemu z dotarciem do
produktu – wszystkie osoby klikały na odpowiednią kategorię z menu
produktowego.
 Strona główna zawiera bardzo dużo elementów, które nie zostały
odpowiednio wyróżnione kolorystycznie. Trudno określić bez
wczytywania się w szczegóły, który element jest bardziej lub mniej
ważny. Na mapie cieplnej widać wiele punktów fiksacji w obrębie
elementów, które w zadaniu nie były istotne.
19

20. 3 Lista produktów
 Użytkownicy i użytkowniczki będąc na stronie z listą produktów
klikali w zdjęcie lub przycisk „zobacz szczegóły”. Osoby badane nie
wybierały w tym przypadku opcji „do koszyka”.
 Osoby badane zwracały również szczególną uwagę na cenę roweru.
20

21. 4 Karta produktu
 Osoby badane, które znalazły się na karcie produktu od razu
dodawały produkt do koszyka bez szczególnego zainteresowania
treścią tej strony. Wynikało to głównie z charakteru badania.
21

22. 5 Koszyk
 Koszyk nie sprawiał użytkownikom i użytkowniczkom większych
problemów. Kilka osób zwracała uwagę na przycisk „kontynuuj
zakupy”, który nie został wizualnie odróżniony od pierwszorzędnego
przycisku „złóż zamówienie”.
22

23. 6 Logowanie/Rejestracja/Gość
 Użytkownicy poprawnie wybierali przycisk złożenia zamówienia jako
gość. Dzięki dobrze opisanym przyciskom nie musieli czytać żadnych
innych tekstów.
23

24. 7 Formularz zamówienia
 Formularz zamówienia nie sprawiał użytkownikom i użytkowniczkom
większych problemów.
 Osoby badane poprawnie określały sposób dostawy i płatności.
24

25. 8 Potwierdzenie danych
 Użytkownicy i użytkowniczki wnikliwie studiowały stronę z
potwierdzeniem danych osobowych.
 Uwagę osób badanych przykuwały zwłaszcza dwa komunikaty w
kolorze czerwonym.
25

26. 9 Zapisanie danych
 Stroną, która sprawiła największy problem było zapisanie danych.
Graficznie była bardzo podobna do strony logowania/rejestracji.
Wszyscy użytkownicy i użytkowniczki byli stroną zdezorientowani i
nie wiedzieli co mają zrobić. Większość osób stwierdzała, że
zamówienie zostało przyjęte do realizacji i nie muszą już niczego
potwierdzać.
 Dopiero dokładne przestudiowanie treści strony przez kilku
użytkowników pozwoliło na dopełnienie przez nich zamówienia.
 „Zapisanie danych” to strona opcjonalna, która została omyłkowo
aktywowana na czas naszych testów. Domyślnie strona jest wyłączona
i można ją uruchomić z panelu administracyjnego. Jej główną funkcją
jest maksymalizacja ilości rejestracji.
26

27. 10 Potwierdzenie
 Kilka osób, które dotarły na stronę z potwierdzeniem stwierdziło, że
strona jest mało czytelna, co potwierdza mapa cieplna. Widać na niej,
że użytkownicy nie przyjmują konkretnego kierunku skanowania
strony. Elementy są rozproszone wizualnie i trudno wskazać, które
informacje są na niej najważniejsze.
27

28. SOTE
1 Podsumowanie
 Prosta graficznie strona i odznaczające się menu główne ułatwiało
użytkownikom i użytkowniczkom poruszanie się po stronie.
 Strona z podsumowaniem była oszczędna w treści, dzięki czemu
osoby badane bez wysiłku zaznajamiały się z zamieszczonymi tam
informacjami.
 Na liście z produktami brakowało przycisków akcji, lecz osoby badane
bez większych problemów przechodziły do karty produktu klikając na
zdjęcie produktu.
 Brak wizualnego wyróżnienia newslettera sprawił, że osoby badane
musiały dokładnie skanować całą stronę wzrokiem, aby go znaleźć.
 Rozkład wizualny koszyka z formularzem zamówienia nie wspierał
naturalnego skanowania wzrokiem. Osoby badane musiały poświęcić
chwilę na zorientowania się, które pola muszą wypełnić. Wypełnianie
formularza nie sprawiało jednak problemów.
28

29. 2 Sposób dotarcia do produktu
 Użytkownicy i użytkowniczki od razu zauważali menu produktowe i z
niego korzystali. Był to jedyny wyraźny element nawigacji, dlatego był
dobrze zauważalny.
29

30. 3 Lista produktów
 Osoby badane wybierały produkt i klikały w zdjęcie, aby przejść do
karty produktu. Czerwony przycisk dodania do koszyka nie zachęcał
użytkowników i użytkowniczki do klikania. Brakowało przycisku
„zobacz szczegóły” lecz osoby badane bez najmniejszego problemu
przechodziły do karty produktu.
30

31. 4 Karta produktu
 Osoby badane dodawały produkt do koszyka klikając w duży i łatwo
zauważalny przycisk.
 Ze względu na brak opisów użytkownicy i użytkowniczki nie mieli
możliwości zaznajomienia się z zaletami produktu.
31

32. 5 Koszyk/Formularz zamówienia
 Użytkownicy i użytkowniczki mieli problem z koszykiem, gdzie
elementy nie zostały logicznie i intuicyjnie rozmieszczone.
 Osoby badane po dłuższej chwili potrzebnej na rozeznanie się na
stronie wypełniały poszczególne pola formularza zamówienia, który
był zamieszczony na jednej stronie wraz z koszykiem.
 Wypełnienie formularza nie było dla użytkowników i użytkowniczek
problematyczne.
32

33. 6 Podsumowanie zamówienia
 Strona z podsumowaniem zamówienia nie sprawiła użytkownikom
i użytkowniczkom problemów. Wszystkie osoby zaznajamiały się z
informacjami zamieszczonymi na stronie i poprawnie składały
zamówienie.
33

34. 7 Potwierdzenie
 Potwierdzenie zamówienia było dla użytkowników i użytkowniczek
bardzo intuicyjne. Osoby badane zaznajamiały się z treścią tej
podstrony.
34

35. Newsletter
 Zadanie ze znalezieniem newslettera nie sprawiło problemu żadnej
osobie badanej. Najefektywniejszą stroną okazał się sklep platformy
Home.pl, który dzięki swojej prostocie ułatwiał użytkownikom i
użytkowniczkom znalezienie pola newslettera. Sklep IAI-Shop.com był
mocno przeładowany treścią, przez co znalezienie newslettera zajęło
osobom znacznie więcej czasu. Ostatni badany sklep Sote shop był w
miarę prosty i wyważony pod względem ilości treści, jednak newsletter
nie wyróżniał się wizualnie, przez co był trudny do znalezienia. Mapy
cieplne wskazują na ilość fiksacji użytkowników i użytkowniczek w
trakcie poszukiwania newslettera.
35

36. 36

37. Podsumowanie
 Przeprowadzone badania z użyciem eyetrackingu pozwoliły sprawdzić
zachowania użytkowników i użytkowniczek w trakcie wykonywania
kilku typowych zadań w badanych sklepach internetowych.
 Głównym celem było sprawdzenie ścieżki zakupowej i nawigacji po
sklepach. Sytuacja badawcza i zadaniowy charakter testu ogranicza
trafność badania - pozwala wskazać błędy z jakimi mogą spotkać się
osoby korzystające ze sklepów, ale nie pozwala przewidzieć jak duża
grupa klientów będzie miała podobne problemy.
 Pomimo zauważonych błędów warto zwrócić uwagę, że badane były
testowe maski sklepów. Każdy właściciel może dowolnie zmieniać
wygląd sklepu z panelu administracyjnego. Duży wpływ na
efektywność nawigacji i wydajność procesu zakupowego ma
dostosowanie sklepu do rodzaju produktu, jego kategoryzacji i
wybranej strategii sprzedaży.
37