5 советов по разработке выигрышной кнопки «Купить»

Если вы дизайнер, или онлайн-маркетолог, или у вас просто есть сайт, на котором вы пытаетесь что-то продать, в какой-то момент вам придётся создать правильную «кнопку покупки». И тогда вы быстро обнаружите, что просто положить “купить сейчас” текста на синем прямоугольнике просто недостаточно, если вы надеетесь на какие-либо хорошие результаты.

К счастью, создать правильную «кнопку покупки» не так уж сложно, если вы овладеете базовыми знаниями. Вот оно.

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

В сегодняшней статье мы обсуждаем 5 важных черт правильной «кнопки покупки». Давайте взглянем!

1. Общий стиль

Это пункт № 1 в этом списке не без причины, так как это самая важная черта.

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

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

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

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

Mozilla Firefox

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

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

В двух словах: Цель иметь замечательную кнопку.

2. Внешний вид

Давайте начнем с цвет.

Если вы хотите быть выдающимся, используйте цвет, который не использовался нигде на странице. Так же, как парни из Firefox делают на своем сайте. Вы можете использовать такой инструмент, как Color Scheme Designer, чтобы найти цвет, который выглядит хорошо с текущей цветовой схемой вашего сайта, но по-прежнему сильно отличается.

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

Еще один трюк. Оранжевый известен как самый видимый цвет сразу после красного. Но это не вызывает все негативные эмоции, которые вызывает красный (такие вещи, как “стоп”, “быть осторожным!”, а также “Опасность”). Самую популярную оранжевую кнопку в интернете можно найти на amazon.com.

Следующая вещь, чтобы сосредоточиться на это размер кнопки. Ну, что я могу сказать, это должно быть БОЛЬШОЙ. Чем больше, тем лучше. (Опять же, пример Firefox.)

“Могу ли я сделать это еще больше?” хороший вопрос, чтобы задать на этапе проектирования. Делай это много.

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

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

Просто быстрый пример простой кнопки.

ThemeFuse

Как видите, кнопка не использует оранжевых лисиц, но она все еще хорошо видна. На самом деле, ThemeFuse (премиум магазин тем WordPress, частью которого я являюсь) предоставляет что-то под названием шорткоды. Помимо всего прочего, эти шорткоды позволяют легко создавать красивые кнопки.

Например, только с одной строкой:

[button link = "domain.com"] Нажмите здесь, чтобы купить мой удивительный продукт! [/ button]

Я получаю этот результат:

3. Шрифт

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

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

(Источник изображения: Гомедиазин)

Некоторые безопасные шрифты, которые вы можете использовать: Arial, Helvetica, Franklin Gothic, Myriad или любой другой классический шрифт без засечек, действительно.

Теперь насчёт цвета. Копия, конечно, должна сильно контрастировать с цветом кнопки. Вы не хотите серый на сером. Вы хотите черный на белом или синий на оранжевом.

Опять же, текст должен быть хорошо читаемым.

4. Размещение

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

Поместите это в самое очевидное возможное место. Не пытайся быть креативным здесь. Размещение должно быть очевидным для клиента / пользователя.

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

Конечно, это должно быть самое заметное место в то же время. Это означает две вещи:

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

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

5. Дополнительные элементы

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

Мой любимый пример - пример Firefox - использует один действительно крутой дополнительный элемент - оранжевую лису (также известный как их логотип).

Основное правило заключается в использовании дополнительных элементов, которые подчеркнуть назначение кнопки. Например, две стрелки, указывающие вниз, отлично подходят для кнопки загрузки. Значок корзины покупок прекрасно работает с кнопкой добавления в корзину (пример amazon выше). Лупа прекрасно работает с кнопкой поиска. И так далее.

Вы также можете использовать некоторые элементы брендинга. Например, такие как: стандартный значок RSS с кнопкой подписки на канал, значок птицы с кнопкой «следуй за мной», оранжевый лис с кнопкой «скачать-firefox», собственный логотип с надписью «купи-мой-» кнопка вещи.

Вот некоторые примеры:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

Сила "Свободы"

Еще один трюк - использование самого мощного слова в английском языке - БЕСПЛАТНО. Когда что-то рекламируется как бесплатное, люди начинают действовать предсказуемо иррационально (ознакомьтесь с Дэн Арили, «Перевернутая иррациональность», чтобы понять, о чем я.)

Больше примеров:

Freshbooks

Wufoo

Freeagent.com

Что дальше?

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

Что вы посоветуете для создания отличной кнопки покупки? Я хотел бы обновить этот пост с вашим мнением.