Дизайн блога: лучшие практики

admin

3 года назад

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

Студия веб-дизайна Orbit Media Studios (OMS) изучила более 100 популярных блогов и собрала проверенные и эффективные практики дизайна блога. Мы подсмотрели у ребят несколько советов и дополнили их собственными.

Распространенные элементы интерфейса блогов

Разберем каждый элемент подробнее.

Поиск в блоге

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

Возникает несколько вопросов. Во-первых, как должно выглядеть окно поиска? Согласно исследованию OMS, 37% дизайнеров блогов делают поиск в виде обычной поисковой иконки (лупа), на которую пользователь кликает. 36% добавляют к иконке еще и поле для ввода запроса. У 27% блогов поиска нет вообще.

Во-вторых, насколько точным должен быть поиск? Должен ли он показывать только стопроцентные совпадения с запросом? Будет ли искать только по заголовкам статей, или также по их содержанию? Будет ли автоматически делать транслит: например, если пользователь вводит запрос «инстаграм», получит ли выдачу со словом «Instagram»?

(Спойлер: советуем, чтобы поиск учитывал все варианты и показывал пользователю как можно большую выборку статей.)

Какой вариант подойдет вашему блогу, подскажет аналитика. Например, в Google Analytics можно настроить отслеживание поиска по сайту. Проводите А/Б-тестирование: половине пользователей показывайте страницу с одним вариантом поиска, остальным — с другим. Смотрите, где показатели пользования функцией и вовлеченности выше.

Если окажется, что посетители блога не используют поиск, его лучше убрать — во имя визуальной незахламленности.

Имя и фото автора поста

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

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

В некоторых блогах мы видим имена и фото всех людей, которые работали над статьей: автора, редактора, иллюстратора.

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

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

Дата публикации поста

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

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

Скорее всего, пользователь выберет более новую статью

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

В качестве альтернативы дату можно указать в тексте или в заголовке. Например, обозначить в лиде, что вы рассказываете об исследовании 2021 года, или назвать пост так: «Тренды цифрового маркетинга 2021».

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

Кнопка «Поделиться»

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

Для блогеров клик на такую кнопку — дополнительные бэклинки, охваты, новые пользователи.

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

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

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

Форма подписки и CTA

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

Вот в каком качестве опрошенные OMS блоги визуализируют такие элементы:

всплывающие окна (попапы, попандеры) — 44%;
«прилипающие» к экрану футеры, которые остаются снизу экрана, даже когда вы прокручиваете страницу — 13%;
выскакивающие сбоку окна — 12%
никак — 43%.

Снизу справа — пример выскакивающего сбоку окна с СТА

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

Важно и само сообщение СТА: оно должно быть четким, чтобы пользователь точно понимал, на что он подписывается, что получит взамен.

Когда приглашаете людей оставить информацию о себе, не забывайте о работе с персональными данными пользователей.

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

Кроме того, плагины комментариев нагружают страницу и негативно влияют на скорость ее загрузки.

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

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

Время прочтения

Довольно редкий элемент: его используют лишь в 14% из исследованных OMS блогов. Смысл в том, чтобы пользователь заранее понимал, сколько времени потратит на статью.

OMS поэкспериментировали со своим блогом и сначала показывали время прочтения посетителям, а затем убрали его. Оказалось, что на показатели отказа и время просмотра страницы эта фича не влияет.

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

Несколько ноу-хау от Академии

Главная страница блога обычно представляет собой ленту постов, расположенных по хронологии. Советуем не делать «бесконечную» ленту (когда пользователь листает страницу вниз, а новые посты подгружаются автоматически — и так до самого первого поста). Лучше — кнопка «Показать еще», которая откроет следующую порцию статей. Или постраничная пагинация. «Бесконечные» ленты не позволяют долистать до футера, раздражают пользователей, снижают скорость загрузки страницы.

Форма для комментариев должна быть как можно более простой, с минималистичным интерфейсом. Пользователь не должен вводить много данных, чтобы оставить комментарий (в идеале — только имя и, например, email). Мы проверили на собственном опыте: чем сложнее форма, тем меньше комментариев вы будете получать.
Меню также советуем делать минималистичным: не слишком разветвленным, без десятков рубрик и подрубрик. Так пользователю будет удобнее ориентироваться в блоге.
Если громоздкого меню не избежать, сделайте поиск по фильтрам, чтобы человек по определенным темам, рубрикам получал подборку статей. Или используйте хлебные крошки — меню-путь пользователя:

В постах с несколькими главами и подглавами добавляйте оглавление-навигацию, чтобы пользователь мог сразу перейти к интересующей его части. В WordPress, например, это можно делать с помощью плагина верстки Table of Contents.
Также рекомендуем посты разбавлять разными элементами верстки. Например, выделять важные абзацы специальным цветом, вставлять блоки с цитатами, делать сноски сбоку.

Как все эти красивые и полезные штуки реализовать? Для большинства упомянутых фич (похожие статьи, подписки) есть плагины для каждой CMS. Так и гуглим: например, «добавить похожие статьи в вордпресс» — и получаем подборку плагинов.

Также можно обратиться к помощи разработчиков. Например, нанять фрилансеров или пойти в агентство (как это сделали мы в Академии).

Посмотрите несколько полезных статей, которые помогут работать с блогом:

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