Как оформить статью для публикации на сайте

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

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

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

Сплошной текст воспринимается как фон — взгляд плавно скользит по нему и ни за что не цепляется. При плохом оформлении важная информация оказывается вне поля зрения читателя. Только 1 человек из 15 может обнаружить интересующие его сведения на черно-белой «простыне» текста. Остальные 14 не видят то, что им нужно, и возвращаются обратно в поиск, чтобы кликнуть по новой ссылке.

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

Даже сухой юридический текст можно оформить так, что его будет интересно читать

В тексте справа легче искать информацию за счет визуальных акцентов

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

11 способов оформить текст, чтобы лучше донести мысль и увеличить дочитываемость

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

Подзаголовки структурируют материал и улучшают юзабилити текста

Пользователь может легко выбрать, про что читать

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

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

Маркированные и нумерованные списки. Упорядоченные данные быстрее воспринимаются, их легче запомнить. Структурированный текст хорошо виден в основном массиве текста, выглядит более аккуратным и понятным. Согласно исследованию Якоба Нильсена, список на 47% улучшает читабельность текста.

По Якобу Нильсену для определения уровня читабельности оценивают:

  • Время, в течение которого пользователи получают всю необходимую им информацию

  • Количество ошибок, которые делают пользователи, отвечая на вопросы по тексту

  • Запоминаемость, определяющая, сколько фактов из текста читатели смогли запомнить

  • Время, которое понадобилось пользователям для рисования структуры веб-страницы

  • Субъективную удовлетворенность внешним видом и содержанием текста

Используйте списки для организации текстового контента

Список упрощает восприятие информации и улучшает запоминаемость

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

Полужирный шрифт хорошо выделяется в тексте

Выделение полужирным показывает, о чем идет речь в каждом абзаце

Смысловое выделение полужирным я использую в основном для важных моментов — например, ключевая мысль или выгода в массиве текста. Рекомендую выделять фрагменты от 2–3 слов до целого предложения (но короткого). Слишком большой фрагмент жирным затрудняет чтение, как и слишком частое его использование.
Изображения. Фотографии, рисунки, инфографика упрощают просмотр страницы. Статистика компании Skyword доказывает, что при добавлении картинки количество просмотров статьи увеличивается до 120%.

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

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

Инфографика в блоге Inmyroom переводит текст на визуальный язык для лучшего понимания рекомендаций

Цветной фон. Цветные элементы формируют эстетику страницы, моментально бросаются в глаза и уменьшают время поиска информации на 80%. Используйте яркую заливку для привлечения внимания к важным частям текста — тем, которые обязательно нужно прочитать. Инна Бурштейн в статье «Визуальная иерархия сайта» рекомендует остановиться на двух цветах: основном и дополнительном, предназначенном для расстановки акцентов.

Выделение цветом — отличный способ привлечь внимание к нужному фрагменту

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

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

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

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

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

Рамка делает текст более заметным

В рамке разъяснены термины, упомянутые выше

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

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

Сочетайте два способа для гарантированного захвата внимания

Втяжка и укрупненный текст для выделения важных мыслей на Лайфхакере

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

При сканировании текста взгляд обязательно остановится на врезке

Маркированный список вынесен во врезку — двойное воздействие на читателя

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

Выноска на полях подчеркивает ценность информации

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

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

Ошибки в оформлении статьи и как их исправить

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

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

Переизбыток выделенного текста приводит читателя в ступор

Разные визуальные элементы рассеивают внимание

Пусть на экране пользователя одновременно будет всего 1–2 акцента. Их достаточно, чтобы он и не заскучал, и точно знал, куда смотреть.

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

Какой пункт важный, а какой — второстепенный?

Глаза разбегаются: три подзаголовка — три шрифта

Начните оформление «с чистого листа» — задайте единый шрифт для всего текста. Для написания подзаголовков выберите более крупный шрифт из того же семейства, что и основной: с засечками, без засечек, брусковый, рукописный.

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

Иван Севостьянов, генеральный директор и владелец компании «ВебПроекты», в статье «Ошибки в текстах с точки зрения SEO» говорит о том, что поисковые системы на такие акценты реагируют санкциями.

Ключи «бесят» пользователей и поисковые системы

Выделенные ключевые фразы ни о чем не говорят читателю

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

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

В нумерованном списке пункты переставить нельзя, в маркированном — можно

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

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

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

Картинка ради картинки

Изображение, без которого можно обойтись

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

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

А делают часто наоборот: прочитали где-то, что все статьи надо иллюстрировать, и давай лепить портреты Дикаприо. Делать так, конечно, не надо.

Чек-лист проверки публикации на правильность оформления

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

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

  • Подзаголовки

  • Абзацы разной длины

  • Маркированные и нумерованные списки

  • Изображения

Дополнительные элементы оформления текста, предназначенные для акцентирования внимания на важных идеях, рекомендациях, терминах:

  • Выделение болдом и курсивом

  • Цветная подложка

  • Цветной марке

  • Рамка

  • Блок с укрупненным текстом

  • Втяжка

  • Врезка

  • Выноска на поля

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

Какие из этих визуальных средств применяете вы? Расскажите, есть ли у вас другие способы повысить читабельность текста за счет его оформления?