Продающий дизайн во ВКонтакте: основы, нюансы и их применение

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

Что такое, продающий дизайн?

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

Прежде всего продающий дизайн:
1) не отвлекает внимание на себя,
2) расставляет верные акценты,
3) отвечает всем законам юзабилити: просто и понятно подает нужную информации посетителям.

Как определить, продает дизайн или нет? — Провести А/В тестирование! Кстати, просто оформить группу и ждать продаж точно не стоит. В этой статье нет рецепта волшебной таблетки на этот счет. В социальных сетях, как и на сайте или посадочной странице, работает связка дизайн-контент-реклама.
 

КАК СДЕЛАТЬ ВАШ ДИЗАЙН ПРОДАЮЩИМ


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

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

Что может быть на первом экране сообщества:

1) Логотип компании.

Не стоит уделять большое внимание логотипу, перетягивая внимание посетителей на него, если вы недостаточно раскрученный бренд (например, как Canon, Adidas и т.д).
Конечно, всегда есть исключения и делать это стоит, если только после одного взгляда на лого, пользователь сразу примет решение подписаться на вас. Тут стоит ответить себе на вопрос: вы собираетесь потакать своим амбициям, или экономить деньги на каждом вступившем? Конечно, решать вам. А вот размещение логотипа и ваших фирменных цветов на каждой картинке поста вполне уместно, пользователи легко узнают ваши посты в ленте, уже после подписки.
Как делать не надо:

2) Название, профиль компании.

Посетителю должно быть сразу понятно, в сообществе что-то продают и это сообщество может быть ему полезно. Продаете формочки для мыла? Профессиональную косметику для мастеров маникюра? – так и напишите на обложке. Люди не любят, чтобы им морочили голову, манипулировали их интересами, а потом что-то пытались продать. Будьте честны и вам ответят взаимностью.


3) Географическая привязка, адрес.


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

4) Предложение или лид-магнит.


Люди, перешедшие по рекламе, уже заинтересованы в вашем предложении. Для них очень важно увидеть в сообществе подробности получения этого предложения. Условия могут быть написаны на обложке (например, в призыве написать сообщение) или на закрепленном баннере над стеной сообщества. Стоит ли тут говорить, что отсутствие визуальной связи между рекламой и сообществом приведет к удорожанию лидов? Ну вы поняли) И еще, предложение должно быть ограничено по времени или по количеству.


5) Уникальное торговое предложение (УТП).

УТП – это то, чем вы отличаетесь от конкурентов, почему посетитель должен купить что-то (сейчас или в будущем) именно у вас. Данную информацию стоит расположить на обложке или на баннере в закрепе, если вы ведете посетителей на подписку и собираетесь их потом «подогревать».

6) Call-to-action (CTA) или призыв к действию.

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

7) Телефон.


Есть 2 категории покупателей: те, кому легче позвонить, и те, кому легче написать сообщение. Это факт и никуда от него не уйти. Поэтому если на вашей обложке уже есть призыв написать сообщение и забрать лид-магнит, то логичнее поместить номер телефона в статус сообщества.
Сложно представить, как посетитель будет смотреть на обложку и вводить номер телефона, чтобы затем позвонить вам. А в статусе его хотя бы можно скопировать и затем набрать с телефона. Поэтому на обложку помещаем или призыв «написать сообщение», или номер телефона. Чем меньше вариантов действия стоит перед посетителем, тем конверсия выше. Даем выбор без выбора.


8) Призыв вступить в группу.

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

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

ВИЗУАЛИЗАЦИЯ ПРОДАЮЩЕГО ДИЗАЙНА – РАССТАВЛЯЕМ АКЦЕНТЫ


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

Остановимся на фотографии или иллюстрации

По модели AIDA фото выполняет первую и иногда вторую задачу: привлекает внимание (attention) и вызывает интерес (interest). Это первое, на что падает взгляд, особенно, если на фото человеческое лицо. Глаза и улыбка больше всего привлекают наше внимание. Поэтому, чтобы не возник обратные эффект «зависания» на фото человека, часто используют прием обращения взгляда в сторону нужной информации, текста.

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


Если вы продаете какой-то свой товар, то не поскупитесь на качественную фотосессию. Мы настолько пресыщены однообразными фото, что достаточно остро реагируем на что-то новое — останавливаемся, рассматриваем. То же касается и качественных фото со стоков (платных и полуплатных). Загрузите предполагаемое фото для обложки в поиск по картинке в поисковике Яндекс и посмотрите выдачу. Если это фото мелькает в каждой выпавшей картинке, смело отметайте его и ищите дальше.
В крайнем случае, стоковое фото можно совместить с другим фото, придать определенную стилистику. Делать это надо с профессиональным подходом, чтобы все смотрелось качественно и естественно.

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

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

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

И в подавляющем большинстве так и нужно делать. Но, согласитесь, тогда все дизайны были бы плюс-минус похожи друг на друга. И еще не понятно, как поступать в случае, когда фото не используется.
Дело в том, что горизонтальную обложку с соотношением сторон почти 1:4 наш взгляд сканирует целиком по модели Z. При этом выделяется центральная часть изображения. Поэтому вполне логично, что разработчики мобильного интерфейса ВК отметают края обложки справа и слева. Именно на линиях Z следует располагать основные моменты обложки, обходя края.

Так мы подошли к еще одному главному параметру обложки: типографике.
Предлагаю вам следующие рекомендации:


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

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


Существуют определенные критерии отбора цвета, исходя из ниши https://vk.com/page-80577002_52234644 . Но это ни в коем случае не говорит, что нельзя использовать другие цвета. Вопрос лишь в том, насколько много его будет в вашем дизайне.
Дизайн обложки можно разбить на следующие компоненты:
1) фон;
2) основной цвет;
3) дополнительный или акцентный цвет;

Если весь фон вашей обложки занимает фото, то основной цвет должен быть либо контрастным к нему, либо сочетаться с фото. Как определить этот контраст?
Тут хотя бы на элементарном уровне вам придется познакомиться с цветовым кругом Иттена. Не пугайтесь, за вас подобрать контраст может программа на сайте https://color.adobe.com/ru/create/color-wheel/ . Загрузите фото и выделите основные цвета на нем. Теперь вы можете взять один цвет за основной и подобрать к нему противоположный (комплементарный).


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


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


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


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


Автор — Людмила Пученкова,

web-дизайнер, автор и руководитель проекта Продающий дизайн для бизнеса во ВКонтакте

Самая понятная рассылка по интернет-маркетингу
Укажите свой email и нажмите "Хочу получать рассылку"!
I agree to have my personal information transfered to GetResponse ( more information )
Нажимая кнопку "Хочу получать рассылку!" вы соглашаетесь с нашей политикой обработки персональных данных
Powered by Optin Forms
Posted in Блог.

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

Войти с помощью: 

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