Совет #2: Спроектируйте две кнопки и остановитесь

В этом уроке мы поговорим о кнопках. Не о ссылках, не о строчках меню, а о кнопках. Точнее, о двух кнопках.
623

Предыдущий совет

(В этой коллекции собраны переводы профессиональных советов по UX американского автора Джоэла Марша. Если вы тут впервые, то лучше начните сначала)


Для каждого сайта приходится проектировать кнопки, которые привлекут внимание к важным действиям, вроде “Опубликовать”, “Далее” или “Купить”. Такие действия называются основными действиями, и они должны быть очевидны и просты.

Но бывают и другие действия, о которых мы часто забываем: второстепенные действия. К ним относятся действия, вроде “Отмена”, “Нет” или “Пропустить”. И они очень часто совершаются.

В чем разница, говорите?

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

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

Основные действия должны быть контрастными по отношению к фону, и они обычно раскрашены в какой-то цвет. На белом фоне хорошо смотрятся темно-красные кнопки. На черном фоне — ярко-желтые.

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

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

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

Исследования в сфере юзабилити и отслеживания взгляда показывают, что пользователи медленнее заполняют формы, когда видят две разные кнопки, но при этом форма, по их мнению, приносит более сильное чувство удовлетворения. Это происходит потому, что пользователям приходится на секунду задуматься, куда нажимать. Следовательно, они не кликают на кнопку автоматически (и избегают потенциальных ошибок).

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

Вот так вот нужно проектировать две кнопки — эти две кнопки, которых вам будет достаточно. Используйте их везде, используйте разумно и с гордостью! ☺


Если хотите узнать больше про проектирование идеальных кнопок, то вот вам интересная статья:

http://www.pitstopmedia.com/sem/perfect-checkout-button


Завтра нас ждет новый UX-совет: Что такое лэндинг?


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

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


Мобильное приложение «Заметки о психике» | Mental Notes

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

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore →
Заметки UX-проектировщика

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

От тактики к стратегии: что такое сервис-дизайн?

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

11 ноября 2019

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

40+ способов сделать опросы точнее: чек-лист для ux-исследователей

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

18 октября 2019

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

Ген UX/UI дизайнера: 5 жизненных принципов от продуктового дизайнера Atlassian

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

18 июня 2019