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

Смотрите в каталоге
SEO (управление и аналитика)

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

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

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

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

Денис Нарижный, специалист сервиса AskUsers подготовил материал с полезными советами о том, как спроектировать экраны сайта по диаграмме Гутенберга.

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

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

  1. Сразу посетитель смотрит в левый верхний сектор экрана (зона приоритетного просмотра). 
  2. Затем смещает взгляд вправо (хорошо исследуемая зона). 
  3. Быстро перескакивает на нижний левый сектор (наименее исследуемая зона). 
  4. И тут же уходит в правую сторону по горизонтали (зона выхода). 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Взгляните на ваш сайт (и особенно на первый экран) в разрезе диаграммы Гутенберга. 
  2. Разместите основные элементы таким образом, чтобы они находились в зоне приоритетного просмотра, а кнопку заказа (или призыв совершить целевое действие) сместите в зону выхода. 
  3. Проведите A/B-тестирование обеих версий и убедитесь, что диаграмма Гутенберга работает. 

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

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

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

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

Компании и сервисы: AskUsers, Nielsen Norman Group, Google AdWords
Автор: Катрин Волкова

Подписаться на новости

Читайте также

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

Как избежать 10 ошибок в работе с цветом на сайте

Работа с цветом — важнейший навык любого веб-дизайнера. Грамотное владение им может принести сайту успех, а даже небольшая ошибка в создании гаммы доставить много хлопот в будущем. В этой статье специалисты сервиса AskUsers разберут 10 ошибок, которые дизайнеры допускают при работе с цветом на сайте, и расскажут вам, как их избежать. 

далее →

18 апреля / Комментарии

Правила оформления шапки интернет-магазина

Известно, что шапка является одной из главных составляющих интернет-магазина. Зачастую именно на нее посетитель обращает взгляд в первую очередь. В этой статье эксперты сервиса AskUsers поделятся приемами правильной компоновки шапки, расскажут как добиться того, чтобы посетитель обратил внимание на самую важную информацию, а не задавался вопросом “где тут вообще что?”.

далее →

17 апреля / Комментарии

Как психология цвета может увеличить конверсию вашего сайта

Пользователю хватает всего 90 секунд, чтоб сформировать в голове решающее мнение о продукте. Как достучаться до него за такой короткий промежуток времени? Понятно, что красочное описание чудодейственной функциональности продукта, удачный нейминг и прочие маркетинговые фишки эффективны, но как сыграть на эмоциях клиента? Цвет – вот что мотивирует (или демотивирует) пользователя – в 62-90% случаев цвет становится главным аргументом в пользу совершения покупки!

далее →

12 апреля / Комментарии

Что, как, зачем, куда: проверенные принципы компоновки элементов интернет-магазина

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

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook