Как использовать принципы дизайна для увеличения конверсии

Posted on by riasevastopol

Это изображение иллюстрирует хорошие правила дизайна: направление перемещения, пробел, золотая спираль и «цветовой контраст»

Дизайн правит. Дизайн ПРАВИТ! Между первым и вторым вариантами графического воплощения одной и той же фразы существует только маленькое различие, но какому из этих двух утверждений вы уделили больше внимания?

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

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

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

p
И, наконец, «золотая спираль» (спираль Фибоначчи) употребляется для указания на динамический центр композиции методом установления визуального сотрудничества между движущимся объектом (бабочкой) и конечной точкой его предполагаемой траектории перемещения.Как использовать принципы дизайна для увеличения конверсии

Посмотрим сейчас, как основополагающие правила дизайна смогут быть использованы для повышения конверсии целевых страниц, выделив 2 серьёзных нюанса применения этих правил:

  1. Разработка увеличивающего конверсию дизайна лид-форм.
  2. Разработка увеличивающего конверсию дизайна CTA-элементов.

Часть 1. Увеличивающий конверсию дизайн лид-форм

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

В случае если у вас на целевой странице имеется лид-форма, то с возможностью 99% установленная вами цель конверсии достигается через заполнение пользователем данной формы, так для чего же ее «прятать»? Ваша форма обязана очевидно выделяться из другой части страницы, и она должна быть сконструирована так, дабы глаз визитёра страницы неотвратимо как магнитом притягивался к ней – в точности так же, как ваше внимание было привлечено бабочкой на самой верхней иллюстрации.

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

Ход 1: Применение инкапсуляции формы для повышения конверсии

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

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

Думайте об инкапсуляции, как о «прорубании окна» на вашей целевой странице, где ваш CTA-элемент (лид-форма, к примеру) имеется «вид, раскрывающийся глазам визитёра из окна». На фотографии скального массива круговой арочный свод формирует условную «оконную раму» для отдаленных объектов, не давая вашим глазам бесцельно блуждать по вторым участкам фотографии.

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

  • 25 примеров целевых страниц для лидогенерации

Ход 2: Применение контрастности и цвета для повышения конверсии

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

Цвет возможно использован как инструмент для получения эмоционального отклика от ваших визитёров. Оранжевый цвет, к примеру, имеет устойчивую ассоциацию с хорошими чувствами, и как такой есть хорошим выбором для цвета вашего CTA-элемента. Вы кроме этого имеете возможность применять хорошую ассоциацию с зеленым цветом как «цветом светофора, разрешающим перемещение», иными словами – зеленый в массовом сознании одновременно и динамичный и надёжный цвет.

Хорош вашего внимания и светло синий/светло синий цвет как хороший цвет текстовой ссылки, словно бы бы говорящий визитёру «кликни меня!».

  • Как цвет воздействует на покупательскую активность?
  • Влияние цвета на конверсию целевых страниц

Мысль применения цвета и контраста в дизайне целевых страниц базируется на концепции «изоляции через разделение», либо «выделения через разделение». Существует, необходимо подметить, вывод, что конкретный цвет кнопки не имеет никакого значения, но это в корне неверное предположение. Цветовой контраст и его использование на практике в веб-дизайне – это реально существующая неприятность, которую каждый день приходится решать дизайнерам и веб-маркетологам.

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

Совет: применяйте на вашей целевой странице всего один главный цвет (с разными его оттенками). В этом случае контрастный главному цвету страницы цвет CTA-элемента вынудит его практически «выпрыгивать» в глаза визитёру.

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

Ход 3: применяйте направление перемещения для повышения конверсии

Стрелка на целевой странице, показывающая направление взора визитёра – прием несложной, как раз исходя из этого он так прекрасно трудится. Стрелка как бы говорит пользователю: «Игнорируйте все другое, и смотрите лишь в том направлении, куда я показываю!».

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

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

На правой странице употребляются 2 стрелки: первая завлекает внимание визитёра к описанию цели заполнения лид-формы, размещенному в заголовке формы, а вторая направляет взор визитёра от заголовка к CTA-форме. Итак, сейчас мы располагаем действенной лид-формой, созданной с применением 3 ключевых принципов дизайна.

  • 5 советов для комплексного тестирования любой рекламной кампании

Часть 2. Увеличивающий конверсию дизайн CTA-элементов

CTA-элемент есть второй по важности составляющей частью целевой страницы по окончании заголовка – в итоге, конверсия не завершится, в случае если пользователь не будет мотивирован к этому действию убедительным воодушевляющим заголовком. Как и в первой части отечественного урока, разрабатывая дизайн CTA-элемента мы будем руководствоваться способом, известным среди западных веб-дизайнеров как «принцип светло синий.I.R.B.O.» (Make It Really Bloody Obivous – Сделай Это По-настоящему Чертовски Заметным).

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

Ход 1: Применение пробелов для повышения конверсии

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

Совет: дайте вашему CTA-элементу больше свободного места, дабы он выделялся на фоне остальных элементов страницы.

  • Призыв к действию (CTA) — примеры, забранные из практики
  • 10 заповедей успешной генерации лидов

Ход 2: Применение текста на CTA-элементе для повышения конверсии

Разглядим относительно неизвестную методику создания максимально действенных и информативных CTA-кнопок. Как мы знаем, к тексту на элементе призыва к действию предъявляются 2 главных требования:

  1. Он должен быть маленьким, но заманчивым и убедительным.
  2. Он обязан совершенно верно обрисовывать, что случится по окончании нажатия на кнопку.

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

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

Существуют 2 метода применения способа «первичного и вторичного заявлений» (как это возможно видеть из отечественного примера): первичное заявление размещается на кнопке, вторичное – за ее пределами, либо же и первичное и вторичное заявления размещаются на CTA-кнопке конкретно. Выбор постоянно остаётся за вами, но 2 нижних примера CTA-элементов будут преобразовать более действенно, чем самый верхний пример.

  • 99 примеров действенных элементов призыва к действию
  • 10 способов повысить эффективность «призыва к действию»
  • Анатомия совершенной целевой страницы

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

Высоких вам конверсий!

По данным www.unbounce.com

Случайные статьи:

Увеличение конверсии сайта за счет продающего дизайна


Подборка похожих статей:

riasevastopol

More Posts