Визуальное оформление текста: полезные рекомендации для владельцев интернет-магазинов

Каким бы содержательным ни был текст на страницах сайта или интернет-магазина, при некорректном оформлении он будет восприниматься значительно хуже, а может, и вовсе отпугнет посетителя. Organic Business Unit Director Екатерина Мезенцева рассказывает, как оформлять контент для разных типов страниц, как при помощи эстетически привлекательного контента улучшить впечатление посетителей об интернет-магазине, а также даст практические рекомендации по оптимизации интерфейса для привлечения клиентов и повышения конверсии. 

Структура текста

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

Использование подзаголовков обязательно для всех текстов. Для статей небольшого объема, предположим, на 3000 символов, обычно хватает подзаголовков уровня H2-H3. Для лонгридов допустимы и подзаголовки уровня H4-H6.

Заголовки должны:

• отражать текст, который будет идти за ними;

• привлекать внимание — либо своей содержательностью, либо интригой;

• выделяться визуально — более крупный шрифт (300% от основного для H1, 200% —для H2), начертание (полужирное, жирное или курсив), в зависимости от дизайна сайта иногда допустимо выделение цветом;

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

Также важна иерархичность заголовков. Это значит, что после заголовка уровня H2 не следует перескакивать, к примеру, на заголовок уровня H5. Если после заголовка H2 необходимо разграничить ряд более узких подтем, относящихся к этому заголовку, нужно использовать заголовки H3, которые в свою очередь могут делиться на подпункты под заголовками H4.

Заголовок уровня H1 должен использоваться только один раз — в названии текста.

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

Списки позволяют:

• визуально разгрузить текст от «полотен» перечислений;

• структурировать информацию;

• выделить самое важное для восприятия.

В текстах можно использовать маркированные и нумерованные списки.

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

Нумерованные списки могут включать от двух пунктов. Для маркированных минимальное количество элементов — три.

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

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

Не стоит заканчивать текст списком. Такое оформление оставляет ощущение недосказанности.

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

Пример громоздкого текста:

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

Пример текста с абзацами и предложениями оптимальной длины:

Максимальная длина строки для веб-ресурса — 90-95 символов. Такой размер позволяет пользователям быстро прочесть материал, не прокручивая страницу влево-вправо.

Иллюстрации

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

Иллюстрации в статье должны быть:

• оптимального размера (в среднем 1000х1000 пикселей);

• релевантными статье, в которой размещены;

• не содержащими надписей и водяных знаков;

• имеющими под картинкой комментарий-пояснение.

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

При поиске фотографий можно пользоваться как платными стоками, например, Shutterstock, так и бесплатными, допустим, Unsplash. 

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

Если в текст необходимо вставить инфографику или таблицу, подойдут сервисы Visme, Canva, Creately.

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

Оформленные в одном стиле статьи на сайте Semrush.

Также к некоторым статьям уместно прикреплять тематические видеоролики с YouTube или других хостингов.

Включение ссылок в текст

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

• выделение курсивом либо синим цветом;

• подчеркивание;

• преобразование курсора при наведении на ссылку;

• атрибут Title, благодаря которому пользователь видит всплывающую подсказку при наведении на ссылку.

Визуальное оформление ссылок в тексте.

Не следует вставлять в текст URL-адрес в первозданном виде. Лучше использовать анкор — релевантное слово (в идеале ключевой запрос), под которым будет спрятана ссылка.

Дизайн текста

Типографика текста — один из ключевых факторов, влияющих на восприятие.

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

Комфортный размер основного текста зависит от выбранного шрифта. Например, стандартный Google Roboto, согласно рекомендациям, не должен быть меньше 16 пунктов. Минимально допустимое значение — 12 пунктов для любого шрифта в основном тексте, для сносок — 10.

Пример недостаточно крупного и слишком строгого (для школы искусств) шрифта:

Максимально приемлемое количество шрифтов на один текст — три. Но лучше ограничиться одной шрифтовой парой. 

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

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

Размер межстрочного интервала рассчитывается в зависимости от размера основного шрифта — в соотношении 4/3. При шрифте 15 межстрочный интервал составит 20 единиц.

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

Цвет фона и шрифта на сайте должны контрастировать так, чтобы чтение не утомляло. Наилучший вариант — светлый фон и основной текст чёрного мягкого оттенка.

Подобрать наиболее гармоничное цветовое сочетание можно с помощью таких сервисов, как Colorscheme.ru, Palettegenerator.com и других.

Заключение

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

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