«Читаем» дизайн – улучшаем конверсии: диаграмма Гутенберга

Как бы нам ни хотелось уйти в полет фантазии при создании дизайна для компании, нам, дизайнерам, все равно нужно оставаться в рамках разумного, чтобы наши визуальные решения были не только яркими, но и эффективными с точки зрения восприятия. Сегодня можно прочесть множество исследований доказавших, что существуют определенные паттерны восприятия информации, которые необходимо учитывать, когда мы разрабатываем коммерческий дизайн. Ранее мы писали о некоторых из них, например, гармония золотого сечения или правило 6:3:1. Сегодня же мы рассмотрим Диаграмму Гутенберга – еще один визуальный принцип, который позволит вам простраивать эффективные композиции.

Как мы «читаем» дизайн

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

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

На этом же принципе если расположить две картинки с объектом слева и отдельно с объектом справа, то наш мозг «достроит» движение. Причем стоит отметить, что если вы выстраиваете композицию движения слева направо, то оно будет ощущаться как динамичное, быстрое. Если же вы сделаете движение справа налево, то оно будет «тяжелым», будто бы через сопротивление.

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

С правилом «Гравитации чтения» мы разобрались, теперь перейдем к диаграмме Гутенберга. Этот принцип развивает и детализирует принцип «чтения» дизайна, когда визуальные символы нами воспринимаются как текстовая информация.

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

Диаграмма показывает, каким образом человек воспринимает любые визуальные формы: от буклетов до лендингов. Этот алгоритм выглядит следующим образом:

1. Самое первое, что видит человек – это левый верхний угол. Здесь сосредотачивается большая часть внимания аудитории.
2. Далее он быстро обращается к информации справа, как бы «дочитывая» то, что видел слева.
3. Затем взгляд зрителя быстро спускается вниз влево, но долго там не задерживается.
4. Слева переключается на правый нижний угол, чтобы понять «итог сообщения», который несет в себе изображение/сайт/презентация.

Таким образом, самыми важными элементами в восприятии человеком информации становятся зоны 1 и 4. Движение зрительского внимания происходит по диагонали слева направо. Как следствие, ключевые данные, символы должны находиться в этих двух зонах, чтобы зритель смог понять идею, которую вы хотели передать. При этом важно, чтобы левый верхний угол вводил в курс дела, а правый нижний угол подводил некий итог этому сообщению.

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

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

В левом верхнем углу

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

В правом нижнем углу

мы также располагаем информацию, которую важно, чтобы узнал зритель. Но здесь информация должна подытоживать то, что было продемонстрировано на всем слайде. При этом ваша задача также увлечь и убедить зрителя в нужности той информации, которую вы ему рассказываете. Это могут быть следующие элементы: финальный тезис, который суммирует все сказанное ранее, призыв к действию и ссылка/кнопка.

В правом верхнем углу

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

В левом нижнем углу

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

Как мы это сделали в нашем новом шаблоне «Moon flower» для презентаций (текст и изображения являются образцом)

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

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

Таким образом, текстовая информация будет органично и последовательно считываться аудиторией, что будет формировать цельную картинку. Кстати, получить этот шаблон можно бесплатно на нашем сайте, а также скачать и другие шаблоны по символической стоимости – чашки кофе.

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