(Вы читаете перевод профессиональных советов по UX американского автора Джоэла Марша. Если вы тут впервые, то лучше начните сначала)
Для каждого сайта приходится проектировать кнопки, которые привлекут внимание к важным действиям, вроде “Опубликовать”, “Далее” или “Купить”. Такие действия называются целевыми действиями, и они должны быть очевидны и просты.
Но бывают и другие действия, о которых мы часто забываем: второстепенные действия. К ним относятся действия, вроде “Отмена”, “Нет” или “Пропустить”. И они очень часто совершаются.
В чем разница, говорите?
Целевые действия — это то, чего мы первым делом хотим от пользователей. Второстепенные действия — это то, чего мы не хотим первым делом, но что бывает зачастую просто необходимо.
Основная мысль этого урока в том, что нужно проектировать отдельную кнопку для каждого типа действий. Они должны быть похожи, но, тем не менее, отличаться. Спроектируйте две кнопки и остановитесь. Больше вам не нужно.
Основные действия должны быть контрастными по отношению к фону, и они обычно раскрашены в какой-то цвет. На белом фоне хорошо смотрятся темно-красные кнопки. На черном фоне — ярко-желтые.
Красный и оранжевый — цвета, подходящие для множества случаев. Красные кнопки часто побеждают в A/B тестах только потому, что красный цвет заметнее.
Кнопки для второстепенных действий должны быть выполнены в том же стиле, но иметь меньшую контрастность по отношению к фону. На белом фоне второстепенная кнопка может быть светло-голубой или “блестяще-белой”. К черному фону подойдет темно-коричневая, темно-серая или “блестяще-черная”. Цвет не настолько важен, как контраст. Иногда второстепенные действия даже представлены прозрачными кнопками или просто ссылками.
Цель всего этого — чтобы пользователь сначала обратил внимание на основное действие. И если ему захочется продолжить, то он не будет больше никуда смотреть. Хотите — верьте, хотите — нет, но многие люди выполнят даже ненужное действие, если увидят его первым. Вот такие они крутые, наши пользователи.
Исследования в сфере юзабилити и отслеживания взгляда показывают, что пользователи медленнее заполняют формы, когда видят две разные кнопки, но при этом форма, по их мнению, приносит более сильное чувство удовлетворения. Это происходит потому, что пользователям приходится на секунду задуматься, куда нажимать. Следовательно, они не кликают на кнопку автоматически (и избегают потенциальных ошибок).
Не стоит полагаться на то, что пользователь будет автоматически выбирать нужную вам опцию. Вы должны показать ему, что нужно выбирать.
Вот так вот нужно проектировать две кнопки — эти две кнопки, которых вам будет достаточно. Используйте их везде, используйте разумно и с гордостью! ☺
Завтра нас ждет новый UX-совет: Что такое лэндинг? →
А ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.