CTA или Call To Action – как призвать пользователя к действию? | Урок 24

Мы подошли к заключительному уроку в области wireframe-ов и к одной из самых важных функций любого интерактивного дизайна.

← Предыдущий урок

(Это перевод базового курса UX, который включает 31 основной принцип UX-проектирования: UX Crash Course: 31 Fundamentals. Если вы здесь впервые, то лучше начните сначала)

Мы подошли к заключительному уроку в области wireframe-ов и к одной из самых важных функций любого интерактивного дизайна:

Основные и второстепенные кнопки

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

  1. Основные действия, которые помогают достичь наших целей
  2. Второстепенные действия, которые не помогают

Основные кнопки:

Некоторые действия, выполняемые пользователем, являются результативными, как, например, “зарегистрироваться”, “купить”, “сохранить”, “отправить”, “поделиться” и так далее. Они приводят к результату, который раньше не существовал. Это — основные действия. Другими словами, те действия, которых мы ожидаем от пользователей как можно чаще.

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

Стиль основной кнопки: Она должна быть контрастной по отношению к фону. (Другого цвета или оттенка).

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

Второстепенные кнопки:

Некоторые действия, доступные пользователям, являются контр-продуктивными, как, например, “отменить”, “пропустить”, “сбросить”, “отклонить” и так далее. Они удаляют или прекращают создание чего-то нового. Эти действия второстепенны; нам не нужно, чтобы пользователи их совершали, но мы все равно предоставляем возможность их совершать, ради юзабилити.

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

Стиль второстепенной кнопки: Она должна быть минимально контрастна по отношению к фону (похожего цвета или оттенка).

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

Важность — это огромное исключение:

Иногда контр-продуктивные действия важны, как например в случае удаления аккаунта.

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

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

Особые кнопки:

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

Кнопки “Добавить в корзину” на Amazon.com, “Pin it” на Pinterest, и старая кнопка “Like” с большим пальцем на Facebook: все они были созданы по этому принципу (так или иначе).

Завтра мы поменяем передачу и переключимся на наиболее мощные части UX-дизайна:

Психология пользователя: условные рефлексы→

И ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов. | UxLab, LLC | Курсы дизайна в Йошкар-Оле

Курс «Основы UX»

Посты в категории UX-дизайн

Ментальные модели в проектировании и дизайне интерфейсов продукта (UX/UI)

Анастасия Свеженцева

22 октября 2020

Посты в категории UX-дизайн

С чего начать обучение UX-дизайну и как стать профессионалом

Анастасия Свеженцева

12 сентября 2020

Посты в категории UX-дизайн

ТОП-15 книг, которые стоит прочитать UX/UI-дизайнеру (каждому)

Ринат Шайхутдинов

9 сентября 2020

19 000+ участников – здесь ваши друзья, напарники и новые идеи

Присоединиться

Продуктовые дизайнеры
Продакты
UX/UI-дизайнеры
UX-аналитики
Веб-дизайнеры
Менеджеры проектов
Продуктовые аналитики
Бренд-менеджеры
Digital-стратеги
Арт-директора
Аналитики данных
UX-исследователи
Графические дизайнеры
Веб-разработчики
Дизайнеры интерфейсов