Схемы, иконки и инфографика вместо стен текста

Страница услуги на девять тысяч знаков сплошного текста. Всё написано правильно, всё по делу, автор старался. Открываешь карту прокрутки в Яндекс.Метрике — до середины доходит меньше трети посетителей, до конца единицы. Форма стоит внизу. Обращений почти нет.

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

Разберём, чем и как заменять стены текста, чтобы содержание доходило до читателя, а не оставалось на странице для поисковых систем.

Почему сплошной текст не читают

Дело не в лени и не в клиповом мышлении.

Экран телефона узкий. Абзац из шести строк на компьютере превращается в двенадцать-пятнадцать строк на телефоне. Визуально это стена.

Чтение с экрана утомляет быстрее. Люди читают с экрана иначе, чем с бумаги: сканируют, цепляются за выделенные фрагменты, пропускают середину.

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

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

Отвлечения. Читают в дороге, в очереди, между делами. Прервался — и потерял место.

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

Что чем заменять

Разберём типичные куски текста и подходящие им форматы.

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

Сравнение вариантов — таблица. Три варианта комплектации, два способа доставки, разные тарифы. Строки — параметры, столбцы — варианты. Читается за секунды, а текстом сравнение просто не работает.

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

Цифры о компании — блок с крупными числами. Год начала работы, число объектов, площадь производства, число специалистов. Четыре числа с подписями воспринимаются лучше, чем абзац.

Устройство изделия — иллюстрация с подписями. Разрез окна, схема вентиляции, состав пирога кровли. Одна картинка с выносками заменяет страницу описания.

География работы — карта. Схема районов и зон выезда понятнее списка из тридцати названий.

Результат работы — фотографии «до и после». В ремонте, отделке, красоте, реставрации это самый убедительный формат.

Расчёт стоимости — калькулятор. Вместо описания того, из чего складывается цена, дайте человеку посчитать.

Ответы на вопросы — раскрывающиеся блоки. Вопрос виден, ответ раскрывается по нажатию. Экономит место и позволяет быстро найти нужное.

Сложный процесс — короткое видео. Тридцать-шестьдесят секунд с показом работы. Не заменяет текст, но снимает недоверие.

Правила хорошей схемы

Схема — не украшение, у неё есть требования.

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

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

Подписи короткие. Два-четыре слова. Длинные пояснения выносите в текст под схемой.

Направление чтения слева направо или сверху вниз. Не по кругу и не по диагонали.

Цвета осмысленные. Один основной цвет и один акцентный. Радуга из восьми цветов не помогает, а мешает.

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

Работает на телефоне. Широкая горизонтальная схема на узком экране превращается в нечитаемую полоску. Для мобильной версии либо перестраивайте её в вертикальную, либо давайте возможность увеличить.

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

Иконки: когда помогают, когда мешают

Иконки — самый злоупотребляемый элемент.

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

Помогают в списках преимуществ, если рядом с иконкой стоит конкретика, а не штамп.

Мешают, когда абстрактны. Иконка «качество» в виде щита не сообщает ничего.

Мешают, когда их слишком много: страница превращается в набор картинок.

Мешают, когда разного стиля: часть контурные, часть цветные, часть из разных наборов. Это сразу видно и портит впечатление.

Правило: иконка должна экономить время, а не занимать место. Если её убрать и ничего не изменится — уберите.

Таблицы: как сделать читаемыми

Таблица — лучший формат для сравнения и худший для телефона, если сделана неправильно.

Не больше четырёх-пяти столбцов. Иначе на мобильном не поместится.

Первый столбец — параметр, остальные — варианты.

Цифры выравнивать по правому краю, чтобы разряды совпадали.

Единицы измерения в заголовке столбца, а не в каждой ячейке.

Выделять строку с итогом или рекомендуемым вариантом.

На мобильном перестраивать в карточки. Каждый вариант — отдельный блок со списком параметров. Это надёжнее, чем горизонтальная прокрутка.

Не вставлять таблицу картинкой. Она не масштабируется, не читается поиском и не копируется.

Чего делать не надо

Заменять весь текст картинками. Текст нужен: он объясняет, отвечает на вопросы и является основой для поисковых систем и генеративных ответов. Речь о балансе, а не о замене.

Ставить схему вместо цифр. Красивый круговой рисунок без чисел не сообщает ничего.

Использовать стоковую инфографику. Готовые картинки с абстрактными графиками узнаются и снижают доверие.

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

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

