Как люди читают онлайн. Выводы из исследований айтрекинга, которые сделают ваш сайт удобнее для пользователей

Технология айтрекинга (eye-tracking) отслеживает взгляд пользователя и собирает данные о том, на какие элементы он обращает внимание в первую очередь, по какой траектории движутся его зрачки, что отвлекает его от основного контента. В Pressfeed.Журнале собрали выводы из исследований, которые без проведения собственных тестов помогут понять, как люди читают и просматривают веб-страницы. Статья пригодится при разработке дизайна и верстки, а также форматировании текстов. 

В распоряжении digital-специалистов десятки технологий, которые помогают анализировать пользовательский опыт и оптимизировать страницы для лучшей конверсии и вовлеченности. В их числе отчеты по посещаемости, кликам, отказам. Однако они дают смутное представление о том, как именно пользователь просматривает страницу, какие элементы ему нравятся, а какие он не замечает. Часто для восполнения этого пробела маркетологи обращаются к карте кликов. Например, «Вебвизору» от «Яндекса». Здесь данных больше, но есть существенный минус — движения глаз и курсора отличаются. Ведь курсор используют для совершения действия, а глаза — для сканирования информации. 

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

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

Изменения в дизайне, форматировании текстов и расположении элементов, подкрепленные данными айтрекинга, помогут увеличить показатели конверсии, дочитывания, вовлеченности и другие ключевые метрики. Итак, вот какие выводы стоит взять на заметку. 

F-паттерн

Об этом исследовании вы наверняка слышали. Еще в 2006 году Nielsen выяснили, что чаще всего взгляд пользователя движется по траектории, напоминающей букву F. В рамках эксперимента 232 человека просматривали тысячи веб-страниц, и на всех прослеживалась закономерность:

1. Сначала взгляд движется горизонтально по первым строчкам.
2. Затем спускается вниз и снова проходит горизонтально, но обычно меньшую дистанцию.
3. В конце взгляд движется преимущественно вертикально по левой стороне страницы. 

Бывает, что на третьем этапе пользователь снова изучает контент горизонтально, образуя паттерн в форме буквы E. Или ограничивается только одной горизонтальной строкой, получается русская «Г». Однако в целом закономерность именно такая. Люди не читают текст от начала до конца строчки, внимания для этого им хватает только на первые абзацы. Дальше включается режим сканирования. 

С 2006 года дизайн страниц изменился. Паттерн в форме F остался основным (даже на мобильных устройствах), но все чаще встречаются и другие, например, паттерн «зигзаг». На страницах с блоками из текста и изображений взгляд движется сначала слева направо, потом вниз и справа налево.

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

Визуальное выделение

Помимо распространенного F-паттерна и «зигзага», Nielsen выделяют точечный и послойный паттерны. В первом случае пользователи задерживают внимание на выделяющихся элементах: ссылках, тексте другого цвета, списках, выделении полужирным или курсивом, цифрах, заглавных буквах. Во втором — сканируют текст преимущественно по заголовкам и подзаголовкам. 

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

Пропуск слов

Группа исследователей из Калифорнийского и Саутгемптонского университетов проанализировали, какие слова пользователи пропускают при чтении, а на каких фиксируют взгляд.

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

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

Первый экран и скроллинг

В 2018 году в Nielsen изучили распределение внимания пользователей при скроллинге. Данное действие успело стать привычным, но не поменяло отношение к первому контенту. Исследователи пришли к следующим выводам:

• 57% времени просмотра пользователи проводят на первом экране;
• 74% — на первых двух экранах;
• 65% времени просмотра приходится на верхнюю половину первого экрана, на страницах с поисковой выдачей этот показатель еще выше — 75%.  

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

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

Левая сторона важнее

И снова Nielsen поделились интересными выводами о предпочтении левой стороны экрана. В 2017 году исследователи выяснили, что 80% зрительных фиксаций приходится на левую половину экрана. В 2010 данные отличались — их было 69%. 

На страницах с поисковой выдачей предпочтение левой стороны еще очевиднее — на ней концентрируют внимание в 94% случаев. 

Как применять. Блок с текстом располагайте в левой части экрана, баннеры, дополнительные блоки — справа. Информативные слова помещайте в начало строчек.

Смотрите также:

О каких концепциях нейромаркетинга нужно знать пиарщику: 27 психологических приемов для управления вниманием и настроениями

Первое впечатление

Согласно исследованию Yahoo, пользователь решает, стоит ли остаться на странице, в течение трех секунд. При этом сначала он изучает контент в левом верхнем углу. Если содержание его заинтересовало, начинает сканировать страницу слева направо. Редко спускается ниже первого экрана.

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

Размер имеет значение

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

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

Рекламные блоки

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

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

Смотрите также:

80+ пунктов для проверки юзабилити сайта

Ссылки

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

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

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

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