Руководство по созданию привлекательных кнопок, призывающих совершить какое-либо действие

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

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

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

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

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

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

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

Используйте слова, которые передают ощущение срочности и прямоту намерений

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

Постарайтесь смягчить слова, призывающие к действию

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

При написании «title case» используйте одно-два слова, при написании «sentence case» — три слова или больше

Многие пользователи не обращают внимания на текст, написанный прописными буквами и расположенный на кнопках. Значение этого пункта может показаться, на первый взгляд, ничтожным, но это только на первый взгляд. Если ваш призыв к действию состоит из одного-двух слов, использование «title case» написания приведет к тому, что текст кнопки будет выглядеть как команда1. Если ваш призыв к действию состоит из трех и более слов, использование «sentence case» написания приведет к тому, что текст кнопки будет выглядеть как диалог.

Добавьте стрелку или иную иконку в качестве аффорданса

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

Добавьте эффект hover

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

Кнопка должна быть доступна после прокрутки страницы

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

Заключение

Разработать кнопку, которая будет призывать пользователей к действию, довольно просто. Однако к этому процессу нужно подходить с определенной осторожностью и пониманием. Методы, приведенные выше, помогут вам создать приятные кнопки, нацеленные в первую очередь на пользователей. Чтобы протестировать эффективность кнопок, можно воспользоваться A/B тестированием (или, как его еще называют, сплит-тестированием).

Примечания переводчика:
1. Использование «title case» и «sentence case» оправдано лишь для англоязычных сайтов. То, что выглядит естественно для европейца, будет вызывать резкое отторжение у русскоязычных пользователей. Согласитесь сами, вы бы не купили «Только Сегодня и Только Сейчас Супер Качественный Продукт по Низким Ценам». Материалы статьи нужно рассматривать не как прямое руководство к действию, а как поле для собственных маневров. Впрочем, не все разработчики нацелены на русскоязычный сегмент, поэтому многие приведенные советы окажутся для них полезными и, что самое главное, действенными.

Источник: http://uxmovement.com/buttons/call-to-action-buttons-best-practices-guide/

Блог про WordPress
Комментарии: 2
  1. HotIce

    "Кнопка должна быть доступна после прокрутки страницы" — мне кажется, с этим надо быть очень осторожным. Мало того, что повторение рассеивает внимание по интерфейсу, а если интерфейс нацелен побудить нажать кнопку, то может вызвать противоположный эффект.

  2. Дмитрий (автор)

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

Добавить комментарий для HotIce Отменить ответ

Получать новые комментарии по электронной почте.