Эффективный дизайн сайта: CTA-кнопки

Автор /  Elena Rabkina

04 сентября 2018

Эффективный дизайн сайта: CTA-кнопки

Еще во время планирования будущего сайта нужно учитывать принципы оформления так называемых СТА кнопок. Дословно это «call to action». Несложно догадаться, что такая кнопка призывает к какому-то действию на сайте: заказать, купить, скачать и так далее. Дело в том, что некоторые дизайнеры не придают этому элементу должного внимания, а зря. Ведь это значительно повышает эффективность готового проекта.

 

marketing trends 2018

 

 

 

Для чего нужна кнопка СТА?

 

 

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

 

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

 

 

 

Какими бывают кнопки СТА?

 

 

В зависимости от типа кнопки «Call to action» выбирается и ее оформление. Ниже собраны самые распространенные виды, которые отвечают за определенное действие.

 

 

1. Скачивание

 

 

Кнопка «Скачать» предлагает пользователю воспользоваться определенным продуктом. Чтобы он решился на это действие, желательно предоставить некоторую дополнительную информацию. Например, размер файла и его версию. Нелишним будет и фотография или скриншот содержимого. В качестве примера можно привести шаблон Moneyapp, где пользователь уже знает, что ему предлагается, а кнопками служат иконки AppStore и Google Play.


marketing trends 2018

 

 

 

2. Добавление в корзину

 

 

Ни один интернет-магазин не обходится без этой кнопки. Как правило, она находится на каждой странице с товаром и призывает клиента либо «Купить», либо «Добавить в корзину». Шаблон Kashve оформлен очень лаконично, нет ничего лишнего и отвлекающего, а потому главная кнопка «Add to cart» сразу же бросается в глаза.

 

marketing trends 2018 

 

 

 

3. Узнать подробности

 

 

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

 

 marketing trends 2018

 

 

4.Связаться

 

 

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

 

marketing trends 2018

 

5. Подписка

 

 

Некоторые сайты предоставляют посетителю возможность подписаться на новости или  полезные советы от сервиса. Это хороший прием для прогрева аудитории и поддержания контакта с тем, кто в первый раз зашел на сайт и еще не знает, хочет ли воспользоваться вашими услугами. Хороший пример - шаблон Ambient Yoga. Важно, в зоне возле кнопки объяснить, что будет в подписке. Чем больше прозрачности - тем лучше.

 

marketing trends 2018

 

 

Принципы оформления СТА кнопок

 

 

 

1. Свободное пространство

 

 

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

 

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

 

- Расположите СТА кнопку так, чтобы вокруг нее было свободное пространство в достаточном количестве, а остальное наполнение сайта не было нагроможденным.

 

- Руководствуйтесь правилом золотого сечения или двух третей, чтобы расположение главного элемента, в нашем случае кнопки «Call to action», было гармоничным и сразу же бросалось в глаза.

 

- Убедитесь, что свободное пространство вокруг кнопки хорошо отделяет ее от прочего контента и не дает слиться с другими элементами.

 

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

 

marketing trends 2018

 

 

 

2. Цвет и размер

 

 

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

 

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

 

Herman Scheer – как раз отличный пример. Нежные тона фона отлично контрастируют с темно-синей СТА кнопкой.

 

marketing trends 2018

 

 

 

3.. Текстовое наполнение

 

 

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

 

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

 

На сайте eSputnik главная кнопка «Попробовать» грамотно и четко сформулирована и ярко оформлена, за счет чего эффект от этого гораздо лучше.

 

marketing trends 2018

 

 

 

4. Дополнительные сведения

 

 

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

 

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

 

И еще, не стоит лепить информацию на кнопку, если без нее ничего не изменится. Например, к кнопке «Добавить в корзину» абсолютно не нужны никакие слова-пояснения. Тут все понятно и так, а информация о товаре располагается рядом на странице.

 

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

 

marketing trends 2018

 

 

 

5. Форма, изображение и оформление в целом

 

 

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

 

Если говорить про изображение, то желательно использовать то, которое полностью соответствует призыву на самой кнопке. То есть, если это «Добавить в корзину», уместно будет добавить изображение самой корзины. А возле слова «Скачать» привычным уже для нас является стрелка. Но и оригинальные изображения тоже могут стать весьма эффективными.

 

Вот основные правила:

 

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

 

- Чем проще и понятнее изображение, тем эффективнее и легче воспринимается призыв на кнопке.

 

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

 

На сайте 3D ручки Lix Pen обе СТА кнопки дублируются соответствующими изображениями: просмотр видео – привычным треугольником, а заказ товара – магазинной тележкой.

 

marketing trends 2018

 

 

 

6. Приоритетность

 

 

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

 

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

 

marketing trends 2018

 

 

 

Главная цель сайта – это добиться от посетителя определенного действия. Именно поэтому от малюсенькой СТА кнопки зависит очень многое. Так что пренебрегать ею вовсе не стоит. Чем больше принципов оформления этого элемента вы примите во внимание, тем больше шансов, что вы добьетесь от клиента желаемого действия. Готовы применить знания на практике? Тогда настало время создать свой сайт.

 

#Заметка

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