SETKA гид

Гид по проектированию читательского опыта

Как получить больше пользы от контент-маркетинга (и повысить ROI), используя лучшие практики в дизайне контента

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

Несколько фактов о том, как хороший дизайн контента может влиять на бизнес:

  • на репутацию компании: 75% опрошенных признаются в том, что оценивают надежность компании на основании дизайна сайта (включая то, как оформлен контент).
  • на вовлечение (то есть на то, чтобы люди на самом деле прочитали материалы, в которые вы вложили столько труда): 66% пользователей предпочтут выразительный дизайн чему-то обычному и шаблонному.
  • на бизнес-показатели: компании, для которых ведение блога — приоритетная часть маркетинга, в 13 раз чаще видят положительный ROI, также контент-маркетинг позволяет получить в 3 раза больше лидов, чем платная реклама. Контент имеет измеряемую ценность для бизнеса, и чтобы быть максимально эффективным, он должен выглядеть хорошо (что и подтверждают наши данные).

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

Хороший дизайн контента может влиять на бизнес

75%

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

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

В этом гиде — краткий обзор рекомендаций со ссылками на материалы, которые помогут углубиться в конкретные области дизайна. Если вы не уверены, как правильно работать над дизайном контента — мы бесплатно проведем его анализ и дадим рекомендации, основанные на опыте Setka. В результате вы получите список советов и полезных ресурсов, которые помогут целенаправленно влиять на опыт читателей и значительно улучшить ваши KPI.

Скачайте «Гид» в формате pdf: держите под рукой или помогите коллегам разобраться, в чем ценность дизайна контента

Не знаете, как улучшить KPI с помощью дизайна контента?

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

1.

Сделайте контент

легким для восприятия

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

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

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

— Nielsen Norman Group


Бизнес-показатели

растут:

Глубина прокрутки

Время на странице

Конверсия


Снижаются:

Показатель отказов

Обращения в службу поддержки


Структура

Только 16% из тех людей, которые попадут на вашу страницу, будут внимательно читать каждое слово. Остальные 79% посетителей бегло сканируют каждую новую страницу, чтобы найти что-то интересное.

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

С другой стороны, плохо структурированный контент, как правило, разочаровывает пользователей: 38% признают, что прекратят чтение, если у статьи непривлекательная, неряшливая верстка.

Больше способов улучшить структуру контента — в электронной книге «Создание эффективной верстки» (на англ.)

Скачать eBook

Как улучшить структуру


1.

Создавайте предсказуемую верстку

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

2.

Разбивайте контент на абзацы

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

3.

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

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



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

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

Как улучшить навигацию по контенту


1.

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

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

2.

Сделайте каждый бит текста доступным для поиска

Читатели часто используют команду cmd + F для поиска по ключевым словам на странице. Убедитесь, что весь текст, включая цитаты и таблицы, доступен для поиска и не содержит изображения.

3.

Дайте больше информации там, где это уместно

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


Хотите больше внимания к вашему контенту?

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

2.

Сделайте контент

удобным для чтения

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

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

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


Бизнес-показатели

растут:

Глубина прокрутки

Позитивное восприятие бренда


Снижаются:

Показатель отказов

Недовольство пользователей


Типографика

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

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


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

Как улучшить типографику


1.

Сделайте шрифт достаточно крупным для удобного чтения с любого экрана

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

2.

Оставляйте в тексте пространство для воздуха

Обращайте внимание на ширину основной колонки и межстрочный интервал. Эксперты советуют использовать ширину строки примерно в 66 символов, а расстояние между строками делать в 1,618 раз больше, чем кегль шрифта.

3.

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

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


Мобильная верстка

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

С точки зрения пользователя нет ничего хуже, чем чтение крошечного текста на мобильном устройстве (тот масштабируется по правилам десктопа), чем абзацы, которые выходят за пределы экрана, или чем поп-ап окна, которые появляются по ходу чтения или просто не работают. Плохой мобильный дизайн — главная причина, по которой 40% пользователей уходят с вашего сайта на сайт конкурента, а 57% пользователей считают, что та же причина помешает им рекомендовать компанию.

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

Как оптимизировать контент под мобильные устройства


1.

Сохраняйте соразмерность шрифтов

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

2.

Убедитесь, что мультимедиа-элементы работают

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

3.

Не забывайте о скорости

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


Хотите, чтобы читатели дольше оставались на ваших материалах?

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

3.

Сделайте контент

вовлекающим

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

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

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

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


Бизнес-показатели

Растут:

Количество кликов

Глубина прокрутки

Количество лидов

Время на сайте

Количество «расшаров»


Снижаются:

Отток пользователей

Показатель отказов


Визуальные элементы и анимации

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

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

Все это положительно влияет на вовлеченность: статьи, содержащие релевантные изображения, получают на 94% больше просмотров, чем не имеющие таковых, а материалы, в которых через каждые 75-100 слов используют визуальные акценты, получают в два раза больше «расшаров» в социальных сетях. Анимация и интерактивные элементы помогают привлекать внимание или предоставляют читателю больше информации.

Как использовать визуальные элементы


1.

Будьте избирательными со стоковыми картинками

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

2.

Придумайте собственный подход к визуальным элементам

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

3.

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

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


CTA-элементы

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

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

Как использовать CTA


1.

Расположите их там, где вероятность взаимодействия выше

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

2.

Убедитесь, что они не теряются на фоне другой информации

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

3.

Не забывайте о мобильных устройствах

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


У нашей команды много идей, как ваш контент может привлечь больше клиентов

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

4.

Сделайте контент

узнаваемым

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

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


Бизнес-показатели

растут:

Узнаваемость бренда

Индекс NPS

Переходы на сайт

Выручка


Снижается:

Беспокойство, что конкуренты обойдут вас с контентом


Брендированный контент

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

Брендированные элементы должны использоваться в любых процессах коммуникации, особенно — в контент-маркетинге. Для многих пользователей контент — первый контакт с вашей компанией. Если вы, как и 91% B2B-маркетологов, используете посты и статьи для повышения узнаваемости бренда, можете быть уверены, что вашу компанию заметят. Даже если пользователи читают ваш блог давно, они должны чувствовать себя комфортно, зная, что контент исходит от бренда, которому они доверяют.

Как использовать элементы бренда в контенте


1.

Создайте дизайн-шаблоны на основе вашего брендбука

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

2.

Используйте единый стиль для изображений

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

3.

Не забывайте про детали

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


Консистентность

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

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

Как обеспечить консистентность дизайна


1.

Создайте стайлгайд для контента

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

2.

Используйте шаблоны

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


Остались вопросы о том, как сделать бренд заметным с помощью контента?

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