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

Смотрите в каталоге
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
Автор: Катрин Волкова

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

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

25 октября / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

6 сентября / Комментарии

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

Четыре года назад была опубликована статья «22 ошибки в юзабилити интернет-магазинов, а также работающие варианты по их исправлению». Мы решили, что настала пора освежить данную информацию и задали разработчикам сайтов и CMS следующие вопросы: «Какие указанные в данном материале ошибки по-прежнему актуальны?», «С какими юзабилити-ошибками интернет-магазинов вам приходится встречаться чаще всего?», «Какие юзабилити-советы вы можете дать заказчикам?». И вот что мы узнали.

далее →

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

Навигация как способ управления вниманием пользователя

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

далее →

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