30+ примеров и идей оформления кнопок целевого действия
Не всегда кнопке с призывом к действию уделяется достаточное внимание. К примеру, дизайнер может смотреть на нее с позиции эстетики и соответствия оформлению. Но кнопка call-to-action слишком значима, чтобы не рассматривать влияние разных деталей на конверсию. Важно представлять какие цвета / формы / размеры / стиль обеспечивают нормальный CTR кнопки.
Далее о типах CTA, удачных призывах, идеях оформления с нестандартными подходами к дизайну кнопок.
Прежде чем разбирать все Call to Actions
Пара примеров продающих сайтов, интересно и красиво оформивших свое уникальное предложение. Призывы к целевому действию подразумевают последующие шаги и хороший дизайн помогает их совершать. Основатель Apple Стив Джобс:
Кнопка на экране должна выглядеть так, чтобы ее хотелось лизнуть
Молодая быстрорастущая CPA-сеть с русскоязычной поддержкой
Лаконичный сайт c приятным флэт оформлением – выглядит достойно и удобен для клиентов. Правильно подобранные UI контрасты позволили добавить дизайну мягкости.
Пример Call to Actions на сайте британского агентства c эффектным дизайном
При цветовом и шрифтовом контрасте, кнопки CTA захватывают внимание где бы не встречались:
- В первом развороте – на фоне высветленного фото с цветокоррекцией
- В блоках с различными бэкграундами
- В последнем экране, где контраст усиливает отрицательное пространство
Виды и назначение CTA-кнопок
Призыв может быть:
- Обобщенным — «Подробнее», «Скачать». Более индивидуальным и даже с добавлением микротекста
- Желаемого / альтернативного целевого действия и второстепенным. Уже стало практикой размещать в первом экране парные кнопки с призывами вида LERN MORE / BUY NOW
При стандартной формулировке, какую ценность в призыве увидит потребитель? Просто общепринятую фразу. SEO-эффект не должен служить оправданием – его улучшают связанными ключевыми словами лид-текстов / подзаголовков.
Испытывая недоверие к новому, потребители стремятся обезопасить себя и амбициозные призывы «Купи или умри» не пройдут. Лучше повлиять на глубинные эмоции и убедить выполнить конкретное действие.
1. Кнопки вида «Sign Up»
Есть два типа кнопок призывающих зарегистрироваться:
- Перейти к форме регистрации и создать аккаунт
- Перейти к корзине для последующей оплаты
Сайт старейшей американской компании бизнес-консалтинговых услуг
Стильная индивидуальность в оформлении шапки и футера с шероховатыми текстурами. Кнопка желаемого действия доминирует над остальными СТА-элементами
2. Кнопки «Добавить в корзину»
E-commerce ресурсы создают для того, чтобы их просмотр завершало целевое действие в карточке товара. Кнопка вида «Добавить в корзину» становится кульминационным моментом конверсии посетителя в покупателя.
Пример одностраничного лендинга продающего моно-товар — терморучку 3D
Полупрозрачные кнопки на фоне видео продающего терморучку 3D: PLAY – второстепенное действие открывает видеопрезентацию в pop-up окне и не уводит с главного экрана, ORDER – заказ в два клика
3. Кнопки вида «Download»
Побуждая к обладанию, кнопка «Скачать» во многом напоминает предыдущий тип
Модальное окно с призывом «Подписаться» проинформирует о загрузке софта, поблагодарит или уведомит о несовместимостях
4. Кнопки вида «Смотреть», «Узнать больше» и пр. варианты
Этой кнопкой завершают инфо-блоки с тизерными описаниями УТП, обозначают переход к ПОРТФОЛИО, КЕЙСАМ. Обычно их дизайн прост, а размер – достаточный для привлечения внимания. Явного призыва не несут, но продвигают пользователя вперед к цели. Применять рекомендуют с ключевыми словами в окружающем контенте (тематичными сайту, переходу).
Cайт digital-агентства с призрачными кнопками, тонкими эффектами, продуманным UI.
Показать клиентам прежде всего то, зачем они пришли это рациональный подход
Продающий сайт школы бизнеса с разнообразием CTA и стильным флэт-оформлением.
Платные и бесплатные предложения сопровождаются многообразием призывов к действию: от «Перейти к заказу», до «Нажмите чтобы посмотреть»
Оформительские идеи
Специфика сайта для бизнеса – в его тематической обособленности, нацеленности на клиента. Дизайн может создавать или уничтожать доверие. Нацеленность на лучшее, стоит заменить подходом «не сделать плохо» и обеспечить заметность, сократить путь к цели, не оттолкнуть посетителя, не отвлечь от действия и т.д.
1. Контрастные формы и цвета
Контраст создают: цвета, формы, пропорции, негативное пространство
Важно:
- Правильно подобрать акценты для преобладающего цвета
- Выдержать общий стиль
- При крупных размерах не использовать ярко выраженного отличия цветов
- Красивые формы и hover-эффекты увязать с пользовательским опытом (UX)
Нет цветов вызывающих продажи или конверсию. Сам цвет кнопки ничего не решает, а солидных результатов добиваются не психологическим трюком. Зрительное впечатление складывается из всей визуальной структуры и лишь дополняет общее восприятие ресурса.
О форме:
- Слегка закругленные кнопки эффективны – воспринимаются уже не напоминая баннеры
- Как правило, округлые формы меньше сливаются с общим планом
- Вытянутая CTA-кнопка больше вмещает, цепляет взгляд и легко захватывается курсором
- Контурной кнопке можно придать и меньшую и большую заметность
У бренд агентства из Санта-Моники приятный сайт с продуманным UI
Мягкие тона, контрастная типографика и впечатляющий скролл-эффект тонирования с высветлением /затемнением первого экрана. Анимированная стрелка и затемняющая заливка повышают заметность CTA
Чикагское маркетинговое агентство разрабатывает сервисы под B2B/B2C и сайты для бизнеса
Освежающие лаймовый и ярко-оранжевый противоположны на цветовом круге. Сочетаясь с оттенками серого, эти цвета создают комплементарную гармонию, а плоская тень и эффект осветления кнопки добавляют особую эстетику
Запущенный в 2012 году стартап доставки еды, набрал популярность и оценивается в $3 млрд, растет по 130% в год, в перспективе рынки Азии и Европы.
Сайт американского сервиса доставки еды (продуктовых наборов)
Триадная цветовая гармония с акцентным оранжевым и доминирующем синем. Третий оттенок задается зеленью продуктовых фото. Простота и выразительность продающего дизайна способствовала запоминанию образа сервиса
Сайт австралийского агентства с красивыми эффектами, округлыми формами и линиями
Сайт запоминается креативно и выразительно оформленным оффером с розовыми CTA элементами
Flywheel – вордпресс хостинг для дизайнеров и агентств
Яркий плоский дизайн, блоки-растяжки служат фоном для более светлых / темных кнопок того же цвета, обеспечивая заметность CTA-призывов без лишней пестроты
Сайт медиасообщества c услугами медийщикам, журналистам и маркетологам ищущим журналистов
Умеренный контраст бирюзово-голубого к белому позволил укрупнить второстепенные кнопки. Основной CTA визуально выделяется контуром призрачной кнопки
2. Эффекты и графика (иконки, микроитерации)
Иконки помогают понять смысл перехода или действия, систематизируют множественные призывы. Интересные стилевые эффекты и графика – отличный способ привлечь внимание, создать эмоциональный настрой и улучшить опыт пользования.
Wistia – платформа видеохостинга с прочими решениями для малого и крупного бизнеса
На объемном сайте много CTA-призывов. Флэт дизайн позволил визуально разнообразить кнопки и добавить стилевой эффект появления плоской тени
Пример кнопок с иконками, улучшающих UX на сайте рекламной студии
Появляющиеся по наведению мыши иконки: повышают интуитивную понятность целевых действий не перетягивая на себя внимания
Размещение в соответствии с ходом мысли посетителя
Выше линии сгиба высока вероятность пользовательского взаимодействия с элементами CTA. Чтобы конверсионная кнопка притягивала взгляд ей придают больший визуальный вес, оформляя альтернативное действие ссылкой, контурной или менее контрастной кнопкой. Но если призывов к действию в первом экране будет слишком много, еще не успевший оценить полезность предложения посетитель подсознательно настроится на волну «избирательного внимания».
Внимание аудитории скорее поможет завоевать емкое предложение, когда информация подается «по кусочкам» и с тематической графикой. С точки зрения дизайна и юзабилити, многое решает единообразие страниц, их хорошая визуальная организация с учетом Z-схемы просмотра. Эти принципы используют Landing Pages.
1. Триггеры создающие доверие
Призывы к совершению действия хорошо работают с триггерами доверия. О главном в тезисах:
- Доверие продает – на практике эта формула опирается на эмоции
- Кнопка желаемого действия – это однозначный, ясный и побуждающий посыл. Чем меньше эмоциональная привязка, тем скорее кнопка несет лишь функциональное значение
- Лаконичность заголовка о вашем бизнесе влияет на целевое действие. Упоминая бренд, сообщите главное преимущество – как в слогане: «Ralf Ringer – когда нигде не жмет»
- Охват нескольких целевых запросов потребует усиления мотивации к действию. Например, правдиво обещающей «зацепкой» в лид-абзаце
- Социальные подтверждения усиливают доверительный посыл на сайте с коммерческим предложением
Совмещение с доводами доступным языком. Пример сайта агентства, специализирующегося на маркетинге и консалтинге.
Доверительное отношение выстраивается многократным обращением к аудитории. Доступным языком объясняется: что в результате получите, сможете, будете знать. Целевое действие с призывом УЗНАТЬ РЕШЕНИЕ завершает важные страницы
Совмещение с социальными доказательствами. Callibri – российский сайт коллтрекинг-услуг и сервисов работы с клиентским потоком.
Соц. доказательства на главной странице и завершающий призыв «Тоже хочу попробовать»
Совмещение с тематической графикой. Сайт канадского медсервиса онлайн-консультаций. Иллюстрированным дизайном намного проще передать ощущение заботы о здоровье и внимания к клиенту.
Уникальное предложение предельно ясно расписано по шагам. Анимированная иллюстрация неоспоримого преимущества с заголовком огромными буквами: «Без очередей в поликлинике»
2. Эмоциональный посыл
Взгляните на ресурс профессионалов айтрекинга, улучшающих UX и конверсию сайтов, тестирующих лендинги.
Обширный сайт с продуманной структурой легок в пользовании
Привлекательный первый экран с Hero изображением и сочными цветами UI-интерфейса создают оптимистичный настрой
Сайт с карточным дизайном продвигает горнолыжные курорты штата Юта
Тизер перед CTA-кнопкой должен затронуть воображение, разбудить интерес. Необходимое для конверсионного элемента свободное пространство «вырезано» из карточки
Преимущества мощного призыва
В чем же сила? Для заинтересованного посетителя элемент сall-to-аction оказывается первым звеном на пути к цели – поворотный момент, продолжить или воздержаться? Предложений много и в муках выбора требуется дополнительный стимул.
Удачно сформулированные предложение & призыв не оставят сомнений и в этом главное преимущество. Вялые, недостаточно проработанные и неудачно заимствованные CTA вряд-ли побудят действовать. Правило без исключений:
Чтобы CTR (показатель кликабельности) вас радовал, призыв к действию должен сохранять целевого пользователя в зоне комфорта
1. Слово как триггер
Подходящая фраза в CTA-тексте кнопки служит эмоциональным якорем – акцентирует внимание, уменьшает раздумья и сомнения.
Персональный лендинг: эмоциональный призыв хорош при коротком цикле принятия решения
Положительное «ДА» в призыве, уже настраивает на позитивную волну. Ограниченная по времени акция «сегодня скидка…» – еще триггер. Использована триадная цветовая гармония. У основного CTA тройной контраст: текста, фона кнопки, подложки, узорчатого бэкграунда
2. Заветное «Бесплатно»
Пользователей Сети бесплатное интересует больше, чем премиум и профешнл. Всем знакомы фразы в призывах: «…Free 14-Day Trial», «…попробуйте бесплатно», «Начните сегодня…со скидкой». Раздающих что-то бесплатно чаще замечают, лучше запоминают, а поисковые системы ранжируют выше. С заветным словом обычно предлагают услугу на ограниченное время, пробное тестирование или бесплатный тариф.
MVP-проект Citrix с лендинговым оформлением
Поля формы и CTA-призыв на полупрозрачной подложке окружены направленными взглядами. Текст под кнопкой подогревает интерес к предложению: пробуйте без «кредитки», скидка… Визуальная иерархия сделала оффер заметным
Сайт сервиса СМС рассылок с блогом о email маркетинге
Главная страница отличается от остальных и оформлена под название сайта. Для целевых кнопок применяется смелый контраст и градиентная заливка. Срочность задают фразы «Попробуйте сейчас», «Начните…»
3. Выразительные глаголы действия. Олицетворение возможностей
Глаголы с побудительным значением или повелительного наклонения (императив 2-го лица) ориентируют на поступок. Намек для каждого – необходимо действовать! Образность лаконичной метафоры затрагивает эмоции посетителя: mclean-dentist.com – «сделайте улыбку светлей».
Неотразимые призывы четко выражают какую-то возможность – не отреагируешь, значит не воспользуешься случаем получить… упускаешь выгоду. Например, вместо «Подробнее» и «Купить», новатор продаж zendesk.com.ru демонстрирует индивидуальность, специфику и свое ХОРОШЕЕ ОТНОШЕНИЕ, что тоже плюс.
Сайт топового интернет-агентства рунета с сильным визуальным контрастом кнопок CTA
Комплиментарные и минимальные контрасты (из родственных цветов) выделяют CTA, не создавая напряженности. Призыв НАЧАТЬ СОТРУДНИЧЕСТВО выражает возможности, а привлекательная функциональная форма заявки усиливает посыл
Cервис удаленного доступа к экрану для видео-конференций и правок
Организуя совместную работу, Join.me экономит время. В том же духе простой и ясный процесс конверсии: ярко, компактно и убедительно. Короткое доменное имя позволяет включать его в CTA
Индивидуальность, самовыражение и нестандартные СТА
Целевая кнопка смотрится выигрышней на страницах со стилевым разнообразием. Но нередко повышение рентабельности продаж выливается в сокращение расходов. Основательное улучшение сайта заменяют тактики, ставшие маркетинговым клише – уже не работают и только раздражают. Такой подход не лучше, чем стандартные кнопочки с вялыми призывами к действию. Еще в VI веке до н.э. стратег Сунь-Цзы говорил:
Тактика без стратегии — это просто суета перед поражением
Трамвай-желаний.рф — проект-победитель «Рейтинга Рунета»
Загадочный вид сайту придают контент, подгружаемый горизонтальной и вертикальной прокруткой. Flip-переворот заменяет номер телефона на призыв «Заказать звонок». Очень необычно оформлен завершающий призыв к действию
Сайт технологической компании запоминается индивидуальностью и коротким доменом зоне .technology
Нестандартная разметка с уникальным согласованием элементов. Добавляют изящества тонкие эффекты и переходы. Кнопки с призывом обращаются в «призрачные» по наведению
Дизайн сайта пивоваренной компании «Mother’s» с винтажным посылом
Сайт запоминается брендинговой картинкой и оригинальными призывами. Анимированные ленты притягивая взлгяд, создают эмоциональный настрой на качество
Fresh Consulting — яркий современный сайт агенства дизайна и разработки
В соответствии с доменным названием, UI-интерфейс сайта освежающее оранжево-зеленый. Оригинальные анимации с микроитерациями дополняют визуальную айдентику
Сайт процессинговой компании обслуживающей сети банкоматов
СТА-кнопки закругленные и даже КРУГЛЫЕ – в контурном UI с округлыми геометрическими формами воспринимается гармонично
Функциональный Flat-сайт продает систему управления финансами семейного бюджета
Продающее видео не просто продвигает продукт, а генерирует лиды – когда под ним мотивирующий слоган и CTA-призыв с кратким именем YNAB (аббревиатура от доменного названия You_Need_A_Budget)
Как начать применять лучшие практики
Вдохновляйтесь идеями, экспериментируйте и анализируйте ключевые выгоды от применяемых методик. Задайтесь вопросом: «Как получить больший эффект от применения кнопок с призывами к действию (разных видов) на страницах моего сайта?» Влияют не только визуальные факторы и удачно разработанный призыв и одной лишь оптимизацией работы CTA-элемента не совершить магию. Однако повысить коэффициент конверсии кнопки вполне осуществимо, что станет поворотным моментом к увеличению продаж и эффективности сайта.
Здравствуйте.Как сделать дизайн на разные кнопки?Я поставил дизайн примера 3 и теперь он отражается на всех ссылочных кнопках.
Здравствуйте Уважаемый Администратор Сайта seo-design.net.
Предлагаем Вам эффективный способ повышения посещаемости и
продвижения скайта в поисковых системах
подробности на сайте
http://11222.ru/konkurent.htm#seo-design.net
Желаем Вам удачи в продвижениии
Спасибо за статью! Я вот тут https://iksweb.ru/tools/cnopka/ потом себе кнопку для сайта сделал по вашим рекомендациям.
the time to read or check out the content or internet sites we have linked to below the