Юзабилити кнопок

На результативность влияет цвет, расположение, размер, формулировка CTA. Каждая деталь важна для usability. 

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

Какие бывают кнопки ОК

Дизайн передаёт пользователю невербальный сигнал, что перед ним – элемент, на который можно нажать. Какого поведения вы хотите добиться? Что произойдёт после клика? Оформление должно показывать, какие действия требуется совершить.

На сайтах встречаются разные формы, каждая из которых используется в определённой ситуации:

1. Объёмная: помогает легко выделить призыв на страницах с большим объёмом контента. При наведении с помощью анимации можно приподнимать или заполнять цветом.

2. Плоская: не отвлекает при изучении информации. Хорошо подходит для подтверждения действий или форм. Располагать лучше всего в нижней части страницы, отделяя от содержательной части.

3. Прозрачная: любимый дизайнерами вариант в цветовой гамме фона. Его нельзя использовать для CTA, так как он не привлекает внимание. Подходит для вторичной информации или дополнительных функций. Например, на платформах для заказа услуг такие форматы используются для набора фрилансеров.

Нередко к кнопкам относят также переключатели. Этот элемент выглядит как рычажок с двумя состояниями. Обычно с его помощью в онлайн-магазинах добавляются дополнительные услуги, а в приложениях включаются/отключаются отдельные функции.

Какими не должны быть кнопки

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

Самые частые ошибки в дизайне – это:

• маленький размер;
• неконтрастный цвет, который сливается с фоном;
• труднодоступное расположение.

Стандартная область клика на смартфоне – 1 сантиметр в диаметре. На этот параметр нужно ориентироваться при разметке. Нажимать на мелкие элементы неудобно, поэтому конверсии автоматически снижаются. Того же эффекта можно достичь, используя цвета в тон подложки. Это может быть красиво, если смотреть на экран, но поставленную задачу такая кнопка не выполнит. Человеческий мозг воспринимает только контрасты, поэтому она должна цеплять его.

Ещё одна плохая идея – «спрятать» CTA в труднодоступном месте. Расположение сильно влияет на эффективность, поэтому сделайте так, чтобы нужный элемент легко можно было найти на странице.

Расположение кнопок

Разметка – ещё один важный момент, который влияет на результативность usability. При изучении новой страницы взгляд пользователя двигается по траектории F или Z. Если посмотреть на тепловые карты, то больше внимания привлекают углы. Это и есть удачные места для размещения кнопок.

Есть несколько правил расположения, на которые стоит ориентироваться при разработке дизайна.

• Элементы, на которые нужно нажимать, должны быть легкодоступны:

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

• Разметка должна соответствовать трендам и быть привычной для пользователей:

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

• Пары важно располагать в правильной последовательности:

«Да/нет», «включить/выключить», «назад/вперёд» - все эти элементы должны быть в привычной последовательности. Нередко нажатие происходит по привычке, поэтому здесь креатив неуместен. Если на всех сайтах кнопка подтверждения располагается слева, а отмены – справа, то не меняйте их местами.

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

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

Принципы usability предполагают легкость использования, поэтому нужно давать пользователю ориентиры. Сделать это можно с помощью визуальной смены состояния при наведении. Дизайнеры используют разные методики призыва:

• подсветка;
• смена цвета;
• появление обводки;
• анимация.

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

Тестирование и оптимизация кнопок

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

Тесты нужно проводить по отдельным параметрам, а именно:

• форма кнопок;
• цвет;
• способ выделения;
• надпись.

Начните с формулировки гипотезы, описав предпочтения целевой аудитории и продукта. Например, ваш сайт – развлекательный, для молодых людей. Вам не нужно создавать ощущение надёжности, в приоритете – расслабление и весёлый настрой. На фоне этого ставится гипотеза, что кнопка должна быть скруглённой, яркой (жёлтой или оранжевой) с текстом «зарегистрироваться». Запускаете, замеряете конверсию и меняете только цвет. Снова проведите анализ и посмотрите, на какой вариант нажимали чаще. С помощью такой логики вы оптимизируете usability и добьётесь высоких показателей.

Основные рекомендации

У каждого сайта есть цель, аудитория и показатели эффективности. На эти три компонента нужно ориентироваться, прорабатывая каждую деталь. Понимание того, на какую кнопку легче нажать, не гарантирует моментального повышения конверсии. Для этого нужно учитывать предпочтения клиентов и концентрироваться на их триггерах. Как это сделать?

Демонстрируйте результат с помощью текста

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

Подбирайте цвет под характер

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

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

Создайте ощущение срочности – пользователи станут чаще нажимать на CTA. Как удобный интерфейс создаёт чувство комфорта, задерживая посетителя на сайте, так и ограничения стимулируют действие.

Без проработки кнопок невозможно эффективно настроить usability и повысить конверсию. Тестируйте и выбирайте убедительный вариант, стимулирующий нажатия. Дайте пользователю возможность легко перейти к нужному разделу или выполнить действие. Так сайт получит больше заявок.