Оформляем текст так, чтобы его прочитали

Роман Худоногов, сооснователь и директор продукта в Setka Editor, поделился гайдом по оформлению текста. Из статьи вы узнаете, как сделать так, чтобы ваши тексты читали дольше 15 секунд.

Роман разобрал:

• Типографику.
• Структуру текста.
• Подбор иллюстраций.
• Верстку страниц.

В России 20 млн человек ежемесячно сталкиваются с проблемами чтения с экранов — это очень много, столько же живет в Москве и Московской области. Эти 20 млн каждую неделю посещают один сайт — «Википедию».

В статье на «Википедии» сказано, что длина строки может напрямую влиять на скорость чтения. Если строка слишком длинная, приходится долго возвращаться к началу следующей строки, если же короткая, глаза устают постоянно «скользить» по тексту. Удобно читать, когда в строку помещается от 35 до 95 символов. Первая строка в статье, если открыть на 15-дюймовом мониторе, вмещает в себя 205 символов.

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

В строку должно помещаться 35−95 символов, как мы уже знаем из «Википедии». Количество символов и размер шрифта определяют максимальную ширину строки. Удобный для чтения с экрана шрифт (кегль) — 18–19 пикселей.

Межстрочное расстояние (интерлиньяж) должно быть таким, чтобы глазу было понятно, куда «перепрыгивать». Интерлиньяж соотносится с кеглем в пропорции 3 к 1, то есть если у вас кегль 20, то межстрочное расстояние — 26.

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

Еще стоит учитывать количество строк в абзаце. Идеально — пять строк.

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

Шрифт должен быть контрастен к фону — иначе читать неудобно. Коэффициент контрастности рассчитывается исходя из разницы в яркости (интенсивности излучаемого света) между двумя смежными цветами на экране. Диапазон значений — от 1 до 21 (обычно указывается как 1:1 – 21:1). Чем больше значение, тем выше контраст. Существует множество инструментов для вычисления коэффициента контрастности двух смежных цветов, например этот калькулятор.

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

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

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

Исследователи из Nielsen Norman Group заявляют, что 8 из 10 человек быстро пролистывают материал и прочитывают в нем только 28% слов. Это называется скимминг: например, я достаю телефон и проскроливаю страницу, чтобы понять, стоит ее читать или нет.

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

Статья о Бали на сайте Here Magazine разбита на понятные главы: где остановиться, где поесть, как долететь. Если человек ни разу не был на Бали, он захочет прочитать статью полностью. Если был и собирается снова, его может заинтересовать конкретный раздел — например, где остановиться.

Здорово, когда получается делать акценты на главном. Например, в бренд-медиа «Только спросить» есть статья «Безопасна ли еда с пола?». В материале говорится и о правиле пяти секунд, и об инфекциях, но самое главное — это комментарий гастроэнтеролога:

Статья большая, но комментарий выделен, потому что это эксперт со специализацией и фото. Такой комментарий вызывает доверие, и тут в самый раз кнопка с call-to-action.

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

Аналогичный прием — дать заключение с выжимкой поста. У The Bell классно выстроен мостик от выводов к форме сбора имейлов.

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

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

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

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

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

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

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

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

Полотна текста читать не интересно. Статьи с визуальными элементами, вставленными через каждые 75−100 слов, получают вдвое больше лайков и шеров. Если в статье много картинок, ее легче читать. Картинки во всю ширину подойдут, если вы рассказываете о путешествиях или машинах. Где не обойтись одним текстом — поставьте большую картинку.

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

Иллюстрация списков. Список из 10 пунктов приятнее рассматривать, если есть визуальные якоря. Глаз быстрее зацепится за иллюстрацию, чем за текст: “Use tools in tandem” — две милые курочки.

Карточки. Если вы пишете гайд «Как приготовить салат “Цезарь”», вам не обойтись без разделов о посуде и продуктах. Эта статья будет длинной пошаговой инструкцией: «Возьмите курицу, порежьте салат». Используйте текст в карточке: его проще найти на странице, запомнить содержание и пойти готовить.

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

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

Call-to-action в сайдбаре помогает решить performance-задачи. Например, если вам нужно, чтобы читатель, который зашел на статью, скачал PDF-книгу. Так вы получите его email.

Цифры и факты в сайдбаре. Например, только 1% жителей РФ переболел острыми кишечными инфекциями. Выходит, есть с пола можно, потому что 1% — это мало. Наверно, этот факт можно поставить в текст, но там он потеряется, потому что читатели быстро скролят страницы.

Цифры и факты в основной колонке текста. Один из самых действенных приемов — это дать срез по цифрам в истории, которую вы рассказываете. Например, как это делают Inc. в статьях о конкретном бизнесе. Если раскидать эти цифры по абзацам, не факт, что кто-то их увидит. А так получается что-то вроде карточки: «Вау, эта компания похожа на мою по обороту — наверное, их советы будут полезны». Этот прием позволяет создать контекст.

• Ширина строки.
• Размер шрифта.
• Межстрочное расстояние.
• Расстояние между абзацами.
• Количество строк в абзаце.
• Контраст.

• Деление на главы.
• Акцент на важном.
• Содержание.
• Заключение.

• Большие обложки.
• Брендинг.
• Единый стиль фотографий.
• Медиаэлементы через каждые 75−100 слов.
• Картинки во всю ширину экрана.

• Несколько фотографий в одном экране.
• Ссылки на релевантные посты.
• Подходящие товары.
• Цифры и факты.

Посмотрите полное выступление Романа Худоногова — там еще много лайфхаков для грамотного оформления текста.

Конференция ContentSense по контенту для бизнеса — один из проектов команды ProductSense. Мы делаем расшифровки докладов с наших конференций и пишем по ним статьи.

Благодарим за подготовку статьи редактора Асю Челован.

#верстка #сайты