Руководство по дизайну кнопок: как создавать кнопки, которые преобразуются

Зачем писать руководство по дизайну кнопок? Кнопки так важны? Зачем тратить столько энергии на такую ​​маленькую часть пользовательского интерфейса?

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

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

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

Эта тема нажала на вашу кнопку? Тогда продолжайте читать.

Прежде чем мы начнем, небольшое слово об A / B-тестировании

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

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

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

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

Как создавать кнопки, на которые пользователи действительно нажимают

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

Разработайте их так, чтобы они соответствовали вашему бренду или сайту

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

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

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

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

Сделайте кнопки похожими на кнопки

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

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

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

Источник: Википедия. Используется с разрешения Microsoft.

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

Использование менее традиционной формы может иметь смысл, чтобы сохранить дизайн вашего сайта согласованным. Тем не менее, как Apple iOS доказала своими закругленными квадратами, это не значит, что она не работает.

Изображение предоставлено Ienjoyeverytime / shutterstock.com.

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

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

Источник: Material.io

Обеспечьте четкие ярлыки

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

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

Изображение предоставлено Prixel Creative / shutterstock.com.

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

Вот несколько рекомендаций для четких этикеток:

• Будьте описательными и конкретными
• Используйте глаголы действия, например, « Зарегистрироваться» , « Отправить форму» , « Создать учетную запись».
• Обратитесь к пользователю напрямую
• Создайте ощущение срочности с помощью таких слов, как " Сейчас" или " Сегодня"
• Сделайте это простым и понятным

Ярлыки имеют особое значение, когда речь идет о CTA. Изменение всего нескольких слов может сильно повлиять на работу кнопок. Например, у Unbounce показатель CTR увеличился на 90%, просто изменив копию кнопки с «Начать бесплатную 30-дневную пробную версию» на «Начать бесплатную 30-дневную пробную версию».

Да, это может быть сила одного слова.

Поместите кнопки там, где пользователи могут их найти

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

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

Источник: Netflix

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

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

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

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

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

Обратите внимание на размер и интервал

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

Источник: Apple

Первый шаг - убедиться, что ваши пуговицы достаточно большие. Средний размер кончика пальца человека составляет 8-10 мм. Как следствие, Apple предлагает делать элементы, которые должны использоваться касанием, размером не менее 44 на 44 пикселя (для дисплеев Retina используйте точки вместо пикселей). Рекомендации других производителей также вращаются вокруг отметки 10 мм. Конечно, размер может быть немного уменьшен для веб-дизайна, предназначенного для использования на настольных компьютерах.

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

Обеспечить обратную связь

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

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

Источник: Material.io

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

Хорошо используйте контраст

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

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

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

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

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

Источник: Prezi

Чтобы выяснить, заметен ли ваш призыв к действию, воспользуйтесь старым добрым «тестом на косоглазие». Примените дизайн, сделайте несколько шагов от экрана, прищурите глаза и посмотрите, выделяется ли ваша кнопка. Знаю, звучит не очень профессионально, но работает!

Вы прищуриваетесь, проверяя свой #CTA? Это лучший способ узнать, выделяется ли ваш призыв к действию. http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

- Design Pickle (@designpickle) 25 июля 2015 г.

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

Источник: Quicksprout

Подведение итогов

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

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

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

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

Какой у вас опыт работы с кнопками? Что-нибудь важное добавить к вышесказанному? Пожалуйста, дайте нам знать в разделе комментариев ниже!

Миниатюра статьи BerryCat / shutterstock.com