Маркетинг

сайт

контент

дизайн

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

7 апреля 2022

12 мин на чтение

447

сайт

контент

дизайн

Николай Большаков

Автор блога Calltouch

Содержание

Нет времени читать?

Отправить статью на почту

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

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

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

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

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

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

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

Иллюстрации

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

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

Элементы навигации

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

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

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

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

Превью

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

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

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

Пользователи читают статьи с разных устройств: компьютера, планшета, смартфона. По этой причине важно сделать текст адаптивным – гармоничным и читабельным как в десктопной, так и в мобильной версии.
Используйте виджеты Calltouch, чтобы увеличить конверсию сайта и оптимизировать работу колл-центра. Например, обратный звонок. Скрипт автоматически обрабатывает входящие заявки, оперативно связывает менеджера с клиентом и устанавливает источник обращения. Такой виджет удобен и пользователям, и операторам колл-центра.

Виджеты Calltouch

Для увеличения конверсии сайта и роста продаж

Повысьте конверсию сайта на 30%
Оптимизируйте работу колл-центра
Увеличьте лояльность клиентов
Подробная статистика по всем обращениям с привязкой к источнику

Узнать подробнее

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

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

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

Еще один способ выделить фрагмент текста – использовать жирный или полужирный шрифт и более крупный кегль. Например, как это делают в журнале «Нож»:
Рейтинги, комментарии и количество прочтений. Когда пользователь видит эти элементы, в его сознании срабатывает триггер социального доказательства. Он понимает, что статья вызывает интерес у аудитории, а значит, ее стоит прочитать. Размещайте рейтинг, счетчик комментариев и прочтений под заголовком статьи или в превью.
Примечания. Выносите на поля справа от текста дополнительный материал, который поясняет данный фрагмент. Это могут быть комментарии эксперта, сведения об авторе статьи, ссылки на нормативные документы. Примечания позволят удержать интерес лояльно аудитории и побудить ее остаться на сайте и перейти на другие разделы.
Глоссарий Бизнес Секретов – пример оформления примечаний
Таблицы. Используйте этот прием, чтобы упростить подачу информации. Например:
- кратко описать характеристики продукции – размер, вес, функции;
- сопоставить схожие явления, предметы, методы;
- показать отличия методов работы, их результаты.
Таблицы часто используют при оформлении карточек товаров и обзорных статьях.

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

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

Сквозная аналитика

от 990 рублей в месяц

Автоматически соберет данные с рекламных площадок, сервисов и CRM в 1 окне
Бесплатные интеграции c CRM и другими сервисами: более 50 готовых решений
Анализируйте воронку продаж от показов до кассы
Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды