В первой статье о кнопках «Call to Action» (CTA) я рассказал об использовании цвета и о том, как он влияет на поведение пользователя. В ней также говорилось, что кнопка СТА — это сочетание 4 важных аспектов: расположения, формы (и размера), текста и цвета. Во второй статье я бы хотел дать вам несколько советов по поводу размещения кнопки.

Несколько советов, которые нужно держать в уме при размещении СТА-кнопки в вашем дизайне.

Заметное расположение

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

Как найти для кнопки место, которого она заслуживает

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

Логическая связь между приветствием и кнопкой СТА

Хорошая идея — использовать какой-либо вводный текст, вроде отзывов клиентов, чтобы поддержать вашу CTA-кнопку. Это даст вашим посетителям хороший повод нажать на кнопку призыва, и им будет легче понять, что произойдет после клика. Если вы решите исползовать вспомогательные предложения, убедитесь, что вы разместили их рядом с кнопкой.

Представьте, что вы хотите убедить людей использовать ваше программное обеспечение, разместив подробный список всех достоинств, пункт за купнктом, вверху страницы. Но СТА-кнопки с текстом «Бесплатная пробная версия программы» поблизости нет. Как же быть пользоватеям?

Примеры получше

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

Макс Гулевич
Руководитель отдела проектирования и дизайна в РосБизнесКонсалтинг

Другие хорошие идеи:

• название на кнопке должно с одной стороны соответствовать мотивам пользователей, а с другой — постараться их не отпугнуть. Так, например, «Оплатить конференцию» будет заведомо лучше работать, чем «— Да, я иду». Попытайтесь сыграть на самолюбии пользователя или воспользуйтесь другими психоэмоциональными моментами, которые достаточно широко представлены в литературе;
   
• со станицы рекомендуется убрать дистракторы, которые могут отвлечь пользователя от совершения конверсии;
   
• вполне понятно, что кнопка должна являться логическим завершением страницы;
   
• британские ученые установили, что дополнительное внимание привлекается к кнопке тогда, когда дизайн страницы как бы указывает на нее (достаточно простым и общеизвестным приемом является использование фото модели, смотрящей или указывающей на форму с кнопкой или саму кнопку);
   
• не забудьте протестировать кликабельность и расположение кнопки на мобильном устройстве, это кажется невероятным, но некоторые сайты отображают action-кнопки в подскрольной горизонтальной области.