F-паттерн. Как пользователи просматривают контент.

Основной вывод, который транслируется сейчас: "Люди не читают страницы в интернете, они их просматривают/сканируют".

Группа специалистов из "Нильсен-Норман Групп" проводила исследования, каким образом читатель двигает глазами при прочтении контента. В исследовании принимали участие более 200 пользователей. Была выявлена общая закономерность сканирования, которая напоминала букву "F".

На двух скриншотах представлены примеры тепловой карты распределения "внимания" читателя. Самая яркая и "густо просматриваемая" область сверху.

В чем суть F-модели сканирования контента?

Суть F-образца сканирования состоит в том, что текст вверху и слева страницы читается чаще, чем текст внизу и справа страницы.

Но нужно учитывать, что этот шаблон подходит для пользователей, чей язык и письменность предполагает чтение слева направо.
В языках с письмом с права налево, шаблон зеркально отражается (т.е. ꟻ-образец сканирование).

Мы начинаем просмотр страницы с левого верхнего угла. Далее просматриваем информацию по горизонтали. Далее идем в начало следующей строки, снова сканируем по горизонтали.

Логика расположения контента по F-образной траектории

• Важно, чтобы ваш лучший контент находился вверху и имел крепкий якорь в верхнем левом углу (точка 1), это практически гарантирует его заметность. Поэтому обычно вы видите здесь логотипы компаний.
• Наверху обычно расположена панель навигации, которая ведет в правый верхний угол (точка 2). В этой части может располагаться блок контактов, корзина или раздел "помощь".
• После верхней части страницы пользователь прокрутит к следующему заметному разделу (точка 3) и повторяют это действие до точки 4.
  Пользователи будут спускаться дальше и дальше, пока не найдут нужный материал или пока им не надоест и они не уйдут со страницы.

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

1. Текст страницы плохо отформатирован и не содержит никаких зацепок, таких как: жирный текст, заголовки и перечисления. Человек видит простыню текста и пытается изучить ее наиболее оптимальным способом.
2. У пользователя нет времени или достаточного фокуса, чтобы внимательно изучать текст.
3. Годы чтения приучили людей думать, что более важная информация расположена раньше менее важной.

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

Как сделать контент, который легко "сканировать"?

1. Используйте четкие и заметные заголовки и подзаголовки. Соблюдайте иерархию заголовков. Разбивайте контент структурно, чтобы пользователь легко мог найти контент который его интересует.
2. Обратите внимание на первые слова в первых строках и первые абзацы. Ведь именно они получают больше всего внимания от читателя. Начинайте заголовки и предложения в этих областях с наиболее важных и ключевых слов.
3. Используйте все возможные методы форматирования текста: маркирование, жирный текст, курсив и списки. Так вы сможете выделить наиболее важную и интересную информацию.
4. Используйте простой язык написания. Ясность и лаконичность. Избегайте сложные причастные и деепричастные обороты, длинные предложения.
5. Вкладывайте не более одной идеи в один отдельный абзац.

Вывод

F-паттерн следует общим направлениям движения взгляда читателя. Вы можете оптимизировать свой контент под данный шаблон. Но совсем не обязательно следовать ему на все 100%.
Помните, что в первую очередь ваш контент должен быть полезным и понятным.