Машины оценят
*Телефон
Почта
Вас интересует
Веб-разработка
Интернет-маркетинг
Мобильное приложение
SMM-продвижение
Таргетированная реклама
Контекстная реклама
Брендинг
MVP и стартапы
12/10/22
Корпоративный сайт  Лендинг  WEB

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

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

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

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

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

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

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

Как ваши клиенты смотрят сайты 13.png

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

Frame 81742517.png

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

Как ваши клиенты смотрят сайты 15.png

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

Frame 81742522.png

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

Frame 81742519.png

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

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

Как ваши клиенты смотрят сайты 17.png

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

Как ваши клиенты смотрят сайты 18.png

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

Frame 81742526.png

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

Frame 81742528.png

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

Frame 81742530.png

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


Поделиться материалом

Заказать разработку сайта в Новосибирске
Машины оценят
Вас интересует
Веб-разработка
Интернет-маркетинг
Мобильное приложение
SMM-продвижение
Таргетированная реклама
Контекстная реклама
Брендинг
MVP и стартапы
* Телефон
Заявка отправлена