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-дизайн

Руководство по дизайну таблиц — 20 нюансов по представлению датасетов в интерфейсах

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

15 июня 2020

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

Руководство по созданию бодреньких прототипов с GIF-анимацией в Figma

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

15 июня 2020

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

Как я прокачала навыки продуктового дизайна (ux/ui), работая в техподдержке: с чего лучше начать обучение UX-дизайну

Ольга Жолудова

11 марта 2020