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

Nancy Pong
Oct 8, 2014 · 3 min read

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend

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

Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.


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

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

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

Скачать приложение в Appstore

Профессиональные секреты UX: UX ProTips

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

    Nancy Pong

    Written by

    Ольга Жолудова. Копирайтер и переводчик. Про копирайтинг: https://vk.com/copywriter.blog Про жизнь: https://www.instagram.com/nancypong4/

    Профессиональные секреты UX: UX ProTips

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

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade