Почему люди не дочитывают страницу сайта? Правило F-паттерна

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

1. Не всю информацию нужно размещать;
2. Нужно уметь грамотно оформлять текст

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

Итак, какую информацию оставить на сайте?

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

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

Для лендинга и главной страницы многостраничного сайта мы предлагаем следующую структуру текста:

1. Открывающий экран

• Логотип + основное УТП (уникальное торговое предложение).
• Краткое описание предложения (1-2 предложения).
• Кнопка призыва к действию («Оставить заявку», «Получить консультацию», «Узнать подробнее»).

2. Блок с преимуществами

• 3-5 ключевых преимуществ компании / продукта
• Очень краткое описание компании, чтобы создать впечатление о ней у клиента

3. Услуги / Продукты

• Краткий список основных услуг/товаров с описанием и иконками.
• Возможность перейти на детальное описание.
• Визуальные примеры (фото, карточки).

4. Отзывы / Кейсы

• Отзывы клиентов (текст + фото или видео).
• Кейсы с результатами (если уместно).

5. Процесс работы

• Простой, понятный алгоритм сотрудничества (например, 3-5 шагов).

6. Призыв к действию (CTA)

• Дополнительный мотивирующий оффер (например, «Оставьте заявку и получите бесплатную консультацию»).
• Форма для заявки.

7. Контакты

• Адрес, телефон, e-mail.
• Карта с местоположением.
• Социальные сети.

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

Помните: важно не много информации, а ярко и понятно.

Вам нужно впечатлить аудиторию и убедить в необходимости приобретения вашего товара.

Но как расположить текст?

При всей простоте задачи: «заполнить текст на экраны сайта» – это на самом деле только часть того, что нужно сделать.

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

Исходя из результатов, мы делаем вывод о том, что наиболее интенсивно воспринимаются объекты по левой части сайта (если это арабские страны, то по правой). При этом стоит отметить, что зритель сначала читает первые строки, чтобы понять суть абзаца, а затем, если его это не заинтересует, то пропускает есть абзац целиком. Подобная манера чтения текста заставляет задуматься о том, как сделать так, чтобы зритель прочитал все?

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

1. Самую важную информацию расположите в первых двух абзацах.
2. Делите текст на более мелкие фрагменты и создавайте sale point’ы: выделяйте главные темы небольших абзацев и формируйте блоки с подзаголовками.
3. Используйте цепляющие заголовки, в которых раскрывается интересная, проблемная тема для клиента. В заголовке при этом часть информации уже должна раскрываться, чтобы заинтриговать читателя и мотивировать перейти к чтению самого абзаца.
4. Добавляйте визуальные элементы, которые притягивают взгляд аудитории: контейнеры, рамки, иконки. Так с помощью дизайна вы дополнительно подчеркнете важность текста. Однако стоит делать подобного рода акцентирование только на действительно важных фрагментах, чтобы не перегрузить визуальным декором страницу.
5. Не забывайте про форматирование. Плотное полотно текста уже никто не читает. Поэтому используйте жирный шрифт, формат списков и маркеров
6. Используйте интерактивные элементы по типу кнопок, всплывающих окон т.д. так вы добавите динамики на страницу и сможете удержать внимание аудитории.
7. Убрать лишнюю информацию! Важно четко и кратко сформулировать ваше УТП и презентовать его аудитории, при этом не отвлекая его внимание на слишком детализированное описание.

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

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

А прочитать больше о коммерческом дизайне можно во вкладке «Блог». Развивайте профессиональные навыки вместе с Biecom!