№1 по увеличению конверсии в России

Как с помощью форматирования текста повысить конверсию

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

  • Правильное форматирование текста повышает доверие;
  • Правильно оформленный текста мотивирует к действию;
  • Шрифт влияет на чувства.

а) Правильное форматирование текста повышает доверие
Мы не настолько рациональны, как нам хотелось бы думать. Один и тот же текст мы можем воспринимать по разному. В психологии это явление называется когнитивными искажениями. Поэтому, форматирование текста в целом и выбор шрифта в частности способны повлиять на конверсию. Приведу пример: во время исследования в университете Мичигана, студентам раздали одинаковое задание и попросили оценить сложность его выполнения. Одна группа получила задание написанное простым и понятным шрифтом Arial. Другая группа получила задания написанные сложным шрифтом Mistral, имитирующий рукописную запись.
Шрифт Arial
Шрифт Mistral
В результате, группа получившая задание написанное трудно-читаемым шрифтом Mistral предположила, что выполнение упражнения займет на 83% больше времени, чем группа, которая получила задание написанное легко-читаемым шрифтом Arial. Более того, группа с заданием написанным трудно-читаемым шрифтом Mistral, также считала, что задание потребует больше навыков, и респонденты были меньше расположена к его выполнению. Вывод: если нам легче прочитать текст и понять о чём он, то мы с большей вероятностью сочтем это простым и заслуживающим доверия. А там где доверие - там и конверсия.

б) Правильно оформленный текста мотивирует к действию
В рамках исследования в Йельской школе менеджмента участников попросили прочитать одну и ту же рекламную брошюру с описанием характеристик телефона. Первой группе досталась брошюра легко-читаемым шрифтом (Times New Roman курсив), а второй группе досталась брошюра с трудно-читаемым шрифтом (Times New Roman курсив с отвлекающей тенью).
Шрифт Times New Roman курсив (слева) и шрифт Times New Roman курсив с отвлекающей тенью (справа)
Участников спросили, купят ли они телефон сразу или им нужно больше времени, чтобы принять решение. Из первой группы с легко-читаемым шрифтом, лишь 17% заявили о том, что им нужно больше времени на принятие решения о покупке. А из второй группы с трудно-читаемым шрифтом 41% участников заявили о том, что им нужно больше времени на принятие решения о покупке. Другими словами, процент отказов одного и того же рекламного сообщения, но оформленного по разному была отличалась в 2,4 раза.

в) Шрифт влияет на чувства
В ходе эволюции, наш мозг сформировался так, чтобы реагировать на окружающую среду и помогать нам выживать. Поскольку написанный текст мы воспринимаем визуально, то и мозг реагирует на текст почти так же, как на остальной физический мир. То есть, когда мы видим текст, то быстро и неосознанно оцениваем визуально шрифт ещё до того, как поймём о чём этот текст. Сара Хиндман (Sarah Hyndman), дизайнер, которая исследует типографику и чувства, описывает несколько исследований, которые показывают физические ассоциации, которые люди связывают с шрифтами, в своей книге «Почему шрифты имеют значение» (Why fonts matter). В одном из исследований Хиндман дала сотне человек одинаковые конфеты (жевательные драже).
Жевательные драже
Рядом с конфетами была табличка с подписью «съешь меня» (eat me). Для первой группы людей, она показала шрифт слева, а второй группе людей шрифт справа.
2 варианта подписи "Съешь меня"
Люди из первой группы (подпись слева) оценили вкус драже на 17% слаще. А люди из второй группы (подпись справа) оценили те же самые конфеты как более кислые на 11%. Из этого опроса, Хиндман делает вывод, что плавный и без заострений шрифт слева отражает округлость самого драже, а также других круглых и мягких вещей, таких как подушки или облака. А шрифт с острыми углами справа, вызывает такие чувства, как: гнев и агрессия, словно обнаженные зубы хищника.

Как сделать так, чтобы текст был понятен, удобен и его читали до конца

  1. Объем текста

Ничто так не нагоняет тоску, как большое однородное полотно из слов на сайте. Старайтесь не использовать большие объемы текста на коммерческих сайтах, их никто не читает. Уберите всё лишнее, оставив только главное в лаконичной форме. Например, текст с описанием товара в интернет-магазине желательно делать длиной в 400-800 символов. Но даже в случае с небольшим текстом, разделяйте его на несколько абзацев с добавлением подзаголовков отражающих ключевую мысль или ключевое преимущество. Так читателю проще ориентироваться в тексте и появляется возможность не читать весь текст, а сразу перейти к интересующему абзацу.
Подзаголовки с описанием на сайте М.Видео

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

2. Длина строки текста

Длина строки (или ширина строки) может влиять на скорость и удобство чтения. Слишком длинные строки текста неудобно читать, так как глаза теряют следующую строку. И наоборот, слишком короткие строки - нагружают глаза, приходится часто переходить на новую строку, что быстро утомляет. Какая длина строки оптимальна? Согласно исследованию, длина строки не должна превышать 75 символов. Есть нюансы, например, количество символов может изменяться в зависимости от размера шрифта и межбуквенного расстояния (кернинга). Поэтому, длина строки от 50 до 75 символов будет оптимальной для удобного чтения.

3. Маркированные списки

Другой способ облегчить и ускорить восприятие текста - это использовать маркированные списки или буллеты (с английского bullet). Маркированный список - это тот список, в котором перед каждым новым абзацем добавляется небольшой маркер, обычно в виде закрашенного кружка. Так выделяются ключевые мысли или характеристики в тексте, позволяя взгляду быстро «скользить» в поисках необходимой информации. В описании товаров или услуг в интернете, где текста не много - гораздо заметнее использовать вместо буллетов иконки:
Иконки вместо буллетов (слева) более заметны, чем классический маркированный список (справа)

4. Таблицы

Если на сайте представлены сложные товары, которые обладают множеством различных характеристик, то стоит подумать о том, как облегчить подачу информации, потому что посетителям сайта бывает не просто знакомиться с большим объемом данных. Для этого лучше структурировать характеристики в виде таблицы, в которой информация разбита на группы связанные между собой в логическую цепочку.
Таблицы позволяют удобнее и быстрее считывать характеристики на сайте Евросети
Сравните, на сколько удобнее и быстрее знакомиться с информацией на примере выше. И на сколько сложнее и дольше изучать информацию на примере ниже. К тому же, таблицы разбитые на несколько столбцов расходуют меньше пространства на экране монитора, а значит посетителям придется меньше скроллить.
Отсутствие таблицы осложняет и замедляет считывание характеристик на сайте Зурмаркета
Считывание текста в таблицах станет ещё быстрее и удобнее, если чередовать разный цвет фона, например: белый и светло-серый. Это так называемые "полоски зебры», которые позволяют взгляду легко следовать вдоль горизонтальных полос и не сбиваться.
Пример таблицы с чередованием фона на сайте Корпорации Центр
И сравните это с текстом без полос на фоне:
Пример таблицы с однородным фоном на сайте Связного
А теперь представьте, что необходимо разместить таблицу больше и сложнее, в которой множество строк и столбцов. В таком случае, без полос разного цвета на фоне, глазам будет сложнее изучать информацию и "скользить" взглядом по строкам.
Пример большой таблицы на сайте ИКЕА
Очевидно, что читать текст с полосами на фоне гораздо удобнее и быстрее, чем без них. Но не всегда возможно вставить таблицу. Для таких случаев, есть другой способ облегчения навигации по тексту - это выделение фона цветом при наведении курсора мыши.
Пример подсветки фона при наведении курсора мыши на сайте Онлайн Трейда
В ходе многочисленных наблюдений, мы выявили интересную особенность: очень часто, пользователи сайтов читают вслед за курсором мыши, то есть помогают себе при чтении, наводя курсор на читаемые слова. Аналогично тому, как некоторые люди читают книги ведя пальцем по словам. Это значит, что в этот момент можно облегчить им задачу и подсветить интересующую полосу.

5. Размер шрифта

