Eyetracking – co to jest i jak wykorzystać go w projektowaniu stron internetowych?

Dlaczego niektóre strony internetowe przyciągają uwagę natychmiast, a inne ignorujemy mimo atrakcyjnej grafiki? Odpowiedź często kryje się w tym, jak faktycznie patrzymy na poszczególne elementy witryny. Eyetracking ujawnia prawdziwe wzorce zachowań wzrokowych, pokazując które fragmenty przyciągają największą uwagę, a które pozostają niezauważone.

Z tego artykułu dowiesz się:

• Czym jest eyetracking?
• Jak działa eyetracking?
• Jakie metody badań eyetrackingowych wykorzystuje się w projektowaniu UX?
• Jak interpretować mapy cieplne i dane z badań wzroku?
• Jakie konkretne problemy projektowe rozwiązuje eyetracking?
• Jak wdrożyć badania eyetrackingowe dla swojej strony?

Najważniejsze informacje:

• Eyetracking to technologia śledząca ruch wzroku w czasie rzeczywistym za pomocą podczerwieni. Urządzenia montowane pod monitorem lub w okularach rejestrują fiksacje, czasy patrzenia i rozkład uwagi bez aktywnej współpracy badanego.
• Badania eyetrackingowe wykorzystują cztery metody analizy: mapy cieplne pokazujące rozkład uwagi, mapy fiksacji z punktami zatrzymania wzroku, scanpath analysis ujawniający ścieżki skanowania oraz analizę obszarów zainteresowania (AOI) mierzącą czas spędzony w każdym z nich.
• Interpretacja danych opiera się na analizie fiksacji – te dłuższe niż 300 ms oznaczają świadome przetwarzanie, rozkład uwagi weryfikuje hierarchię wizualną, wzorce jak wzór F pokazują naturalne ścieżki wzroku, a czas patrzenia ujawnia skuteczność elementów.
• Eyetracking rozwiązuje problemy niemożliwe do wykrycia innymi metodami – identyfikuje elementy odciągające uwagę, wykrywa banner blindness, optymalizuje czytelność i umożliwia testowanie layoutów z obiektywnymi danymi o zauważalności elementów.
• Wdrożenie wymaga: wyboru urządzenia pod monitor, rekrutacji 15-20 uczestników z grupy docelowej, przygotowania scenariusza z zadaniami oraz analizy wyników w specjalistycznym oprogramowaniu.

Eyetracking – definicja

Eyetracking to metoda rejestrująca promieniowanie podczerwone odbijające się od gałki ocznej, która pozwala precyzyjnie określić, gdzie w danym momencie skierowany jest wzrok osoby badanej. Technologia ta śledzi ruch gałek ocznych w czasie rzeczywistym.

Eyetracking to technologia służąca do śledzenia ruchów oczu i punktów, na które patrzy użytkownik.

Definicja eyetrackingu

Rejestrowane są zarówno fiksacje wzroku badanego – czyli momenty, gdy oko zatrzymuje się na konkretnym punkcie – jak i szybkie przeskoki między różnymi obszarami ekranu.

Jak działa eyetracking?

Działanie eyetrackingu można podzielić na następujące etapy:

Zasada działania śledzenia wzroku

Współczesne urządzenia do eyetrackingu działają na zasadzie podczerwieni niewidocznej dla ludzkiego oka. Z pomocą eyetrackera można zarejestrować odbicie podczerwieni od rogówki i źrenicy, a specjalne oprogramowanie analizuje te dane, obliczając dokładną pozycję wzroku z precyzją pomiaru wynoszącą często poniżej jednego stopnia kąta widzenia. System analizuje dno oka pośrodku źrenicy, co pozwala na niezwykle dokładne określenie punktu, na który skierowany jest wzrok użytkownika.

Rodzaje urządzeń do eyetrackingu

Na rynku istnieje kilka typów urządzeń dostosowanych do różnych scenariuszy badawczych. Najpopularniejsze są systemy w formie listwy montowanej pod monitorem, które sprawdzają się idealnie w testach stron internetowych. Osoba badana siedzi przed komputerem i naturalnie korzysta ze strony, podczas gdy eyetracker w czasie rzeczywistym rejestruje każdy ruch jej oczu, nie wymagając żadnych dodatkowych działań.

Alternatywą są rozwiązania w postaci lekkich okularów, które pozwalają osobie badanej swobodnie poruszać się w dowolnej przestrzeni. Takie urządzenia działają dzięki łączności bezprzewodowej i przydają się podczas testowania aplikacji mobilnych czy interfejsów w środowiskach fizycznych.

Dane rejestrowane przez eyetracker

Badania techniką eyetrackingu wykonywane dzięki eyetrackerowi dostarczają informacji o tym, w jakiej kolejności użytkownicy wchodzą w interakcję z konkretnymi punktami na stronie oraz jak długo trwa ich aktualne skupienie na badanym elemencie. System rejestruje nie tylko to, gdzie pada wzrok, ale także średni czas patrzenia na poszczególnych elementach i procentowy rozkład uwagi przypadającej na różne obszary interfejsu. Te dane pozwalają projektantom zrozumieć, które elementy strony www faktycznie absorbują uwagę użytkowników, a które są całkowicie pomijane mimo starannego zaprojektowania.

Jakie metody badań eyetrackingowych wykorzystuje się w projektowaniu UX?

Badania eyetrackingowe w obszarze User Experience opierają się na kilku metodach analizy danych wzrokowych:

Mapy cieplne (heatmapy)

Podstawową techniką są mapy cieplne, które wizualizują procentowy rozkład uwagi na stronie – ciepłe kolory jak czerwień i pomarańcz oznaczają obszary intensywnie oglądane, podczas gdy zimne odcienie wskazują fragmenty ignorowane przez użytkowników. Powstają one przez agregację danych z wielu sesji testowych i pokazują, które sekcje witryny przyciągają największą uwagę naturalnie, bez konieczności pytania uczestników o ich preferencje. Ta forma wizualizacji jest szczególnie przydatna podczas prezentacji wyników klientom, ponieważ intuicyjnie pokazuje rozkład uwagi na stronie.

Mapy fiksacji

Druga metoda to mapy fiksacji, które przedstawiają konkretne punkty, w których wzrok osoby badanej zatrzymywał się najdłużej. Każda fiksacja oznaczona jest kółkiem, którego wielkość odpowiada czasowi patrzenia w danym punkcie – większe kółka oznaczają dłuższe skupienie uwagi. Dodatkowo numeracja pokazuje, w jakim zostały zauważone poszczególne elementy, co pozwala zrozumieć naturalną ścieżkę wzroku podczas pierwszego kontaktu ze stroną. W przeciwieństwie do map cieplnych, mapy fiksacji zachowują szczegółowość indywidualnych sesji testowych.

Analiza ścieżki wzroku (scanpath)

Badania techniką tzw. scanpath analysis skupiają się na śledzeniu ścieżki wzroku badanego w konkretnej sekwencji. Ta metoda ujawnia, jak użytkownik skanuje stronę – czy porusza się w przewidywalny sposób zgodny z projektem, czy może jego uwagę odciągają niechciane elementy. Analiza scanpath jest szczególnie użyteczna w badaniach UX, ponieważ pokazuje, które składniki tła przeszkadzające w percepcji kluczowych treści mogą wymagać przeprojektowania. Linie łączące kolejne punkty fiksacji tworzą wizualizację ruchu oczu użytkownika podczas wykonywania konkretnego zadania.

Rejony zainteresowania (AOI)

