Способы и методы увеличения конверсии при помощи принципов дизайна

На этой картинке изображены классические принципы дизайна: направление, пустое пространство, контраст цветов и золотая спираль.
На этой картинке изображены классические принципы дизайна: направление, пустое пространство, контраст цветов и золотая спираль.

Правила ДИЗАЙНА. ПРАВИЛА дизайна! Различие маленькое, но чему же уделить больше внимания? Мне кажется, что второй фразе, так как она была создана с целью быть более убедительной. Она была спроектирована.

Изображение сверху является иконой дизайна, так что вам просто нужно знать, что искать:

  • Направление: показывает движение бабочки при помощи следов от звезд и пузырьков.
  • Пустое пространство: выражается в отсутствие беспорядка вокруг объекта.
  • Цвет и контрастность: используются для того, чтобы выделить бабочку на общем фоне изображения.
  • И наконец – золотая спираль (или, как ее еще называют спираль Фибоначчи): она используется там, где выводится расположение взаимодействий объекта с его точкой назначения, она расположена прямо на динамической точке фокуса.

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

  1. Убеждающий дизайн для форм лидогенерации.
  2. Убеждающий дизайн для призывов к действию.

Часть 1: Убеждающий дизайн для форм лидогенерации

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

Если у вас на странице есть форма, то, скорее всего, она в 99% случаев является целью конверсии (если нет, то этой формы там быть не должно). Так зачем ее закапывать? Ваша форма должна выделяться на фоне страницы, и спроектирована так, чтобы взгляд натыкался прямо на нее – так же, как и на фото в начале статьи, где ваше внимание привлекла бабочка. Шаг номер один в эволюции лидогенерационных форм – использование инкапсуляции:

Шаг 1: Использование инкапсуляции для увеличения числа конверсий

Арка заставляет вас обратить внимание на то, что находится внутри нее.
Арка заставляет вас обратить внимание на то, что находится внутри нее.

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

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

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

Шаг 2: Использование цвета и контраста для увеличения конверсий

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

Цвет может быть использован для того, чтобы вызвать эмоциональный отклик у посетителей. Оранжевый, как известно, генерирует положительные эмоции, и благодаря этому представляет собой отличный выбор в качестве цвета для призыва к действию. (Также можно принять во внимание положительное влияние зеленого цвета, или синего, который стал классикой ссылок «нажми на меня»).

Идея использования цвета и контраста основана на концепции изоляции через различие. Более «агрессивного» подхода, если хотите.

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

Совет для целевой страницы: Используйте один цвет (и несколько его тонов) для всей целевой страницы за исключением призыва к действию. Заставьте его «выпрыгивать» из страницы.

Вот теперь форма действительно начинает «играть». Обратите внимание на то, как две основные области формы (заголовок формы и призыв к действию) вынесены на первый план с помощью использования цвета и контраста. Причина, по которой для обеих областей используется один и тот же цвет с разной контрастностью заключается в создании чувства корреляции. Заголовок должен содержать соответствующую информацию, которая описывает то, что вы получите, заполнив форму, и какие плюсы у этого действия. Например: «Скачайте нашу бесплатную электронную книгу и станьте мастером искусства конверсии». Использование того же цвета в призыве к действию заставит взгляд скользить по форме и органично перейти к самому ПКД после прочтения заголовка.

Шаг 3: Использование направлений для увеличения конверсий

call-to-action-parking-where-to-go

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

Стрелки как бы говорят: «Посмотри на это, пожалуйста, и игнорируй все остальное». 

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

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

Итак, вот она. Более эффективная форма лидогенерации, созданная при использовании принципов дизайна.

Часть 2. Убеждающий дизайн для призыва к действию

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

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

Шаг 1: Использование свободного пространства для увеличения конверсий

sign

Пустое (или, правильнее сказать – незанятое) пространство представляет собой (практически) пустую область, которая окружает ту зону, которая важна для вас. Я использовал слово «незанятое» потому, что цвет этой области не играет роли.

Цель этого в использовании простого пространственного позиционирования, которое позволит призыву к действию выделиться из общего фона и заставит взгляд сфокусироваться на одной (и только одной) вещи.

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

Обратите внимание на пример справа (притворитесь, что не видите стрелок – я пририсовал их исключительно для наглядности). Вокруг кнопки с призывом к действию гораздо больше места, благодаря чему она выделяется гораздо сильнее «сдавленного» аналога слева.

Шаг 2: Использование дизайна и позиционирования текста кнопок для увеличения конверсий

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

Вам требуется, чтобы текст соответствовал двум критериям:

  1. Был коротким и «вкусным».
  2. В точности описывал то, что произойдет после нажатия.

Давайте рассмотрим примеры:

cta-text-place

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

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

Примеры два и три демонстрируют различный подход к данной проблеме: размещение текста внутри кнопки и снаружи. Выбор зависит от вас, однако они оба эффективнее первого примера, как по коммуникативности, так и потому, что не рушат дизайн.

Понравилось? Тогда лайк, плиз!