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

Игорь Бахарев

Каким бы содержательным ни был текст на страницах сайта или интернет-магазина, при некорректном оформлении он будет восприниматься значительно хуже, а может, и вовсе отпугнет посетителя. 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 и других.

Заключение

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

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



Материал по теме

Кейс: как продать устаревший товар на Wildberries

Материал по теме

С начала 2023 года закупка трафика в eСommerce подорожала на 26%, стоимость конверсии - на 33%: аналитика

Материал по теме

"Мегамаркет" представил Кешбоя, а WildBerries - "Градусник"

Подписаться на новости

Актуальное сейчас

Данные пользователей "Детского мира" и "Ярмарки Мастеров" уплыли в сеть

Профильные ТГ-каналы сообщают о масштабной утечке персональных данных 1,2 миллиона клиентов крупнейшей российской сети детских товаров "Детский мир". Под угрозу попали данные пользователей мобильных приложе...

"Бургер Кинг" подтвердил утечку данных клиентов

Аналитики даркнета обнаружили в открытом доступе персональные данные более 5,6 миллионов пользователей мобильного приложения сети ресторанов быстрого питания "Бургер Кинг". Утечка произошла в результ...

Что покупают россияне за рубежом: от книг до игрушек

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

ФНС и Минэкономразвития не могут договориться о статусе самозанятых на маркетплейсах

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

ВТБ готовится к запуску сервиса доставки продуктов

Банк ВТБ планирует расширить спектр своих услуг и запустить сервис доставки продуктов питания прямо через мобильное приложение. Об этом свидетельствует размещенная на hh.ru вакансия руководителя продукта для но...

"Рольф" запускает автомобильный маркетплейс и выходит в регионы

Российский автодилер "Рольф" объявил о новых амбициозных планах. Компания намерена запустить собственный автомобильный маркетплейс и активно расширяться в регионах России.  Новый онлайн-сервис позвол...

Согласие на обработку персональных данных

×

Физическое лицо, оставляя заявку на веб-сайте e-pepper.ru через форму «Обсудим ваш проект» и форму подписки на e-mail рассылку, действуя свободно, своей волей и в своем интересе, а также подтверждая свою дееспособность, предоставляет свое согласие на обработку персональных данных (далее — Согласие) Обществу с ограниченной ответственностью «АЭРОКОМ» (ООО «АЭРОКОМ») (ИНН 9705136776, info@aeroidea.ru, +7(495)120-12-38, +7 968 900-23-45), которому принадлежит веб-сайт https://e-pepper.ru и которое зарегистрировано по адресу 111024, г. Москва, вн.тер.г.муниципальный округ Лефортово, ул. Авиамоторная, д.50, стр.2, этаж 2, помещ.XI, комната 25, офис А79, на обработку своих персональных данных со следующими условиями:

  1. Данное Согласие дается на обработку персональных данных, как без использования средств автоматизации, так и с их использованием.
  2. Согласие дается на обработку следующих моих персональных данных: персональные данные, не относящиеся к специальной категории персональных данных или к биометрическим персональным данным: адрес электронной почты (e-mail); имя; сведения о месте работы; номер мобильного телефона.
  3. Цель обработки персональных данных: обсуждение возможного проекта.
  4. В ходе обработки с персональными данными будут совершены следующие действия: сбор; запись; систематизация; накопление; хранение; уточнение (обновление, изменение); извлечение; использование; передача (предоставление, доступ); блокирование; удаление; уничтожение.
  5. Третьи лица, обрабатывающие персональные данные по поручению ООО "Аэроком” для указанной в согласии цели:
    • АО "АМОЦРМ", 21205, г. Москва, вн.тер.г. Муниципальный Округ Можайский, Тер Сколково Инновационного Центра, б-р Большой, д. 42 стр. 1
    • ООО "Яндекс", 119021, г. Москва, ул. Льва Толстого, д. 16
  6. Персональные данные обрабатываются в течение 30 дней с момента отказа в дальнейшем обсуждении проекта или с момента принятия решения о заключении договора на проект в соответствии с ч. 4 ст. 21 152-ФЗ, смотря что произойдет раньше.
  7. Согласие может быть отозвано вами или вашим представителем путем направления ООО "Аэроком” письменного заявления или электронного заявления, подписанного согласно законодательству Российской Федерации в области электронной подписи, по адресу, указанному в начале Согласия.
  8. В случае отзыва вами или вашим представителем Согласия ООО "Аэроком” вправе продолжить обработку персональных данных без него при наличии оснований, указанных в пунктах 2 — 11 части 1 статьи 6, части 2 статьи 10 и части 2 статьи 11 Федерального закона № 152-ФЗ «О персональных данных» от 27.07.2006 г.
  9. Настоящее согласие действует все время до момента прекращения обработки персональных данных, указанных в п. 6 и п. 7 Согласия.