Практически в каждой статье, касающейся дизайна сайта или проектирования прототипов, я подчеркиваю важность и необходимость такого элемента как «Call to Action». И часто меня спрашивают — «почему ты считаешь, что этот элемент имеет первостепенное значение?»
Основная цель элементов «Call to Action» — привлечь внимание посетителя, заставить его глаз «выцепить» из мешанины текста, картинок и прочих графических «наслоений» самый важный и самый главный элемент — ту самую заветную кнопку или ссылку, которые призваны решить ту проблему посетителя, ради которой он вообще находится на сайте — купить товар/услугу, подписаться на рассылку/RSS и т.д. То есть, выполнить то самое действие, ради которого так долго трудились дизайнер и программист и которого является розовой мечтой любого владельца бизнеса — продажа.
Именно поэтому, любой элемент «Call to Action» должен быть максимально заметным и привлекательным — при его создании необходимо удалить максимум внимания размеру, положению, свободному пространству вокруг элемента.
Сегодня мы на практике разберем 11 примеров продуманных и проработанных элементов «Call to Action». Каждый пример я буду комментировать и пояснять — какие именно приемы используются и почему.
Хочу сразу порекомендовать вам не ограничиваться просмотром только лишь картинки, но и обязательно открывать сайт-источник и смотреть на компоновку и расположение элементов.
В данном случае пользователю предлагают два варианта, с которых можно начать знакомиться с ассортиментом. Первый вариант — посмотреть непосредственно миниатюры и выбрать нужную тему (View the Themes), второй — ознакомиться с теми преимуществами тем, которые предоставляют Elegant Themes (View the Features).
Оба варианта выполнены одним шрифтом, в одном стиле и визуально представляют собой некий указатель — идти «налево» или «направо». Разница же представлена с помощью цветовой схемы для каждой «лопасти» указателя.
У Mozilla нет вариантов выбора, поэтому большая зеленая кнопка «Скачать Firefox» расположена на самом видном месте. При этом, обратите внимание, что помимо надписи «Скачать», на кнопке присутствуют:
- логотип;
- указание на бесплатность продукта;
- порядковая версия продукта;
- языковая версия продукта.
То есть — в наличии вся информация, которая необходима той группе пользователей, которая не слишком хочет читать о том, что же за браузер такой — Firefox, а желает лишь скачать продукт и проверять все самостоятельно. Что, в сущности, и требуется разработчикам программы.
Wijimo поступили похожим образом, разместив кнопку для скачивания практически в шапке сайта. Однако есть одно существенное, на мой взгляд, отличие — если у Mozilla под кнопкой расположена ссылка на другие языки и платформы для которых может быть скачан Firefox и не слишком нужный Privacy Policy, то Wijimo разместили ссылку не только на все варианты пакета, но и на все предыдущие версии.
Для меня, например, такая компоновка удобнее, поскольку пару раз после обновления, из-за несовместимости расширений, приходилось откатываться на предыдущую версию браузера.
Ideaware не ограничились одной кнопкой, а скомпоновали свой Call to Action в целую графическую группу. Вот что видит посетитель, когда открывает сайт, последовательно:
- это сайт о сайтах;
- здесь собирается пользовательский опыт;
- я могу рассказать о своем проекте.
Особо обратим внимание на тот факт, что компоновка отлично выверена — после прочтения второго пункта, я сам задал себе вопрос — а могу ли я добавить свой проект? На мой взгляд, это именно та мысль и эмоция, которые и планировало вызвать.
В случае с Tweetie, мы снова возвращаемся к идее выбора, но в данном случае это не «путеводитель по сайту», а непосредственный выбор продукта. Обратите внимание на четко прослеживаемую логику:
- Где я? | Это сайт Tweetie.
- Что такое Tweetie? | Это Twitter-клиент для Mac.
- Хочу попробовать! Какие есть варианты программы? | Вариант А — купить за $19.95 и вариант В — бесплатно, но с рекламой.
- Я выбираю вариант В! | Скачайте.
У Senzoo основной упор сделан не столько на действие, сколько на объяснение клиенту простоты действия:
- Попробуй!
- Это абсолютно бесплатно!
- Займет максимум 30 секунд!
- Но если ты все же не хочешь — тогда читай подробную информацию.
Meme ориентируется на новых пользователей. Лейтмотив их Call to Action звучит так: «для нас самое главное — новые пользователи. Но и про существующих мы не забыли — они точно увидят эту большую цветную кнопку на черном фоне, а значит и текст под ней».
А вот вариант Capo на мой взгляд не слишком удачен, хотя и подразумевает определенную уловку — нам предлагают выбор: «или скачай или купи». Но в подсознании интернет-пользователя возникает противоречие:
- если я могу это свободно скачать, то зачем мне покупать?
- значит мне предлагают либо урезанную версию, либо trial.
- но я ведь не знаю ограничений, а тратить время на закачку и проверку мне не хочется.
Кстати, обратим внимание — при клике на «Buy» разворачивается дополнительная строка, которая гласит: «система продажи встроена прямо в Capo, поэтому сначала скачайте программу, а потом, когда будете готовы купить, выберите в меню пункт «Заказать».
На мой взгляд, такая система слишком сложна и добавлять отдельную кнопку «Купить» не имело логического смысла — проще было визуально обыграть «Try and Buy» с указанием цены продукта.
Кстати, это вообще какая-то «родовая болезнь» сайтов для iPhone-приложений — практически каждый из них страдает именно такой компоновкой продающих элементов.
Basecamp решил вообще не морочить пользователю голову и с помощью простых стрелочек и иконок построил цепочку, вложив в нее весь максимум информации:
«Basecamp -> это календарь + задачи + общение и документы -> Выбери тарифный план. 30 дней бесплатного тестирования. Регистрация за 60 секунд. Если не хочешь прямо сейчас — посмотри обучение».
Обратите внимание на то, что пользователя изначально приучают к системе «стрелок», выделяя серым цветом функционал сервиса, а вот указание на Call to Action отдельно выделено жирным черным.
И хотя MailChimp мне не очень понравилась, но текст на кнопках блока Call to Action выбран абсолютно верно — любой пользователь, прежде чем потратить даже 3 секунды на заполнение хотя бы одного поля, должен получить четкий ответ на вопрос — зачем мне это нужно?
Именно этот принцип и используется у MailChimp — «Зарегистрируйся бесплатно» -> «Не знаешь зачем?» -> «Нажми и мы расскажем!».
А вот TheCommentor явно поддался желанию разместить основное преимущество сервиса в центре страницы, но поскольку здравая логика подсказывает — два Call to Action на одной странице ужиться не могут, решил совместить «приятное с полезным» — и «фишку» разместить и с Call to Action совместить.
А для сосредоточения внимания посетителя, было решено использовать такой же принцип со стрелочкой, призванной указать на то, что это не просто слоган, но и ссылка на регистрацию.
Ваше мнение?
«Цепляют» ли эти Call to Action? Сразу ли они заметны на странице или их необходимо искать? Какой вариант, на ваш взгляд, наиболее эффективен?
Небольшое, но очень амбициозное бюро предлагает услуги по созданию сайтов в Кирове. Цены смешные, качество отличное.