Кнопки для сайта онлайн: создать кнопку для сайта онлайн

Как создать кнопку для сайта. Популярные онлайн сервисы

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

С их помощью можно просто и быстро создавать кнопки нужного цвета, формы, размера и т. д.

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

Содержание:

• Конструктор Da Button Factory
• Редактор As Button Generator
• Сервис Cooltext

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

Онлайн-конструктор Da Button Factory

Наиболее удобным онлайн-конструктором, с помощью которого можно быстро и легко создать красивые кнопки для ваших сайтов, является Da Button Factory по адресу dabuttonfactory.com.

Сервис англоязычный, но в нем все довольно просто. Можно работать и в переводе Google Chrome.

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

Затем можно сохранить кнопку в определенном формате: png, gif, jpeg или ico и т. д.

Работать с сервисом очень легко и просто. При вводе текста сразу идет отображение.

Шрифтов, правда немного и не все они поддерживают русский алфавит, но можно оставить один из популярных – Calibri.

Можно выбрать жирный шрифт, курсив, размер шрифта и цвет надписи на кнопке. Есть возможность выбрать тень, дистанцию и цвет тени.

Справа выбираем форму кнопки – либо с закругленными краями, либо с прямыми углами.

Цвет кнопки может быть либо один, либо иметь градиент, либо два независимых цвета и т. д.

Есть функция Bubble effect, при выборе которой появляется на кнопке прозрачный переход.

Можно отредактировать границы кнопки. Размер можно выбрать фиксированный, либо настраиваемый по горизонтали и вертикали.

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

Далее копируем url кнопки, либо можно скачать ее себе на компьютер в нужном для вас формате. Если выбрать CSS фон, тогда предложат скопировать CSS-код кнопки.

Кнопку сохраняем – Сохранить картинку как, либо скачиваем и сейчас ее можно вставить в любом месте нашего сайта.

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

Создать кнопку с помощью редактора  As Button Generator

Еще один интересный редактор – As Button Generator. Тоже простой и удобный. Здесь кнопки интересны сами по себе, а также есть очень неплохие эффекты.

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

Генератор имеет несколько вкладок:

1. На первой можно выбрать цвет, форму, размер и границу кнопки.
2. Следующая вкладка — Gradation Type. Здесь можно задать переход цвета по вертикали кнопки, полосатую фактуру, которую тоже можно настраивать, меняя цвет, толщину полос, промежуток между ними и т. д.
3. Еще одна вкладка – Filter. Генератор предупреждает, что если мы используем фильтр, то впоследствии уже не сможем редактировать текстовый элемент, либо картинку.

Поэтому фильтр рекомендуется использовать в самом конце редактирования, то есть после того, как будет добавлена на кнопку надпись.

В плане добавления текста генератор имеет несколько специфический редактор. Для того, чтобы его добавить, нужно нажать на кнопку Insert Text.

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

Чтобы изменения вступили в силу, нажимаем на кнопку Apply. Здесь же можно менять размер надписи, но перед этим предварительно текст надо выделить и только тогда будут происходить изменения.

Можно также менять цвет и т. д.

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

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

Есть еще один фильтр – DropShadow Filter. Он может давать тень надписи, которую также можно редактировать.

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

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

Если выбранный вариант не нравится, идем на вкладку Image и нажимаем кнопку Delete selected element. При этом последовательно убирается надпись и фон кнопки.

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

Таким образом, генератор As Button Generator довольно интересный и чтобы создать кнопку, можно с успехом его использовать.

Конструктор Cooltext

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

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

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

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

В конце блока есть довольно интересная функция

Mouse Over, которая работает при наведении на кнопку мышью.

Если все изменения вас устраивают, нажимаем Greate Button и кнопка генерируется. В зависимости от того, какой шаблон используется, кнопка сохраняется в форматах png, gif и в других.

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

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

Где сделать кнопки для сайта онлайн?

Быстрая навигация по этой странице:

• О чем речь?
• Онлайн-сервис Da Button Factory
• Онлайн-генератор Cool Text

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

О чем речь?

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

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

Онлайн-сервис Da Button Factory

http://dabuttonfactory.com/

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

Во время создания кнопок виден пример того, что должно получиться, поэтому всегда можно регулировать цвета, форму и размеры. Сервис англоязычный, однако никаких трудностей во время использования не возникает — все просто и понятно: «Size» — размер кнопки или шрифта, «Color» — их цвет, «Text» — текст внутри, «Font» — необходимый шрифт. В области «Style» можно выбрать стилевое оформление углов кнопки (всего их три вида). Область «Border» предназначена для определения рамок кнопки, а с помощью «Download» можно загрузить готовую кнопку на компьютер в том расширении, который предварительно выбран. В целом, сервис заслуживает твердой четверки. Единственным недостатком может являться простота оформления и не слишком широкие функциональные возможности.

Онлайн-генератор Cool Text

http://cooltext. com/

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

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

10 лучших веб-сайтов для создания кнопок онлайн

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

