Что такое Диаграмма Гуттенберга?

Создать «какой-то» сайт несложно. Сайт, привлекающий внимание пользователя — труднее. Верх мастерства — создать тот, что удержит его надолго.

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

Сегодня остановимся на Диаграмме Гутенберга или, как ее еще называют, Диагонали Гутенберга.

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

Диаграмма больше похожа на букву Z:

Рассмотрим схему подробнее на примере сайта, который мы сделали для Koch-Chemie Russia.

Первая зона — зона с высоким приоритетом. В ней мы расположили самое важное: логотип, выбор города, дилера (для Koch-Chemie это очень важный раздел) и меню каталога:

Под этой панелью расположен баннер с какой-то актуальной заметной информацией:

Двигаясь по баннеру, взгляд оказывается во второй зоне:

Она хорошо просматривается, поэтому здесь оказались контакты для связи, поле входа/регистрации, а также иконки поиска, избранного и корзины. 

Третья зона обладает наименьшим приоритетом. В ней расположились кликабельные карточки категорий каталога:

Двигаясь взглядом по карточкам каталога, пользователь попадает в четвертую зону. В финальной точке мы разместили кнопку «Смотреть все», а также иконку связи с чатом поддержки:

А так Диагональ Гутенберга выглядит в другом нашем проекте — сайте компании Биолабмикс. В это случае финальная точка смещена вниз:

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

Существуют и иные схемы, например F-паттерн, при котором глаза пользователя движутся по форме этой латинской буквы. Однако, это не противоречит Диаграмме Гутенберга, и применимо к малому количеству сайтов — в основном с монотонной сеткой и с преимущественно текстовым наполнением:

Диаграмма Гутенберга — инструмент, с помощью которого можно успешно удерживать внимание пользователя. Если сомневаетесь, попробуйте разместить элементы на странице подобным образом, а после проведите A/B тестирование. Вы убедитесь, что Диаграмма работает.