Сделать онлайн кнопки для сайта: Как создать кнопку сайта? — База знаний uCoz

Виджет Кнопка — добавьте кнопки на свой сайт! (2023 год)

Добавьте привлекательные кнопки на свой сайт с помощью

Попробовать демо

Изучите все возможности

Почему мне стоит выбрать Elfsight?

Подтолкните свою аудиторию к действию

Увеличьте количество продаж на вашем сайте

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

Подтолкните аудиторию к целевому действию

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

Увеличьте количество подписчиков

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

0%

вебсайтов поддерживается

0+

часов вложено в разработку

1 минута

чтобы начать использование

0%

счастливых клиентов

Станьте одним из 1,078,753 клиентов Elfsight Apps

Создайте свой первый виджет Elfsight Кнопка бесплатно.

Создать виджет

В чем уникальность Elfsight Кнопка?

ДЕЙСТВИЯ

Все и даже больше для создания вашей кнопки

С новым виджетом Button достичь своих целей стало просто как никогда. И для этого мы разработали различные варианты действий, которые могут быть выполнены после того, как пользователь нажмет вашу кнопку. Так, вы можете перенаправить пользователей на другой сайт или страницу. Если вам нужна кнопка “Позвонить”, добавьте к ней номер телефона или имя пользователя Skype, и вызов начнется сразу после нажатия кнопки. Также есть возможность отправить пользователей на ваши аккаунты в Facebook, Instagram, Pinterest, TikTok или Twitter. При нажатии на кнопку также может открыться чат в WhatsApp, Telegram или Skype. Кроме того, вы можете получать сообщения на email, добавив свой адрес к кнопке.   

ЭЛЕМЕНТЫ КНОПКИ

Направляйте посетителей к действию

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

РАСКЛАДКА

Кнопка, которую нельзя пропустить

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

СТИЛИ

Выберите готовую цветовую схему или создайте собственное решение

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

Примеры использования

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

Посмотреть в действии

Активное демо

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

Попробовать сейчас

Чем виджеты Elfsight отличаются от других?

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

Легко управляемый онлайн-редактор

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

Опытная команда Elfsight

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

Впечатляющий сервис приложений Elfsight

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

Что говорят наши клиенты ❤️

I really like this app. I will go on using it and I will have it also on my new websites. Installation is a breeze and the support team will do everything and even more to help you.

Cool Button App – Simple to design and stuffed full of very useful design and admin features. The customer service team is great and when I have questions or issues they are always here.

Excellent app. I’ve got it just the way I want it on my site. Customer service team was competent and quick.

Brilliant customer service! We needed some personalization and they fully helped us with it. And it looks nice on our site! Highly recommended!

Amazing work guys! Uncomplicated features, clean design and no issue with loading speed or SEO. Thanks for that.

I am a web designer and this great Button widget is a part of most of my website projects. I am amazed by the help, added features and various design customization.

Часто задаваемые вопросы

Что такое виджет «Кнопка»?

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

Как получить установочный код виджета?

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

Как я могу встроить Button на любой сайт?

Чтобы добавить плагин, см. шаги из краткого руководства ниже:

1. Воспользуйтесь нашим конфигуратором и начните формировать свой собственный плагин.
2. Настройте функции приложения и сохраните важные улучшения.
3. Скопируйте код, показанный во всплывающем окне.
4. Вставьте код виджета на свою страницу и нажмите кнопку «Сохранить».
5. Готово! Вы успешно встроили плагин Elfsight на свою страницу.

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

Сочетается ли ваш виджет с моим конструктором сайтов или CMS?

Да. Приложения Elfsight совместимы с 99% популярных конструкторов сайтов. Проверьте список ниже: Adobe Muse, BigCommerce, Blogger, Drupal, Facebook Page, Elementor, Joomla, jQuery, Jumpseller, iFrame, Magento, HTML, ModX, OpenCart, Shopify, Squarespace, Webflow, Webnode, Weebly, Wix, WordPress, WooCommerce, Google Sites

Я могу изменить цвета виджета?

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

Станьте одним из 1,078,753 клиентов Elfsight Apps

Откройте для себя еще более 80 эффективных приложений от Elfsight! Банковская карта не требуется. Никаких рисков!

Начать

Получите скидку 20% прямо сейчас!

More Apps

Общайтесь с посетителями сайта нон-стоп

Создавайте всплывающие окна для сайта и повышайте продажи

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

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

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

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

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

Da Button Factory

dabuttonfactory.com

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

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

Cool Text

cooltext.com

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

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

Как создать собственную веб-кнопку | Малый бизнес

Автор Allen Bethea

Как ни сложно привлечь клиентов на веб-сайт вашей компании, еще сложнее заставить их щелкнуть вашу рекламу или другие ссылки на информацию о продуктах и ​​услугах. Веб-кнопки — это гиперссылки, содержащие графические изображения, призванные привлечь внимание посетителей к вашим ссылкам и побудить их нажать на них. Вы можете создать собственное изображение веб-кнопки с помощью инструмента редактирования изображений, такого как Windows Paint, и вставить его на веб-страницу с помощью тега языка HTML «».

1. Нажмите на шар Windows. Введите «Paint» в поле поиска и нажмите «Paint» в списке результатов.

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

3. При необходимости измените размер изображения с помощью инструмента «Изменить размер» программы Paint. Нажмите вкладку «Главная», затем значок изменения размера на панели «Изображение» и нажмите «Изменить размер в пикселях». Установите флажок «Сохранить соотношение сторон», если он не отмечен флажком. Введите новую ширину изображения в поле ввода «По горизонтали», если вам нужно, чтобы изображение было определенной ширины, или введите новую высоту изображения в поле «Вертикально». Paint автоматически поддерживает правильное пропорциональное соотношение между высотой и шириной изображения, чтобы оно не выглядело искаженным.

4. Нажмите кнопку Paint, затем «Сохранить как» и выберите «JPEG» в качестве формата файла.

5. Введите имя изображения в поле «Имя файла» и нажмите кнопку «Сохранить».

6. Нажмите на шар Windows и введите «Блокнот» в поле поиска. Нажмите «Блокнот» в списке результатов.

7. Щелкните меню «Файл» и пункт меню «Открыть». Используйте проводник, чтобы найти HTML-файл, в который вы хотите добавить веб-кнопку. Дважды щелкните имя файла, чтобы открыть его.

8. Прокрутите вниз до раздела веб-страницы, где вы хотите добавить веб-кнопку.

9. Вставьте тег HTML ««. Тег указывает браузеру загружать и отображать изображение, найденное по определенному веб-адресу или URL-адресу. При использовании с атрибутами «width» и «height» он также может указывать высоту, ширину и альтернативный текст изображения. Используйте тег «», чтобы превратить изображение в гиперссылку, которая ведет пользователя на веб-страницу, указанную с помощью URL-адреса, назначенного атрибуту «href».

   Например, следующий код веб-кнопки указывает браузеру пользователя загрузить и отобразить файл JPEG Buttonimage.jpg, который имеет ширину 800 пикселей и высоту 100 пикселей: . Если пользователь щелкнет это изображение, браузер загрузит веб-страницу по URL-адресу myweb. com. Если браузер не может отобразить JPEG, вместо этого он покажет текст «Нажмите для сделок».

10. Нажмите «Ctrl-S», чтобы сохранить вашу работу.

Ссылки

• W3Schools.com: HTML-ссылки
• Microsoft Windows: Использование Paint

Ресурсы

• Открыть библиотеку клипов
• CoolText: Grafitti Creator
• Da Button Factory
• Adam Kalsey: Button Maker

Советы

• Если в штате вашей компании нет художника-графика, воспользуйтесь онлайн-сервисом, таким как CoolText, Button Maker или Da Button Factory, чтобы создать для вас изображения веб-кнопок. Эти сайты помогут вам выбрать нужный тип кнопки; его размер, форма и цвет; плюс формат и внешний вид текста кнопки.

Предупреждения

• Избегайте использования изображений, найденных в Интернете, в качестве веб-кнопок, если у вас нет явного письменного разрешения от владельца авторских прав на изображение. Вы также можете избежать проблем с нарушением авторских прав, используя изображения из библиотеки Open Clip Art. Эти изображения распространяются по лицензии Creative Commons Public Domain Dedication, и вы можете использовать их любым удобным для вас способом.

Writer Bio

Аллен Бетеа пишет статьи по программированию, веб-дизайну, операционным системам и компьютерному оборудованию с 2002 года. Он имеет степень бакалавра наук UNC-Chapel Hill и степени AAS в области офисных технологий, машиностроения/чертежей и Интернета. технологии. Аллен имеет большой опыт работы с настольным и системным программным обеспечением для операционных систем Windows и Linux.

Это действительно актуально (и почему)? — Smashing Magazine