Прочитайте каждую запись и тщательно попробуйте. Посмотрите, какие из них могут облегчить вашу работу. Вы можете поделиться, если знаете другие полезные генераторы кнопок, которые могут понравиться нашим читателям/зрителям. Хотите первым узнавать о последних событиях на SmashingApps.com, просто подпишитесь на нашу rss-ленту и следите за нами в Twitter.

ПодробнееMagento, бесплатное профессиональное решение для электронной коммерции с открытым исходным кодом

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

1. Button Maker

Button Maker — замечательный бесплатный инструмент для создания CSS-кодов для ваших кнопок. У вас есть доступ к разным цветам для разных частей кнопки. Ползунки в верхней части выбора цвета позволяют изменять размер и форму кнопки, которую вы видите слева. Чтобы получить код, нажмите на кнопку. Нажмите здесь, чтобы перейти на сайт Button Maker.

2. Фабрика пуговиц Da

Фабрика пуговиц Da предлагает вам отличные инструменты для создания пуговиц. Вы можете изменить размер кнопки, тень текста, стиль, цвета и тип вывода (PNG / JPEG / GIF / ICO). Изменения, которые вы вносите в кнопку, обновляются по мере вашей работы. Когда закончите, вы можете нажать на кнопку, чтобы загрузить его. Посетите фабрику Da Button, нажав здесь.

3. Buttonator

Еще один замечательный онлайн-инструмент для создания кнопок, Buttonator удовлетворит большинство ваших потребностей в кнопках. Вы можете начать с выбора определенного стиля кнопки на правой панели. Затем вы можете приступить к внесению изменений в кнопку; изменения включают изменение цвета и стиля/размера шрифта. Кнопки можно скачать в формате GIF. Нажмите здесь, чтобы посетить Buttonator.

4. Генератор бесплатных флеш-кнопок

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

5. Cool RGB

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

6. Как генератор кнопок

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

7. Генератор кнопок со скругленными углами HTML и CSS

Этот сайт предназначен для разработчиков, которые ищут очень простой онлайн-инструмент для создания кнопок 2-в-1. С помощью Генератора кнопок со скругленными углами HTML и CSS вы можете создавать кнопки, но изменяя их цвета и получая ZIP-архив, который содержит файл изображения кнопки в формате PNG, а также код HTML и CSS. Посетите сайт здесь.

8. Значок ленты новостей

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

9. Создатель кнопок Адама Калси

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

10. Button Maker

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

Кнопки, значки, инструменты, веб-приложения

примеров и лучших практик — Smashing Magazine

• 17 минут чтения
• Вдохновение, Витрины, Кнопки, Conversion
• Поделиться в Twitter, LinkedIn

Об авторе

Джейкоб Губе является основателем и главным редактором Six Revisions, веб-издания для веб-разработчиков и дизайнеров, а также заместителем редактора Design Instruct, веб-сайта … Больше о Джейкоб ↬

Призыв к действию в веб-дизайне и, в частности, в пользовательском опыте (UX) — это термин, используемый для элементов на веб-странице, которые требуют от пользователя действия. Самое популярное воплощение призыва к действию в веб-интерфейсах — это кнопки, на которые можно нажать, и при нажатии они выполняют действие (например, «Купите это сейчас!») или ведут на веб-страницу с дополнительной информацией (например, «Подробнее…»). ), который просит пользователя предпринять какие-либо действия.

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

Возможно, вы захотите взглянуть на следующие статьи по теме:

• Прекратить разработку страниц и начать разработку потоков
• Дизайн кнопок CSS: методы и ресурсы
• Краткое руководство по созданию лучших кнопок
• Элементы вирусного запуска Страница

Передовой опыт создания эффективных кнопок призыва к действию

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

Еще после прыжка! Продолжить чтение ниже ↓

Привлечь внимание пользователя размером

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

Размер кнопки призыва к действию по сравнению с окружающими элементами

Lifetree Creative демонстрирует эту идею размера, чтобы показать важность своей кнопки призыва к действию. Сравните размер их кнопки с логотипом компании. Чтобы привлечь внимание пользователя, кнопка призыва к действию имеет размер примерно 9.0009 На 20% больше (по ширине), чем логотип. Несмотря на то, что логотип расположен выше на веб-странице, ваше внимание привлекает кнопка призыва к действию из-за ее большего размера по сравнению с окружающими элементами.

Размер кнопки призыва к действию по сравнению с менее важным призывом к действию

Веб-страница может содержать несколько призывов к действию. Чтобы указать относительную важность призыва к действию по отношению к другим действиям, вы можете варьировать их размеры. Вот пример этой концепции на paramore|redd Веб-сайт, на котором кнопка призыва к действию, предлагающая пользователю подписаться на их информационный бюллетень, значительно больше, чем призыв к действию «Продолжить чтение». чтение сообщений в блоге.

Привлеките внимание пользователей за счет заметного расположения

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

Размещение в выделенной области

Размещение кнопки призыва к действию в выделенной области — один из способов выделить ее в веб-макете. Вы можете увидеть эту идею в действии на веб-сайте dailymile , где кнопка призыва к действию выглядит на более высоком уровне (поверх) других элементов сайта, таких как гистограмма.

Размещение в верхней части веб-страницы

