Рассказываем о том как с помощью грамотного расположения элементов на странице надолго удержать пользователя на сайте.
Рассмотрим схему подробнее на примере сайта, который мы сделали для Koch-Chemie Russia.
Первая зона — зона с высоким приоритетом. В ней мы расположили самое важное: логотип, выбор города, дилера (для Koch-Chemie это очень важный раздел) и меню каталога:
Под этой панелью расположен баннер с какой-то актуальной заметной информацией:
Двигаясь по баннеру, взгляд оказывается во второй зоне:
Она хорошо просматривается, поэтому здесь оказались контакты для связи, поле входа/регистрации, а также иконки поиска, избранного и корзины.
Третья зона обладает наименьшим приоритетом. В ней расположились кликабельные карточки категорий каталога:
Двигаясь взглядом по карточкам каталога, пользователь попадает в четвертую зону. В финальной точке мы разместили кнопку «Смотреть все», а также иконку связи с чатом поддержки:
А так Диагональ Гутенберга выглядит в другом нашем проекте — сайте компании Биолабмикс. В это случае финальная точка смещена вниз:
Диагональ Гуттенберга — универсальный паттерн, но имеет вариации. Например, при многоколончатой верстке глаза пользователя двигаются по следующей схеме:
Существуют и иные схемы, например F-паттерн, при котором глаза пользователя движутся по форме этой латинской буквы. Однако, это не противоречит Диаграмме Гутенберга, и применимо к малому количеству сайтов — в основном с монотонной сеткой и с преимущественно текстовым наполнением:
Диаграмма Гутенберга — инструмент, с помощью которого можно успешно удерживать внимание пользователя. Если сомневаетесь, попробуйте разместить элементы на странице подобным образом, а после проведите A/B тестирование. Вы убедитесь, что Диаграмма работает.