Технология айтрекинга (eye-tracking) отслеживает взгляд пользователя и собирает данные о том, на какие элементы он обращает внимание в первую очередь, по какой траектории движутся его зрачки, что отвлекает его от основного контента. В Pressfeed.Журнале собрали выводы из исследований, которые без проведения собственных тестов помогут понять, как люди читают и просматривают веб-страницы. Эти данные могут пригодиться при разработке дизайна и верстки, а также форматировании текстов.
Как люди читают онлайн?
В распоряжении digital-специалистов есть десятки технологий, которые помогают анализировать пользовательский опыт и оптимизировать страницы для лучшей конверсии и вовлеченности. В их числе отчеты по посещаемости, кликам, отказам. Однако они дают весьма смутное представление о том, как именно пользователь просматривает страницу, какие элементы ему нравятся, а какие он просто может не замечать. Зачастую для восполнения этого пробела маркетологи обращаются к карте кликов. Например, «Вебвизору» от «Яндекса». Здесь данных больше, но есть существенный минус – движения глаз и курсора отличаются. Ведь курсор используют для совершения действия, а глаза — для сканирования информации.
Чтобы в полной мере понять, как пользователь просматривает страницу, нужен айтрекинг – мониторинг движения глаз в режиме реального времени. Однако такая технология менее доступна: стоит дорого, внедряется сложно. Хорошая новость в том, что извлечь пользу из этой технологии можно и без проведения собственных тестов.
Поведение людей в сети закономерно. Десятки лет пользователи привыкали к похожим интерфейсам и уже интуитивно понимают, где искать нужные элементы. Значит, выводы исследований айтрекинга можно применять и на собственных проектах. Внедрять лучшие практики и следить за реакцией целевой аудитории.
F-паттерн
Еще в 2006 году аналитики выяснили, что чаще всего взгляд пользователя движется по траектории, напоминающей букву F. В рамках эксперимента они просматривали тысячи веб-страниц, и на всех прослеживалась общая закономерность:
Сначала взгляд движется горизонтально по первым строчкам;
Затем спускается вниз и снова проходит горизонтально, но обычно меньшую дистанцию;
В конце взгляд движется преимущественно вертикально по левой стороне страницы.
Бывает, что на третьем этапе пользователь снова изучает контент горизонтально, образуя паттерн в форме буквы E. Или ограничивается лишь одной горизонтальной строкой – тогда получается русская «Г». Однако в целом закономерность именно такая. Люди не читают текст от начала до конца строки. Внимания им хватает только на первые абзацы. Дальше включается режим сканирования.
С 2006 года дизайн страниц изменился. Паттерн в форме F остался основным (даже на мобильных устройствах), но все чаще встречаются и другие, например, «зигзаг». На страницах с блоками из текста и изображений взгляд движется сначала слева направо, потом вниз и справа налево.
Что из этого следует?
Делайте заголовки заметными, помещайте их повыше. Первые два абзаца текста должны быть самыми интересными, чтобы мотивировать пользователей читать дальше. В начало строчек полезно добавлять информативные слова, которые помогут при беглом сканировании. Их можно выделять визуально или оформлять в виде списков. Также хорошими указателями станут подзаголовки. Чем их больше, тем выше шанс, что страницу досмотрят до конца.
Визуальное выделение
Помимо распространенного F-паттерна и «зигзага», выделяют точечный и послойный паттерны. В первом случае пользователи задерживают внимание на выделяющихся элементах: ссылках, тексте другого цвета, списках, выделении полужирным или курсивом, цифрах, заглавных буквах. Во втором – сканируют текст преимущественно по заголовкам и подзаголовкам.
Что следует?
Используйте перечисленные элементы, чтобы направлять внимание читателя, выделять важные для вас блоки и сделать сканирование комфортнее.
Пропуск слов
Группа исследователей Калифорнийского и Саутгемптонского университетов проанализировали, какие слова пользователи пропускают при чтении, а на каких фиксируют взгляд. Оказалось, что распределение внимания напрямую зависит от длины слова и того, насколько легко предсказать его появление из контекста. Причем, второй фактор намного важнее первого.
Что делать?
Пишите просто и понятно, старайтесь не использовать необычные обороты речи, сложные термины. Для призывов к действию, ключевых элементов текста выбирайте слова до десяти символов длиной.
Первый экран и скроллинг
Специалисты также изучили распределение внимания пользователей при скроллинге. Данное действие успело стать привычным, но не поменяло отношение к первому контенту. Исследователи пришли к следующим выводам:
✅ 57% времени просмотра пользователи проводят на первом экране;
✅ 74% – на первых двух экранах;
✅ 65% времени просмотра приходится на верхнюю половину первого экрана, на страницах с поисковой выдачей этот показатель еще выше – 75%.
Со временем пользователи привыкают скроллить страницы, но по-прежнему концентрируются на первых экранах.
Как применять?
Важную информацию помещайте в верхнюю часть страницы и на первый экран, учитывайте при этом адаптацию дизайна под устройства разного размера. Со временем пользователи стали скроллить охотнее, но нужно их на это мотивировать. Добавлять указатели, анимацию или сообщать в тексте о важности следующего блока.
Левая сторона важнее, чем правая
Исследователи выяснили, что 80% зрительных фиксаций приходится на левую половину экрана. На страницах с поисковой выдачей предпочтение левой стороны еще очевиднее — на ней концентрируют внимание в 94% случаев.
Как это использовать?
Блок с текстом располагайте в левой части экрана, баннеры, дополнительные блоки – справа. Информативные слова помещайте в начало строчек.
Первое впечатление
Согласно исследованию Yahoo, пользователь решает, стоит ли остаться на странице, в течение трех секунд. При этом сначала он изучает контент в левом верхнем углу. Если содержание его заинтересовало, начинает сканировать страницу слева направо. Редко спускается ниже первого экрана.
Что нужно делать?
В верхнюю левую часть экрана добавляйте информацию, которую легко сканировать. Ее задача – убедить пользователя остаться, поэтому важно и оформление, и содержание.
Размер имеет значение
Аналитики сделали интересный вывод на основе 200 исследований айтрекинга для своих клиентов. Крупный шрифт замечают реже, чем мелкий. Казалось бы, большие буквы должны выделяться, но из-за эффекта баннерной слепоты пользователи предпочитают их игнорировать.
Ваша задача?
Заголовки и подзаголовки должны быть достаточно крупными, чтобы их заметили, но не кричащими. Если текст похож на рекламу, его лучше оформить иначе.
Рекламные блоки
Все чаще в текстах появляются блоки с цитатами или рекламой. Специалисты американской компании Nelsen Norman Group выяснили, как пользователи воспринимают такие элементы. Они обращают внимание на блоки внутри текста, но часто после этого переключаются с внимательного чтения на сканирование.
Ваши действия?
Размещайте рекламные блоки и цитаты ближе к концу текста или после того, как сообщите важную информацию. Не добавляйте их слишком много.
Ссылки
Группа исследователей из Саутгемптонского университета провела три эксперимента, чтобы лучше понять отношение читателей к ссылкам. Какие выводы они сделали?
✅ ссылки не мешают чтению, если они проставлены на простых словах и встречаются не чаще одной на абзац;
✅ если ссылка стоит на сложном или редко встречающемся в тексте слове, пользователи с большей вероятностью вернутся назад и перечитают предложение – так они хотят убедиться, что все поняли правильно;
✅ одиночные ссылки привлекают внимание, если ссылок много, их чаще игнорируют.
Путь к успеху?
Ставьте ссылки на простые слова и используйте не больше одной на экран или абзац. Так шансов получить клик будет больше, а вреда для удобства чтения меньше.
Резюме
Во многом поведение пользователей бессознательное. Им сложно сформулировать, почему одну страницу приятно читать, а с другой хочется побыстрее уйти. Очевидно, многое здесь зависит от содержания текста.
Вывод также очевиден. Задача хорошего копирайтера – написать хороший текст, который будут читать. А задача менеджера (руководителя, владельца бизнеса) – найти такого копирайтера, не возлагая миссию написания текста на человека, который этому никогда не учился.
About the Author
