Оформление текста на сайте

Желание пользователя изучить текст зависит от его оформления, поэтому помимо содержания важно работать и над этим аспектом. В этом материале мы разберем принципы, которые помогают улучшить конверсию, правила верстки и примеры хорошего оформления элементов. Главная сложность — вовлекать аудиторию, мотивировать прочитать статью до конца. Используя советы Askusers, вы сможете улучшить отображение контента и повысить его коммерческую эффективность. Так же для этих целей рекомендуем провести usability audit.

Почему красивое оформление текста важно?

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

http://www.spaceistheplace.ca

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

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

От внешнего вида зависит:

• восприятие контента;

• конверсия рекламных материалов;

• поведенческие метрики: время на сайте, процент отказов и т.д.;

• количество прочтений;

• социальные показатели: пользователи реже делятся плохо оформленными страницами.

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

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

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

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

• Скорректируйте размеры шрифтов, чтобы на мобильной версии не нужно было всматриваться в экран.

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

• Расположение вспомогательных и навигационных элементов можно менять в зависимости от устройства.

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

Примеры мобильной верстки — VC.ru и Insider

Читабельность

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

1. Используйте контрастные по отношению к фону шрифты.

2. Удобный для чтения размер — от 16 до 20 пикселей — его стоит использовать для большей части контента.

3. Междустрочный интервал высчитывается как 4/3: то есть если шрифт 18px, то хорошая высота строки — 24px.

4. Деление на абзацы: для удобства пользователей длина одного должна быть около 5-7 строк.

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

https://www.reconomyprogram.com/: текст сливается с фоном, разобрать написанное сложно

Единая структура

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

• подзаголовки;

• списки;

• названия;

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

• блоки-врезки.

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

https://www.maircare.com/blog/amount-laser-sessions

Простая навигация

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

• Стрелка, которая ведет на самый верх страницы, чтобы можно было моментально вернуться к началу.

• Быстрый переход к предыдущему или следующему разделу.

• Зафиксированное кликабельное содержание, которое помогает избежать долгого скроллинга.

Все эти принципы помогают сократить количество барьеров и мотивируют пользователей читать контент.

Правила верстки статей на сайте

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

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

• Иерархия заголовков и подзаголовков: чем ниже уровень, тем меньше шрифт.

• Архитектура и порядок должны соблюдаться на всех уровнях.

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

• Оптимальная длина строки — до 95 символов, большее количество знаков снижает скорость чтения.

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

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

Элементы оформления

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

Заголовки и подзаголовки

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

Обычно подзаголовки выделяются с помощью:

• размера шрифта;

• начертания: жирное или полужирное;

• цвета.

Заголовки и подзаголовки задают структуру, которую нужно показать визуально. Пример такой системы: тег H1 — 40px жирным шрифтом, H2 — 32px жирным, H3 — 24px полужирным — при основном размере в 16-20px.

https://journal.tinkoff.ru/news/move-to-germany/

Типографика

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

https://quoifaireauquebec.com/

Превью

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

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

https://mytorontocondo.com/news/

Анонс

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

https://climate.greenpeace.ru/pochemu-vulkany-ne-prichina-klimaticheskogo-krizisa/

Содержание, навигация

Если вы пишете только короткие статьи до 2-3 тысяч знаков, то оглавление — это необязательный элемент, потому что текст легко скролится до конца. Формат лонгридов требует кликабельного содержания. Если человек хочет прочитать только одну часть, но для этого нужно бесконечно крутить колесико мышки — это вызывает раздражение. В итоге вы теряете часть читателей и конверсий.

 https://journal.tinkoff.ru/list/best-advice-2022/

Статистика: рейтинг, лайки, просмотры

Статистика выполняет роль социальных маркеров. Логика работает так: «если этот материал прочитали тысячи людей, то и мне надо». Обычно это используется в СМИ и крупных блогах, но цифры могут быть полезны и на корпоративных сайтах.

https://journal.tinkoff.ru/zarubezhnyj-schet-i-problemy-v-rf/

Выделенные блоки

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

• отдельные тезисы;

• статистические данные;

• информацию, влияющую на принятие решение;

• рекламные призывы и т.д.

https://texterra.ru/blog/kejs-kak-raskrutit-blog-internet-magazina.html

Таблицы

Таблицы — хороший инструмент для структурирования информации. Вы можете использовать их для:

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

• Выбор: сравнение товаров, услуг, процессов лучше оформлять в рамках этой структуры.

• Сопоставлений: эффективные методы против неэффективных, до/после, ошибочные и корректные варианты — все это также удобно смотреть в таблице.

Списки

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

https://www.digitalocean.com/blog/digitalocean-acquires-snapshooter

Даже самые простые с точки зрения содержания тексты сложно воспринимать без графических вставок. Они выполняют следующие функции:

• Визуально разделяют блоки.

• Добавляют эмоций.

• Упрощают понимание материала.

• Дополняют тезисы.

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

https://ironandair.com/morgan-super-3/

Резюме

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