Пользователи почти никогда не читают веб-страницы так, как читают книгу, — от первой строки до последней. Они сканируют, выхватывают заголовки, цифры и кнопки, и решают за несколько секунд, стоит ли задерживаться. Понимание того, как устроено это сканирование, — одна из основ UX-дизайна. Разберем, как пользователь читает страницу и как проектировать с учетом этого.
Почему люди не читают, а сканируют
Человек приходит на сайт с задачей: узнать цену, найти адрес, сравнить варианты, понять, подходит ли продукт. Его внимание направлено на поиск ответа, а не на изучение текста. Поэтому глаз скользит по странице в поисках сигналов, связанных с задачей: заголовков, выделенных слов, цифр, кнопок.
Кроме того, в интернете у пользователя всегда есть альтернатива. Если ответ не находится быстро, он закрывает вкладку и открывает следующий сайт из выдачи. Это формирует нетерпеливую манеру чтения: проверить, есть ли здесь то, что нужно, и только потом вчитываться.
Читайте также: Цифровые экраны в городской среде
Из этого следует главный вывод для дизайна: страница должна быть удобной для сканирования. Ключевая информация должна обнаруживаться при беглом взгляде, а подробности — быть доступными для тех, кто захочет углубиться.
Основные паттерны чтения
Исследования движения глаз позволили выделить несколько типичных траекторий, по которым пользователи просматривают страницы. Они не являются жесткими правилами, но помогают понять логику внимания.
F-паттерн
Характерен для страниц с большим количеством текста: статей, результатов поиска, списков. Пользователь читает первые строки по горизонтали, затем опускается ниже и снова читает горизонтально, но уже короче, а потом скользит вниз вдоль левого края. В результате внимание концентрируется на начале абзацев и первых словах строк.
Практический вывод: самое важное должно стоять в начале заголовков, абзацев и пунктов списка. Если ключевое слово спрятано в конце длинного предложения, его, скорее всего, пропустят.
Z-паттерн
Типичен для страниц с небольшим количеством текста и выраженной визуальной структурой, например для первых экранов лендингов. Взгляд идет от верхнего левого угла к верхнему правому, затем по диагонали вниз влево и снова вправо. По этой траектории удобно размещать логотип, навигацию, главный заголовок и кнопку действия.
Паттерн «слоеный пирог»
Пользователь пробегает глазами только по заголовкам и подзаголовкам, пропуская текст между ними, пока не найдет интересующий раздел. Это самый эффективный способ просмотра, и он возможен, только если заголовки информативны.
Точечное сканирование
Человек ищет что-то конкретное — цифру, телефон, название — и пропускает все остальное. Здесь помогают визуальные якоря: выделенные цены, иконки, кнопки, контрастные элементы.
Визуальная иерархия
Визуальная иерархия — это порядок, в котором элементы страницы привлекают внимание. Она создается размером, цветом, контрастом, расположением и пустым пространством вокруг элементов. Задача дизайнера — сделать так, чтобы этот порядок совпадал с порядком важности информации для пользователя.
Основные инструменты иерархии:
- размер: крупные элементы замечаются первыми;
- контраст: яркая кнопка на спокойном фоне притягивает взгляд;
- положение: верх страницы и левая часть получают больше внимания;
- пустое пространство: элемент, окруженный воздухом, выглядит значимее;
- группировка: связанные элементы, стоящие рядом, воспринимаются как единое целое;
- шрифтовое выделение: жирный текст и разные уровни заголовков помогают ориентироваться.
Ошибка многих сайтов — попытка выделить все сразу. Когда на странице десять ярких кнопок, пять баннеров и каждый абзац с жирными словами, иерархия разрушается, и взгляду не за что зацепиться.
Если все на странице кричит, пользователь не слышит ничего. Выделяйте только то, что действительно ведет к цели.
Первый экран и правило нескольких секунд
Первый экран — то, что пользователь видит без прокрутки, — определяет, останется ли он на странице. За несколько секунд человек должен понять три вещи: где он находится, что здесь предлагают и что делать дальше.
Хороший первый экран содержит понятный заголовок, который описывает предложение конкретно, а не абстрактно. «Ремонт стиральных машин на дому за один визит» лучше, чем «Ваш надежный партнер в мире бытовой техники». Подзаголовок уточняет выгоду или условия, а заметная кнопка подсказывает следующий шаг.
При этом не стоит пытаться уместить все на первый экран. Пользователи прокручивают страницы, если видят, что ниже есть полезное. Важно, чтобы первый экран давал повод продолжить, а не заканчивался ощущением тупика.
Как писать тексты для сканирования
Даже идеальная верстка не спасет, если текст написан сплошным полотном. Тексты для веба подчиняются своим правилам.
- Пишите информативные заголовки, которые сами по себе передают смысл раздела.
- Начинайте абзац с главной мысли, а подробности оставляйте на потом.
- Делайте абзацы короткими — по три-пять предложений.
- Используйте списки для перечислений, шагов и характеристик.
- Выделяйте ключевые слова умеренно, чтобы они служили якорями для взгляда.
- Заменяйте общие слова конкретикой: цифрами, сроками, примерами.
- Убирайте вводные фразы и канцелярит, которые не несут информации.
Проверить текст можно простым способом: прочитайте только заголовки и первые предложения абзацев. Если из них складывается понятная картина, текст удобен для сканирования.
Рассмотрим пример. Страница услуги начинается с абзаца: «Наша компания работает на рынке уже много лет и за это время заслужила доверие сотен клиентов, а среди наших услуг есть и вывоз строительного мусора». Ключевая информация оказалась в конце длинной фразы. Тот же смысл, переписанный для сканирования, выглядит так: «Вывоз строительного мусора за один день. Контейнеры от 8 до 27 кубометров, подача в течение трех часов». Взгляд сразу цепляется за услугу, срок и цифры.
Отдельно стоит сказать о цифрах. Числа в тексте притягивают взгляд при сканировании сильнее, чем слова, поэтому их полезно писать цифрами, а не прописью, и не прятать в середину предложения. Цена, срок, гарантия, количество выполненных работ — все это работает как якоря внимания.
Баннерная слепота и другие ловушки внимания
Пользователи привыкли игнорировать элементы, похожие на рекламу. Яркие прямоугольники в боковых колонках, мигающие баннеры, блоки в верхней части страницы, оформленные как реклама, часто не замечаются вовсе. Это явление называют баннерной слепотой.
Отсюда практический совет: не оформляйте важную информацию как баннер. Если акция или специальное предложение действительно важны, лучше встроить их в контент страницы, а не выносить в отдельный блок, который глаз автоматически пропустит.
Еще одна ловушка — слайдеры на первом экране. Пользователь видит первый слайд, а остальные, как правило, пролистываются без внимания или не просматриваются вообще. Если важное сообщение стоит на третьем слайде, его увидят единицы.
Как проверить, как читают вашу страницу
Предположения о поведении пользователей стоит проверять данными.
- Вебвизор в Яндекс Метрике позволяет посмотреть записи сессий и увидеть, как посетители прокручивают страницу и куда кликают;
- карта скроллинга показывает, до какого места доходит большинство пользователей;
- карта кликов выявляет элементы, которые принимают за ссылки, хотя они не кликабельны;
- юзабилити-тестирование с заданиями показывает, где люди теряются;
- сравнение вариантов страницы в A/B-тестах показывает, какая структура работает лучше.
Если карта скроллинга показывает, что до блока с ценами доходит лишь малая часть посетителей, стоит поднять цены выше или добавить на первый экран ссылку на них.
Еще один простой прием — тест пяти секунд. Покажите человеку страницу на пять секунд, затем уберите и спросите, что он запомнил и что предлагает компания. Если ответы расплывчаты или далеки от вашего главного сообщения, иерархия страницы требует доработки. Тест можно провести с коллегами из других отделов или знакомыми, не связанными с проектом.
Типичные ошибки
- Важная информация спрятана в середине длинного абзаца.
- Заголовки красивые, но неинформативные: «Почему мы?», «Наш подход».
- Отсутствие визуальной иерархии: все элементы одинакового веса.
- Перегруженный первый экран, на котором невозможно найти главное.
- Ключевые сообщения в слайдерах и баннерах.
- Сплошные тексты без списков, подзаголовков и выделений.
Итоги
Пользователи сканируют страницы, а не читают их целиком. Они ищут ответы на свои вопросы и задерживаются там, где быстро находят сигналы, что ответ рядом. Учитывайте паттерны чтения, выстраивайте визуальную иерархию в соответствии с важностью информации, пишите тексты, удобные для беглого просмотра, и проверяйте предположения с помощью аналитики и тестирования. Такой подход делает страницу понятной и повышает вероятность, что посетитель совершит целевое действие.