Чтобы проиллюстрировать эту концепцию, взгляните на «Разместить вакансию!» кнопка призыва к действию, расположенная в самом верхнем правом углу Ваш веб-сайт Job . Разместив призыв к действию на самом видном месте, пользователь с большей вероятностью заметит его или запомнит позже, после того, как просмотрит содержимое сайта. Например, если автор объявления о вакансии хотел изучить сайт, прежде чем опубликовать вакансию, кнопка «Разместить вакансию!» призыв к действию будет для них готов независимо от того, какая страница приведет их к конверсии, и они с большей вероятностью запомнят, где они могут легко выполнить это действие, благодаря его заметному размещению.

Размещение в центре макета

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

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

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

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

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

Варьируйте количество пробелов для обозначения логической связи

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

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

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

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

Цветовой контраст по сравнению с окружающими элементами

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

Контраст цветов фона/переднего плана

Церковь Valley Creek устанавливает ярко-желтую кнопку призыва к действию «Подробнее» над изображением в градациях серого. Даже с простым дизайном кнопки призыва к действию поверх сложного элемента (в данном случае фото), он все равно выделяется из-за выбора цвета.

Предлагать вторичные альтернативные действия

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

Отображение дополнительных действий рядом с основным действием

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

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

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

Отображение дополнительных действий под основным действием

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

Передать ощущение безотлагательности

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

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

Часто предложения выполнить действие могут быть эффективными для создания ощущения срочности. Использование таких слов, как «сейчас», «немедленно» и «прямо сейчас», может передать такую ​​срочность. Возьмем пример Organizing for America (BarackObama.com), обращающийся к посетителям веб-сайта с призывом «ПОМОГИТЕ СЕЙЧАС». Если бы вместо этого было просто написано «Пожертвовать», чувство срочности исчезло бы, и пользователи с меньшей вероятностью предпримут какие-либо действия.

Сообщите пользователям, что действовать легко

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

Например, на Basecamp кнопка призыва к действию явно определяет время, необходимое пользователю для регистрации, и сообщает пользователям, что регистрация бесплатна. Этот подход ослабляет две основные проблемы пользователей, когда дело доходит до действий в Интернете: оплата (что также требует от них дополнительных действий, таких как получение кредитной карты) и временные ограничения.

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

Сообщите пользователям, чего ожидать

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

Mozilla Firefox сообщает пользователям, чего именно ожидать, нажимая кнопку призыва к действию. Кнопка призыва к действию сообщает вам, что вы получите Firefox 3.5, что он бесплатный и (для тех, кому нужна более подробная информация) что точная версия 3.5.3 для операционной системы Windows , что язык English , и вы должны ожидать загрузки 7,7 МБ .

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

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

Монитор кампании Этот набор кнопок призыва к действию представляет два возможных действия пользователя: «Попробовать бесплатно» и «Просмотреть функции». Пользователи, которые уже знают о Campaign Monitor и хотят попробовать его прямо сейчас, могут выполнить основное желаемое действие, в то время как другие, которые хотели бы изучить его, прежде чем тратить время, могут выполнить второстепенное действие, просмотрев функции веб-приложения.

Штаб-квартира общего доступа к файлам Эта кнопка призыва к действию сообщает пользователям, чего ожидать («начните делиться файлами через несколько минут»).

Livestream.com Этот набор кнопок призыва к действию использует вертикальную группировку, чтобы указать желаемый порядок важности действий, представляемых пользователю. Желаемое основное действие — получить оценку, затем получить подробную информацию об услуге и, наконец, сравнить и сопоставить различные планы.

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

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

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

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

Мобильный веб-дизайн Эта кнопка призыва к действию размещена на видном месте; он имеет большой размер и характерный цвет по отношению к окружающим элементам. Чтобы обеспечить дополнительный контекст того, что означает «Купить книгу», за кнопкой призыва к действию следует текст, объясняющий стоимость и доступный формат (традиционная книга или PDF).

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

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

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

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

Экклесия 360 Этот набор кнопок призыва к действию демонстрирует использование значков для обозначения ощущения движения вперед (обозначено стрелками, указывающими вправо). Они используют высококонтрастный цвет на темно-синем фоне, чтобы сделать призыв к действию заметным в дизайне страницы.

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

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

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

ГудБарри В этом призыве к действию вы можете увидеть, как пробелы, размер и продуманные цветовые решения эффективны для того, чтобы сделать призыв к действию очень заметным. Подчеркивание того, что действие будет «БЕСПЛАТНЫМ», сообщает пользователям, чего ожидать.

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

О! СМИ Эта кнопка призыва к действию действительно выделяется на странице из-за своего положения, пробелов вокруг нее и, что наиболее важно, выбора цвета. Глядя на страницу, взгляд сразу же притягивается к призыву к действию.

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

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

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

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

Калькулятор Этот призыв к действию говорит пользователям, чего именно ожидать: нажав на этот призыв к действию, они должны рассчитывать на 3,99 доллара. Использование слова «только» намекает на то, что это довольно выгодная сделка, которая может помочь совершить продажу.

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

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

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

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

Дополнительные ресурсы по кнопкам призыва к действию

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