Как люди читают онлайн. Выводы из исследований айтрекинга, которые сделают ваш сайт удобнее для пользователей
Технология айтрекинга (eye-tracking) отслеживает взгляд пользователя и собирает данные о том, на какие элементы он обращает внимание в первую очередь, по какой траектории движутся его зрачки, что отвлекает его от основного контента. В Pressfeed.Журнале собрали выводы из исследований, которые без проведения собственных тестов помогут понять, как люди читают и просматривают веб-страницы. Статья пригодится при разработке дизайна и верстки, а также форматировании текстов.
В распоряжении digital-специалистов десятки технологий, которые помогают анализировать пользовательский опыт и оптимизировать страницы для лучшей конверсии и вовлеченности. В их числе отчеты по посещаемости, кликам, отказам. Однако они дают смутное представление о том, как именно пользователь просматривает страницу, какие элементы ему нравятся, а какие он не замечает. Часто для восполнения этого пробела маркетологи обращаются к карте кликов. Например, «Вебвизору» от «Яндекса». Здесь данных больше, но есть существенный минус — движения глаз и курсора отличаются. Ведь курсор используют для совершения действия, а глаза — для сканирования информации.
В полной мере понять, как пользователь просматривает страницу, позволит айтрекинг — мониторинг движения глаз в реальном времени. Однако такая технология менее доступна: стоит дорого, внедряется сложно. Отличная новость — извлечь из нее пользу можно и без проведения собственных тестов.
Скачать PDF-инструкцию «Где и как публиковать широкоохватные статьи бесплатно»Поведение в сети закономерно. Десятки лет пользователи привыкали к похожим интерфейсам и уже интуитивно понимают, где искать нужные элементы. Значит, выводы из исследований айтрекинга можно применять и на собственных проектах. Внедрять лучшие практики и следить за реакцией целевой аудитории.
Изменения в дизайне, форматировании текстов и расположении элементов, подкрепленные данными айтрекинга, помогут увеличить показатели конверсии, дочитывания, вовлеченности и другие ключевые метрики. Итак, вот какие выводы стоит взять на заметку.
F-паттерн
Об этом исследовании вы наверняка слышали. Еще в 2006 году Nielsen выяснили, что чаще всего взгляд пользователя движется по траектории, напоминающей букву F. В рамках эксперимента 232 человека просматривали тысячи веб-страниц, и на всех прослеживалась закономерность:
- Сначала взгляд движется горизонтально по первым строчкам.
- Затем спускается вниз и снова проходит горизонтально, но обычно меньшую дистанцию.
- В конце взгляд движется преимущественно вертикально по левой стороне страницы.
Бывает, что на третьем этапе пользователь снова изучает контент горизонтально, образуя паттерн в форме буквы E. Или ограничивается только одной горизонтальной строкой, получается русская «Г». Однако в целом закономерность именно такая. Люди не читают текст от начала до конца строчки, внимания для этого им хватает только на первые абзацы. Дальше включается режим сканирования.
С 2006 года дизайн страниц изменился. Паттерн в форме F остался основным (даже на мобильных устройствах), но все чаще встречаются и другие, например, паттерн «зигзаг». На страницах с блоками из текста и изображений взгляд движется сначала слева направо, потом вниз и справа налево.
Как применять. Делайте заголовки заметными, помещайте их повыше. Первые два абзаца текста должны быть самыми интересными, чтобы мотивировать пользователей читать дальше. В начало строчек полезно добавлять информативные слова, которые помогут при беглом сканировании. Их можно выделять визуально или оформлять в виде списков. Также хорошими указателями станут подзаголовки — чем их больше, тем выше шанс, что страницу досмотрят до конца.
Визуальное выделение
Помимо распространенного F-паттерна и «зигзага», Nielsen выделяют точечный и послойный паттерны. В первом случае пользователи задерживают внимание на выделяющихся элементах: ссылках, тексте другого цвета, списках, выделении полужирным или курсивом, цифрах, заглавных буквах. Во втором — сканируют текст преимущественно по заголовкам и подзаголовкам.
Как применять. Используйте перечисленные элементы, чтобы направлять внимание читателя, выделять важные для вас блоки и сделать сканирование комфортнее.
Пропуск слов
Группа исследователей из Калифорнийского и Саутгемптонского университетов проанализировали, какие слова пользователи пропускают при чтении, а на каких фиксируют взгляд.
Оказалось, что распределение внимания напрямую зависит от длины слова и того, насколько легко предсказать его появление из контекста. Причем второй фактор намного важнее первого.
Как применять. Пишите просто и понятно, старайтесь не использовать необычные обороты речи, сложные термины. Для призывов к действию, ключевых элементов текста выбирайте слова до 10 символов длиной.
Первый экран и скроллинг
В 2018 году в Nielsen изучили распределение внимания пользователей при скроллинге. Данное действие успело стать привычным, но не поменяло отношение к первому контенту. Исследователи пришли к следующим выводам:
- 57% времени просмотра пользователи проводят на первом экране;
- 74% — на первых двух экранах;
- 65% времени просмотра приходится на верхнюю половину первого экрана, на страницах с поисковой выдачей этот показатель еще выше — 75%.
В похожем эксперименте 2010 года на первом экране было зафиксировано 80% внимания. Со временем пользователи привыкают скроллить страницы, но по-прежнему концентрируются на первых экранах.
Как применять. Важную информацию помещайте в верхнюю часть страницы и на первый экран, учитывайте при этом адаптацию дизайна под устройства разного размера. Со временем пользователи стали скроллить охотнее, но нужно их на это мотивировать. Добавлять указатели, анимацию или в тексте сообщать о важности следующего блока.
Левая сторона важнее
И снова Nielsen поделились интересными выводами о предпочтении левой стороны экрана. В 2017 году исследователи выяснили, что 80% зрительных фиксаций приходится на левую половину экрана. В 2010 данные отличались — их было 69%.
На страницах с поисковой выдачей предпочтение левой стороны еще очевиднее — на ней концентрируют внимание в 94% случаев.
Как применять. Блок с текстом располагайте в левой части экрана, баннеры, дополнительные блоки — справа. Информативные слова помещайте в начало строчек.
Первое впечатление
Согласно исследованию Yahoo, пользователь решает, стоит ли остаться на странице, в течение трех секунд. При этом сначала он изучает контент в левом верхнем углу. Если содержание его заинтересовало, начинает сканировать страницу слева направо. Редко спускается ниже первого экрана.
Как применять. В верхнюю левую часть экрана добавляйте информацию, которую легко сканировать. Ее задача — убедить пользователя остаться, поэтому важно и оформление, и содержание.
Размер имеет значение
EyeQuant сделали интересный вывод на основе 200 исследований айтрекинга для своих клиентов. Крупный шрифт замечают реже, чем мелкий. Казалось бы, большие буквы должны выделяться, но из-за эффекта баннерной слепоты пользователи предпочитают их игнорировать.
Как применять. Заголовки и подзаголовки должны быть достаточно крупными, чтобы их заметили, но не кричащими. Если текст похож на рекламу, его лучше оформить иначе.
Рекламные блоки
Все чаще в текстах появляются блоки с цитатами или рекламой. Nielsen выяснили, как пользователи воспринимают такие элементы. Они обращают внимание на блоки внутри текста, но часто после этого переключаются с внимательного чтения на сканирование.
Как применять. Размещайте рекламные блоки и цитаты ближе к концу текста или после того, как сообщите важную информацию. Не добавляйте их слишком много.
Ссылки
Группа исследователей из Саутгемптонского университета провели три эксперимента, чтобы лучше понять отношение читателей к ссылкам. Какие выводы они сделали:
- ссылки не мешают чтению, если они проставлены на простых словах и встречаются не чаще одной на абзац;
- если ссылка стоит на сложном или редко встречающемся в тексте слове, пользователи с большей вероятностью вернутся назад и перечитают предложение — так они хотят убедиться, что все поняли правильно;
- одиночные ссылки привлекают внимание, если ссылок много, их чаще игнорируют.
Как применять. Ставьте ссылки на простые слова и используйте не больше одной на экран или абзац. Так шансов получить клик будет больше, а вреда для удобства чтения меньше.
Во многом поведение пользователей бессознательное. Им сложно сформулировать, почему одну страницу приятно читать, а с другой хочется побыстрее уйти. Айтрекинг и тепловые карты могут ответить на эти вопросы. Протестируйте выводы из исследований на своих проектах: они могут улучшить опыт и показатели.
