5 ошибок верстки материала, из-за которых уходят пользователи

Мнение, что количество просмотров статьи равно количеству ее прочтений — неверное. Сто тысяч на счетчике материала не означают, что сто тысяч человек дочитали текст до конца.

По данным «Медиатора» в среднем всего 45% пользователей действительно читают материал.

Почему на материале с нормальным трафиком низкий процент доскролов? Возможны три причины:

• заголовок не соответствует содержанию;
• текст неинтересный или плохо написан;
• материал неудачно сверстан.

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

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

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

1. Несовпадение открывающей иллюстрации и изображения на превью

Первое, что видит посетитель после загрузки страницы — открывающая иллюстрация. И если она не соответствует картинке с превью, это вызывает замешательство.

Из-за разных картинок пользователь может не понять, что это тот же текст.

По данным «Медиатора» около 5% пользователей закрывают страницы на этом этапе.

Решение: следите, чтобы превью и открывающая иллюстрация были одинаковыми.

2. Слишком большая открывающая иллюстрация

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

Когда во весь экран появляется огромная открывающая иллюстрация, читатели не понимают, куда они попали, и уходят. Так поступают 10–15% пользователей.

Решение: проверить, как выглядит материал на стандартных мониторах (1366x768) и экранах мобильных устройств. Убедиться, что на всех устройствах видно и заголовок, и начало текста.

3. Монотонный текст

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

Длинная «простыня» материала, напротив — вызывает скуку и желание сбежать. Из-за монотонности текста уходят 30–50% аудитории.

Решение: разбить текст на небольшие абзацы и подзаголовки. Выделить главные мысли, оформить цитаты и выносы.

4. Полное отсутствие иллюстраций

Картинки — это первое, что замечает читатель на странице. Структурировать текст важно, но воспринимать материал без изображений — сложная задача.

Из-за этого со статей уходит до 30% пользователей.

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

5. Слишком большие изображения, галереи, видео в тексте

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

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

На одном таком блоке уходит до 30% аудитории.

Решение: проверить, виден ли текст до и после картинки на десктопе и мобильном. Длинные видео, интерактивные блоки, галереи перенести в конец материала.

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

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

Хотим сказать большое спасибо Эле Ковельских, которая очень помогла в создании этого материала.