Движение взгляда по странице

айтрекинг анимацияТермин айтрекинг появился относительно недавно, но сама окулография, как наука, берет свое начало в 19 веке. Ещё Эдмунд Хью в 1880-ых годах создал специальное устройство, способное отслеживать движения глаз по страницам текста. Методика эта не отличалась особой гуманностью, поэтому в дальнейшем развилась до более доступных пределов.
В наши дни было проведено достаточно большое количество окулометрических тестирований. Исследования о них можно прочесть как в зарубежных источниках, так и в переводах на русский язык. Но, не смотря на обилие информации, далеко не все разработчики, дизайнеры и контент-менеджеры используют на практике работающие, проверенные специалистами данные.

В попытке угнаться за взором

Суть исследований заключается в выявлении траектории движения зрачков по различным зонам на веб-странице. Концентрация взгляда на определенном месте как раз и говорит нам от том, что пользователя привлекает именно это часть сайта.

Все данные основываются на показателях специального оборудования, называемого айтрекер, или окулограф и могут быть представлены в двух вариантах:

  • Траектория движения зрачка;
  • Тепловая карта движения взгляда.

движение глаз схема движения глаз


Линии обозначают путь, по которому движется внимание пользователя, а кружки – это те места, где взгляд задерживается дольше всего.

тепловая карта тепловая карта f


Heat-map, или тепловая карта, более подробна, и может показать, где внимание пользователя находилось дольше всего, и к каким местам взгляд возвращается наиболее часто.

Другой «взгляд» на продажи

Первыми, кто осознали настоящий потенциал айтрекинга стали маркетологи. Окулография наглядно демонстрирует, где и как разместить призыв к действию или заголовок, чтобы он не остался незамеченным. Проследив за взглядом и составил развернутую статистику, можно сформировать готовые модели поведения пользователя и успешно им следовать.

Фотографии человеческих лиц сразу привлекают к себе внимание, особенно если изображенные на них люди смотрят вам прямо в глаза. Ещё классические художники открыли секрет, что к определенной области на картине можно привлечь внимание с помощью взгляда героя, изображенного на ней. Проще говоря – вы точно посмотрите туда, куда смотрит объект фотографии.

направление взглядаНо изображения могут и негативно сказываться на юзабилити сайта из-за своего расположения, размера и цветового решения. Эффектная иллюстрация может постоянно притягивать к себе взгляд посетителей, отвлекая их от информации. Поэтому особенно важно, чтобы анализ проводился грамотно, основываясь на большом количестве пользователей, только в данном случае можно говорить о юзабилити.

Как это работает?

Процесс тестирования включает в себя как фиксацию движения взгляда, так и комментарии испытуемых, которые рассказывают о том, что они видят на странице. Современные технологии позволили исследователям проводить анализы не только одной веб-странице, но и целым многостраничным ресурсам. В ходе исследований мнение специалистов сходится на том, что взгляды посетителей движутся по монитору не случайным образом.

Интересным заключением стало то, что клиенты практически никогда не смотрят на рекламные баннеры по бокам, в хедере и футере. Такому поведению дали название «баннерная слепота». Опытные юзеры уже знаю, в каком месте находится реклама, и не обращают на неё внимания, сосредоточившись на поиске необходимой информации.

f-образная диаграммаВ результате исследования, инициированного компанией Nielsen Norman Group, было выявлено, что популярной моделью движения взгляда считается паттерн в виде латинской буквы F. Сканирование такой формы чаще всего проявляется при чтении текстов, изучении результатов выдачи поисковых систем, при использовании блоков с текстами и т.п.

Траектория движение глаз при F-образном паттерне:

  • Изначально внимание пользователя перемещается по верхней горизонтальной линии, практически от одного края монитора до другого;
  • Затем несколько ниже снова повторяется движение по горизонтальной линии, но уже короче, чем первое, здесь пользователь так же ищет для себя необходимую информацию;
  • Последним этапом сканирования страницы является вертикальное движение вниз, скорость которого во многом зависит от сосредоточенности пользователя.

F-образная схема не является постоянной. Иногда имеет место феномен, называемый «Диаграммой Гутенберга». Не смотря на громкое, почти математическое название, исследователи имели в виду лишь Z-образную траекторию сверху вниз.

Что в итоге?

Какими бы ни были итоги окулометрических тестирований, ясно одно — на поведение пользователя в первую очередь влияет визуальная составляющая страницы, а затем уже её смысловое содержание:

списокКлиенты изначально обращаю внимание на выделенные списки, заголовки, ссылки, формы поиска, удобное и яркое меню. То, что призвано привлекать внимание, например кричащие рекламные баннеры, игнорируется пользователями.


поискВажно, чтобы контент на странице полностью отвечал требованиям пользователей. Действительно полезную информацию, основные мысли текстов и важные ссылки необходимо размещать на пути движения взгляда посетителя.


магнитМультимедиа на веб-страницах сразу же примагничивают к себе взоры пользователей, поэтому нет необходимости ломать голову над их расположением, но если вы хотите поставить акцент на тексте, то видео с ярким превью точно отвлечет на себя внимание.

У окулометрических исследований есть и сторонники, и противники. Каждый редактор сайта решает самостоятельно, какой схеме ему придерживаться, но при разработке эргономики и дизайнерских решений не стоит обходить стороной проверенные методики.

Оставите комментарий?