Анализ 11 примеров практической реализации Call to Action

11 примеров корректной и некорректной реализации Call to Action

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

Основная цель элементов «Call to Action» — привлечь внимание посетителя, заставить его глаз «выцепить» из мешанины текста, картинок и прочих графических «наслоений» самый важный и самый главный элемент — ту самую заветную кнопку или ссылку, которые  призваны решить ту проблему посетителя, ради которой он вообще находится на сайте — купить товар/услугу, подписаться на рассылку/RSS и т.д. То есть, выполнить то самое действие, ради которого так долго трудились дизайнер и программист и которого является розовой мечтой любого владельца бизнеса — продажа.

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

Сегодня мы на практике разберем 11 примеров продуманных и проработанных элементов «Call to Action». Каждый пример я буду комментировать и пояснять — какие именно приемы используются и почему.

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

Elegant Themes

В данном случае пользователю предлагают два варианта, с которых можно начать знакомиться с ассортиментом. Первый вариант — посмотреть непосредственно миниатюры и выбрать нужную тему (View the Themes), второй  - ознакомиться с теми преимуществами тем, которые предоставляют Elegant Themes (View the Features).

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

Mozilla Firefox

У Mozilla нет вариантов выбора, поэтому большая зеленая кнопка «Скачать Firefox» расположена на самом видном месте. При этом, обратите внимание, что помимо надписи «Скачать», на кнопке присутствуют:

  • логотип;
  • указание на бесплатность продукта;
  • порядковая версия продукта;
  • языковая версия продукта.

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

Wijimo

Wijimo поступили похожим образом, разместив кнопку для скачивания практически в шапке сайта. Однако есть одно существенное, на мой взгляд, отличие — если у Mozilla под кнопкой расположена ссылка на другие языки и платформы для которых может быть скачан Firefox и не слишком нужный Privacy Policy, то Wijimo разместили ссылку не только на все варианты пакета, но и на все предыдущие версии.

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

 Ideaware

Ideaware не ограничились одной кнопкой, а скомпоновали свой Call to Action в целую графическую группу. Вот что видит посетитель, когда открывает сайт, последовательно:

  1. это сайт о сайтах;
  2. здесь собирается пользовательский опыт;
  3. я могу рассказать о своем проекте.

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

Tweetie

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

  1. Где я?Это сайт Tweetie.
  2. Что такое Tweetie? | Это Twitter-клиент для Mac.
  3. Хочу попробовать! Какие есть варианты программы?Вариант А — купить за $19.95 и вариант В — бесплатно, но с рекламой.
  4. Я выбираю вариант В!Скачайте.

Senzoo

У Senzoo основной упор сделан не столько на действие, сколько на объяснение клиенту простоты действия:

  1. Попробуй!
  2. Это абсолютно бесплатно!
  3. Займет максимум 30 секунд!
  4. Но если ты все же не хочешь — тогда читай подробную информацию.

Meme

Meme ориентируется на новых пользователей. Лейтмотив их Call to Action звучит так: «для нас самое главное — новые пользователи. Но и про существующих мы не забыли — они точно увидят эту большую цветную кнопку на черном фоне, а значит и текст под ней».

Capo

А вот вариант  Capo на мой взгляд не слишком удачен, хотя и подразумевает определенную уловку — нам предлагают выбор: «или скачай или купи». Но в подсознании интернет-пользователя возникает противоречие:

  1. если я могу это свободно скачать, то зачем мне покупать?
  2. значит мне предлагают либо урезанную версию, либо trial.
  3. но я ведь не знаю ограничений, а тратить время на закачку и проверку мне не хочется.

Кстати, обратим внимание — при клике на «Buy» разворачивается дополнительная строка, которая гласит: "система продажи встроена прямо в Capo, поэтому сначала скачайте программу, а потом, когда будете готовы купить, выберите в меню пункт «Заказать».

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

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

 Basecamp

Basecamp решил вообще не морочить пользователю голову и с помощью простых стрелочек и иконок построил цепочку, вложив в нее весь максимум информации:

