Идеальные кнопки для сайтов: миф или реальность?

Home > Блог компании >  Идеальные кнопки для сайтов: миф или реальность?

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

Когда использовать кнопки, а когда – ссылки?

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

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

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

Правильное использование градиентов

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

Создавая кнопку для сайта, необходимо помнить:

  • Человек воспринимает кнопку, которая затемнена в нижней части и освещена в верхней, как выпуклую.
  • Человек воспринимает кнопку, которая затемнена в верхней части и освещена в нижней, как нажатую или вогнутую.

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

Убеждающая кнопка

У кнопок практически всегда есть СТА, но посетители не всегда на них нажимают. Для того чтобы повысить показатель кликабельности, вам нужно сделать саму кнопку убеждающей. Что это означает с точки зрения юзабилити сайта?

  • Используйте закругленные углы, тени и градиенты для того, чтобы кнопка стала реалистичной.

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

  • Используйте контрастные цвета.

Контрастные цвета притягивают внимание посетителей. Идеальный цвет – тот, благодаря которому посетитель немедленно заметит кнопку. Цвет кнопки должен контрастировать как с текстом на кнопке, так и с фоном сайта.

  • Кнопка должна быть большой, но естественной.

Размер кнопки имеет значение. Большая кнопка легче привлекает внимание посетителей. Когда Вы увеличиваете размер кнопки, не забудьте увеличить пропорционально размер шрифта СТА, только не переусердствуйте. Кнопка не должна визуально поглощать информацию.

  • Используйте слова, придающие кнопке эффект срочности.

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

  • Смягчайте CTA.

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

  • Правильно используйте буквы на кнопках.

Если СТА состоит только из двух слов, то оба нужно писать с заглавной буквы, так как заглавные буквы делают текст побуждающим к действию. Если СТА состоит из трех и более слов, пишите первое слово с заглавной буквы, а остальные с прописной. Такой текст будет восприниматься как диалог.

  • Иллюстрируйте призывы к действию.

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

  • Используйте эффекты при наведении.

Визуальное изменение внешнего вида кнопки при наведении на неё курсора мышки убеждает посетителя совершить необходимое Вам действие. Что должно при этом меняться? Это могут быть изменение внешнего вида шрифта или курсора, градиенты. Например, при наведении на кнопку курсор можно поменять со стрелки на кисть руки.

Почему OK теперь не о’кей?

Разработчики приложений часто используют кнопки типа «Нет», «Да», «Cancel» и «OK» и тому подобное. Если у Вас есть компьютер, то Вы их часто видите каждый день.

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

Почему конверсионные кнопки необходимо располагать в правой нижней части страницы? Ответ на этот вопрос Вы получите после изучения диаграммы Гутенберга. На диаграмме страница разделена на четыре части. Стрелками указано движение взгляда посетителя. Больше всего внимания посетителя получают верхний левый и нижний правый квадранты. Меньше всего внимания получает нижний левый квадрант. Исходя из этого, кнопку лучше расположить в правой нижней части Интернет-страницы.

Обращайтесь к группе профессионалов компании Гамбит, и все работы по продвижению сайта будут выполнены качественно и в срок!

Нанять Нас

Почему в диалоговых окнах нужно размещать кнопку желаемого действия с правой стороны?

Кнопки желаемого действия («ОК», «Да», «Оформить», «Купить», «Заказать» и тому подобные) в диалоговых окнах лучше работают, когда находятся с правой стороны. Обратите внимание на рисунок:

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

Когда кнопка находится справа, то конверсионный путь сокращается на шаг:

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

Когда кнопка необходимого Вам действия расположена слева, то на конверсионном пути посетитель сталкивается с тремя фиксациями. Если кнопка действия размещена справа, то число фиксаций равняется двум.

Как выделить кнопку необходимого действия?

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

  • Кнопку желаемого действия можно выделить насыщенным цветом, а кнопку альтернативного действия выделить ненасыщенным цветом.
  • Использовать цвет фона для альтернативной кнопки.
  • Кнопку альтернативного действия можно выполнить в виде ссылки.
  • Кнопка «Выйти» сливается с фоном.
  • Можно использовать эффект прозрачности. Это придаст кнопке альтернативного действия неактивный вид.

Почему у кнопок должен быть прозрачный фон?

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

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

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

Как использовать многоточия и стрелки?

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

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

Многоточия в меню и на кнопках указывают на незаконченность действия и доступность каких-то дополнительных опций.

Многоточия и стрелки делают меню и кнопки лучше и интуитивно понятными.

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

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

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

При создании кнопки необходимо также учитывать:

  1. Соответствие бренду. Кнопки должны соответствовать контексту. Это может означать как использование дизайна логотипа компании при создании кнопки, так и продуманный выбор графического стиля и цветовой гаммы.
  2. Соответствие содержанию. Необходимо отталкиваться не только от логотипа компании, но и от интерфейса в целом.
  3. Контраст. Экспериментируйте с размерами, цветами, шрифтами и отступами, чтобы кнопки были заметными.
  4. Форменные или закругленные кнопки. Если в интерфейсе много кнопок с закругленными уголками, возможно, следует изменить их форму, сделав их, например, круглой формы. Это придаст кнопкам контраста.
  5. Скрываем второстепенные элементы. Подобные элементы не должны заметно выделяться из общего интерфейса.
  6. Граница и обводка. Если кнопка темнее фона, то обводка должна быть темнее кнопки. Если фон темный, то цвет обводки должен быть темнее цвета фона.
  7. Размытые тени. Руководствуйтесь «Законом теней».
  8. Иконки. Небольшие иконки помогут посетителям предугадать, что произойдет в дальнейшем.
  9. Помните об элементах. Сохраните за первичными кнопками сильные цвета, а слабые используйте по мере снижения значимости кнопки. Размер кнопки также следует уменьшать.
  10. Указывайте состояние кнопки. Это можно сделать при помощи теней, градиентов и границ.

Хотите узнать, как сделать кнопки на Вашем сайте идеальными? Спросите у специалистов нашей компании, просто позвонив по номеру +7 (499) 444-05-19!

© 2005-2021. Маркетинговое Агентство "Гамбит". Мы идем к УСПЕХУ ВМЕСТЕ!