• 17 минут чтения
• Удобство использования, Шаблоны проектирования, Дизайн интерфейса, Веб-дизайн
• Поделиться в Twitter, LinkedIn

Об авторе

Сюзанна Скакка — независимый писатель, специализирующийся на веб-дизайне, WordPress и SEO. В свободное время она создает новые сайты, экспериментирует с популярными… Больше о Suzanne ↬

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

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

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

Как сделать кнопки лучше

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

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

Эта всплывающая подсказка Dropbox — отличный пример того, как обычная кнопка выглядит по сравнению с кнопкой-призраком:

Подсказка Dropbox с двумя призрачными кнопками (слева и справа) и сплошной кнопкой (посередине) в качестве вариантов выбора. (Изображение предоставлено Fresh Egg)

Синяя кнопка в центре — это стандартная плоская кнопка, к которой мы привыкли. Обведенные прозрачные кнопки слева и справа — это кнопки-призраки.

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

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

Больше после прыжка! Продолжить чтение можно ниже ↓

Что мы знаем о кнопке-призраке

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

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

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

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

Минусы кнопок-призраков

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

Простота

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

Elevated Third протестировала набор кнопок-призраков в сравнении со сплошными кнопками в своем информационном бюллетене по электронной почте. (Изображение предоставлено: Elevated Third)

Я думаю, что этот A/B-тест от Elevated Third является хорошим примером того, как кнопки-призраки могут не впечатлять, когда они используются в качестве основного дизайна кнопок — будь то на веб-сайте или в электронной почте.

Знакомство

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

Удобочитаемость

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

Прозрачность

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

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

Расположение

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

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

Кнопка-призрак Плюсы

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

Минимализм

Вы когда-нибудь задумывались, откуда взялся дизайн кнопки-призрака? Что ж, большинство людей связывают это с выпуском iOS 7 в конце 2013 года. С решением Apple перейти к более простому и плоскому пользовательскому интерфейсу дизайн кнопки-призрака, казалось бы, стал естественной эволюцией.

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

Использование кнопок-призраков во всем дизайне Bootstrap — прекрасный пример этой минималистской практики в действии:

Красочные, но простые кнопки-призраки на веб-сайте Bootstrap. (Изображение предоставлено Bootstrap)

Профессионализм

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

Все CTA на веб-сайтах Нила Пателя — это кнопки-призраки. (Изображение предоставлено Нилом Пателем)

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

Размер

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

Однако с призрачными кнопками размер не имеет большого значения. Например, посмотрите на этот пример Samsung:

