Перегруженный экран — самая частая проблема коммерческих страниц. Каждый отдел хочет добавить свой блок: маркетинг просит акцию, продажи — форму, юристы — примечание, руководитель — цитату о ценностях компании. В итоге страница получается длинной и подробной, но посетитель уходит, так и не поняв, чем вы занимаетесь и сколько это стоит. Ниже разбираем, сколько элементов выдерживает экран, как считать эту нагрузку и в каком порядке сокращать лишнее.
Почему количество блоков важнее их качества
Человек не читает страницу — он её просматривает. За первые несколько секунд он решает, есть ли здесь то, за чем он пришёл. Решение принимается по крупным признакам: заголовок, картинка, цена, кнопка. Если таких крупных признаков на экране пять или шесть, ни один не считывается: они конкурируют между собой и гасят друг друга.
Это хорошо видно на записях сессий. На странице с одним чётким предложением курсор идёт сверху вниз и останавливается на кнопке. На перегруженной странице курсор мечется, посетитель прокручивает вперёд-назад, а потом закрывает вкладку. Внешне обе страницы выглядят «нормально свёрстанными», разница только в количестве смысловых центров.
Отсюда простое правило, которым мы пользуемся в работе: у каждого экрана должен быть один смысловой центр и не больше двух вспомогательных элементов. Всё остальное — фон.
Практические ориентиры
Это не жёсткие нормы, а рабочие рамки. Мы отталкиваемся от них при проектировании и возвращаемся к ним, когда страница начинает разрастаться.
| Элемент страницы | Сколько элементов | Почему так |
|---|---|---|
| Первый экран | Заголовок, подзаголовок, одно действие, один аргумент | Задача экрана — подтвердить, что человек попал по адресу |
| Блок страницы | Одна мысль и до 4-6 пунктов | Больше шести пунктов перестают восприниматься как список |
| Меню верхнего уровня | До семи пунктов | Длинное меню превращается в стену ссылок |
| Форма первого контакта | 2-3 поля | Каждое лишнее поле — повод не заполнять |
| Экран мобильного | Один смысловой блок за раз | На маленьком экране соседние блоки не видны одновременно |
| Призывы к действию на странице | Один основной, повторённый по ходу прокрутки | Разные действия рядом заставляют выбирать |
Как посчитать нагрузку своей страницы
Мы делаем это в начале аудита и советуем повторить самостоятельно — упражнение занимает полчаса и обычно объясняет больше, чем отчёт по метрикам.
- Сделайте скриншот страницы целиком и распечатайте или откройте в уменьшенном масштабе, чтобы текст стал нечитаемым.
- Отметьте всё, что бросается в глаза: крупные заголовки, кнопки, цветные плашки, картинки с людьми.
- Посчитайте отметки в пределах одного экрана. Три и меньше — иерархия есть. Пять и больше — иерархии нет.
- Выпишите для каждого блока вопрос клиента, на который он отвечает. Формулировка должна быть от лица клиента: «сколько это стоит», «делали ли вы такое раньше», «что будет дальше».
- Блоки, для которых вопрос не формулируется, — кандидаты на удаление.
Как сокращать
Сокращение почти никогда не означает «выбросить содержимое». Чаще это перенос и объединение.
- Объединить дублирующие блоки. Три призыва к действию подряд — это один призыв, повторённый трижды. Оставляем один и повторяем его ниже по странице, а не втискиваем рядом.
- Свернуть редкое. Информация, нужная одному посетителю из двадцати, живёт в раскрывающемся блоке или на отдельной странице — не на первом экране.
- Перенести подробности глубже. Технические характеристики, состав работ, юридические детали хороши на странице услуги, а не в блоке-анонсе.
- Убрать повторы соседних разделов. Часто «преимущества» и «почему мы» — это один и тот же список, написанный дважды разными словами.
- Снять акцент, а не добавить новый. Если один блок не виден, чаще всего нужно приглушить соседние, а не сделать этот ещё ярче.
Что оставляют всегда
Есть минимум, без которого коммерческая страница не работает независимо от ниши и объёма трафика.
- Что вы делаете и для кого — простыми словами, без отраслевого жаргона.
- Цену или её диапазон, либо честное объяснение, от чего она зависит и как её узнать.
- Доказательства опыта: работы, задачи, сроки, отзывы — то, что можно проверить.
- Понятное следующее действие и контакты, доступные без прокрутки до подвала.
Если этих четырёх вещей нет, добавлять новые блоки бессмысленно: посетитель уходит раньше, чем до них доберётся.
Про блоки «а вдруг понадобится»
Самый частый источник перегрузки — блоки, добавленные на всякий случай. Они редко бывают вредными сами по себе, но каждый из них отнимает внимание у главного и удлиняет путь до действия. Показательный пример — раздел новостей на первом экране сайта услуг: обновляется он раз в полгода, но занимает место, которое могло бы работать на цену или на примеры работ.
Проверка простая: если блок не влияет на решение клиента и не отвечает на его вопрос, он не должен стоять на пути к действию. Место таких блоков — нижняя часть страницы или отдельный раздел.
Мобильный экран считается отдельно
На телефоне соседние блоки не видны одновременно, поэтому «плотность» ощущается иначе: страница воспринимается как последовательность экранов. Здесь работает другое правило — один экран, одна мысль, и переход к следующей мысли должен быть очевиден.
Что мы проверяем на мобильной версии в первую очередь:
- Виден ли на первом экране заголовок и хотя бы часть следующего блока — иначе непонятно, что страница продолжается.
- Не перекрывает ли содержимое фиксированная шапка, всплывающее окно или кнопка чата.
- Сколько прокруток нужно до цены и до формы — если больше пяти-шести, порядок блоков стоит пересобрать.
- Помещаются ли пункты меню и не превращается ли фильтр в бесконечный список.
Проверка на человеке со стороны
Финальный тест мы делаем без инструментов. Покажите страницу человеку, не связанному с проектом, дайте посмотреть пять секунд и закройте. Затем спросите: чем занимается компания, что здесь предлагают и что нужно сделать дальше.
Возможные исходы и выводы из них:
| Что отвечает человек | Что это означает | Что делаем |
|---|---|---|
| Называет услугу и действие | Иерархия работает | Ничего не трогаем |
| Перечисляет пять разных вещей | Смысловых центров слишком много | Усиливаем один блок, приглушаем остальные |
| Запомнил только картинку | Визуал перевешивает содержание | Меняем изображение или добавляем текстовый акцент |
| Не понял, что продают | Нет главного сообщения | Переписываем заголовок первого экрана |
| Не нашёл, что делать дальше | Действие потерялось среди блоков | Оставляем один призыв, убираем конкурирующие |
Такой тест дешевле любой аналитики и даёт результат за один вечер. Метрики покажут, что страница не работает, а этот вопрос покажет почему.
Что в итоге
Плотность страницы — не вопрос вкуса, а вопрос того, сколько решений вы просите принять одновременно. Один смысловой центр на экран, четыре обязательных ответа на странице, редкое — в глубину. Дальше можно спокойно спорить о цветах и шрифтах: на решение клиента они влияют куда меньше, чем количество конкурирующих блоков.
Если вы понимаете, что страница перегружена, но не знаете, что убрать первым, мы посмотрим её со стороны и разберём по блокам: проведём аудит юзабилити сайта и вернём список правок в порядке влияния на обращения. Разбор занимает несколько дней и обычно окупается ещё до редизайна.
