Дизайн Вика Слепчевич
12 711

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

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

В закладки
Аудио

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

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

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

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

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

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

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

Сайт для VideoPrivilege

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

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

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

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

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

Фото из Instagram

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

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

Фото с сайта «Бакалавр-магистр»

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

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

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

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

Фото из Pinterest

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

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

Фото с сайта Zombie sushi

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

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

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

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

Фото с Dribbble

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

Офтоп

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

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

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

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

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

Сайт «Эльба банк»

А так — плохо:

Сайт «АртКлимат»

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

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

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

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

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

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

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Вика Слепчевич", "author_type": "self", "tags": [], "comments": 30, "likes": 121, "favorites": 493, "is_advertisement": false, "subsite_label": "design", "id": 57296, "is_wide": false, "is_ugc": true, "date": "Fri, 01 Feb 2019 15:15:27 +0300" }
{ "id": 57296, "author_id": 125452, "diff_limit": 1000, "urls": {"diff":"\/comments\/57296\/get","add":"\/comments\/57296\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/57296"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

30 комментариев 30 комм.

Популярные

По порядку

Написать комментарий...
9

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

Ответить
4

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

Ответить
0

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

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

Ответить
8

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

Ответить
2

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

Ответить
3

На «плохом» варианте у нижнекамских юристов глазу не нужно прыгать по углам и искать адрес, телефон и заказ звонка. А на «хорошем» в угоду композиции всё важное распихано отдельно друг от друга. Короче, в первом варианте всё четко по иерархии значимости и удобно для восприятия, а во втором нужно напрягаться, чтобы слепить воедино все куски. Люди не за статуями ходят на подобные сайты.

Ответить
0

Статья, безусловно, полезная. Но мне интересно, много людей из читателей VC.ru дают свой номер, чтобы им перезванивали?

Лично я ни разу не давал, но и то мне минимум раз в неделю звонит какой-то телефонный спамер. А если так оставлять свой номер направо и налево, то они просто задолбают.

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

Ответить
30

В последнее время просто пропускаю все яркие кнопки и картинки, т.к. мозг уже устал от бесконечных call to action и ярких объектов. Он ищет что-то простое, просто немного текста, например.

Ответить
0

Частично согласен, но вы же понимаете, что ходите по сайтам, не имея четкого представления, зачем вы это делаете?! Эти все приемы очень хорошо работают на подогретый трафик, тем более на горячих.

Ответить
6

Кол2экшн читается так: "Сайт просит, чтобы ему перезвонили"

Ответить
1

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

Типа правильнее «Перезвонить мне». Но хз, немного режет глаз.

Есть знающие люди? Как правильно кнопки подписывать?

Ответить
3

Например, классическое «Заказать звонок».

Ответить
3

Получить консультацию. Не надо писать "Заказать" потому что звонок бесплатный. Заказываю обычно пиццу.

Пишите то что даете клиенту по этому действию. Форму следующая: сначала глагол "Что сделать" потом уточнение кому или что.

Примеры:
1. Получить бесплатную консультацию
2. Купить самокат
3. Заказать билет на концерт Голубая луна.

и т.д.

Ответить
0

Ясно, спасибо. Но есть нюанс. Разве не правильнее писать что-то более близкое по смыслу к акту нажатия кнопки, чем то, что произойдёт через несколько итераций после нажатия?
Разве к юзеру не более честно дать выразиться междометием «хочу это / перезвоните мне и тп» чтобы подыграть нажатию?

Просто по факту это обман. На кнопке написано «получить консультацию», но нажимая ещё надо что-то сделать. «Купить самокат» — при нажатии самокат не купит себя сам. Придётся проходить корзину, чекаут, разговаривать по телефону и встречать курьера.

На ваш взгляд «капризно требовательные» фразы на кнопке, которые может и звучат прямовато, но дают СРАЗУ то, что написано — не круче чем «псевдо-правдивые» фразы на кнопках?

Ответить
0

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

К тому же Купить самокат обычно делают на сайтах без корзины. Если же корзина есть то так и пишут - Положить в корзину. А там уже будет кнопка Оформить заказ.

На лендингах есть варианты типо Хочу и Дайте. Для быстрой продажи нормальный вариант.

Ответить
6

В следующей статье научим вас немножко кодить на Джумле

Ответить

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

0

Хватит может этой ссылкой спамить в каждом комментарии?

Ответить
5

Отличная статья)
Всегда ненавидел эти "облака" тегов, особенно когда больше алтернатив в виде поиска или списка нет.

Ответить
5

"Подходит, но как заказать? Где обратный звонок? Как задать вопрос?"

Ага, вот эти ребята... ©

Ответить
2

Крутая статья, буду использовать, когда кому-то нужно объснить суть иерархии в дизайне.

Ответить
1

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

Ответить
1

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

Ответить
1

Хз. Я, как активный клиент, а также, как лицо услуги предоставляющее, мало доверяю большим и жирным кнопкам. А еще, я вообще не доверяю лэндинг-пейджам. Соц сети - вот, чему, более-менее, можно доверять. Именно они дают инфу о том, как поставщик услуг живет, долго ли и удачно ли. 3 - 5 лет существования на рынке никак не докажешь красивыми картинками, пусть даже и удачно расположенными)

Ответить
0

И даже в соц. сетях есть ухищрения, например этого поста нет на стене Дурова, но как это выглядит для пользователя? (смотреть с десктопа)
https://vk.com/id1?w=wall-170829166_5

Ответить
1

Хорошая статья. Структурированно, коротко и по делу

Ответить
1

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

Ответить
0

Молодцы )

Ответить
0

Хорошая статья-просто и доступно.
А если совместить с имеющимися знаниями и наработками...

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления
{ "page_type": "default" }