Обзор результатов тестирования и советы по дизайну кнопки.
Все направо и налево рассуждают о том, какие должны быть кнопки. Все оперируют результатами анализов цвета/названия/размера кнопки. Но, если спросить откуда такая информация, то ответ вы получите невнятный.
Стало интересно на что все опираются. Я нашла несколько статей про цвет кнопки.
Статьи свежие, а вот судя по скринам тестирования в статьях проводились в 2000-х годах.
https://conversionxl.com/blog/which-color-converts-the-best/
https://www.eyequant.com/blog/button-color-on-websites
https://www.wordstream.com/blog/ws/2015/02/20/call-to-action-buttons
https://optinmonster.com/which-color-button-converts-best/
Результаты тестирования смело заявляют какие цвета лучше, а в статьях идёт разбор ошибок проведённого теста. Например, заявление, что красная кнопка лучше зелёной с большим процентным соотношением, не учитывая, что логотип, иконки и ссылки интерфейса имеют зелёный цвет. На фоне зеленого интерфейса, красная кнопка выглядит заметнее пользователю.
В итоге все статьи сводятся к тому, что нет лучшего цвета для кнопки. Но имеются советы по улучшению кнопки. Я собрала три основных правила.
Правило 1. Кнопка должна быть яркой.
Под этим я подразумеваю, что кнопка должна быть контрастна со всем остальным дизайном сайта.
Часто делают на сайте много ярких акцентов. Сайт становится пестрым, и какая бы кнопка яркой не была бы, она не будет работать. Чтобы в этом убедиться, давайте посмотрим на пример с сайта NASA.
Попробуйте здесь найти две буквы «I» сиреневого цвета.
Нашли? Это заняло какое-то время, потому что здесь есть символы такие же яркие как буквы «I». Из-за большого количества ярких символов, глазу не за что зацепиться и он просто скользит по картинке. Если вам нужно найти две буквы «I», для этого нужно напрячься, а мозг не любит это делать и вы почувствуете раздражение. Вот и ваш пользователь будет напрягаться и раздражаться, пытаясь найти важную информацию на вашем сайте.
Посмотрим на другой вариант. Здесь все символы черные и глазу опять не за что зацепиться. Мы видим, что картинка однородная, состоит из однотипных черных символов и всё.
А в этом примере выделили две буквы «L» и две буквы «I».
Вы, даже не думая, смотрите на них в первую очередь. Почему? Если подумать, то чёрный цвет более контрастный к белому, чем розовый или красный. Почему же мы смотрим на розовый и красный? Всё потому, что чёрных знаков много, они становятся единым фоном. Они уходят на заданий план и человек воспринимает их как одно целое. И на этом фоне глаз ловит розовые и красные буквы. Чёрные символы теряют свой контраст и становятся частью фона для розовых и красных букв.
Поэтому на фоне текста и остального дизайна, кнопка должна быть самым ярким акцентом всего сайта. В этом случае она будет притягивать взгляд пользователя и выделяться. Весь сайт строится так, что самую важную информацию делаем самым ярким цветом, а менее важную — менее ярким.
Правило 2. Вокруг кнопки должен быть воздух.
Если рядом с кнопкой будет что-то ещё яркое — это уже сбивает взгляд пользователя. Вокруг кнопки должна быть чистая зона (воздух), которая выделяет кнопку. Человек первым делом ищет акценты на сайте, а потом в голове выстраивается общая структура сайта.
Правило 3. Пользователь должен знать на что нажимает.
Когда пользователь хочет связаться с сайтом, его основной страх: «На что я подписываюсь, нажимая на эту кнопку?»
Так что же будет, когда пользователь нажмёт на кнопку?
Пишите грамотно заголовки и тексты на сайте. Объясняйте всё понятным и простым языком. Отвечайте на возможные вопросы у пользователей. Если есть какие-то нюансы, которые пользователи должны знать — пишите мелким текстом под кнопкой. Чётко и по теме.
Клевые бонусы некоторые компании указывают прямо на кнопке:
В данном примере компания сразу говорит «Начни бесплатно». Пользователь понимает, что сразу ему платить не надо и есть возможность бесплатно познакомиться с продуктом.
Если разместить слово «бесплатно» на кнопке, то это, конечно же, поднимет её конверсионность.
И, как я понимаю, многие из этого делают неправильный вывод: «Чем больше текста на кнопке, тем лучше она работает!». Это заявление я слышу постоянно и очень грустно, как все пихают абзацы текста в несчастные кнопки. Опираться на какие-то правила здорово, но надо понимать откуда появились эти правила и правильно ли вы их поняли.
Если нужно разобрать какие-то вопросы, пишите в комментариях. А, если нравится, как мы рассуждаем, с удовольствием будем рады посотрудничать. Наш сайт — furnas.ru.
Оригинал статьи на нашем блоге на Spark.