Время чтения: 12 минут

Оформление текста на сайте: для копирайтера, дизайнера, заказчика

Как правильно оформить текст на сайте? Распространенные ошибки и практические рекомендации по их устранению.

Элементы сайта должны создавать синергетический эффект: усиливать эффективность друг друга и «работать» на достижение общего результата. Так, развитый функционал должен быть простым за счет дизайна, дизайн — упрощать восприятие текста, а текст — повышать конверсию. Последнее зависит не только от содержания текстового контента. Его оформление играет не менее важную роль. Каким бы ценным не было содержание текста, он не принесет пользы ни владельцу сайта, ни посетителям, если его не будут читать. А читать текст не будут, если он оформлен неграмотно.

Специфика текста для web

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

Как пользователь видит текст?

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

Пользователю неудобно читать с экрана. Даже при работе с качественным монитором глаза быстро устают. Поэтому при оформлении web-страницы используют шрифты разного размера, увеличивают межстрочные интервалы и интервалы между абзацами, окружают текст пустым пространством. Это «разгружает» глаза, упрощает чтение.

Как поисковая машина видит текст?

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

Что в итоге?

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

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

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

Текст должен быть удобным для чтения с монитора.

Ищем компромисс

Копирайтеру не дают покоя лавры Льва Толстого — витиеватые обороты и сложные предложения кажутся ему высшим проявлением писательского мастерства.

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

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

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

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

«Авторское» форматирование

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

Как решать проблему?

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

Лавры Толстого

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

Как решать проблему?

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

Есть прием «на одном дыхании». Прочитайте текст вслух. Предложение не читается за время одного выдоха? Попробуйте упростить его или разбить на два.

Разбивайте сложные предложения. Так они делаются намного проще для восприятия.

Избегайте сложных и витиеватых предложений в тексте.

Последовательно и по существу

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

Как решать проблему?

Предложите автору в ТЗ или брифе писать статью по заранее разработанному плану. Это хорошо работает на страницах стандартизированного формата: в описаниях схожих товаров или групп услуг. Автор может разработать такой план и сам. При этом важно следовать от общего к частному. Составьте список тезисов, которые должны быть в тексте. Определите их порядок, чтобы выстроить логическую цепочку. Раскройте тезисы, предложив пользователю подробную информацию.

Создание структуры

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

Как решать проблему?

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

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

Как избежать распространенных ошибок при оформлении текста?

Практические советы

1. Не увлекайтесь курсивом и полужирным выделением.

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

2. Полезно комбинировать элементы форматирования.

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

3. Правильно оформляйте списки и заголовки.

Такие ошибки распространены, и «кочуют» из авторского варианта статей в отредактированные материалы, а далее — на страницы сайтов. В конце заголовка допустимо ставить «?» или «!». Если вопросительный или восклицательный знак не нужны, точка не ставится.

Ненумерованные списки оформляют следующим образом:

  • в конце вводного оборота ставится двоеточие;
  • каждый пункт списка начинают с прописной буквы;
  • в конце каждого пункта списка ставят «;»;
  • последний пункт заканчивают «.».

Нумерованные списки оформляют по другим правилам.

  1. Вводный оборот — самостоятельное предложение, которое заканчивают «.».
  2. Каждый пункт списка начинают с заглавной буквы.
  3. В конце каждого пункта ставят «.».
  4. Каждый пункт списка — самостоятельное предложение или группа предложений.

Рекомендации для заказчика или владельца сайта

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

Если вы редактируете присланный на утверждение текст, придерживайтесь следующих рекомендаций:

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

Значимость каждого из этих пунктов лучше показать на примерах.

Пример 1: отражение всех правок. В текст для главной заказчик внес исправления. Три из них были отмечены, а «мелочи» вроде исправленных запятых заказчик решил не выделять. Копирайтер отредактировал материал по выделенным в нем правкам, и он был размещен на главной. В итоге в тексте оказалось несколько досадных ошибок: те самые «мелочи», запятые и орфограммы, которые заказчик исправил некорректно.

Пример 2: корректный тон в исправлениях. Исправленный текст возвращается от заказчика с пометками «Бред!», «Кто это писал?», «Тут все удалить», «Переписать». Почему «бред», зачем «удалить» и как «переписать» заказчик не потрудился объяснить. Копирайтер в итоге потерял интерес к проекту и, к тому же, редактировал текст вслепую. На выходе получилась шаблонная, неинформативная и бесполезная для посетителей сайта страница.

Пример 3. Заказчик не знает, как сделать правильно, а предложенный вариант ему не нравится. Ненумерованные списки в тексте он исправляет так, чтобы было «симпатичнее». В итоге они оформлены некорректно, и копирайтеру приходится повторно их редактировать.

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

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

Правильно оформленные тексты учитывают интересы всех сторон.

Форматирование текста для web-дизайнера

При оформлении текстового контента web-дизайнер соблюдает требования типографики, выдерживая конкретные для данной страницы отступы, межстрочные и межсимвольные интервалы и т.п. Для одной и той же страницы используют не более 2-3 шрифтов. Желательно, чтобы для основного текста страницы использовался только 1 шрифт. Цвет подбирают так, чтобы добиться оптимальной контрастности, снизить нагрузку на глаза при чтении. Заголовки оформляют тегами h1…h6 в зависимости от их уровня.

Для оформления ссылок используется стандартный синий цвет и подчеркивание. Желательно использовать стили для псевдокласса :visited. В этом случае уже посещенные пользователем страницы подсвечиваются другим цветом (обычно фиолетовым).

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

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

Оцените статью:
Понравилась 3
Не понравилась 0
Автор: Артём Шаманский / Создатель проекта

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

Нам интересно ваше мнение, напишите комментарий:

Нажимая на кнопку «Отправить», я даю согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности».

Обмен мнениями и отзывы о публикации
Подпишитесь на рассылку блог-оптимизатора.рф

Уже подписались 803 человек