Как разработать эффективную веб-страницу
Что нам в GetBrand Studio дает понимание как писать хорошие тексты и эффективные сайты?
Первое - это понимание как ведет себя пользователь на сайте и зачем он туда приходит.
Второе - осознанное применение этих знаний.
В этой статье мы рассмотрим как пользователи ведут себя при чтении веб-страниц, какие существуют модели сканирования глазом контента. Как привлечь и удержать внимание человека на сайте.
Исследования по технологии EyeTracking показывают, что пользователи просматривают веб-страницы по разным шаблонам. Один из таких шаблонов напоминает латинскую букву F – по направлению движения взгляда.
Особенностью f-шаблона является то, что он сосредоточен в основном на элементах в топе страницы. Вот его основные характеристики:
- Сначала взгляд скользит вверху страницы слева направо;
- Затем направление смещается по диагонали вниз. Затем глаз переходит слева направо, при этом охватывая уже меньшую длину строки;
- И наконец, пользователи быстро сканируют нижнюю часть текста по горизонтали. Теперь уже намного быстрее чем верхнюю.
Таким образом, получается тепловая карта, напоминающая букву F.
Текст справа сверху будет прочитан тщательнее, чем нижние строки. Однако, иногда внимание может привлечь заголовок или абзац внизу страницы и тогда тепловая карта внимания пользователя уже будет напоминать букву E.
F-шаблон применим только для области основного содержимого. Это значит, что не учитываются панели меню и навигации сверху и слева. Обычно, посетитель сайта обращает на них внимание когда заходит на новый раздел и когда принимает решение куда двигаться дальше. Это тоже нужно учесть при проектировке страницы и не забывать про навигацию, улучшающей поведенческие факторы на странице.
F-шаблон – не единственный шаблон сканирования
Рассматриваемый в статье поведенческий шаблон дополняют и другие:
- «Слоеный пирог» (Layer-cake pattern). Взгляд цепляется только на заголовки и подзаголовки, пропуская текст между ними. На тепловой карте это горизонтальные линии — напоминает пирог с коржами и глазурью посередине;
- «Пятнистый шаблон» (Spotted pattern). Его смысл в том, что глаза пропускают большие массивы текста, выискивая определенные слова, цифры, ссылки или словосочетания необходимые пользователю – адрес или телефон;
- Marking pattern – фиксация взгляда в одной области страницы. Зачастую его можно встретить на мобильных телефонах и при скролле страницы;
- «Игнорирование» (Bypassing pattern). В этом случае пользователь пропускает одинаковые слова. Это происходит когда, например, несколько строк начинаются с одного и того же;
- «Паттерн обязательства» (Commitment pattern). Человек одинаково сосредоточен на всех блоках странице. Если материал интереснее и полезен, тогда посетитель сайта читает его с самого начала и до конца.
Все зависит от типа контента и целей контента.
Типичные ошибки проектирования, снижающие эффективность страницы и контента
F-паттерн вредит бизнесу и пользователям.
Такое сканирование это беглый просмотр, при котором пользователь пропускает важную информацию и может уйти со страницы не дочитав ее до конца.
Зачастую это происходит, когда присутствуют следующие моменты:
- У текста нет форматирования;
- Пользователь пытается максимально эффективно использовать страницу – найти только то, что будет ему интересно по определенным критериям. Например – заголовкам, фразам, цифрам;
- Пользователь не так сильно заинтересован, чтобы вчитываться в каждое слово.
Как получить максимальный эффект от своей страницы? Или как F-шаблон помогает строить текст на странице
Если вкратце – перед публикацией стараться пройти путь пользователя. Понять где важные моменты и сосредоточить на них внимание.
Зная поведение пользователя, можно правильно построить контентную часть страницы, делая ее максимально эффективнее.
Вся важная информация должна быть размещена в той области, которая остается во внимании. Также здесь лучше разместить призывы к действию, кнопки CTA, рекламные баннеры.
Как избежать влияния F-паттерна
- Включить наиболее ценное в первые два абзаца;
- Структурирование текста. Использование заголовков, подзаголовков и выделение их на фоне абзацев, выделение жирным и курсивом;
- Начинайте заголовки и подзаголовки со слов, содержащих суть. По ним читатель должен понять о чем пойдет речь ниже;
- Визуальная группировка связанного по сути текста. Рамкой или фоном. Одна мысль – один абзац. Удаляйте несущественные моменты;
- Ссылки должны содержать точные фразы вместо общих;
- Используйте списки – нумерованные или маркированные, в зависимости от контекста;
- Удаляйте несущественные моменты;
- Все что не относится к основному контенту – выносите в боковую панель. Боковая панель для более глубокого вовлечения по сайту;
- Не делайте сильно монотонного контента, врезки и вставки помогут удержать внимание пользователя.
И напоследок...
Чтение текста пользователями обусловлено такими факторами как мотивация, их целями, версткой и содержанием страницы, форматированием текста.
Не всегда можно отследить и понять с какими мотивами пользователи приходят на сайт, однако со своей стороны можно сделать все как можно лучше и доступнее, привлечь внимание фразами отражающими суть материала, структурированным текстом, чтобы предотвратить беглое F-сканирование.