Как разработать эффективную веб-страницу и разместить на ней контент

  • 58
  • 15 февраля 2021

В этой статье мы рассмотрим как пользователи ведут себя при чтении веб-страниц, какие существуют модели сканирования глазом контента. Как привлечь и удержать внимание человека на сайте. 

Исследования по технологии EyeTracking показывают, что пользователи просматривают веб-страницы по разным шаблонам. Один из таких шаблонов напоминает латинскую букву F – по направлению движения взгляда.

Особенностью f-шаблона является то, что он сосредоточен в основном на элементах в топе страницы. Вот его основные характеристики:

  • Сначала взгляд скользит вверху страницы слева направо;
  • Затем направление смещается по диагонали вниз. Затем глаз переходит слева направо, при этом охватывая уже меньшую длину строки;
  • И наконец, пользователи быстро сканируют нижнюю часть текста по горизонтали. Теперь уже намного быстрее чем верхнюю.

Таким образом, получается тепловая карта, напоминающая букву F.

F-pattern. Как пользователи читают текст на странице
F-pattern. Как пользователи сканируют контент на странице

Текст справа сверху будет прочитан тщательнее, чем нижние строки. Однако, иногда внимание может привлечь заголовок или абзац внизу страницы и тогда тепловая карта внимания пользователя уже будет напоминать букву E.

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

F-шаблон – не единственный шаблон сканирования

Рассматриваемый в статье поведенческий шаблон дополняют и другие:

  1. «Слоеный пирог» (Layer-cake pattern). Взгляд цепляется только на заголовки и подзаголовки, пропуская текст между ними. На тепловой карте это горизонтальные линии — напоминает пирог с коржами и глазурью посередине;
  2. «Пятнистый шаблон» (Spotted pattern). Его смысл в том, что глаза пропускают большие массивы текста, выискивая определенные слова, цифры, ссылки или словосочетания необходимые пользователю – адрес или телефон;
  3. Marking pattern – фиксация взгляда в одной области страницы. Зачастую его можно встретить на мобильных телефонах и при скролле страницы;
  4. «Игнорирование» (Bypassing pattern). В этом случае пользователь пропускает одинаковые слова. Это происходит когда, например, несколько строк начинаются с одного и того же;
  5. «Паттерн обязательства» (Commitment pattern). Человек одинаково сосредоточен на всех блоках странице. Если материал интереснее и полезен, тогда посетитель сайта читает его с самого начала и до конца.

Все зависит от типа контента и целей статьи.

Типичные ошибки проектирования, снижающие эффективность страницы и контента

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

Зачастую это происходит, когда присутствуют следующие моменты:

  • У текста нет форматирования;
  • Пользователь пытается максимально эффективно использовать страницу – найти только то, что будет ему интересно по определенным критериям. Например – заголовкам, фразам, цифрам;
  • Пользователь не так сильно заинтересован, чтобы вчитываться в каждое слово.

Как получить максимальный эффект от своей страницы? Или как F-шаблон помогает строить текст на странице

Если вкратце – перед публикацией стараться пройти путь пользователя. Понять где важные моменты и сосредоточить на них внимание.

F-pattern. Пример с журнала Космополитен
cosmo.ru — Пример расположения важных заголовков

Зная поведение пользователя, можно правильно построить контентную часть страницы, делая ее максимально эффективнее.

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

F-pattern. Пример на сервисе clarity.microsoft.com
clarity.microsoft.com — Размещение заголовка, описания и кнопок
F-pattern. Пример с сайта стоматологической клиники
F-паттерн — На примере баннера стоматологической клиники

Как избежать влияния F-паттерна

  1. Включить наиболее ценное в первые два абзаца;
  2. Структурирование текста. Использование заголовков, подзаголовков и выделение их на фоне абзацев, выделение жирным и курсивом;
  3. Начинайте заголовки и подзаголовки со слов, содержащих суть. По ним читатель должен понять о чем пойдет речь ниже;
  4. Визуальная группировка связанного по сути текста. Рамкой или фоном. Одна мысль – один абзац. Удаляйте несущественные моменты;
  5. Ссылки должны содержать точные фразы вместо общих;
  6. Используйте списки – нумерованные или маркированные, в зависимости от контекста;
  7.  Удаляйте несущественные моменты;
  8.  Все что не относится к основному контенту – выносите в боковую панель. Боковая панель для более глубокого вовлечения по сайту;
  9.  Не делайте сильно монотонного контента, врезки и вставки помогут удержать внимание пользователя.
Врезки привью новостей на новостном сайте
Разнообразные блоки привью новостей на новостном сайте

И напоследок…

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

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

Получите максимум от вашего сайта

Заказать проект

Введите корректный телефон