«Basecamp -> это календарь + задачи + общение и документы -> Выбери тарифный план. 30 дней бесплатного тестирования. Регистрация за 60 секунд. Если не хочешь прямо сейчас — посмотри обучение».

Обратите внимание на то, что пользователя изначально приучают к системе «стрелок», выделяя серым цветом функционал сервиса, а вот указание на Call to Action отдельно выделено жирным черным.

MailChimp

И хотя MailChimp мне не очень понравилась, но текст на кнопках блока Call to Action выбран абсолютно верно — любой пользователь, прежде чем потратить даже 3 секунды на заполнение хотя бы одного поля, должен получить четкий ответ на вопрос — зачем мне это нужно?

Именно этот принцип и используется у MailChimp — «Зарегистрируйся бесплатно» -> «Не знаешь зачем?» -> «Нажми и мы расскажем!».

TheCommentor

А вот TheCommentor явно поддался желанию разместить основное преимущество сервиса в центре страницы, но поскольку здравая логика подсказывает — два Call to Action на одной странице ужиться не могут, решил совместить «приятное с полезным» — и «фишку» разместить и с Call to Action совместить.

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

Ваше мнение?

«Цепляют» ли эти Call to Action? Сразу ли они заметны на странице или их необходимо искать? Какой вариант, на ваш взгляд, наиболее эффективен?

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

