Наша серия из 4 материалов о кнопках призыва к действию (СTA) подошла к третьей части, где я рассказываю о влиянии формы и размера кнопки на её эффективность. Опираясь на результаты некоторых исследований, я продемонстрирую вам лучшие способы увеличить показатели CTR (англ. click-through rate, показатель кликабельности. — Прим. перев.) для этих кнопок. Но помните: только вы можете определить, что реально работает для вашего приложения, тестируя свои CTA. Ссылки на предыдущие материалы вы найдете внизу статьи.

Форма кнопок «Call to Action»

Кнопка СТА — ничто иное как цифровая версия реальной кнопки, такой как обычный дверной звонок. Мы все воспринимаем дверной звонок как кликабельный (действие), и что это действие приводит к определенному результату. Эти характеристики нужно отразить и в нашем дизайне кнопки СТА.

Прямоугольные кнопки используются в сфере цифровых технологий давно, и люди уже привыкли соотносить их с соответствующими функциями. Согласно Энди Херцфельду из Folklore.org, именно Билл Аткинсон, который работал со Стивом Джобсом над одним из первых Apple Macintosh в 1981 году, добавил в QuickDraw новый код, позволивший рисовать круги и овалы.

В случае с кнопкой СТА я настоятельно рекомендую использовать округлые или закругленные уголки по трём причинам:

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

Вторая причина, по которой лучше использовать закругленные углы, в том, что они успокаивают ваше подсознание. Исследования показали, что мы все «запрограммированы» избегать острых углов, так как они представляют собой угрозу (первобытная реакция).

Наконец, третья причина в том, что закругленный прямоугольник гораздо легче заметить. Хочу процитировать профессора Жюрга Нэнни (Jürg Nänni), автора поучительного «Визуального восприятия»: «Прямоугольник с острыми углами действительно требует немного больших когнитивных визуальных усилий, чем, например, овал того же размера. Наша „центральная ямка“ (на сетчатке глаза, прим. перев.) еще быстрее фиксирует круг. Острые углы задействуют дополнительные нейронные зрительные механизмы. Таким образом, процесс замедляется».

Размер кнопки СТА

Говоря в общем, чем больше размер элемента на странице, тем больше он будет заметен, и, следовательно, тем более важным он должен быть. Закон Фиттса показал нам, что размер объекта прямо влияет на время, необходимое для наведения на него курсора. Я бы хотел добавить, что значение имеет не размер как таковой, а размер относительно других элементов на странице. Кнопка может считаться большой, однако если другие элементы вокруг неё ещё больше, она может легко среди них потеряться.

Как определиться с размером кнопки СТА

Как я уже отмечал в предыдущих статьях о кнопках «Call-to-action», в первую очередь вам необходимо определить, насколько важны определенные действия, и придать кнопкам «Call-to-action» соответствующий размер.

Вы и сами понимаете, что писать здесь об идеальных размерах кнопки нет смысла, потому что они просто не существуют. Я могу только посоветовать вам делать ее не слишком маленькой, потому что тогда никто не заметит кнопку, и не слишком большой, потому что в таком случае пользователи не поймут, что она кликабельна. Сделайте её приятной на вид, но не забывайте о важности продажи/конверсии. Золотое правило: тестировать, тестировать и тестировать.

В статье «5 быстрых и простых способов улучшить юзабилити вашего сайта» я рассказывал о скриншоте с размытием радиусом в 5px — этот маленький трюк поможет вам понять, достаточно ли выделяются самые важные блоки вашего дизайна, такие, например, как кнопки СТА. Если нет, вам следует увеличить размер кнопок. Этим вы не только привлечете внимание к кнопке, а увеличите кликабельную зону, что сделает её более удобной и простой в использовании.

Леви Грэхам (Leevi Graham) обеспечил нас очень полезным плагином jQuery, который увеличивает кликабельную зону. (Подробнее о плагине смотрите здесь. — Прим. перев.)

Несколько кнопок CТА

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

Дополнительный совет по дизайну

В завершение вы можете добавить к дизайну кнопки СТА лёгкую, реалистичную тень, и немного её подсветить, придавая изображению объем. Это к тому же будет еще одной отсылкой к настоящей, материальной версии кнопки.

Дайте нам знать, как у вас обстоят дела с кнопками СТА!

Оригинал: http://www.paulolyslager.com/call-to-action-buttons-shape-size/

Сергей Смирнов
Заместитель директора в Forumedia.ru

Отличный материал.

Публикации про дизайн и юзабилити редко удивляют профессионалов. В силу их повторения. Данный материал содержит неизвестные для меня моменты. Интуитивно чувствуешь, что скругленные углы кнопок лучше, приятнее острых углов. Но объяснить не можешь. Теперь знаю — «почему надо так».
В закладки, заметки, к применению.