Среднее расстояние монитора от глаз: 50-60 см. Смартфоны же удалены от глаз, в среднем на расстояние: 30-40 см. При настройках экрана по умолчанию, шрифты размером менее 12 пикселей читать сложнее. А для людей со слабым зрением это может превратиться в пытку. Поэтому, текст должен быть читабелен без масштабирования. Оптимальный размер для шифта в вебе 14-18 px. Учтите, что разные шрифты могут иметь разную читабельность при одинаковом размере. Подробнее о выборе шрифтов и размеров можно ознакомиться в рекомендациях для разработчиков от Apple.
Крупный шрифт слева удобнее читать, чем мелкий шрифт справа. developer.apple.com
Важно: если вы выбрали для сайта размер шрифта 18 пикселей, то желательно придерживаться выбранного размера на всём сайте и не скакать от размера к размеру.

6. Контраст текста

Убедитесь, что существует хороший контраст между цветом шрифта и фоном, чтобы текст был разборчивым.
Высоко-контрастный текст слева комфортнее для глаз, чем низко-контрастный текст справа. developer.apple.com
Согласно ГОСТу Р 52872-2012, пункт 5.1.7.3: текст должен иметь коэффициент контрастности не менее 4,5:1. Для того, чтобы узнать какая контрастность у текста, можно воспользоваться плагином (расширением) "Contrast Ratio Checker" для Google Chrome.
Низкий коэффициент контрастности 2.04:1 на сайте ultrasport.ru
Высокий коэффициент контрастности 13.77:1 на сайте sportmaster.ru

7. Интервалы в тексте

Улучшить удобочитаемость можно также за счет увеличения интерлиньяж (междустрочный интервал) и кернинга (межбуквенный интервал). Это добавит «воздуха» тексту и он станет комфортнее для чтения.
Увеличенные интервалы в тексте слева удобнее для чтения, чем сокращенные интервалы справа. developer.apple.com

8. Цифры и единицы измерения

Цифры желательно разделять разрядами, например: 1 000, 10 000, 100 000 и так далее. Это позволяет быстрее и удобнее считывать цифры на сайте. Не нужно вглядываться и отсчитывать количество цифр. Данная рекомендация применима не только к цифрам отображающим характеристики, но и к любым другим цифрам: цены, телефоны, номера банковских карт и другие.
Цифры разделенные по разрядам слева удобнее воспринимаются глазами
Рядом с каждой цифрой желательно указывать единицу измерения, например: миллиметры, граммы, минуты, рубли, миллионы, пиксели, проценты и так далее. Это позволит снять часть вопросов, например: «Что это за цифра? Что она означает? В чем измеряется?» и тому подобные. Пользователям не придется каждый раз бегать взглядом по странице в поиске ответа, что ускорит взаимодействие с сайтом.
Указание единиц измерения позволяет снять часть вопросов и ускорить чтение

9. Подсказки в тексте

Пользователи обращаются к тексту на сайте для того, чтобы получить ответы на свои вопросы. Когда в тексте встречаются сложные термины или незнакомые слова - это затрудняет получение ответов. Поэтому, желательно пояснять сложные термины. Например, указав иконку вопроса рядом со словом.
Подсказки на сайте Мегафона
***
В данной статье рассмотрена лишь 9 точек роста конверсии. Если вы хотите увеличить конверсию вашего сайта по 524 параметрам, узнайте подробности в разделе Аудит сайта
Автор Эдуард Файзуллин. Опубликовано 3 мая 2019 года.
Подробнее про рост конверсии в книге: "Конверсия на стероидах"
    Конверсия на стероидах, Эдуард Файзуллин
    • Навигация на сайте;
    • Главная страница сайта;
    • Сервисные функции;
    • Каталог товаров;
    • Страница товара;
    • Корзина;
    • Оформление заказа;
    • Цена и оплата;
    • Технические параметры.
    200 точек роста, 130 страниц, детально рассмотрены:
      Скачать книгу бесплатно
      Пожалуйста, оставьте свой e-mail и мы пришлём вам ссылку для скачивания книги
      + 1 раз в неделю мы рассылаем свежие статьи про увеличение конверсии сайтов
      Отписаться можно в любое время, в 1 клик
      Оставляя свой e-mail, вы принимаете условия обработки персональных данных
      Другие статьи по теме
      Больше статей о повышении конверсии в разделе Статьи