11 элементов дизайна для блога, ориентированного на конверсии

Вы не знаете, каким должен быть дизайн вашего блога?

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

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

И первое, с чего я бы хотел начать это с цвета.

Цвет имеет значение

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

Вот, например, несколько фактов о том, как цвет влияет на покупки.

image11

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

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

image14

Кроме этого, компания KissMetrics дает еще несколько данных, говоря, что:

  • синий цвет считается предпочтительным как у мужчин (57%), так и у женщин (35%), хотя мужчины больше его любят
  • мужчины также не любят коричневый цвет, в то время как женщины не любят оранжевый
  • мужчины также хорошо относятся к оттенкам серого цвета
  • женщины, кстати, хорошо относятся к различным оттенкам, в то время как мужчины предпочитают чистые цвета
  • большинство мужчин (56%) и женщин (76%) предпочитают прохладные цвета в целом (зеленый, голубой, синий, фиолетовый)

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

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

image5

Старайтесь использовать светлые тона, чтобы тексты читались легко.

Выбирайте простой дизайн

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

И это не так. Но все же есть пословица, которая утверждает, что встречают по одежке.

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

image10

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

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

Разместите боковую панель справа

Вы заметили, что в некоторых блогах боковые панели слева? Или, что еще хуже, у некоторых есть две боковые панели?

Маркетолог Нил Патель экспериментировал с разными типами макетами. В ходе своих исследований он обнаружил, что что боковая панель справа  уменьшала число людей, которые читали его контент на 15-25%. Поэтому оптимальным макетом он называет, когда контент с левой стороны, а одна боковая панель с правой стороны.

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

image4

На картинке показано, 3 разные страницы:

  • страница “О компании”
  • страница с продуктом
  • страница с результатами поиска

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

При этом, старайтесь, чтобы основная область (область статей) занимала не менее 60% от всей ширины страницы.

Сделайте меню блога простым

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

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

Используйте правильные шрифты

Если говорить о шрифтах, то здесь приведу реальный пример исследования того же Нила Пателя. Он провел тесты со шрифтами аж на 13 блогах.

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

А затем он получил дополнительные 6 секунд удержания читателей на сайте, когда увеличил размер шрифта до 11.

Правда, это будет работать, только если вы будете использовать читаемый шрифт типа Arial или, например,  Times New Roman, Tahoma, Georgia. Если же ваш шрифт трудно читаемый, то увеличение размера не поможет.

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

image8

И если шрифт будет слишком мелким, я могу потерять большую часть читателей.

Не перегружайте боковую панель

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

Вы можете там вставить виджет наиболее популярных статей вашего блога. Так люди быстро смогут сканировать самый читаемый контент при первом посещении. Этим вы также “сшиваете” свои популярные статьи блога с главной страницей. Что, в свою очередь, хорошо для SEO и поможет вам быть выше в поиске.

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

Вставьте информацию “Обо мне” + фото

Можно сказать, что это еще один важный элемент конверсий.

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

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

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

image12

Или внизу под статьей, как это реализовано здесь, в блоге.

image7

Второй способ отлично подходит тем сайтам и компаниям, которые имеют несколько авторов.

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

Используйте социальные кнопки

Использование социальных кнопок – отличный способ увеличить трафик из социальных сетей.

Вот, например, сколько раз делились статьями одного из моих блогов в социальных сетях.

image6Как видно, каждую неделю около 100 человек делятся моим контентом в различных социальных сетях. И еще около 15 человек делятся картинками и инфографиками из статей в Pinterest.

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

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

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

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

Комментарии это еще один способ взаимодействовать с вашей целевой аудиторией. Они имеют ряд преимуществ:

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

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

image1

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

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

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

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

image13

Вы можете также установить виджет комментариев из ВКонтакте. Правда, виджеты комментариев из социальных сетей лишают вас нескольких преимуществ, указанных выше.

Вставляйте формы захвата

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

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

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

image2

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

Используйте профессиональные фото или картинки

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

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

Вот пример главной страницы этого блога.

image3
Каждое главная картинка статья имеет смысл, который дан в заголовке.

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

image9

Вывод

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

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

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

Поэтому начинайте с самого макета блога и выбора цвета вашего бренда. А затем разместите ваш лучший контент и свои социальные сети в боковой панели. Кроме этого, подумайте над тем, где разместить форму подписки и кнопки “Поделиться” в социальных сетях. Это лучший способ начать конвертировать ваших посетителей в клиентов.

Автор статьи:  

Николай Гринько интернет- и контент-маркетолог, создатель блога dominantblogger.com. Любит исследовать и превращать блоги в способ заработка.

Прокомментируйте первым.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>