Как пользователи просматривают твой сайт?
Модели считывания информации
Чем больше сайтов видит пользователь, тем четче проявляются определенные паттерны восприятия и взаимодействия с контентом. Мозг применяет выработанные стратегии, которые облегчают его работу — и эти стратегии схожи у разных людей. Наиболее типичные модели восприятия описываются в юзабилити как F и Z –паттерны, а также диаграмма Гутенберга.
F-паттерн
Широкую известность получили исследования поведения пользователей, проведенные Якобом Нильсеном ещё 2006 году.
Отслеживание движения глаз при просмотре сайтов показало, что внимание движется сперва слева направо в верхней части сайта, а затем вниз по левой стороне. Таким образом, «горячие» (красные и оранжевые) зоны образуют подобие буквы F (как говорится, press F)
Эксперименты Нильсена показали,что 69% от общего времени на сайте пользователи смотрят на левую часть страницы и только 30% — на правую.
Понятное дело, что современные тренды веб-дизайна отличаются от тех, что были в 2006 году. Но все же движение слева направо и сверху вниз остается наиболее типичным паттерном восприятия информации и успешно используется в дизайне блогов и других контентных проектов.
Советы:
- Придумывайте цепляющий заголовок, который отражает содержание статьи.
- Размещайте важную информацию в первых двух абзацах текста.
- Менее важную информацию оформляйте в виде коротких абзацев, подзаголовков, списков вдоль основной оси F.
Z-паттерн
Z-паттерн не противоречит F-паттерну, но предлагает последовательность считывания информации, которая помогает выстроить грамотный визуальный и/или текстовый сторителлинг.
Где использовать Z-паттерн
Люди чаще всего сканируют по Z-паттерну те страницы, на которых текст не является ключевым элементом. (Когда текст играет главную роль — как, например, в статьях или в поисковой выдаче — лучше использовать F-паттерн). Таким образом, Z-паттерн хорошо подходит для простых дизайнов, где минимум текста и несколько элементов, на которые нужно обратить внимание.
Диаграмма Гутенберга
Эта диаграмма описывает перемещение внимания пользователя на первом экране и повторяется по мере проскролливания страницы.
Левая верхняя зона привлекает внимание в первую очередь. В случае с текстовым контентом сюда попадают всего лишь первые 2–3 слова заголовка. Весь заголовок оказывается во второй зоне. Здесь внимание читателя остается достаточно концентрированным.
Третью зону посетитель «проскакивает» и оказывается в правом нижнем углу видимой части экрана. Именно тут принимается решение о том, оставаться ли на площадке или закрыть сайт. Так что здесь — место для повторного захвата внимания и/или призыва к действию.
Пример «хрестоматийного» использования диаграммы Гутенберга — страница регистрации в Facebook:
Резюмируем:
- Пользователи просматривают сайты в соответствии с определенными принципами и уже сформировали для этого устойчивые паттерны.
- Диаграмма Гутенберга — наиболее полная и логичная модель на сегодняшний день.
- Принципы, которые описывает диаграмма Гутенберга, применяют и внедряют крупные компании и посещаемые сайты