Как правильно оформить статью на сайте, чтобы ее читали до конца

Исследование «Как люди читают в интернете» от Nielsen Norman Group доказывает, что пользователи изучают сайт хаотично. Они сканируют страницу по Z-траектории, цепляются взглядом за яркие акценты и иногда внимательно прочитывают только ту часть контента, которая их визуально заинтересует.
Поэтому статью, какой бы экспертной и полезной она ни была, важно правильно оформить. Рассказываем о правилах и приемах оформления текста на сайте.

Основные принципы при оформлении статей на сайте

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

Понятная структура статьи

Не размещайте на сайте «простыню» текста – ее содержание трудно воспринимать. Постарайтесь структурировать материал:

• выделяйте смысловые блоки, используя заголовки и подзаголовки;
• делите текст на небольшие абзацы длиной до 3-4 предложений;
• соблюдайте интервалы между абзацами;
• используйте маркированные или нумерованные списки, чтобы оформить алгоритмы, перечисления фактов, рецепты;
• важную информацию выделяйте полужирным или жирным шрифтом;
• добавляйте изображения (подходящие по смыслу фотографии и картинки, при описании алгоритмов – скриншоты).

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

Иллюстрации

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

Иллюстрации к статьям в Манго Daily

Оформление элементов навигации

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

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

Хорошо продуманные элементы навигации повысят уровень юзабилити ресурса и лояльность посетителей.

Пример кликабельного оглавления

Превью

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

Пример превью в нашем блоге

Адаптивность

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

Как привлечь внимание пользователя к информации в статье

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

1. Отдельные блоки и врезки. Визуально выделяйте важную или интересную информацию с помощью рамок или сплошной заливки. Еще такой прием подойдет для рекламных сообщений или специальных предложений.
   Помните, что блоки должны сочетаться между собой, не нарушая общую композицию и дизайн сайта. Выбирайте цвета, которые не вызовут чувство дисбаланса. Чтобы облегчить себе задачу, воспользуйтесь сервисом ColorScheme.
   
   Еще один способ выделить фрагмент текста – использовать жирный или полужирный шрифт и более крупный кегль. Например, как это делают в журнале «Нож»:
   
2. Рейтинги, комментарии и количество прочтений. Когда пользователь видит эти элементы, в его сознании срабатывает триггер социального доказательства. Он понимает, что статья вызывает интерес у аудитории, а значит, ее стоит прочитать. Размещайте рейтинг, счетчик комментариев и прочтений под заголовком статьи или в превью.
   
3. Примечания. Выносите на поля справа от текста дополнительный материал, который поясняет данный фрагмент. Это могут быть комментарии эксперта, сведения об авторе статьи, ссылки на нормативные документы. Примечания позволят удержать интерес лояльно аудитории и побудить ее остаться на сайте и перейти на другие разделы.
   

   Глоссарий Бизнес Секретов – пример оформления примечаний

4. Таблицы. Используйте этот прием, чтобы упростить подачу информации. Например:
   • кратко описать характеристики продукции – размер, вес, функции;
   • сопоставить схожие явления, предметы, методы;
   • показать отличия методов работы, их результаты.

   Таблицы часто используют при оформлении карточек товаров и обзорных статьях.

   

   На сайте Экспертцен с помощью таблиц оформляют рейтинги моделей техники

5. Списки. Маркированные и нумерованные списки помогают структурировать материал. Например, оформить подборку товаров, продемонстрировать последовательность действий, перечислить ингредиенты.
   
6. Перелинковка. Обязательно оставляйте в тексте ссылки на другие статьи. Так вы увеличите время, которое посетитель проведет на сайте, и повысите его лояльность к вашему ресурсу.
   
7. Спойлеры. Это графические элементы, за которыми скрывается часть текста. Обычно их используют в блоке «Вопрос-Ответ» (F. A. Q.). Информация открывается тогда, когда посетитель наведет стрелку на спойлер или нажмет на него.
   
8. Эмодзи. Используйте смайлики, чтобы добавить тексту живости и эмоциональности. Но не злоупотребляйте ими, чтобы не вызвать раздражение у читателя.
   

   Пример использования эмодзи в тексте – блог СкайПро

Коротко о главном

• Структурируйте текст: выделяйте заголовки и подзаголовки, соблюдайте интервалы между абзацами, а важную информацию выделяйте полужирным или жирным шрифтом.
• Алгоритмы, рецепты, перечисления фактов, характеристики продукта оформляйте в виде таблицы, маркированного или нумерованного списка.
• Разбавляйте текст иллюстрациями: скриншотами, рисунками, фотографиями.
• Продумывайте навигацию по статье и другим разделами блога: делайте перелинковку, добавляйте примечания, фиксируйте шапку сайта с кнопками СТА.
• Оформляйте превью статьи, чтобы привлечь внимание читателя и заинтересовать его. Для этого используйте яркую обложку и интригующий лид.
• Заранее позаботьтесь о том, чтобы текст оставался читабельным при просмотре на разных устройствах: компьютере, планшете или смартфоне.
• Чтобы сделать текст привлекательным для читателя, добавляйте в него отдельные блоки и врезки, рейтинги, комментарии и прочтения, спойлеры, эмодзи, примечания.

Маркетинг

Читайте также:

Ретаргетинг в Яндекс.Директе: подробное руководство по настройке

Ретаргетинг в Яндекс.Директе: подробное руководство по настройке