Продажные кнопки

Материал из AOW

Перейти к: навигация, поиск

Предлагаю вашему вниманию более-менее вольный перевод статьи Call to Action Buttons Best Practices Guide. О чем статья? О том, что не надо делать унылые кнопки. А надо делать задорные. Потому что унылые кнопки располагают к унылым заработкам, а задорные — к задорным.

Итак, что же нам надо делать, чтобы на нашу кнопку щелкали охотнее. Вот вам список рецептов.

Содержание

Придай реалистичности

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

Файл:Cta1.png

На заметку: придать реалистичности не значит нарисовать прямо так, как кнопка выглядит в жизни. Придать реалистичности в данном случае значит буквально следующее — «нарисуй модную кнопку». По поводу реалистичности в интерфейсе советую читать http://www.uxmag.com/design/realism-in-ui-design. Коли вдруг найдутся страждущие, могу ее перевести, но если вкратце, есть некая золотая середина реалистичности, которая работает лучше всего. Следующие две картинки все объяснят:

Файл:Pk.jpg

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

Используй контрастные цвета

Потому что они привлекают внимание. Ну и вообще иногда просто красиво, когда зафигачено красненьким:

Файл:Cta2.png

Сделай покрупней

Файл:Cta3.png

Насколько покрупней, зависит, конечно, от того, что стоит вокруг. Например, если на всей странице нет ничего, кроме текст-инпута под имейл и кнопки «Известить меня, когда сервис запустится», место можно не экономить. Но вообще по жизни меру нужно знать.

Примеры по теме:

Вызови ощущение срочности

Файл:Cta4.png

Авторы статьи обещают, что если вы напишете «Покупай сегодня» вместо просто «Покупай», то ваш конверт вырастет как живот после десяти лет сидячей работы и пива по вечерам. Если проведете экспериментальную проверку, расскажите потом, сработало или нет. Кроме «сегодня» рекомендуется использовать слова «сейчас», «скорее» и прочие подгоняющие. Иногда лучше не давить Если посетитель еще слабо знаком с вашим продуктом, то как ни пиши «Срочно», на покупку он скорее всего не решится. В таком случае нужно попробовать что-то менее радикальное, например «Попробовать».

Но, естественно, не просто «Попробовать», а «Попробовать сейчас».

Иллюстрируй кнопки — используй иконки

Файл:Cta7.png

Или ставь на кнопку стрелку, которая говорит «действуй!», или дополни кнопку иконкой, иллюстрирующей действие или объект. В примере, предоставленном авторами иконка не очень похожа на демо, здесь больше подошла бы надпись «создать документ» или «попробовать листочек со строчками текста»... А, пардон, «попробовать листочек со строчками текста сейчас». Нормальные примеры:

Файл:Iconic_buttons.jpg

Последняя аще кул-дзен-стаф

Используй ховер

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

Файл:Love_designmoo.png

Normal стейт, ховер и нажатие

Личные инструменты

Разработка веб-сайтов, автоматизация.
По всем вопросам обращайтесь по телефонам:

+7 495 640 29 90
http://artofweb.ru