Тренды веб-дизайна: кнопки-призраки

Тренды веб-дизайна затрагивают и внешний вид кнопок CTA (призыва к действию): разные цвета и контуры, шрифты текста, размеры и местоположение на странице. Особняком стоят кнопки-призраки. В России они пока не так популярны, но часто встречаются на зарубежных сайтах. 

Что это — катастрофа в пользовательском опыте или эффективный веб-дизайн — вы узнаете в этой статье.

Кнопки-призраки: за и против

Чем они отличаются от обычных кнопок CTA?

• Тонкий контур
• Прозрачный фон
• По размеру больше обычных кнопок
• Тонкий шрифт
• Как правило, цвет контура и шрифта одинаковый — белый или черный.

Такие кнопки органично выглядят в минималистичном или плоском дизайне сайта, подчеркивают его элегантность и сдержанность:

Текст: «Мы считаем, что digital-платформы должны вдохновлять и улучшать мир».

Призыв к действию: «Посмотреть нашу работу».

Благодаря простому дизайну они не перегружают страницу и облегчают восприятие. 

А вот отечественный пример – проект ПоюForYou:

Функция кнопок-призраков — ненавязчивое привлечение внимания. Это полезно, когда на странице несколько призывов к действию: вторичные кнопки сделать сдержанными, чтобы они не отвлекали от основного CTA.

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

Текст: «Доброе утро! Персонализация digital-опыта для ваших клиентов».

Призыв к действию: «Узнать больше», «Попробовать бесплатно».

Главный недостаток — слабый контраст с фоновым изображением. Пользователи могут не заметить, куда нужно нажать, и уйдут с сайта без совершения целевого действия.

Кнопки-призраки не выглядят, как кликабельные элементы, а потому могут ухудшить пользовательский опыт и снизить конверсию. Так ли это на самом деле — покажет тестирование.

A/B тест

Предмет тестирования — кнопка призыва к действию на главной странице сайта агентства digital-маркетинга Fresh Egg.

Вот оригинальный дизайн с розовой кнопкой:

Текст: «Мы работаем с потрясающими брендами».

Призыв к действию: «Посмотреть нашу работу».

Вариант с прозрачной кнопкой:

Инструмент тестирования — Optimize 360. Выборка — 10 тысяч визитов.

Результат — минус 20% по числу кликов CTA при втором варианте. Тест подтвердил ожидания: яркие кнопки привлекают больше внимания.

Клик-тест

Заметят ли пользователи кнопку и насколько быстро — покажет клик-тест. Задача — например, с помощью инструмента AskUsers проверить работу обычных кнопок и кнопок-призраков.

На скриншоте — карта кликов, цветами отмечены области на странице, куда пользователи чаще кликали в поисках кнопки CTA:

Текст: Джон Стюарт «Розовая вода».

Призыв к действию: «Купить билеты».

На 3 сайтах с минималистичным дизайном измеряли количество «ошибок» (когда пользователи кликали мимо) и среднее время клика кнопки.

Клик-тест №1 (Rosewater)

Клик-тест №2 (Gorilla)

Текст: «Большой опыт».

Призыв к действию: «Далее».

Клик-тест №3 (Integra)

Текст: «3D визуализация».

Призыв к действию: «Получить демонстрационные материалы».

В первой таблице — коэффициенты «ошибок»:

Во второй — среднее время на клик (в секундах):

Пользователю сложнее заметить прозрачную кнопку и взаимодействовать с ней. Клик-тест №1 показал худший результат: кнопки в углу страницы легче проигнорировать, чем в середине.

Для кнопок-призраков коэффициент ошибок выше, а времени на клик больше.

Тест на внимание

Этот тест с помощью инструмента искусственного разума EyeQuant не покажет, как пользователи нажимают кнопки, но выявит, какие из них привлекают больше внимания.

Инструмент оценивает, насколько каждый пиксель цепляет глаз. В итоге вы получаете средние показатели внимания на пиксель внутри элемента (в нашем случае — кнопки) и внутри всего экрана.

Показатель обычной кнопки составил 60%, кнопки-призрака — 38%.

В таблице — показатели внимания всех вариаций, а также средние по кнопкам-призракам и обычным кнопкам:

Кнопки-призраки проиграли по всем показателям во всех вариациях.

Заключение

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

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

Статья подготовлена по материалам conversionxl.com.