WebQuest dydaktyczny

Gdzie patrzy użytkownik?
Badania eye-trackingowe
w projektowaniu stron

Zaplanujesz, przeprowadzisz i zinterpretujesz prawdziwe badanie okulograficzne na stronach internetowych stworzonych przez Twój zespół. Rezultatem będzie raport badawczy z rekomendacjami UX.

Czas trwania 10 godzin dydaktycznych
Forma pracy Zespoły 3–4 osobowe
Produkt końcowy Raport + wykonanie projektu
Metoda WebQuest
01

Temat: Spojrzenie jako dane

Wyobraź sobie, że możesz zobaczyć dokładnie, co widzi użytkownik, gdy odwiedza zaprojektowaną przez Ciebie stronę internetową. Czy zauważa nagłówek? Czy trafia wzrokiem na przycisk akcji? A może całkowicie ignoruje sekcję, na której Ci zależało? Eye-tracking — okulografia — to technologia, która zamienia te pytania w mierzalne dane.

Metoda polega na śledzeniu ruchów gałki ocznej za pomocą kamery podczerwieni lub zwykłej kamery internetowej. Urządzenie rejestruje, gdzie patrzymy (punkt fiksacji), jak długo (czas fiksacji) i jaką trasę pokonuje nasz wzrok (ścieżka skanowania). Na podstawie tych danych tworzone są charakterystyczne wizualizacje: mapy cieplne (heatmapy) pokazują, które obszary ekranu przyciągają najwięcej uwagi, a gaze ploty — indywidualną trasę spojrzeń jednego uczestnika.

Eye-tracking jest dziś standardowym narzędziem w badaniach użyteczności (UX), marketingu, psychologii poznawczej i neurobiologii. Firmy takie jak Google, Nielsen Norman Group czy wielkie agencje e-commerce rutynowo stosują go do optymalizacji interfejsów. Ty masz dostęp do tego samego narzędzia — i do stron internetowych, które Twój zespół zaprojektował w ramach poprzedniego przedmiotu.

Pytanie centralne tego WebQuestu Czy interfejs Twojej strony internetowej prowadzi uwagę użytkownika zgodnie z Twoimi intencjami projektowymi — i co dane eye-trackingowe mówią o tym, jak można go ulepszyć?

Ten WebQuest jest zaprojektowany tak, abyście nie tylko nauczyli się obsługiwać sprzęt eye-trackingowy, ale przede wszystkim myśleli jak badacze: formułowali hipotezy, planowali metodologię, zbierali i interpretowali dane, a na końcu przekuwali wnioski w konkretne, uzasadnione rekomendacje projektowe.

Kontekst: przedmiotem badania będą strony internetowe przygotowane przez Wasz zespół na poprzednim przedmiocie. To sprawia, że jesteście jednocześnie projektantami i badaczami — wyjątkowa perspektywa, która wymaga od Was krytycznego spojrzenia na własną pracę.

👁

Co wnosi ten etap

Zrozumienie kontekstu i celu całego projektu badawczego. Po przeczytaniu tej sekcji potrafisz wyjaśnić komuś z zewnątrz, czym jest eye-tracking i dlaczego Wasz projekt ma sens badawczy.

02

Cel: Co macie stworzyć

Waszym zadaniem jest przeprowadzenie pełnego, samodzielnego badania eye-trackingowego — od planowania po analizę wyników. Projekt realizujecie w zespole 3–4 osób. Każdy etap kończy się konkretnym produktem, który składa się na końcowy raport.

1

Sformułujcie pytania badawcze i hipotezy

Na podstawie analizy swojej strony internetowej określcie, jakie pytania chcecie zbadać. Nie mogą być zbyt ogólne — im bardziej konkretne, tym lepsze dane. Przykład dobrego pytania: „Czy użytkownicy dostrzegają przycisk 'Zapisz się' umieszczony poniżej zakładki w ciągu pierwszych 5 sekund?"

2

Zaprojektujcie protokół badania

Opiszcie metodologię: kto jest uczestnikiem, jakie zadania wykona, które obszary ekranu (AOI — Areas of Interest) będziecie analizować, jakie metryki są kluczowe dla Waszych pytań. Protokół musi być na tyle precyzyjny, że inna osoba mogłaby na jego podstawie przeprowadzić badanie bez Waszej pomocy.

3

Przeprowadźcie sesje z uczestnikami

Zrealizujcie badanie z minimum 3–5 uczestnikami, stosując się do protokołu. Zbierzcie surowe dane: heatmapy, gaze ploty, metryki AOI. Udokumentujcie obserwacje z sesji — to cenny materiał jakościowy.

4

Zanalizujcie dane i sformułujcie wnioski

Przejrzyjcie wizualizacje, sprawdźcie metryki, zweryfikujcie hipotezy. Co dane potwierdzają? Co obala? Jakie wzorce patrzenia dominują? Gdzie jest problem projektowy? Każdy wniosek musi być ugruntowany w danych, a nie w intuicji.

5

Przygotujcie raport z rekomendacjami UX

Napiszcie raport badawczy (10–15 stron) według struktury naukowej: cel, metoda, wyniki, dyskusja, rekomendacje, ograniczenia. Sformułujcie minimum 3 konkretne, uzasadnione danymi rekomendacje projektowe dla swojej strony.

6

Zaprezentujecie projekt przed grupą

Prezentacja wyników badań przed pozostałymi zespołami i prowadzącym.

Ważne: podział ról w zespole Już teraz ustalcie, kto pełni jaką funkcję: kierownik projektu (koordynuje, pilnuje terminów), analityk danych (pracuje z oprogramowaniem ET i metrykami), moderator sesji (prowadzi uczestnika podczas badania), autor raportu (redaguje i formatuje dokument). Role mogą się przenikać, ale każda musi mieć właściciela.
📋

Produkty końcowe projektu

Arkusz planowania (faza 1–2) → dane surowe + notatki terenowe (faza 3) → raport PDF 10–15 stron → prezentacja raportu

03

Działania: Krok po kroku

I
Faza 1

Wprowadzenie i planowanie badań

1. Zapoznajcie się z metodą. Przejrzyjcie zasoby z sekcji „Zasoby" — szczególnie materiały wideo i artykuły wprowadzające. Odpowiedzcie w arkuszu planowania na pytania: Czym różni się fiksacja od sakkady? Co to jest heatmapa i gaze plot? Jakie są zastosowania eye-trackingu w UX?

2. Przeanalizujcie swoją stronę. Otwórzcie strony zaprojektowane na poprzednim przedmiocie. Obejrzyjcie je oczami badacza: które elementy są kluczowe dla celów strony? Które mogą sprawiać trudności użytkownikom? Sporządźcie listę co najmniej 5 obszarów „podejrzanych".

3. Sformułujcie pytania badawcze i hipotezy. Każde pytanie musi być konkretne, mierzalne i powiązane z elementem strony. Do każdego pytania dołączcie hipotezę — Wasze przewidywanie, które dane potwierdzą lub obalą. Minimum 3 pary pytanie–hipoteza.

4. Podzielcie role. Uzgodnijcie podział ról (kierownik, analityk, moderator, autor). Zapiszcie go w arkuszu planowania.

📄 Produkt: Arkusz planowania zawierający pytania badawcze, hipotezy i podział ról (Google Docs lub Miro — link wklejcie do formularza oddawczego).

II
Faza 2

Projektowanie protokołu badań

1. Opiszcie cel i uczestników. Kto jest docelowym użytkownikiem Waszej strony? Opisz go jako personę (wiek, doświadczenie z internetem, cel wizyty). Uczestnikami badania powinni być ludzie zbliżeni do tej persony — mogą to być inni studenci, ale upewnijcie się, że pasują do profilu.

2. Zaprojektujcie zadania dla uczestników. Przygotujcie 2–4 konkretne scenariusze użycia, które uczestnik wykona podczas sesji. Zadania muszą być naturalne i osadzone w kontekście (np. „Wyobraź sobie, że chcesz dowiedzieć się, jakie są ceny — znajdź tę informację"). Unikajcie zadań, które dosłownie wskazują, gdzie patrzeć.

3. Wyznaczcie Areas of Interest (AOI). Na zrzutach ekranowych każdej badanej podstrony zaznaczcie AOI — obszary, które chcecie analizować (np. „nagłówek hero", „przycisk CTA", „formularz", „nawigacja"). Nadajcie im nazwy. Wybierzcie metryki: czas do pierwszej fiksacji, liczba fiksacji, czas całkowity, procent uczestników, którzy w ogóle spojrzeli na AOI.

4. Peer review protokołów. Wymieńcie protokoły z innym zespołem. Oceńcie: Czy zadania są jednoznaczne? Czy AOI są dobrze dobrane? Czy metryki odpowiadają pytaniom badawczym? Dajcie sobie wzajemnie pisemną informację zwrotną i wprowadźcie poprawki.

📄 Produkt: Protokół badania (PDF) zawierający: cel, opis uczestnika/persony, instrukcję wstępną dla moderatora, listę zadań oraz wykaz AOI z metrykami.

III
Faza 3

Realizacja badań i zbieranie danych

1. Kalibracja sprzętu i pilotaż. Przed pierwszą właściwą sesją przeprowadźcie kalibrację eye-trackera i wykonajcie sesję pilotażową z osobą z innego zespołu (lub prowadzącym). Sprawdźcie, czy AOI są prawidłowo zaznaczone w oprogramowaniu, czy zadania brzmią naturalnie i czy dane spływają poprawnie. Po pilotażu wprowadźcie ewentualne korekty — nie wlicza się on do Waszej próby badawczej.

2. Przeprowadźcie sesje. Zrealizujcie badanie z minimum 3 uczestnikami (optymalnie 5). Podczas każdej sesji: moderator odczytuje instrukcję i zadania, nie podpowiada ani nie komentuje zachowania uczestnika; obserwator notuje głośne myślenie, mimikę, momenty zagubienia; operator pilnuje jakości kalibracji i poprawności nagrania. Czas jednej sesji: 10–15 minut.

3. Eksportujcie dane po każdej sesji. Bezpośrednio po zakończeniu sesji wyeksportujcie z oprogramowania: heatmapę łączoną, gaze plot dla uczestnika, raport metryk per AOI. Nazwijcie pliki systematycznie (np. P01_heatmap_strona_glowna.png). Nie odkładajcie eksportu na później — po zamknięciu projektu możecie stracić dane.

4. Prowadźcie notatki terenowe. Po każdej sesji (nie po wszystkich!) zapiszcie: co zaskoczyło, co uczestnik komentował, jakie problemy techniczne wystąpiły, czy coś odbiega od protokołu. Te notatki będą bezcenne przy interpretacji danych.

📄 Produkt: Folder z danymi surowymi (pliki eksportu z oprogramowania ET) + notatki terenowe po każdej sesji.

IV
Faza 4

Analiza danych i budowa raportu

1. Analiza ilościowa. Zestawcie metryki ze wszystkich uczestników w tabeli zbiorczej (możecie użyć arkusza kalkulacyjnego). Dla każdego AOI obliczcie: średni czas do pierwszej fiksacji, średnią liczbę fiksacji, odsetek uczestników, którzy w ogóle spojrzeli na ten obszar. Porównajcie wyniki z Waszymi hipotezami.

2. Analiza jakościowa. Przejrzyjcie gaze ploty każdego uczestnika indywidualnie. Szukajcie wzorców: Czy pojawia się skanowanie F-kształtne lub Z-kształtne? Czy uwaga skupia się na nieoczekiwanych miejscach? Czy uczestnicy pomijają kluczowe elementy? Porównajcie heatmapy łączone dla różnych zadań.

3. Weryfikacja hipotez. Dla każdej sformułowanej hipotezy napiszcie: dane potwierdzają / obalają / nie rozstrzygają. Uzasadnijcie odpowiedź konkretnymi liczbami lub obserwacjami z gaze plotów.

4. Sformułujcie rekomendacje UX. Na podstawie wniosków przygotujcie minimum 3 rekomendacje projektowe. Każda rekomendacja powinna zawierać: opis problemu (co dane pokazały?), proponowane rozwiązanie (co zmienić?), uzasadnienie (dlaczego to powinno pomóc?). Opcjonalnie: prosty wireframe pokazujący zmianę.

5. Napiszcie raport. Struktura: cel i pytania badawcze, metoda (uczestnicy, sprzęt, procedura), wyniki (tabele, heatmapy, gaze ploty), dyskusja (weryfikacja hipotez, interpretacja), wnioski, rekomendacje UX, ograniczenia badania, literatura. Objętość: 10–15 stron.

📄 Produkt: Raport badawczy (PDF).

V
Faza 5

Prezentacja projektu i refleksja

Każdy zespół ma 15 minut:

Przedstawcie: cel badania, metodę w skrócie, kluczowe wyniki z wizualizacjami ET, rekomendacje UX. Nie czytajcie raportu — opowiadajcie o projekcie.

Refleksja: co było najtrudniejsze w tym projekcie? Co zrobilibyście inaczej, gdybyście zaczynali od nowa? Co zaskoczyło Was w wynikach? To nie jest pytanie o technikalia — to pytanie o Wasze myślenie badacza.

Wskazówka metodologiczna Minimalna próba badawcza to 3 uczestników — przy takiej liczbie możecie wskazać wstępne tendencje, ale nie wyciągać mocnych uogólnień. 5 uczestników to standard w badaniach UX (Nielsen). Jeśli uda Wam się zrekrutować więcej — tym lepiej dla wiarygodności wniosków. Zaznaczcie tę kwestię w sekcji „Ograniczenia" raportu.
04

Źródła: Co przeczytać i obejrzeć

Poniżej znajdziecie starannie dobrane materiały, które pomogą Wam na poszczególnych etapach projektu. Nie musicie zapoznać się ze wszystkimi — wybierajcie te, które odpowiadają Waszym potrzebom w danej fazie.


Wprowadzenie do eye-trackingu
ART
Eye tracking w badaniach marketingowych Pozycja o metodologii ET w badaniach UX. Szczegółowe omówienie procedury, typowych błędów i interpretacji wyników.
ART
Understanding the F-Shaped and Z-shaped Reading Patterns for Optimal Usability in Complex Systems Klasyczne badanie wzorców skanowania stron internetowych. Punkt odniesienia dla interpretacji Waszych gaze plotów.
VID
How Eye Tracking Works Krótkie (3 min) wyjaśnienie zasady działania technologii okulograficznej. Dobre jako punkt wyjścia dla całego zespołu.
Planowanie i metodologia badań
KSI
Eyetracking jako jeden ze sposobów oceny doświadczeń użytkownika (UX) W. Kortas, A. Szalach, Zagadnienia Informacji Naukowej 62.2, Toruń 2024
KSI
Eye Movement Research An Introduction to its Scientific Foundations and Applications C. Klein, U. Ettinger, Studies in Neuroscience, Psychology and Behavioral Economics, Springer International Publishing, Switzerland 2019
ART
Heat maps and gaze plots Kiedy używać heatmapy, a kiedy gaze plotu? Jak czytać te wizualizacje i jakie błędy interpretacyjne są najczęstsze.
Oprogramowanie i narzędzia
SW
Tobii — Eye Tracking Software Oficjalna strona producenta do poprawnia oprogramowania.
SW
Tobii - How to use your Tobii Eye Tracker 4C Oficjalny przewodnik producenta przez poszczególne etapy ET.
SW
Tobii download Sterowniki dla eye-trackera Tobii
Wskazówka: jak korzystać z zasobów Nie czytajcie wszystkiego przed rozpoczęciem — korzystajcie z zasobów wtedy, gdy ich potrzebujecie. Artykuły o AOI czytajcie w Fazie 2. Materiały o interpretacji heatmap — w Fazie 4. Traktujcie tę listę jak bibliotekę podręczną, nie listę lektur do odhaczenia.
05

Ocena: Jak będziecie oceniani

Projekt oceniany jest całościowo — nie za sam wynik badania, ale za jakość procesu badawczego i myślenia. Nieoczekiwane wyniki, które rzetelnie zinterpretujecie i wyjaśnicie, są lepiej oceniane niż przewidywalne wyniki opisane powierzchownie. Ocena składa się z czterech kryteriów, z których każde opisano szczegółowo poniżej.

Kryterium Punkty Ocena dobra (4) Ocena bardzo dobra (5)
1. Protokół i planowanie
Fazy 1 i 2
3 pkt Pytania badawcze są sformułowane poprawnie, hipotezy logiczne. AOI wyznaczone trafnie, metryki dobrane do pytań. Protokół kompletny, umożliwiający samodzielną realizację badania. Pytania badawcze są precyzyjne i niebanalnie dobrane — wykraczają poza oczywiste elementy strony. Hipotezy uzasadnione obserwacją projektową. Protokół wzorcowy, uwzględnia warianty sytuacyjne i zagrożenia dla rzetelności.
2. Realizacja i dane
Faza 3
3 pkt Minimum 3 sesje przeprowadzone zgodnie z protokołem, dane surowe skompletowane i poprawnie wyeksportowane. Notatki terenowe obecne. 5 lub więcej sesji. Pilotaż uwzględniony i udokumentowany. Dane systematycznie nazwane i zarchiwizowane. Bogate notatki terenowe dokumentujące zachowania uczestników, które wzbogacają późniejszą interpretację.
3. Raport i analiza
Faza 4
2 pkt Dane ilościowe zestawione poprawnie. Heatmapy i gaze ploty opisane trafnie. Rekomendacje obecne i powiązane z danymi. Struktura raportu zgodna z wymaganiami. Głęboka interpretacja danych — identyfikacja wzorców, nie tylko opis obserwacji. Wnioski zaskakujące lub kontrintuicyjne rzetelnie wyjaśnione. Rekomendacje UX konkretne, wykonalne, z uzasadnieniem i opcjonalnym szkicem rozwiązania. Sekcja ograniczeń dojrzała metodologicznie.
4. Prezentacja projektu
Faza 5
2 pkt Poprawne przedstawienie projektu. Przedstawienie prezentacji na wysokim poziomie, poparte odwołaniem do konkretnych danych. Dojrzała refleksja końcowa pokazująca świadomość procesu badawczego.
Punkty Ocena
0 - 5 pkt dop.
6 - 7 pkt dst.
8 - 9 pkt db.
10 pkt bdb.

Co nie podlega ocenie: Wynik badania sam w sobie — to, czy Wasza strona okazała się dobra czy zła w eye-trackingu, nie wpływa na ocenę. Liczą się rzetelność procesu i jakość interpretacji.


Termin oddania raportu: na ostatnich laboratoriach.

Samoocena zespołu

Przed obroną wypełnijcie poniższy arkusz samooceny — indywidualnie, bez konsultacji z resztą zespołu. Nie jest on elementem oceny, ale pomaga Wam się przygotować do prezentacji i rozmowy o procesie.

Które pytanie badawcze uważam za najlepiej sformułowane i dlaczego?
Jaki wynik najbardziej mnie zaskoczył podczas analizy danych?
Jakie ograniczenie naszego badania uważam za najważniejsze?
Gdybyśmy mieli więcej czasu, co zmienilibyśmy w metodologii?
06

Co z tego wyniesiecie

Eye-tracking jest jednym z najpotężniejszych narzędzi do weryfikowania założeń projektowych — i jednym z najbardziej uziemiających. Dane oczu nie kłamią. Użytkownik może powiedzieć, że interfejs jest intuicyjny, a gaze plot pokaże, że przez dwie minuty szukał przycisku, który miał być oczywisty.

W tym projekcie nie chodzi o to, żebyście nauczyli się obsługiwać konkretne oprogramowanie. Oprogramowanie zmienia się co kilka lat. Chodzi o to, żebyście zrozumieli pewien sposób myślenia: hipoteza → obserwacja → dane → wniosek → decyzja projektowa. To sekwencja, którą jako projektanci i badacze będziecie powtarzać przez całą karierę zawodową — niezależnie od branży i narzędzi.

Realizując ten projekt, ćwiczycie konkretne kompetencje: planowanie badań empirycznych, pracę ze sprzętem pomiarowym, analizę danych jakościowych i ilościowych jednocześnie, formułowanie rekomendacji opartych na dowodach oraz komunikowanie wyników badań przed audytorium. To umiejętności poszukiwane na rynku pracy w UX, badaniach marketingowych, product managemencie i designie.

🔬

Myślenie badawcze

Planowanie empiryczne, formułowanie hipotez, weryfikowanie założeń danymi.

📊

Analiza danych ET

Heatmapy, gaze ploty, metryki AOI — czytanie i interpretacja wizualizacji okulograficznych.

✏️

Rekomendacje UX

Przekuwanie obserwacji w konkretne, wykonalne wskazówki projektowe oparte na dowodach.