Выбор кнопки для упрощения usability

Хотя визуальные элементы хорошо смотрятся на странице, не каждая ссылка на сайте должна быть кнопкой. Это связано с тем, что внимание легко рассеивается: если весь экран усыпан кликабельными элементами, посетитель в итоге никуда не нажмёт. Использовать CTA стоит только тогда, когда нужно получить конкретное действие, например, скачать файл. А содержательные ссылки можно вставлять в текстовом формате.

На что обращать внимание при создании кнопок?

Чтобы создать конвертирующую кнопку, важно учесть пять составляющих её дизайна:

1. Форма.

За счёт оформления этот элемент должен легко распознаваться пользователями. Здесь не стоит проявлять излишний креатив:

• стандартную CTA стоит делать прямоугольной (при желании, можно скруглить края);
• круги могут подойти для размещения иконки внутри: это уже не призыв, а вспомогательная кнопка.

Все остальные варианты могут быть причиной низкой конверсии, потому что привычные формы уже укоренились в сознании интернет-пользователей. Из-за этого они могут просто не понять, что на этот элемент можно кликнуть.

2. Цвет.

Второй параметр, который нужно учесть – это цвет. Здесь нет универсальных рекомендаций, какой оттенок лучше всего стимулирует посетителей: многое зависит от психотипа ваших клиентов. Главное правило – контрастность по отношению к фону. Кликабельные блоки должны выделяться на экране, поэтому используйте тональности, которые привлекают внимание.

3. Размер.

Многие специалисты по usability рекомендуют делать крупные CTA. Действительно, большой размер притягивает взгляд даже на насыщенных информацией страницах. Но не стоит воспринимать этот совет буквально – не делайте блок огромным. Используйте принцип мобильных устройств: площадь нажатия должна соответствовать размеру большого пальца (диаметром около 1 см), чтобы можно было успешно кликнуть с первого раза. На десктопе то же самое – сделайте пропорции такими, чтобы пользователь легко смог попасть на нужную зону курсором.

4. Расположение.

Правильное место должно быть очевидным и легкодоступным. Никто не будет специально искать кнопку, чтобы совершить конверсионное действие. Ваша задача – сделать так, чтобы элемент CTA оказался именно в том месте, куда направлен взгляд пользователя. Если следовать F и Z-паттернам, идеальная точка – левая нижняя часть экрана, прямо под контентом. На мобильной версии стоит также использовать низ экрана, чтобы расположить зону для нажатия прямо под большим пальцем.

5. Индикаторы состояния.

При наведении внешний вид кликабельного блока должен меняться. Это можно сделать с помощью теней, подсветки, цвета, градиента или иконки. Такой эффект побуждает пользователя совершить действие.

Правила создания кликабельных кнопок

Мы разобрались, над какими параметрами нужно работать. После этого, стоит выработать стратегию по улучшению юзабилити. В этом вам помогут несколько простых правил по созданию кликабельных кнопок.

Разделяйте по типам с помощью дизайна

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

Служебные элементы можно делать менее яркими. Они должны помогать, но не перетягивать на себя внимание посетителей. Их лучше делать поменьше, а вместо подписей использовать интуитивно понятные графические символы, например: стрелки для навигации, звездочки для пометки «избранное», корзину для добавления товара и т.д.

Покажите, что произойдёт после нажатия

Ориентируйте пользователя на совершения действия или его результат. Некоторые специалисты рекомендуют делать это от первого лица, например: «Получить мой чек-лист» вместо «Получите ваш бонус».

Откажитесь от таких абстрактных обезличенных формулировок, как:

• «окей»;
• «отправить»;
• «перейти».

Исходя из этих слов, непонятно, что произойдёт дальше. Зачем куда-то переходить или отправлять форму? Объясните пользователю, что он получит после отправки: откроет счёт, зарегистрируется, подпишется на рассылку и т.д. Избегайте приказного тона, лучше использовать мягкие призывы, например, «попробуйте».

Иллюстрируйте CTA иконками по смыслу

Надпись в связке с маленьким изображением работает эффективнее, потому что привлекает больше вниманиями. Добавьте иконку по смыслу, к примеру, значок подарка на призыве скачать бонусные материалы. Это делает кнопку более убедительной и позволит быстрее идентифицировать её на странице.

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

Пишите текст с учётом специфики бизнеса

Один и тот же призыв может звучать по-разному в зависимости от продукта и аудитории, с которой вы работаете. Например, когда пользователь заходит в каталог большого интернет-магазина и видит пометку «купить» на каждой карточке, складывается ощущение, что он может приобрести только один товар. В таком случае правильнее разместить призыв «добавить в корзину». Если чек превышает 10 тысяч рублей, вы работаете с премиальным сегментом или продаёте изделия на заказ, лучше использовать призывы: «узнать подробнее», «посмотреть цены», «рассчитать стоимость».

Как избежать ошибок

Любой сайт можно сделать ещё лучше. Даже если страницы хорошо работают и у вас нет проблем с конверсией, их эффективность можно увеличить. Одно изменение кнопки может удвоить результаты. Главное правило – тестируйте и оптимизируйте. Фиксируйте показатели, проводите изменения, проверяйте разные формы, надписи, цвета и отслеживайте результаты.

Некоторые проблемы невозможно обнаружить самостоятельно. Если вас не устраивает статистика, а изменения ни к чему не приводят, закажите юзабилити сайта у AskUsers. Наша команда проанализирует ваш сайт, подготовит задание и отправит его на проверку реальным пользователям. Получив обратную связь от тестировщиков, вы узнаете, свои недостатки и сможете улучшить CTA и другие особенности сайта.