Продажные кнопки
Материал из AOW
Предлагаю вашему вниманию более-менее вольный перевод статьи Call to Action Buttons Best Practices Guide. О чем статья? О том, что не надо делать унылые кнопки. А надо делать задорные. Потому что унылые кнопки располагают к унылым заработкам, а задорные — к задорным.
Итак, что же нам надо делать, чтобы на нашу кнопку щелкали охотнее. Вот вам список рецептов.
Содержание |
Придай реалистичности
Обязательно используйте закругленные уголки, тенюшки, блики и все остальное, что придает кнопке более реалистичный вид. Глядя на реалистичную кнопку, пользователь начинает чувствовать непреодолимый зуд в указательном пальце и не может от него избавиться, пока не нажмет.
На заметку: придать реалистичности не значит нарисовать прямо так, как кнопка выглядит в жизни. Придать реалистичности в данном случае значит буквально следующее — «нарисуй модную кнопку». По поводу реалистичности в интерфейсе советую читать http://www.uxmag.com/design/realism-in-ui-design. Коли вдруг найдутся страждущие, могу ее перевести, но если вкратце, есть некая золотая середина реалистичности, которая работает лучше всего. Следующие две картинки все объяснят:
Серая кнопка в примере тоже довольно унылая, поэтому нужно пойти в статью Бесплатные PSD — подборка сайтов, посмотреть, где брать красивые кнопки, и брать их там.
Используй контрастные цвета
Потому что они привлекают внимание. Ну и вообще иногда просто красиво, когда зафигачено красненьким:
Сделай покрупней
Насколько покрупней, зависит, конечно, от того, что стоит вокруг. Например, если на всей странице нет ничего, кроме текст-инпута под имейл и кнопки «Известить меня, когда сервис запустится», место можно не экономить. Но вообще по жизни меру нужно знать.
Примеры по теме:
Вызови ощущение срочности
Авторы статьи обещают, что если вы напишете «Покупай сегодня» вместо просто «Покупай», то ваш конверт вырастет как живот после десяти лет сидячей работы и пива по вечерам. Если проведете экспериментальную проверку, расскажите потом, сработало или нет. Кроме «сегодня» рекомендуется использовать слова «сейчас», «скорее» и прочие подгоняющие. Иногда лучше не давить Если посетитель еще слабо знаком с вашим продуктом, то как ни пиши «Срочно», на покупку он скорее всего не решится. В таком случае нужно попробовать что-то менее радикальное, например «Попробовать».
Но, естественно, не просто «Попробовать», а «Попробовать сейчас».
Иллюстрируй кнопки — используй иконки
Или ставь на кнопку стрелку, которая говорит «действуй!», или дополни кнопку иконкой, иллюстрирующей действие или объект. В примере, предоставленном авторами иконка не очень похожа на демо, здесь больше подошла бы надпись «создать документ» или «попробовать листочек со строчками текста»... А, пардон, «попробовать листочек со строчками текста сейчас». Нормальные примеры:
Последняя аще кул-дзен-стаф
Используй ховер
И под конец довольно интерфейсная рекомендация — кнопка должна реагировать на пользователя, сигнализировать ему, что она активный элемент интерфейса. Ему будет приятно. Пользователю, в смысле.
Normal стейт, ховер и нажатие
