Всё для рекламы
и про рекламу
Навигация по статье
Кнопки-призраки: за и противA/B тестКлик-тестТест на вниманиеЗаключение
Маркетинг

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

30070

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

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

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

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

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

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

Кнопки-призраки как тренд веб-дизайна

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

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

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

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

Отечественный пример использования прозрачной кнопки CTA как тренд веб-дизайна

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

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

Кнопки-призраки как акцент на второстепенном призыве к действию

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

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

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

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

A/B тест

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

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

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

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

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

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

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

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

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

Клик-тест

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

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

карта кликов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Получить демонстрационные материалы

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

коэффициенты ошибок

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

среднее время на клик (в секундах)

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

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

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

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

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

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

Показатель обычной кнопки составил 60%

Показатель кнопки-призрака составил 38%

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

средние по кнопкам-призракам и обычным кнопкам

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

Заключение

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

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

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

Команды YAGLA и Kokoc Group ведут несколько телеграм-каналов, где публикуются мнения экспертов и авторские лонгриды о бизнесе и маркетинге, многие из которых не попадают на этот сайт. Обязательно подписывайтесь по ссылке: https://t.me/addlist/EhE5LANnrBphMjUy
Опубликовано редакцией Yagla
30070
0
Написать комментарий
Обсуждаемое

Бегали по стройкам, а теперь продаём фасадные подъёмники онлайн на 200 млн ₽/год. Кейс роста локальной компании на 35 регионов Статья

Как региональному бизнесу выйти на федеральный уровень? Можно ли через интернет продавать фасадные подъёмники тем, кто пропадает на стройке? Изучили язык прорабов, создали 6+ сайтов, запустили рекламу и стали получать 80% заявок из digital. Помогли производителю фасадных подъёмников вырасти до 200 млн ₽/год и расширить географию продаж до 35 регионов.3

Кейс «В точку»: Как мы обеспечили поток заявок на установку заборов и ворот из VK по цене 560 рублей в разгар сезона. Статья

Приветствуем! Мы — агентство таргетированной рекламы «В точку». В этом кейсе мы подробно расскажем, как с помощью таргетированной рекламы ВКонтакте нам удалось привлечь тысячи целевых заявок для компании, занимающейся установкой заборов и откатных ворот.1

AR-лендинги с ИИ: как увеличить конверсию на сайте Статья

Более 75% покупателей в российском e-commerce бросают свои корзины, так и не совершив покупку. По данным исследования агентства Data Insight, одна из ключевых причин — неуверенность.1