Забывать про описание изображения. Каждая картинка должна иметь текстовое описание: это и доступность, и понимание содержания поисковыми системами.

Как это связано с продвижением «3 в 1»

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

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

Яндекс.Справочник. Карточка в Яндекс Бизнесе — по сути витрина визуального содержания. Фотографии работ, интерьера, продукции, команды влияют на выбор напрямую. Хорошо работает, когда изображения на сайте и в карточке из одного набора: человек видит одно и то же и убеждается, что попал туда же.

2ГИС. Здесь просмотр почти полностью мобильный и очень быстрый. Фотографии решают больше, чем описание. Схемы проезда и снимки входа снимают часть звонков «как вас найти».

Общая мысль: визуальные материалы, сделанные один раз качественно, используются во всех трёх точках. Съёмка объектов, схема этапов работы, фотографии команды — это единый набор, который работает и на сайте, и в карточках, и в публикациях.

Где взять визуальные материалы

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

Фотографии работ. Самый ценный и самый доступный материал. Нужен только телефон с приличной камерой и правило: снимать каждый объект до начала работ и после сдачи. Через полгода накопится портфолио, которого нет у конкурентов.

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

Схемы этапов. Рисуются в любом простом редакторе за час. Главное — не оформление, а точность: правильные названия этапов и реальные сроки.

Таблицы. Собираются в обычной таблице и переносятся на сайт. Никаких дизайнерских навыков не требуется.

Блоки с цифрами. Верстаются один раз в шаблоне сайта, дальше цифры меняет сотрудник.

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

Короткие видео. Снимаются на телефон, монтируются простыми средствами. Тридцать секунд показа работы ценнее трёхминутного ролика с музыкой.

Что действительно стоит заказывать профессионалам: съёмку основных объектов раз в год, набор иконок в едином стиле и одну-две ключевые иллюстрации. Всё остальное делается внутри компании при наличии правила и ответственного.

Как сохранить единый вид

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

Заведите правила оформления. Какие размеры изображений, какое соотношение сторон, какая палитра, какой набор иконок. Одна страница текста в регламенте.

Держите готовые заготовки. Шаблон схемы этапов, шаблон таблицы сравнения, шаблон карточки объекта. Сотрудник заполняет, а не изобретает.

Снимайте однотипно. Один ракурс, одно освещение, одинаковое кадрирование. Разнобой в фотографиях заметнее, чем их среднее качество.

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

Пересматривайте раз в год. Старые схемы устаревают, цифры меняются, фотографии стареют.

Как понять, что подача не работает

Не нужно гадать — есть измеримые признаки.

Карта прокрутки. Показывает, до какой глубины долистывают. Резкое падение на середине — признак стены текста.

Время на странице. Слишком маленькое при большом объёме текста означает, что не читают.

Карта кликов. Показывает, нажимают ли на раскрывающиеся блоки, схемы, элементы.

Записи визитов. Видно, как человек проматывает страницу, где останавливается, где сдаётся.

Вопросы менеджерам. Если клиенты постоянно спрашивают то, что на странице написано, значит, они этого не нашли.

Доля обращений со страницы. Главный показатель. Всё остальное — вспомогательное.

Что делать по шагам

1. Откройте главную страницу услуги на телефоне и посмотрите на неё глазами клиента.
2. Найдите самые длинные куски сплошного текста.
3. Определите, что из них — последовательность, сравнение, перечисление, устройство.
4. Замените последовательности схемой этапов со сроками.
5. Замените сравнения таблицей, перестраивающейся в карточки на телефоне.
6. Разбейте перечисления на списки.
7. Вынесите цифры о компании в отдельный блок.
8. Добавьте иллюстрацию устройства изделия с подписями, если это применимо.
9. Соберите фотографии выполненных работ и подпишите их.
10. Продублируйте текстом всё, что показано на схемах и картинках.
11. Сожмите изображения и добавьте описания.
12. Приведите иконки к единому стилю и уберите абстрактные.
13. Проверьте, как всё выглядит на узком экране.
14. Используйте тот же визуальный набор в карточках Яндекс Бизнеса и 2ГИС.
15. Через месяц сравните карту прокрутки и долю обращений со страницы.

Итог

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

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

Проверить результат просто: посмотрите карту прокрутки до и после. Если люди стали доходить до конца страницы и до формы, работа сделана верно.

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