Как создать баннеры, которые не испортят ваш UX

История баннеров берет свое начало в сфере рекламы. Их прообразом стали реальные баннеры, которые переместились в мир UX, чтобы подталкивать пользователей к совершению определенных действий.

В течение моей относительно короткой, но интересной карьеры дизайнера, меня несколько раз просили разработать убедительный баннер. Чаще всего, увидев результат, заказчики просили сделать его более привлекательным и эффектным.

1. Баннеры — это экстраверты!

Представьте себе экстраверта, который постоянно хочет привлечь к себе внимание  💁‍♀️. Будучи таковым, я с легкостью могу вообразить, как несколько баннеров появляются на странице и начинают бороться за внимание пользователя. Иногда таких рекламных объявлений слишком много, и все они отчаянно призывают, чтобы человек нажал на них. В этом случае, хаос может сбить пользователя с толку — он попытается понять, какой из баннеров действительно предлагает что-то полезное и стоящее.

Всем своим видом кричащие “Я, Я, Я!” элементы лишь усугубляют ситуацию. Жизнь бедных баннеров нельзя считать легкой.

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

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

2. Анатомия баннера

1. Визуал: Баннер обычно включает изображение или другой стилистический элемент, позволяющий эффективнее передать основную идею.
2. Контейнер: Ограниченная область, внутри которой размещаются все элементы. Часто окрашена в яркий или контрастный цвет, чтобы привлечь внимание пользователя.
3. Текст: Короткое сообщение, которое подводит пользователя к совершению конкретного действия. Формулировки должны быть точными и понятными.
4. Призыв к действию: Это может быть кнопка, ссылка или иконка, предлагающая пользователю выполнить какое-то действие.

3. Виды баннеров

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

Призывающие к действию

• Баннеры с ограничением по времени: Пытаются мотивировать пользователя ограниченным сроком действия предложения. Речь идет о так называемом FOMO (fear of missing out) или синдроме упущенной выгоды, когда пользователи боятся пропустить что-то важное. Например, “Торопитесь, осталось всего 2 штуки!”, “Акция действует только сегодня!” или “Чтобы получить скидку, нужно совершить покупку в течение 11 минут!”
• Призывы к регистрации на сайте: Предлагают пользователю различные преимущества, например, деньги, скидки, баллы и т.д. , чтобы убедить его зарегистрироваться на платформе. Когда человек создает аккаунт, мы получаем возможность больше узнать о нем и его предпочтениях. Эти данные помогают оптимизировать рекомендации и сделать их персонализированными.
• Вдохновляющие баннеры: Предоставляют пользователям информацию, соответствующую их интересам / истории поиска, которая подтолкнет их к изучению предложения. Например, фанаты “Игры престолов” загорелись бы идеей посетить Ирландию, если бы узнали, что именно там снимали их любимый сериал.
• Баннеры с убедительным предложением: Один из проверенных временем эффективных приемов — это предложение с привлекательной ценой, сообщающее пользователю, что он может воспользоваться скидкой и различными способами оплаты.

Информационные

• Баннеры, отражающие статус: Дают пользователям обратную связь в ответ на совершенные ими действия. Сообщают, что задача выполнена / не удалось выполнить задачу / идет процесс ее выполнения.
• Баннеры, привлекающие внимание к УТП (уникальное торговое предложение): Убеждают пользователей, почему конкретная компания является лучшей в отрасли.
  

4. О чем следует помнить, разрабатывая дизайн баннеров

1. Расположение баннера

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

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

Вот отличный инструмент, который я часто использую, чтобы увидеть, как будет перемещаться взгляд пользователя по странице: https://vas.3m.com/. Это помогает эффективнее расположить на сайте все элементы.

2. Баннер должен быть заметным

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

3. Баннер следует сделать масштабируемым

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

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

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

4. Баннерная слепота

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

5. Чрезмерное использование баннеров

Если на вашем лендинге постоянно отображается один и тот же баннер, вам, вероятно, стоит просто добавить информацию, которую он содержит, на страницу. Попробуйте найти нестандартное решение!

6. Баннер должен включать релевантную информацию

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

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

Заключение

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

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

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