Metoda określonych rejonów zainteresowania (Areas of Interest, AOI) pozwala precyzyjnie zmierzyć skuteczność konkretnych elementów interfejsu. Badacz definiuje obszary takie jak przyciski call-to-action, menu nawigacyjne czy sekcje z produktami, a następnie analizuje, ile czasu użytkownicy poświęcili na oglądanie każdego z tych regionów. Dzięki temu można obiektywnie porównać, które warianty projektowe lepiej kierują uwagę użytkowników na pożądane miejsca. System automatycznie agreguje dane dotyczące czasu spędzonego w każdym zdefiniowanym obszarze, liczby fiksacji oraz kolejności, w jakiej użytkownicy je zauważali.

Jak interpretować mapy cieplne i dane z badań wzroku?

Dane z badań eyetrackingowych wymagają właściwej interpretacji, aby przekształcić surowe informacje o ruchu oczu w praktyczne wnioski projektowe. Sama wizualizacja map cieplnych czy ścieżek wzroku to dopiero początek analizy – prawdziwa wartość pojawia się, gdy zestawimy te dane z celami biznesowymi strony i zadaniami użytkowników.

Analiza czasu fiksacji

Mapy fiksacji pokazują nie tylko gdzie użytkownicy patrzyli, ale przede wszystkim jak długo utrzymywali uwagę na konkretnym punkcie. Czas fiksacji dłuższy niż 300 milisekund wskazuje na świadome przetwarzanie informacji – użytkownik nie tylko rzucił okiem, ale faktycznie czytał tekst lub analizował element graficzny. Krótkie fiksacje poniżej 200 milisekund sugerują, że wzrok jedynie przeskanował obszar bez głębszego zaangażowania poznawczego. Te różnice w czasie fiksacji pomagają odróżnić elementy, które faktycznie angażują użytkowników, od tych, które są jedynie mimowolnie zauważane podczas skanowania strony.

Długi czas fiksacji na elemencie nie zawsze oznacza zainteresowanie – często sygnalizuje problemy ze zrozumieniem treści. Formularz, który generuje liczne fiksacje o średnim czasie 5-8 sekund, prawdopodobnie wymaga przeprojektowania, ponieważ użytkownicy walczą z jego interpretacją. Odróżnienie zaangażowania od frustracji wymaga analizy kontekstu i sekwencji fiksacji, a nie tylko surowych liczb z map cieplnych.

Michał Włodarczyk, Head of Customer Success

Procentowy rozkład uwagi

Procentowy rozkład uwagi przypadającej na poszczególne elementy ujawnia, które części strony www dominują w percepcji użytkowników. Jeśli przycisk CTA otrzymuje zaledwie 5% całkowitej uwagi, podczas gdy dekoracyjna grafika w tle absorbuje 40%, to wyraźny sygnał, że hierarchia wizualna wymaga korekty. Analiza ta pozwala obiektywnie ocenić, czy projekt kieruje uwagę użytkowników tam, gdzie powinna być skierowana z perspektywy celów biznesowych. Opierając się na tych danych, można precyzyjnie zmierzyć, jak zmiany w projekcie wpływają na redystrybucję uwagi między poszczególnymi elementami.

Wzorce skanowania stron internetowych

Dane z eyetrackingu pokazują również wzorce skanowania charakterystyczne dla stron internetowych. Najczęściej spotykany wzorzec to tzw. wzór F, gdzie użytkownicy intensywnie czytają początek pierwszych akapitów, a następnie coraz szybciej skanują lewą stronę, pomijając prawą część treści. Zrozumienie tego wzorca pomaga projektantom umieszczać najważniejsze informacje w miejscach, które naturalnie przyciągają wzrok – zazwyczaj w górnej lewej części ekranu i na początku akapitów. Inne typowe wzorce to wzór Z dla stron z dużą ilością grafiki czy wzór warstw dla witryn z wyraźną hierarchią informacji.

Średni czas patrzenia na elementy

Średni czas patrzenia na dane elementy – np. nagłówki, zdjęcia produktów czy formularze – dostarcza informacji o skuteczności ich zaprojektowania. Formularz kontaktowy, który użytkownicy oglądają zaledwie przez sekundę przed opuszczeniem strony, może być zbyt skomplikowany lub niejasno opisany. Z kolei zdjęcie produktu przyciągające uwagę przez 5-7 sekund sugeruje wysokie zainteresowanie, które warto przekuć w kolejny krok w lejku konwersji. Analiza tych danych pomaga zidentyfikować nie tylko problematyczne elementy, ale także te, które działają wyjątkowo dobrze i mogą służyć jako wzorzec do dalszego projektowania.

Jakie konkretne problemy projektowe rozwiązuje eyetracking?

Wykorzystanie eyetrackingu w projektowaniu stron www pozwala zidentyfikować problemy, które pozostają niewidoczne w tradycyjnych testach użyteczności. Podczas gdy ankiety i wywiady opierają się na deklaracjach użytkowników, które często różnią się od rzeczywistych zachowań, eyetracker obiektywnie rejestruje to, co faktycznie przyciąga uwagę.

Identyfikacja elementów odciągających uwagę

Z pomocą badania ścieżek wzroku projektanci odkrywają, które bodźce wizualne konkurują o uwagę użytkowników – zbyt duże banery reklamowe, niespójne kolory czy rozpraszające animacje często okazują się znacznie bardziej problematyczne, niż sugerowały to wcześniejsze analizy. W badaniach UX metoda śledzenia wzroku odsłania, które składniki interfejsu odciągają uwagę od głównego celu strony. Animowane elementy, autoplay video czy nadmiar grafik mogą przyciągać wzrok użytkowników, ale jednocześnie odrywać ich od istotnych treści jak opis produktu czy przycisk zakupu. Analiza tych danych pozwala zidentyfikować elementy, które mimo estetycznego wyglądu faktycznie szkodzą konwersji.

Wykrywanie zjawiska banner blindness

Badania eyetrackingowe ujawniają zjawisko tzw. banner blindness – użytkownicy automatycznie ignorują obszary, które wyglądają jak reklamy internetowe, nawet jeśli zawierają istotne informacje. Eyetracker pokazuje, że wzrok omija te strefy bez żadnej fiksacji, co oznacza całkowitą nieefektywność komunikatu. Projektanci mogą wtedy przeprojektować problematyczne sekcje, nadając im mniej reklamowy charakter i zwiększając szansę na zauważenie przez odbiorców. To zjawisko dotyczy nie tylko faktycznych reklam, ale także elementów nawigacyjnych czy wezwań do działania umieszczonych w miejscach tradycyjnie kojarzonych z reklamami.

Optymalizacja czytelności treści

Eyetracking pozwala także ocenić czytelność treści na stronie. Analiza ruchu oczu podczas czytania artykułów czy opisów produktów pokazuje, które fragmenty tekstu są pomijane, a które czytane dokładnie. Dane te pomagają optymalizować długość akapitów, wielkość czcionek i kontrasty kolorystyczne, aby poprawić komfort lektury i zwiększyć szansę, że użytkownik przeczyta kluczowe informacje. Jeśli fiksacje wzroku badanego są chaotyczne i krótkie, to sygnał, że tekst jest zbyt gęsty lub trudny w odbiorze. System pozwala również sprawdzić, czy użytkownicy faktycznie czytają ważne informacje prawne, instrukcje obsługi czy opisy funkcjonalności.

Testowanie wariantów layoutu

Badania dostarczają cennych informacji o efektywności różnych wariantów layoutu. Zamiast zgadywać, czy lepiej umieścić formularz kontaktowy po lewej czy prawej stronie, projektanci mogą sprawdzić, który wariant szybciej przyciąga uwagę i generuje więcej fiksacji wzroku. Testy A/B wzbogacone o dane z eyetrackingu pokazują nie tylko, który wariant przynosi lepsze konwersje, ale także wyjaśniają dlaczego – czy użytkownicy w ogóle zauważyli kluczowe elementy, czy może nawet na nie patrzyli. Ta wiedza pozwala eliminować domysły i podejmować decyzje projektowe oparte na solidnych danych o zachowaniach wzrokowych rzeczywistych użytkowników.

Jak wdrożyć badania eyetrackingowe dla swojej strony?

Przeprowadzenie badań eyetrackingowych wymaga odpowiedniego przygotowania zarówno technicznego, jak i metodologicznego. Choć technologia może wydawać się skomplikowana, sam proces testowania jest stosunkowo prosty, gdy odpowiednio go zaplanujemy.

Wybór odpowiedniego sprzętu

Pierwszym krokiem jest wybór odpowiedniego eyetrackera – urządzenia w niewielkich rozmiarach montowane pod monitorem sprawdzają się najlepiej w testach stron www, ponieważ pozwalają na naturalne korzystanie z komputera bez dodatkowego obciążenia dla uczestnika. Sprzęt powinien zapewniać precyzję pomiaru wystarczającą do rejestracji ruchu gałek ocznych nawet podczas szybkich przeskoków między elementami interfejsu. Ważne jest również, aby system działał stabilnie i nie wymagał częstych kalibracji podczas sesji testowej, co mogłoby zakłócać naturalność interakcji użytkownika ze stroną.

Rekrutacja uczestników badania

Rekrutacja uczestników powinna uwzględniać rzeczywistą grupę docelową strony internetowej. Testowanie witryny sklepu z elektroniką na studentach humanistyki przyniesie zupełnie inne wyniki niż badanie z udziałem osób faktycznie zainteresowanych zakupem sprzętu. Warto również wykluczyć osoby z zaburzeniami wzroku, które mogłyby zakłócić precyzję pomiarów.

Grupa 15-20 uczestników zazwyczaj wystarcza do zidentyfikowania głównych problemów projektowych i uzyskania wiarygodnych danych o wzorcach patrzenia. Każdy uczestnik powinien reprezentować typowego użytkownika strony pod względem demografii, poziomu zaawansowania technicznego i celów odwiedzenia witryny.

Przygotowanie scenariusza testowego

Przygotowanie scenariusza badania powinno odzwierciedlać typowe zadania, które użytkownicy wykonują na stronie. Zamiast prosić o “obejrzenie strony głównej”, lepiej sformułować konkretne zadanie: “Znajdź informacje o kosztach dostawy” lub “Sprawdź, czy dany produkt jest dostępny w kolorze niebieskim”. Takie podejście pozwala zaobserwować, jak użytkownicy wchodzą w interakcję ze stroną www w realistycznym kontekście, a nie tylko biernie ją skanują. Scenariusz powinien obejmować zarówno zadania proste, które większość użytkowników powinna łatwo wykonać, jak i bardziej złożone, które mogą ujawnić ukryte problemy w nawigacji czy strukturze informacji.

Analiza i interpretacja wyników

Analiza danych z eyetrackera wymaga specjalistycznego oprogramowania, które przetwarza surowe dane o pozycji wzroku i przekształca je w przydatne wizualizacje. Warto jednak połączyć dane ilościowe z jakościowymi obserwacjami – czasem użytkownik długo patrzy na element, ponieważ go szuka, a nie dlatego, że wzbudził jego zainteresowanie.

Interpretacja wyników powinna także uwzględniać kontekst biznesowy i cele strony internetowej. Jeśli celem jest maksymalizacja konwersji w e-commerce, dane z eyetrackingu powinny pokazać, czy użytkownicy faktycznie zauważają przycisk “Dodaj do koszyka” i czy nic nie odciąga ich uwagi przed jego kliknięciem. Na podstawie tych ustaleń projektanci mogą wprowadzić zmiany, a następnie przeprowadzić kolejne badanie, aby zweryfikować skuteczność wprowadzonych poprawek.