Большая призрачная кнопка на мобильном сайте Samsung. (Изображение предоставлено: Samsung

Посмотрите, насколько он велик, не ставя под угрозу вашу способность сосредоточиться на сообщении над ним или забавной графике ниже? Теперь посмотрите, как его конкурент LG обрабатывает сплошной CTA на своем веб-сайте:

Маленькая сплошная кнопка на Мобильный веб-сайт LG (Изображение предоставлено LG)

Существует явная разница в размере, и это, вероятно, связано с тем, как кнопка спроектирована и заполнена. хотите, чтобы ваш CTA встал и закричал: «Посмотрите на меня!» Конечно, вы хотите, чтобы люди нажимали на кнопку, но, возможно, вы хотите, чтобы они проглотили содержимое вокруг нее, прежде чем сделать это9.0003

У Asana есть хороший пример этого на своем веб-сайте:

Изящный дизайн кнопки-призрака на веб-сайте Asana. (Изображение предоставлено Asana)

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

Анимация

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

Если вы еще не заметили, в журнале Smashing Magazine есть пара классных примеров таких анимированных призрачных кнопок.

Smashing Magazine использует анимацию для подтверждения действия призрачной кнопки. (Изображение предоставлено Smashing Magazine)

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

На веб-сайте автора Харуки Мураками есть хороший пример того, как анимировать призрачные кнопки.

Харуки Мураками использует анимацию для привлечения посетителей. (Изображение предоставлено Харуки Мураками)

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

Несколько CTA

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

Несколько CTA TurboTax (Изображение предоставлено Intuit TurboTax)

Видите, два CTA в самом верху сайта? Оранжевая кнопка явно предназначена для основного призыва к действию, а призрачная кнопка — второстепенная.

У Google Maps есть еще один хороший пример этого:

контрастные CTA Google Maps (Изображение предоставлено Google)

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

Apple также часто использует призрачные кнопки в дизайне своих приложений. Однако в данном случае они функционируют как тумблер:

Apple использует призрачные кнопки в качестве тумблера. (Изображение предоставлено Apple)

Когда страница или вкладка в данный момент не открыты, кнопка-призрак указывает на ее неактивное состояние.

Тесты кнопок-призраков: что говорят исследования

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

Тест 1: Дополнительные кнопки SEEK

UX-дизайнер и исследователь Кайла Дж. Хеффернан из SEEK решила проверить, так ли плохи кнопки-призраки, как считают некоторые дизайнеры. В первом A/B-тесте, который она провела, четыре варианта сравнивались друг с другом:

Исследование вторичных CTA, проведенное SEEK, показало, что кнопка-призрак эффективна. (Изображение предоставлено Кайлой Дж. Хеффернан на Medium)

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

Исключив розовые и серые кнопки как жизнеспособные варианты дизайна CTA, она приступила к второму A/B-тесту:

Исследование SEEK о невидимых и сплошных кнопках показывает, что призрачные кнопки работают в правильном контексте. (Изображение предоставлено Кайлой Дж. Хеффернан на Medium)

В конце теста Кайла и ее команда обнаружили, что и сплошная синяя, и призрачно-синяя кнопки дают одинаковый рейтинг кликов. Единственная разница заключалась в количестве конверсий, полученных каждой из них: сплошная синяя кнопка набрала 14%, а фантомная — 13,1%.

Заключение

Изучив результаты, Кайла решила не менять основной дизайн кнопки CTA с розовой, как у бренда, на синюю или призрачную кнопку. Это в основном потому, что тест проводился на второстепенной кнопке («Написать отзыв», а не что-то вроде «Купить сейчас»). Тем не менее, она считает, что кнопки-призраки помогут компенсировать переизбыток основных кнопок на странице, что в противном случае может привести к слишком большой конкуренции на одной странице и негативной реакции посетителей.

Тест 2: Кнопки целевой страницы TruConversion

На этой единственной целевой странице есть три кнопки CTA с разным стилем:

• большая зеленая кнопка «Запросить бесплатную копию»;
• маленькая плоская черная кнопка «Запросить бесплатную копию»;
• маленькая кнопка «Заглянуть внутрь» с черным контуром и красным текстом.

TruConversion проверяет эффективность трех дизайнов кнопок. (Изображение предоставлено TruConversion)

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

TruConversion использовала тепловые карты для подтверждения результатов. (Изображение предоставлено TruConversion)

Неудивительно, что большая зеленая кнопка получила наибольшее количество кликов — 38,68% от общего числа кликов на странице. Что больше всего удивило исследователей, так это то, что черная кнопка, которая находилась на липкой полосе и следовала за посетителями, где бы они ни прокручивали страницу, получила всего 5,22% кликов.

Кнопка-призрак, которая должна была быть только дополнительным призывом к действию, получила 7,9% кликов на рабочем столе — намного больше, чем ожидали исследователи. Однако важно отметить, что когда целевая страница просматривалась на мобильных устройствах, кнопка-призрак «Заглянуть внутрь» получила наименьшее количество кликов от пользователей.

Заключение

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

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

Тест 3: Призрак Fresh Egg против сплошных кнопок

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

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

Fresh Egg начиналась с собственного веб-сайта. Компания провела A/B-тестирование следующего:

Fresh Egg A/B-тестирование кнопок-призраков на своем веб-сайте. (Изображение предоставлено Fresh Egg)

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

Проверялась скорость нажатия, а также уровень внимания в правом верхнем углу этого веб-сайта:

Fresh Egg тестировал нажатия и внимание к призрачным кнопкам на веб-сайте клиента. (Изображение предоставлено Fresh Egg)

Fresh Egg проверил скорость кликов в подзаголовке этой страницы:

Fresh Egg проверил нажатие призрачной кнопки подзаголовка. (Изображение предоставлено: Fresh Egg)

И то же самое для CTA под заголовком этого:

Тестовое нажатие кнопки-призрака в заголовке Fresh Egg. (Изображение предоставлено свежим яйцом)

Неудивительно, что, как обнаружила Fresh Egg, кнопки-призраки работали плохо:

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

Заключение

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

Изучив статистику, Fresh Egg пришла к выводу, что контекст имеет значение. Кнопки-призраки, возможно, не прошли эти тесты, но это не значит, что они не будут хорошо работать в качестве вторичных CTA или в дизайне, который более совместим с простотой кнопок-призраков.

Вывод: используйте кнопки-призраки в правильном контексте

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

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

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

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

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