Акцентирование: важный принцип дизайна, который нужно знать предпринимателям

Как управлять вниманием клиента на сайтах, баннерах или, например, в рекламе. Рассказывает дизайн-студия «Логомашина».

Представим ситуацию: перед вами вот такая картинка:

Акцентирование: важный принцип дизайна, который нужно знать предпринимателям

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

Почувствовали, что непонятно даже с чего начать, чтобы ответить? Такое чувство испытывает пользователь, когда попадает на такой сайт:

Акцентирование: важный принцип дизайна, который нужно знать предпринимателям

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

Акцентировать важное цветом

Цвет — раздражитель, глаз быстро реагирует на него. То, что отличается по цвету, перетягивает на себя внимание:

Акцентирование: важный принцип дизайна, который нужно знать предпринимателям

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

Сайт для VideoPrivilege
Сайт для VideoPrivilege

Важная кнопка, которая предлагает узнать больше, выделена черным цветом на фоне светлых тонов.

Акцентировать важное пространством

Можно указать, что объект главный, отстранив от него остальные.

Акцентирование: важный принцип дизайна, который нужно знать предпринимателям

На картинке, даже не смотря на то, что все квадраты одного цвета, взгляд всё равно падает на тот квадрат, который стоит отдельно. Предмет в пустом пространстве привлекает внимание.

Акцентировать что-либо пространством можно, например, так:

Фото из <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.instagram.com%2Fp%2FBmYB2ZundJn%2F%25D0%25BC&postId=57296" rel="nofollow noopener" target="_blank">Instagram</a>
Фото из Instagram

Взгляд сначала падает на фото, затем на текст.

А на этом примере мало пространства, потому сложно воспринять информацию, все превращается в шум:

Фото с сайта «<a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fbakalavr-magistr.ru%2Fdistant&postId=57296" rel="nofollow noopener" target="_blank">Бакалавр-магистр</a>»
Фото с сайта «Бакалавр-магистр»

Пользоваться очень сложно.

Акцентировать важное размером

Большой объект всегда воспринимается как важный, это чувство инстинктивно: то, что больше — опаснее или ближе, а значит, важнее.

Акцентирование: важный принцип дизайна, который нужно знать предпринимателям

Хороший пример того, как можно сделать акцент, увеличив размер:

Фото из <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.pinterest.ru%2Fpin%2F544372673705415758%2F&postId=57296" rel="nofollow noopener" target="_blank">Pinterest</a>
Фото из Pinterest

Акцент на самом главном: самое вкусное то, что продаём.

Плохой пример, когда акцентов нет:

Фото с сайта <a href="https://api.vc.ru/v2.8/redirect?to=http%3A%2F%2Fwww.z-sushi.ru&postId=57296" rel="nofollow noopener" target="_blank">Zombie sushi</a>
Фото с сайта Zombie sushi

Лидеры продаж поданы плохо, не привлекает.

Акцентировать важное движением

Движение невозможно игнорировать:

Вот так, например, на сайте можно анимировать элементы:

Фото с Dribbble

Прикольная анимация останавливает внимание на главной странице, захотелось все рассмотреть, а там и кнопка «начать» тут как тут.

Офтоп

Есть ещё одна полезная информация, она тоже немного про акцентирование. Есть закон Фиттса, он звучит так:

Время, нужное человеку чтобы попасть в цель, прямо пропорционально расстоянию до цели и обратно пропорционально её размеру.

Это про то, что иногда, когда заходишь на сайт, уже вроде хочешь оставить заявку или позвонить, а ничего нет. Нужно либо скроллить вниз, либо идти в контакты, а это не всегда спасает.

Нельзя забывать о том, что пользователю должно быть ясно, как с вами связаться.

Вот так хорошо, кнопка не кричит, но всегда рядом:

Сайт «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Felbabank.ru&postId=57296" rel="nofollow noopener" target="_blank">Эльба банк</a>»
Сайт «Эльба банк»

А так — плохо:

Сайт «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fartclimat56.ru%2F&postId=57296" rel="nofollow noopener" target="_blank">АртКлимат</a>»
Сайт «АртКлимат»

Подходит, но как заказать? Где обратный звонок? Как задать вопрос? Номер не кликабелен, тогда надо смотреть на экран и вводить на телефоне. Никакого call to action, как все любят.

Пользователи не готовы делать лишние действия, а на этом сайте не позаботились об удобстве. Большая вероятность, что часть посетителей уходит из-за этого.

Кратко: чем полезно акцентирование

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

Заходишь на такой сайт:

Акцентирование: важный принцип дизайна, который нужно знать предпринимателям

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

Но, зная про акцентирование, можно, как ни странно, расставить акценты и упростить жизнь пользователя, а также конверсию сайта поднять:

Акцентирование: важный принцип дизайна, который нужно знать предпринимателям

Акцентирование — довольно понятный инструмент и для не дизайнера. Если вы не знаете, как дизайн может помочь именно вам, то вот подсказка: взгляните на свой сайт, рекламу, баннер.

Выделена ли главная информация? Понятно что за чем следует? Удобно этим пользоваться? Как можно оставить заявку? Если всё понятно, круто, всё сделано хорошо. А вот если возникли трудности, то можно воспользоваться акцентированием.

Бонусом: этот принцип — критерий, по которому можно понять, хороший дизайн перед вами или нет. На этом всё, всем удачи!

103103
29 комментариев

Человеческие глаза один из самых сильных тригеров.

9
Ответить

Да, лица людей – сильный акцент)

4
Ответить

о, а у меня видео-версия есть

https://coub.com/view/1iz7n6

Ответить

Со временем стал мало доверять таким сайтам. Маркетологи, конечно, хорошо отрабатывают поверхностные знания нейрофизиологии и триггеры продаж..но ожидания должны оправдывать результат...но в 90% это не так..
Чаще в «каше» на сайте сталкиваешься с профи своего дело..с ними и работаешь)

8
Ответить

Кстати, да. Дилетанты в своем деле делают красивые сайтики, но предлагают либо г, либо жутко дорогое г.
Профессионалы обычно не тратятся на обертку, а просто работают.

5
Ответить

Комментарий недоступен

3
Ответить