Ответ
Контурные кнопки: плюсы и минусы для UX сайта Опции темы
Старый 31.12.2016, 12:56
  #1
Nataly
 
Регистрация: 29.07.2014
Сообщений: 474

Контурные кнопки: плюсы и минусы для UX сайта
Контурные кнопки (ghost buttons) представляют собой прозрачные призывы к действию, появляющиеся на сайтах и в приложениях. Они, как правило, имеют тонкие границы и текст внутри прозрачного тела кнопки. Использование этого типа кнопки достигло пика около года назад, но до сих пор его можно увидеть на множестве сайтов. Они, как правило, используются чаще всего на сайтах, которые имеют минималистичный или плоский дизайн.

С точки зрения дизайна в применении контурных кнопок есть несколько преимуществ. Они хорошо работают на «плоских» и «минималистичных» сайтах.

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

Также иногда они могут быть слишком тонкими, что мешает пользователям замечать их.

Итак, хороши ли или плохи контурные кнопки для роста конверсий и UX?

Плюсы контурных кнопок

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





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

Минусы контурных кнопок

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

Оптимизатор конверсий Angie Schottmuller кратко изложил эту мысль, сказав следующее: «Контурные кнопки сводят меня с ума. Они идут вразрез с юзабилити сайта. Данная концепция является фантазией дизайнера, которая должна умереть. Единственный раз, когда я посчитал эту тактику полезной, когда клиент настаивал на присутствии двух CTA на странице, и мне нужно было, чтобы один из них исчез. Контурные кнопки имеют «призрачные» показатели конверсии».

Компания Nielsen Norman Group также придерживается не особо положительного мнения в отношении контурных кнопок: «Плоские контурные кнопки имеют проблемы удобочитаемостью, и они отходят от установленных правил в отношении того, какой должна быть кнопка».

Таким образом, можно подытожить, что применение контурных кнопок является очень сомнительным дизайнерским решением.

Но, давайте посмотрим на фактические данные

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

1. А/B-тест

В данном случае мы провели тест на главной странице нашего сайта, чтобы выяснить, как контурные кнопки изменили поведение пользователей.

Описание теста

Мы использовали новый инструмент для сплит-тестирования от Google, Optimize 360, чтобы проверить влияние изменения наших обычных кнопок на домашней странице на контурные кнопки. Скриншоты ниже показывают, что тестировалось.








Мы проводили этот тест на протяжении 10 000+ посещений домашней страницы и измеряли клики на любой из кнопок с призывом к действию.

Результаты

Мы достигли статистической значимости для теста, который получил 20-ти процентное сокращение кликов на кнопки в версии контурных. Помимо этого, в целом поведение пользователей особо не изменилось. Поведенческие метрики в Google Analytics выглядели очень схоже, как в оригинальной, так и тестируемой версиях.

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

2. Клик-тест

В дополнение к A/B тесту мы также запустили клик-тест, чтобы оценить влияние двух типов кнопок. Путем проведения мониторинга того, притягиваются ли пользователи к кнопке, и как быстро это происходит, мы сумели разобраться в том, как контурные кнопки могут изменить поведение пользователей.

Описание теста

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

Мы просто показали пользователям два варианта, один с контурными кнопками, а другой с традиционными объемными кнопками и попросили их кликнуть по кнопке, задав следующий вопрос: «Где бы вы нажали кнопку, если хотели бы купить авиабилеты?»

Мы использовали инструмент для проведения клик-теста от UsabilityHub для измерения визуального воздействия контурных кнопок. На скриншоте ниже показан пример результатов тепловой карты:





Мы измерили время, которое потребовалось пользователям, чтобы нажать на кнопку, а также количество «ошибок», когда пользователи кликали на другое место на странице.

Результаты

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

Первый клик-тест








Второй клик-тест








Третий клик-тест








В таблице ниже показаны результаты трех тестов. Они показывают процент ошибок, а также среднее время, затраченное пользователями на клик по кнопке.

Таблица показывает процент ошибок для различных вариаций дизайна:





Таблица показывает среднее время, требующееся для клика по кнопке для различных вариаций дизайна:





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

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

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

Наконец, мы провели тест, чтобы выяснить, как различные типы кнопок меняют внимание пользователей. Он поможет нам понять, повлияло ли изменение кнопки на контурную на привлечение ею внимания со стороны пользователей.

Описание теста

Мы провели этот тест, используя EyeQuant, инструмент искусственного интеллекта, который дает мгновенную, объективную обратную связь о веб и мобильном дизайне. Один из его сервисов показывает «Области заинтересованности» веб-страницы.

Показатель «Области заинтересованности» является относительной метрикой. Когда вы анализируете дизайн с помощью этого инструмента, он дает каждому пикселю «оценку внимания». Когда вы выделяете область с помощью данного инструмента (в данном случае это кнопка), он вычисляет, насколько привлекающим внимание является средний пиксель внутри области в сравнении со средним пикселем на всем экране.

Результаты

Опять же, результаты показали, что контурные кнопки в меньшей мере привлекают внимание пользователей. Пример анализа через инструмент, определяющий «Область заинтересованности», можно увидеть на рисунке ниже. В этом случае объемная кнопка имеет показатель «заинтересованности» в 60% по сравнению с 38% для контурной кнопки.








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





Видно, что здесь есть определенная закономерность, и что контурные кнопки имеют самые низкие показатели. Этот тип теста ничего не говорит нам о том, насколько велика вероятность того, что пользователи будут кликать на контурные кнопки, но он показывает, что данный тип кнопок с меньшей вероятность привлечет их внимание.

Контекст имеет значение, как обычно

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

Мы должны помнить, однако, что это были единичные тесты и дополнительные данные, вероятно, помогут привести веские факты в отношении негативного влияния контурных кнопок. Итак, можем ли мы с уверенностью сказать, что контурные кнопки негативно сказываются на конверсии? Как и многие вещи в сфере оптимизации конверсии, ответ: как сказать.

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

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





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

Делая кнопки более заметными, вы вряд ли получите значительное увеличение конверсии. Однако если их трудно обнаружить, то некоторые пользователи могут испытывать трудности по их обнаружению.

Заключение

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

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

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Где и как лучше размещать контурные кнопки Nataly Статьи 0 20.09.2015 18:18
Регистрация через социальные сети: плюсы и минусы Nataly Статьи 0 07.06.2015 00:38
Дизайн CTA кнопки: как получить больше кликов Nataly Статьи 0 25.12.2014 23:58
Как удвоить конверсию, изменив текст CTA-кнопки Nataly Магазины 0 05.11.2014 22:35
Добавление кнопки «наверх» на WordPress блоге dangerous Статьи 0 13.07.2013 19:19

Метки
ghost buttons, ux сайта, дизайн сайта, клики, конверсия, контурные кнопки


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 09:20. Часовой пояс GMT +3.