Издание об интранете, корпоративном ТВ и диджитал-каналах внутренних коммуникаций

Как оформить контент в интранете, чтобы его читали, понимали и запоминали. Конспект доклада Романа Худоногова


Полная версия выступления Романа Худоногова на Ривелти.Конф 2020, 31 мин

Допустим, вы написали много полезных статей для коллег, сделали подборку лучших мероприятий и даже придумали нескучные кликабельные заголовки. Кажется, вы сделали всё, чтобы сотрудники прониклись корпоративной культурой. Но клик по заголовку — только первый шаг. Настоящий вызов в том, чтобы сотрудники действительно прочитали ваши материалы. Будем честны: за их внимание борются не только рабочие чаты, но и Фейсбук с Инстаграмом.

В 2019 году консалтинговая компания Nielsen Norman Group выпустила ежегодный отчёт Intranet Design Annual. Роман изучил все 700 страниц, извлёк самые красноречивые данные и сопроводил их собственным опытом в медиа. Его доклад должен помочь вам упростить взаимодействие читателя с контентом.

Контент читают не полностью

По статистике, 8 из 10 человек быстро пролистывают статью и читают в среднем только 28% слов. При этом они не сразу приступают к чтению. После перехода на страницу читатель первым делом решает, стоит ли вообще здесь оставаться.

Поведение читателя на странице

Взаимодействие с контентом можно разбить на три этапа:

  1. Оценка (Appraisal) — читатель пытается понять качество, важность и ценность информации. Меньше чем за секунду он определяет, нужна ли ему эта статья прямо сейчас.
  2. Сканирование (Scanning) — читатель скролит статью и решает, какую часть внимательно прочитать, какую бегло просмотреть, а какую проигнорировать.
  3. Чтение (Reading).

Структура помогает сделать работу за читателя

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

Вот как Роман советует структурировать контент.

Делите статью на главы и части, чтобы на этапе сканирования читатель быстро сообразил, чему посвящён текст.

Статья в блоге Гугла. Даже небольшая статья становится понятнее благодаря делению на части

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

Мнение эксперта в статье издания «Только спросить». В отдельном блоке также есть фотография и имя эксперта. Это привлекает ещё больше внимания

Добавьте содержание в начало страницы. Цель всё та же — читатель сможет быстро понять, о чём статья и есть ли в ней информация, за которой он пришёл. Это особенно актуально для объёмных статей.

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

Содержание статьи в блоге Shopify. Когда в статье столько разделов, ему точно нужно отдельное содержание

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

Выводы в статье Т—Ж. Если оформить выводы в виде пунктов, воспринимать их будет ещё легче

Типографика делает чтение удобным

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

В основном тексте ширину строки приравняйте к 35–95 символам, а межстрочное расстояние рассчитайте в соотношении 1,3 к размеру шрифта. Это поможет читателю не терять взглядом начало следующей строки.

Оптимальный размер шрифта — 16–20 px, количество строк в абзаце — 5–10, расстояние между абзацами — от двух межстрочных.

По тексту слева легко бегать глазами, текст справа придётся постоянно скролить

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

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

В тексте слева видно, где заголовок, а где подзаголовок. В тексте справа непонятно, где что

Изображения привлекают и удерживают внимание

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

Делайте классную большую обложку. Исследование Microsoft Research показало, что картинка или видео на обложке увеличивает время на странице примерно в два раза.

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

Как можно чаще разбавляйте картинками текст, чтобы дозировать когнитивную нагрузку, особенно в объёмной и сложной статье.

Сначала картинка, затем текст, потом снова картинки. Текст не успевает утомить читателя

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

Расположение элементов на экране имеет значение

На сканирование и удобство чтения также влияет лейаут или вёрстка страницы.

Если нужно разместить на одном экране несколько картинок — ставьте их в ряд. Это лучше, чем оформлять картинки в виде карусели, потому что тогда 97% внимания достанется первой картинке, а следующую почти никто не увидит.

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

В блоге Zappos перед глазами сразу все картинки

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

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

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

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

Блок с цифрами в статье Inc. Привлекает внимание не меньше картинки

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

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

Сайдбар в Журнале Маркета. Статья в сайдбаре уместна и на неё хочется кликнуть

Чек-лист

Чтобы вы понимали, помогает ли оформление вашего контента дочитывать до конца, Роман объединил все приёмы в одном чек-листе. Скачивайте и проверяйте себя:

  1. У статьи чёткая структура, основные смысловые блоки легко определить при быстром скролинге.
  2. Самое важное выделено или помещено в отдельный блок.
  3. В длинной статье есть содержание.
  4. В конце статьи есть заключение или выводы.
  5. Легко переносить взгляд в начало следующей строки: ширина основного текста 35–95 символов, межстрочное расстояние рассчитано в соотношении 1,3 к размеру шрифта.
  6. Текст контрастный, не мелкий и не слипается: размер шрифта 16–20 px, расстояние между абзацами от двух межстрочных, количество строк в абзаце 5–10.
  7. Шрифт заголовка отличается от шрифта подзаголовка и основного текста.
  8. У статьи классная большая обложка.
  9. Картинки в едином стиле.
  10. Визуальные элементы через каждые 75–100 символов.
  11. Есть картинки во всю ширину экрана.
  12. Одинаково важные элементы размещены в ряд, а не в виде карусели.
  13. Пояснение, которое можно пропустить, выделено врезкой.
  14. В основном тексте есть цифры и факты.
  15. В сайдбаре есть ссылки на релевантные статьи, призывы к действию, цитаты, цифры и факты.

Что ещё интересного? А вот


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

Спасибо, что подписались на нашу рассылку.

Статьи на тему
Вспоминаем основы: шесть статей о создании интранета
Вспоминаем основы: шесть статей о создании интранета
Собрали в одной подборке ответы на самые частые вопросы о внедрении и продвижении интранета
Кейс ПСБ: рассылка помогает сотрудникам пережить самоизоляцию
Кейс ПСБ: рассылка помогает сотрудникам пережить самоизоляцию
В ПСБ был обычный дайджест новостей, пока его не перевернули с ног на голову. А потом ещё раз, чтобы не оставить сотрудников один на один с коронавирусом. Получилось круто
Как побороться за Intranet and Digital Workplace Awards
Как побороться за Intranet and Digital Workplace Awards
Топ советов Елены Богдановой о том, как войти в мировой топ интранетов и диджитал воркплейсов
Кейс Газпром нефти: увеличили объём контента от сотрудников до 90%
Кейс Газпром нефти: увеличили объём контента от сотрудников до 90%
Газпром нефть запустила и продвинула «Мобильную ленту», которую наполняют сами сотрудники. А заодно выиграла премию Russian Intranet Awards 2020. Руководитель проекта Илья Фирсанов обо всём нам рассказал