Идеальная кнопка для сайта — это когда Ваши посетители не отвлекаются лишний раз на них, но постоянно их жмут. Хорошая кнопка должна выглядеть органично и естественно, чтобы пользователь автоматически следовал призыву. Из этой статьи Вы узнаете об идеальных кнопках.
Практически на любом сайте Вы найдете множество ссылок — необходимый элемент продвижения сайтов, и минимум кнопок. Кнопки представляют собой разные изображения, для создания которых требуется время, а ссылку можно сделать практически моментально и не прилагая особых усилий. При этом гиперссылки и кнопки решают идентичные задачи. Так в каких же случаях использовать ссылки, а в каких все-таки кнопки?
Если на странице расположено огромное количество кнопок, то она очень медленно загружается и на это уходит много интернет-трафика. Помимо этого, пользователь может легко запутаться, увидев несколько одинаковых призывов к действию. Кнопки лучше использовать, когда Вам нужно акцентировать внимание пользователя на важном для Вас действии, например: купить товар, зарегистрироваться в системе, скачать документ и тому подобное. В других случаях лучше использовать ссылки.
Как понять, важное действие или нет? Сами задайте себе вопрос: «Влияет ли действие на мой сайт или бизнес?» Важные действия чаще всего требуют от пользователей приложения некоторых усилий. Он должен оформлять заказ, комментировать записи, регистрироваться в системе, восстанавливать пароль, подтверждать вход на сайт и тому подобное. Менее важные действия не требуют от пользователя активных усилий. В таких случаях посетители просто потребляют информацию и переходят от одной страницы к другой.
Веб-дизайнеры используют градиенты для того, чтобы обеспечить естественный вид элементов интерфейса. Когда объект освещается источником света сверху, это придаёт ему глубину и создаёт эффект естественного освещения. Посетители воспринимают затемненные области объекта удаленными, а освещенные области – приближенными.
Создавая кнопку для сайта, необходимо помнить:
Пользователю должна быть видна выпуклая кнопка до тех пор, пока он не нажал на нее. Нажатая пользователем кнопка должна быть вогнутой. Подобного эффекта можно добиться при помощи различных градиентов, которых в арсенале веб-дизайна великое множество.
У кнопок практически всегда есть СТА, но посетители не всегда на них нажимают. Для того чтобы повысить показатель кликабельности, вам нужно сделать саму кнопку убеждающей. Что это означает с точки зрения юзабилити сайта?
Чем реалистичнее выглядит кнопка, тем чаще посетители будут нажимать на нее. Трехмерную кнопку можно получить при помощи закругленных углов, теней и градиентов. Человек автоматически нажимает на сотни кнопок в течение суток: он отвечает на телефонные звонки, включает кондиционер или телевизор, вызывает лифт в подъезде, играет в тетрис и тому подобное. Чем реалистичнее будет выглядеть кнопка на Интернет-сайте, тем больше шанс, что посетитель нажмет ее автоматически.
Контрастные цвета притягивают внимание посетителей. Идеальный цвет – тот, благодаря которому посетитель немедленно заметит кнопку. Цвет кнопки должен контрастировать как с текстом на кнопке, так и с фоном сайта.
Размер кнопки имеет значение. Большая кнопка легче привлекает внимание посетителей. Когда Вы увеличиваете размер кнопки, не забудьте увеличить пропорционально размер шрифта СТА, только не переусердствуйте. Кнопка не должна визуально поглощать информацию.
В один клик, немедленно, сегодня, сейчас, в этот момент – данные слова придают кнопкам эффект срочности. Используйте эти слова на кнопке для стимулирования кликов. Подобные слова подталкивают пользователей на совершение нужного Вам действия.
Посетители могут отказаться от предлагаемого Вами продукта по разным причинам. Например, они могут считать продукт очень дорогим, не понимая его сути и ценности. В таком случае Вы можете использовать мягкий призыв к действию. Предлагайте посетителям бесплатный период использования, демо-версии, узнать о продукте больше и тому подобное. Люди любят так называемую «халяву» и охотно ведутся на такое.
Если СТА состоит только из двух слов, то оба нужно писать с заглавной буквы, так как заглавные буквы делают текст побуждающим к действию. Если СТА состоит из трех и более слов, пишите первое слово с заглавной буквы, а остальные с прописной. Такой текст будет восприниматься как диалог.
Это можно сделать при помощи стрелок, иконок и других элементов. Они придают СТА убедительности. Например, стрелка, расположенная на кнопке, показывает посетителям, что после нажатия на кнопку он перейдет на другую страницу.
Визуальное изменение внешнего вида кнопки при наведении на неё курсора мышки убеждает посетителя совершить необходимое Вам действие. Что должно при этом меняться? Это могут быть изменение внешнего вида шрифта или курсора, градиенты. Например, при наведении на кнопку курсор можно поменять со стрелки на кисть руки.
Разработчики приложений часто используют кнопки типа «Нет», «Да», «Cancel» и «OK» и тому подобное. Если у Вас есть компьютер, то Вы их часто видите каждый день.
Эти кнопки не связаны с действием, которое совершает посетитель, и вряд ли помогут Вам в оптимизации конверсии сайта. Для того, чтобы Ваш сигнал был более убедительным и ясным, связывайте свой СТА с планируемым/желаемым действием посетителя.
Почему конверсионные кнопки необходимо располагать в правой нижней части страницы? Ответ на этот вопрос Вы получите после изучения диаграммы Гутенберга. На диаграмме страница разделена на четыре части. Стрелками указано движение взгляда посетителя. Больше всего внимания посетителя получают верхний левый и нижний правый квадранты. Меньше всего внимания получает нижний левый квадрант. Исходя из этого, кнопку лучше расположить в правой нижней части Интернет-страницы.
Обращайтесь к группе профессионалов компании Гамбит, и все работы по продвижению сайта будут выполнены качественно и в срок!
Кнопки желаемого действия («ОК», «Да», «Оформить», «Купить», «Заказать» и тому подобные) в диалоговых окнах лучше работают, когда находятся с правой стороны. Обратите внимание на рисунок:
Если кнопка действия находится с левой стороны, то посетитель увидит ее первой. Но он ее не нажмет, пока не изучит все доступные кнопки. Сначала посетитель видит кнопку желаемого действия, а потом уже замечает кнопку альтернативного действия. Для того, чтобы пользователь выбрал кнопку с надписью «Да», его внимание должно опять переключиться на кнопку желаемого действия.
Когда кнопка находится справа, то конверсионный путь сокращается на шаг:
Когда кнопка нужного Вам действия расположена справа, то пользователь сначала заметит второстепенную опцию, а затем перейдет к желаемой опции.
Когда кнопка необходимого Вам действия расположена слева, то на конверсионном пути посетитель сталкивается с тремя фиксациями. Если кнопка действия размещена справа, то число фиксаций равняется двум.
Для привлечения и удерживания внимания пользователя в диалоговых окнах следует выделять визуально кнопку необходимого действия. Визуально кнопку можно выделять следующими способами:
Иконки делают пользовательские интерфейсы более эффективными. Люди воспринимают иконки в несколько тысяч раз быстрее текстовой информации, особенно когда изображения размещены на прозрачном фоне. На непрозрачном фоне скорость восприятия информации резко уменьшается. Фон делает визуальный шум, благодаря которому все иконки становятся одинаковыми.
Из-за фона получается визуальный шум, делающий все иконки практически одинаковыми. Вместо того, чтобы сразу приступить к мгновенному сканированию предоставленной визуальной информации, посетителю приходится читать и интерпретировать картинки, что больше подходит для работы с текстовой информацией. В результате даже продуманная стратегия контент-маркетинга может дать осечку: вряд ли посетитель Вашего сайта захочет потерять массу драгоценного времени на то, чтобы понять значение кнопки.
Непрозрачный фон иконок сравним с текстом, написанным одними заглавными буквами: это очень снижает скорость восприятия и затрудняет просмотр визуальных паттернов.
Если посетитель увидит на кнопке стрелку, то на подсознательном уровне он поймет, что после перехода следует завершение действия. Например, нажав мышкой на кнопку, пользователь может спокойно подписаться на рассылку, выбрать необходимый продукт или оформить заказ.
Стрелки в меню указывают посетителям на наличие дополнительных опций.
Многоточия в меню и на кнопках указывают на незаконченность действия и доступность каких-то дополнительных опций.
Многоточия и стрелки делают меню и кнопки лучше и интуитивно понятными.
Для этого дизайнеры должны правильно расположить кнопки, использовать насыщенные цвета и градиенты, применять корректные призывы посетителей к действию и контрасты, использовать всевозможные эффекты при наведении.
Многоточия, стрелки и другие визуальные элементы повышают эффективность кнопок. Кнопки должны быть внушительных размеров, но они не должны визуально “съедать” текст.
При создании кнопки необходимо также учитывать:
Хотите узнать, как сделать кнопки на Вашем сайте идеальными? Спросите у специалистов нашей компании, просто позвонив по номеру +7 (499) 444-05-19!