Нет времени читать?
Отправить статью на почту

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

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

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

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

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

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

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

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

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

Иллюстрации

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

Красиво оформленные иллюстрации у статей

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

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

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

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

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

Оформление оглавления в статье

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

Превью

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

Оформление превью статей

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

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

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

Виджеты
Виджеты Calltouch
Увеличьте конверсию сайта на 30%
Подробнее

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

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

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

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

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

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

    Красивое оформление статей с помощью таблиц

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

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

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

Сквозная аналитика
Оценивайте эффективность всех рекламных кампаний в одном окне от клика до ROI
Вкладывайте в ту рекламу, которая приводит клиентов
Подробнее

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

  • Структурируйте текст: выделяйте заголовки и подзаголовки, соблюдайте интервалы между абзацами, а важную информацию выделяйте полужирным или жирным шрифтом.
  • Алгоритмы, рецепты, перечисления фактов, характеристики продукта оформляйте в виде таблицы, маркированного или нумерованного списка.
  • Разбавляйте текст иллюстрациями: скриншотами, рисунками, фотографиями.
  • Продумывайте навигацию по статье и другим разделами блога: делайте перелинковку, добавляйте примечания, фиксируйте шапку сайта с кнопками СТА.
  • Оформляйте превью статьи, чтобы привлечь внимание читателя и заинтересовать его. Для этого используйте яркую обложку и интригующий лид.
  • Заранее позаботьтесь о том, чтобы текст оставался читабельным при просмотре на разных устройствах: компьютере, планшете или смартфоне.
  • Чтобы сделать текст привлекательным для читателя, добавляйте в него отдельные блоки и врезки, рейтинги, комментарии и прочтения, спойлеры, эмодзи, примечания.
Автор блога Calltouch
Нет времени читать?
Оцените
Поделитесь с друзьями
Лучшие маркетинговые практики — каждый месяц в дайджесте Calltouch
Подписывайтесь сейчас и получите 13 чек-листов маркетолога
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных и получение рекламной информации о продуктах, услугах посредством звонков и рассылок по предоставленным каналам связи.
У вас интересный материал?
Опубликуйте статью в нашем блоге
Опубликовать статью
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике использования файлов cookie.
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить