Проектирование экранов сайта по диаграмме Гутенберга

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

Что же значит диагональ Гутенберга? Подавляющее большинство посетителей вашего сайта ведут себя определенным образом просто потому, что они — люди. Изменить эту привычку невозможно, каким бы новаторским, свежим и креативным ни был дизайн и подход к проектированию.

Что делать? Подстраиваться под этот Ф-паттерн, конечно. Или терять клиентов, которые быстро просканируют ваш сайт, не найдут нужной информации и убегут к конкурентам.

Как же ведут себя посетители сайта?

Типичный Ф-паттерн описывается диаграммой Гутенберга. Выглядит так:

1. Сразу посетитель смотрит в левый верхний сектор экрана (зона приоритетного просмотра).

2. Затем смещает взгляд вправо (хорошо исследуемая зона).

3. Быстро перескакивает на нижний левый сектор (наименее исследуемая зона).

4. И тут же уходит в правую сторону по горизонтали (зона выхода).

Фактически, наибольшее внимание привлекают секторы 1 и 4 — приоритетная и зона выхода.

Большинство посетителей вашего сайта движутся по диагонали от 1-й к 4-й зоне, лишь на микросекунды задерживаясь на секторах 2 и 3. И если правому верхнему углу еще достается немного внимания, то левый нижний практически не просматривается.

Это происходит из-за так называемой гравитации чтения — мы автоматически смещаем взгляд сверху вниз при изучении контента. Пишем мы слева направо, поэтому взгляд так же автоматически смещается в правую сторону. В сочетании с гравитацией это и направляет вектор внимания из левого верхнего в правый нижний угол.

Как видите, механика проста, и слово «диагональ» в самом начале статьи мы использовали в прямом смысле.

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

А теперь несколько рекомендаций по проектированию экранов сайта и пара примеров того, как это реализуется в реальности.

Как использовать диаграмму Гутенберга для улучшения конверсии сайта?

• Значимую информацию — логотип, оффер, слоган — расположите в левом верхнем углу экрана. Это поможет пользователю сразу идентифицировать вашу компанию, услугу или основные выгоды. Ваша задача — завладеть вниманием и направить посетителя на совершение целевого действия.
• В правом нижнем секторе — кнопка заказа, призыв к действию, оффер, мотиватор для скролла. Именно здесь посетитель принимает решение — остаться или уйти, быстро просканировать страницу или внимательно прочесть, стоит или не стоит иметь с вами дела.
• В правом верхнем секторе можно расположить второстепенную информацию: телефоны, форму для заказа обратного звонка, время работы, регион. Посетитель пробежит глазами, отметит, что именно здесь есть, и пойдет дальше. Если понадобится — подсознание заботливо подскажет, где все это можно найти.
• Левый нижний сектор — «мертвая зона». Если разместить здесь важное сообщение, посетитель с большой долей вероятности или совсем его не заметит или отфильтрует как неважное.

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

1. Стартовая страница Facebook, социальной сети #1 в мире, спроектирована в строгом соответствии с диаграммой Гутенберга.

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

Обратите внимание, что страница также спроектирована в соответствии с правилом «7 плюс-минус 2», о котором мы уже писали в блоге.

2. Здесь мы видим хороший пример реализации принципов Гутенберга от компании из реального сектора.

3.Вот еще один пример удачного использования паттерна при дизайне посадочной страницы для сайта услуг.

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

F-паттерн и его связь с диаграммой Гутенберга

В середине 2000-х американская консалтинговая компания Nielsen Norman Group провела интересное исследование. Аналитики изучили, как 232 человека, отобранных случайным образом, просматривают сайты, и составили на основе этих данных тепловые карты.

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

Если взглянуть на снимок страницы, кажется, что Ф-паттерн противоречит диаграмме Гутенберга. На самом деле это не совсем так.

• Диаграмма Гутенберга в большей степени описывает поведение пользователя при контакте с разными видами контента на одном экране: текст, графика, фото, видео. Выше, на средней иллюстрации, где кроме текста есть изображение и вынесенный отдельно контентный блок, это четко видно.
• F-паттерн в большей степени описывает поведение пользователя при чтении текстового или просто однородного контента (иллюстрации 1 и 3). Не забываем, что исследование проводилось более 10 лет назад, когда все топовые сайты выглядели примерно так.

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

Как понять, нужно ли что-то менять на вашем сайте?

Теория — это здорово и интересно. Но она не сделает ваш сайт эффективнее, а бизнес — успешнее. Поэтому поговорим о практике.

Стоит ли что-то менять и экспериментировать?

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

1. Взгляните на ваш сайт (и особенно на первый экран) в разрезе диаграммы Гутенберга.

2. Разместите основные элементы таким образом, чтобы они находились в зоне приоритетного просмотра, а кнопку заказа (или призыв совершить целевое действие) сместите в зону выхода.

3. Проведите A/B-тестирование обеих версий и убедитесь, что диаграмма Гутенберга работает.

Тестирование можно провести посредством связки Google AdWords и Analytics, отследить поведение посетителей из органического поиска на новой версии страницы или провести анкетирование через AskUsers.

Подводя итоги

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

Уже решили, что можно поменять и улучшить на вашем сайте? Или вас можно поздравить с идеальным проектом?