21 комментарий к “Анализ 11 примеров практической реализации Call to Action”

  1. На мой взгляд в 90% случаях «Call to Action» — грамотно выделенное объемная доминанта на фоне общего контента!!! (тенью, 3d отрисовкой или цветом)

    ОтветитьОтветить
  2. @ wudwan: а разве в этом плане есть какое-либо существенное различие между сайтом и блогом?

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

    Вы со мной не согласны?

    ОтветитьОтветить
  3. @ Yaroslav.CH:

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

    ОтветитьОтветить
  4. Статья очень правильная и очень интересная. Вот только вы сами пишите про выделение на странице необходимого как способ добиться эффекта определённого... а статья представляет собой кашу из обычного текста и жирного. Жирный создан для выделение необходимого, а не каждого второго слова — получаем месиво и добиваемся того, что глаз не выхватывает эти мысли... Не прав?

    ОтветитьОтветить
  5. @ felix:

    на мой взгляд — нет, не правы :) Вы путаете смысловое выделение и Call to Action — а это абсолютно не одно и то же. Просто попробуйте прочесть только выделеные фразы и поймете о чем я говорю.

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

    ОтветитьОтветить
  6. @ wudwan: можно попробовать сделать подобную подборку и ее анализ, но в массе своей она будет подобна этой подборке по сайтам. 90% блоггеров не предоставляют какие-либо услуги и все ограничивается исключительно подпиской в той или иной вариации.

    ОтветитьОтветить
  7. Пост шикарный. Спасибо, получил удовольствие!

    Единственное, хотелось бы внести небольшое уточнение — «Call To Action» — это скорее не «привлечение внимания», а конкретный призыв к действию. Для привлечения внимания в дословном понимании используются другие элементы.

    Потому что призыв к действию — это логическое завершение для исполнения основной задачи. Хочешь привлечь подписчиков — «Получайте обновления на свой e-mail».

    При этом важно соблюдать гармонию и последовательность. Сначала мы рассказываем «самое сладенькое», а потом ба-бах — хочешь это получить? Тогда нужно сделать вот это! И прямо сейчас.

    P.S. Мне понравился слоган: «Любой сайт должен продавать» — это точно. Потому что многие дизайнеры больше работают над картинкой и юзабилити, а про продающий элемент забывают. Возможно, потому что это направление ещё не сильно развито у нас. Надеюсь, твой блог будет способствовать продвижению такой идеи в массы!

    ОтветитьОтветить
  8. @ Денис Каплунов: спасибо — рад, что понравилось :)

    Да, соглашусь — во вступительном тексте момент четкого определения Call to Action немного размыт и стоило уточнить более явно. Так часто об этом говорю, что это определение мне уже стало просто «родным» и уже кажется, что все понимают сходу :)

    ОтветитьОтветить
  9. Yaroslav.CH написал(а):

    90% блоггеров не предоставляют какие-либо услуги

    Я предоставляю...

    Но у меня кнопка «Заказать» находится только на главной и ничем не отличается от кнопки рядом «Портфолио». На всех остальных страницах «Заказать» выпадает из Панели Навигации вверху...

    Сейчас задумалась над:

    1. Не стоит ли выделить другим цветом что ли кнопку на Главной;

    2. Не поставить ли кнопку в сайдбар для всех остальных страниц.

    Как Вы думаете, есть в этом смысл?

    ОтветитьОтветить
  10. @ Allpa: с моей точки зрения, у Вас есть проблема в шапке: Вы попытались совместить описание блога и Call to Action в заказе. Это неверно.

    Получается так:

    "Здесь у камелька живёт Кошка, работает Виртуальный Стилист и отдыхает Алиса Пашутко, то есть я. Добро пожаловать, дорогие гости, надеюсь, мы станем друзьями :)

    Сделать заказ ->"

    Сделать заказ чего? Кошки? Отдыха? Друзей? :) Это описание для блога, но даже не для сайта. Если бы там была ссылка на блог — было бы более-менее ясно в чем суть этого текстового пассажа, а так — ничего не ясно.

    Портфолио Алисы Пашутко — это хорошо, но кто такая Алиса Пашутко и что она делает? Понятие «виртуальный стилист» — хорошо для макетинга, но плохо для понимания.

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

    Фотки справа — круто, но нет ни малейшего пояснения, что это вообще такое? Зато есть непонятное четверостишье, неясно к чему относящееся.

    Дальше — больше. «Сделать заказ» ведет на просто форму обратной связи, на странице которой нет даже информации о том — что заказать? У кого заказать? Как именно заказать?

    Более того, форма называется «Отправить письмо», а не «Сделать заказ». Также — я даже не могу приаттачить к письму файл с просьбой, например, посмотреть фотку и дать ответ — можете ли Вы из нее что-то сделать. «Стереть» в форме заказа — плохая идея, оно подталкивает не к тем мыслям :)

    Тоже самое и в закладке заказ — предложение «или отыскав меня где-нибудь здесь» — это плохо. Вы предлагаете пользователю искать Вас самому, хотя должны быть всегда открыты для заказа и его обсуждения.

    Портфолио — тоже самое. У пользователя еще даже нет понимания, что именно Вы делаете, а уже написано: «А здесь, между прочим, мог красоваться ваш портрет...»

    Простой вопрос — зачем Вам мой портрет? :)

    Ну и небольшое замечание в довесок — на стартовой очень некорректно сделано выделение текста. На «Виртуальный стилист», «Портретная ретушь» и остальные словам лично мне очень хочется кликнуть, но это не ссылки.

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

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

    Из беглого просмотра — где-то так.

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

    ОтветитьОтветить
  12. Реально, очень качественный пост!

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

    Огромное человеческое спасибо :)

    ОтветитьОтветить
  13. Мда, @ Yaroslav.CH... тут есть где раскинуть мозгой...

    Спасибо за столь развёрнутый ответ, — ценю!

    Пошла думать ряд ценнейших Ваших мыслей :)

    @ Лучик, благодарствую.

    По всей вероятности, придётся вообще менять шаблон блога, чёрт побери...

    Здесь, как я вижу, всё вообще не так, как нужно... :((

    ОтветитьОтветить
  14. Так, поправила «шапку», руководствуясь указаниями... пошла дальше по списку :)

    И что бы я без Вас делала!

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

    ОтветитьОтветить
  16. Отличный примеры!

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

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

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

    ОтветитьОтветить
  18. спасибо большое, почитала с удовольствием, много нужного для себя нашла!!!буду сидеть ещё копаться на вашем блоге!!!

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

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

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

    ОтветитьОтветить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *