Как сделать кнопку для сайта, которая продаёт
Тезисы, которые обсудим:
Цифровые продукты конкурируют за ограниченное внимание пользователей. Современная экономика все больше вращается вокруг концентрации внимания человека и даже малейшие элементы могут иметь значение. Вот почему кнопки призыва к действию играют фундаментальную роль в любом интерфейсе.
CTA – это действие, которое вы хотите, чтобы посетители вашего сайта сделали.
Зачастую кнопки теряются на фоне страницы, их не видно, на них не расставлены акценты и пользователю уже сложнее выполнить свое действие. Чем больше кнопка похожа на то, что мы ассоциируем с кнопками – тем лучше. Вот почему прямоугольник всегда самый надежный вариант для кнопки. Другие фигуры и формы (треугольник, круг, органика) не так узнаваемы для пользователя. Действуйте с осторожностью и используйте их только тогда, когда общий стиль вашего продукта требует отклонения от норм.
Кнопка должна выглядеть как кнопка
При проектировании кнопок помните о каждом из этих элементов и подходите к ним с умом. Опираясь на руководство по стилю бренда, подумайте, какие кнопки будут соответствовать бренду и хорошо впишутся в интерфейс, а также, какие кнопки привлекут внимание пользователей.
Давайте разберем основные факторы, которые влияют на восприятие кнопок:
Один из важных аспектов создания кнопки призыва действия – это тон сообщения. Глаголы действия представляют простой, ориентированный на действие подход, побуждающий пользователя предпринять конкретное действие, потому что они отвечают на основной вопрос: «Почему я должен нажать эту кнопку?».
Наиболее успешные компании используют такие фразы, как «Попробуйте бесплатно», «Узнайте больше», «Получите ранний доступ», «Начните работу» и многие другие, а также увеличивают количество конверсий, добавив ценность тексту призыва к действию.
Неравномерно расположенные кнопки являются одной из самых распространенных проблем всех интерфейсов. Вы должны установить отступы и безопасное пространство, используя базовые значения вашей сетки. В приведенном выше примере внутренний отступ слева в два раза больше, чем вертикальный. Это хороший выбор для повышения читабельности.
Как сделать кнопку в html css? Красивые кнопки для сайта с примерами
Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались 😉
Итак из этой статьи вы узнаете:
Также в конце статьи вас ждет небольшой бонус, который пригодится каждому сайтостроителю.
Но давайте по порядку.
Для чего нужны кнопки на сайте?
Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.
Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.
Какие бывают кнопки?
В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:
Но зачем это нужно. Все гораздо проще и понятнее.
Как сделать кнопку в HTML?
Тег используется для создания кнопок, при нажатии на которые должны происходить какие-либо действия, например отправка формы, очистка формы, открытие модального окна, загрузка изображения и т.д.
Основными атрибутами таких кнопок являются:
type: button | submit | reset
Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов
Как интернет-магазину правильно подготовить посадочную страницу для специальной акции
Александр Рунов, руководитель SEO отдела маркетингового агентства Биплан.
Можно долго рассказывать о преимуществах своего товара и качестве клиентского сервиса, но, как показывает практика, нет ничего лучше скидок и акций для повышения продаж.
Рекламное объявление привлечет внимание потенциального клиента, который ожидает увидеть на сайте выгодное предложение, подталкивающее его к покупке прямо здесь и сейчас. Что должно быть на посадочной странице со спецпредложениями и как с помощью правильных действий увеличить конверсию из посещений в заказы?
Пользователи выбирают скидки и акции – это факт!
По данным Яндекса Маркета, доля онлайн покупок с 2015 года выросла в два раза и продолжает расти каждый год. Покупатели чаще выбирают интернет-магазины для приобретения интересующих товаров – около 40% россиян, делающих покупки, заказывают товары в онлайне. Этот показатель будет только увеличиваться с учетом развития технологий.
Большинство пользователей выбирают онлайн, потому что могут сравнить стоимость товаров и найти выгодное предложение. При этом в прошлом году, по данным Яндекс Маркета, основной мотивацией была низкая стоимость по сравнению с покупкой в обычном магазине.
Результаты исследования показывают, что 61% пользователей участвуют в программах лояльности интернет-магазинов. За последний год больше 50% потребителей пользовались скидками, сервисами купонов и cashback сервисами.
Популярность скидок остается на прошлогоднем уровне, поэтому периодические акции должны стать обязательной частью программы интернет-магазина, если предприниматель хочет увеличить количество продаж.
Можно придумать разные способы привлечения внимания целевой аудитории, но нет ничего лучше скидки или бесплатной доставки. Эти слова магическим образом действуют на среднестатического потребителя, который при всех равных выберет тот интернет-магазин, где дешевле.
По данным Яндекс Маркета, реклама в интернете до сих пор остается самым популярным источником привлечения клиентов, поэтому многие интернет-магазины увеличивают рекламный бюджет в период проведения акции, чтобы больше пользователей узнали о скидках.
Скидки и акции используют практически все коммерческие сайты, которые хотят привлечь больше клиентов и обойти конкурентов благодаря лимитированному и выгодному предложению. Некоторые компании идут на хитрости во время централизованных акций – повышают цену, чтобы потом сделать скидку. Покупатель понимает, сравнив цены с конкурентами, что ему предлагают переплатить. В результате формируется негатив вокруг бренда.
В некоторых тематиках проведение акций зависит от сезона. Причем компании по-разному используют эти периоды. Например, в низкий сезон с помощью скидок можно компенсировать уменьшение количества клиентов, а в высокий – продать товаров на месяц вперед. Только нужно помнить, что в период праздников и знаковых событий резко возрастает конкуренция, поэтому предлагать скидки будут многие компании.
Акции могут быть приурочены к разным событиям, например: Новый год, 23 февраля, 8 марта, «Черная пятница», «Киберпонедельник». Или быть персонализированными: ко дню рождения постоянных клиентов, при заказе от определённой суммы, при покупке конкретных товаров. Для удержания и возврата посетителя можно использовать акции в виде промокодов, скидок на товары в корзине или просмотренные ранее товары.
В каких категориях интернет-магазинов чаще всего проводятся акции:
Пользователи с каждым годом становятся более разборчивыми. Потенциальный клиент не будет долго искать понравившиеся товары на сайте, а просто уйдет к конкурентам, у которых есть структурированная и проработанная посадочная страница.
Не стоит вести рекламу с акцией на главную страницу сайта, потому что пользователь, переходя из поиска – органика или реклама, хочет увидеть товары, которые ожидал. Попадание на главную страницу сайта не даёт нужной информации об:
Что лучше – посадочная страница или лендинг?
Зависит от цели и бюджета. Если у компании сильный бренд, то уместно использовать как посадочную страницу, переход на которую возможен, например, с баннера на главной странице сайта, так и отдельный лендинг. У каждого из этих способов есть свои плюсы и минусы.
Распродажа от S7 Airlines в январе 2020 года
При переходе на сайт пользователь видит не только выгодные условия акции, но и счетчик, который подталкивает его к покупке.
Новогодняя акция от Эльдорадо на отдельном поддомене
Какую информацию размещать на посадочной странице?
От наполнения посадочной страницы зависит, как долго пользователь пробудет на вашем сайте и совершит ли на нём целевое действие. Не стоит засорять страницу большими объемами текста, которые никто не будет читать, потому что покупатель переходит на страницу с акцией для покупки товара. Используйте ссылки с короткими анонсами, если хотите рассказать о какой-то новости или поделиться экспертным мнением.
Пользователь должен получить полную информацию об акции, а не обнаружить после добавления товара в корзину, что скидка действует на покупки от 10 000 рублей или доставка производится только по Москве.
Что должно быть на посадочной странице под акцию:
Какие нестандартные решения можно использовать на посадочной странице:
Для оценки эффективности специальной акции интернет-магазины ориентируются на входящий трафик, клики по кнопке, переходы в корзину и покупки. В большинстве случаев KPI зависят от целей и технических особенностей сайта, например, для лендингов в приоритете клики по кнопке.
Что нужно сделать при подготовке посадочной страницы под специальную акцию:
Изображения должны быть качественными – при возможности используйте уникальные фотографии, которые оценят как пользователи, так и поисковые системы. Размещайте инфографику, иллюстрирующую процесс оформления или этапы доставки товара. Если позволяет бюджет, то лучше привлечь профессионального фотографа и дизайнера.
Тексты должны быть структурированными и отвечать запросам целевой аудитории. Не копируйте материалы с других сайтов, потому что поисковые системы анализируют уникальность и качество контента. Пользователи хотят быстро получать информацию о товаре или оказываемом сервисе, а не блуждать по сайту в поисках ответа на вопрос: «Сколько месяцев гарантии дают на этот чайник?». Пишите кратко и по сути, разбавляйте контент таблицами, изображениями, видео.
Александр Рунов,
руководитель SEO отдела маркетингового агентства Биплан
для New Retail
