Первый экран — это меню. Я смотрю на сайт, а там что-то не так. Буквы вроде есть, но слова распадаются на кусочки. Вижу линии, пятна, какие-то ритмы, но не понимаю, что это значит. Глаза устают от верхней строки. Курсор мыши зависает над пунктами, а я пытаюсь прочитать «Каталог», но вижу «Каплог». На телефоне вообще кошмар: всё дрожит, сливается, прыгает, когда листаешь.
Я уже три раза промахнулся. Открыл не тот раздел, вернулся, снова промахнулся. В голове шум: «Где же то, что мне нужно?» Не запоминаю структуру сайта, потому что не могу её даже прочитать. Список превращается в серую кашу, где все элементы равны, никаких приоритетов. Навигация вообще не помогает.
В отчетах это видно сразу. Клики размазаны, пользователи не идут по меню, а сразу ищут через строку поиска или уходят. На больших экранах буквы тонут в фоне, на тёмной теме сливаются с интерфейсом, на солнце исчезают. На хороших экранах всё красиво, но толку-то. На старых дисплеях вообще каша получается.
Когда проблема критична, а когда нет
Критична:
- Интернет‑магазины с широким каталогом, где меню — главный путь к товарам (маркетплейсы, мультирубрикаторы).
- Сервисы с ценностным первым действием в навигации: банки, страхование, медицина, госуслуги, билеты, доставка.
- Проекты с преобладанием мобильного трафика и маленьких экранов; тёмные темы; сложные фоны или низкая контрастность.
- Аудитории 35+, пользователи с нарушениями зрения, высокая доля впервые пришедших по рекламе.
- Сайты с жёсткими дедлайнами выбора: распродажи, бронирования, акции с таймером.
- B2B‑сервисы со сложной структурой и редкими визитами, где контекст забывается между сессиями.
Не критично или влияние минимально:
- Лэндинги с одной‑двумя целевыми кнопками, где меню вторично или свернуто.
- Медиа и блоги, где основную навигацию заменяют рекомендации, ленты и поиск.
- Продукты с высокой долей прямых/возвратных пользователей, которые знают путь наизусть.
- Внутренние корпоративные порталы и профессиональные инструменты с обученной аудиторией.
- Промо‑сайты и бренд‑страницы, где конверсия завязана на один CTA, а не на сложную навигацию.
- Сайты, где конверсия происходит вне веб‑интерфейса (звонок, мессенджер) и меню почти не используется.
Что об этом говорят пользователи
Опишите, как вы читаете пункты главного меню: что видите первым, где сомневаетесь, какие слова сливаются или требуют усилий, и в какой момент вы решаете, куда нажать?
Бесполезные ответы:
- Привык, меня устраивает.
- Ну, читать можно, если присмотреться.
- Я всегда пользуюсь поиском, меню не трогаю.
Полезные ответы:
- С ноутбука 13", масштаб 100%. Светло-серый текст на светлом баннере. «Каталог» и «Коллекции» сливаются, читаю по два раза, теряю фокус.
- На телефоне 6.1" шрифт очень тонкий, буквы в верхнем регистре. «ОПЛАТА» и «ОПЦИИ» путаются, кликаю не туда.
- Контраст низкий: примерно как #9aa на белом. При наведении контраст улучшается, но решение надо принять раньше.
- Межбуквенный интервал маленький, в слове «Тарифы» риф и ф слипаются. С первого раза не считываю.
- При прокрутке фон меняется, на тёмном фоне меню читается, на светлом — нет. Скачет восприятие.
Решение проблемы
- Сделайте текст видимым без усилий. Используйте гротеск с хорошей читабельностью. Базовый размер: 16–18 px на десктопе, 15–16 px на мобильном. Вес — 500–600 для обычного состояния, 600–700 для активного. Откажитесь от сплошного верхнего регистра: смешанный регистр читается быстрее.
- Обеспечьте контраст не ниже WCAG AA: коэффициент 4.5:1 для обычного текста. Проверьте меню на разных фонах. Если шапка прозрачная или поверх баннера, добавьте подложку с полупрозрачным фоном или градиент. Либо закрепите сплошную шапку при скролле.
- Увеличьте межбуквенный интервал на 1–2% и межсловный — до явного визуального дыхания. Не экономьте на расстоянии между пунктами: клик-зона 44×44 px. Уберите декоративные тени и размытые эффекты, которые смазывают контуры.
- Сократите количество пунктов. Оставьте главные: Каталог/Продукт, Цены/Тарифы, Доставка, Контакты/Поддержка, Вход/Корзина. Остальное — во вторичное меню или в подвал. Короткие и понятные слова читаются быстрее.
- Состояния наведений и активов сделайте заметными: полужирный, подчёркивание, явное изменение цвета, не только оттенок на 5%. Фокус-стили для клавиатуры оставьте видимыми.
- Настройте шрифтовой стек с понятным fallback: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif. Проверьте сглаживание на Windows и macOS. Отключите рендер, который делает буквы тоньше, чем задумано.
- Проверьте адаптив. На 320–375 px пункты не должны слипаться или уходить под иконки. Если места мало, переключайте часть пунктов в бургер, но оставляйте ключевые ярлыки рядом: Каталог, Корзина.
- Прогоните меню через эмуляторы и реальные устройства. Проверьте при 100%, 125%, 150% масштабе. Проверьте при ярком дневном свете на мобильном. Исправляйте по факту, пока пункты не считываются мгновенно.
Гипотезы, как увеличить конверсию
- Если увеличить контраст текста меню до уровня WCAG AA, то конверсия в просмотр ключевых разделов вырастет за счёт того, что люди быстрее находят нужный пункт.
- Если заменить тонкий шрифт на полужирный в меню, то конверсия в переход к Каталогу вырастет за счёт более уверенного распознавания названий.
- Если убрать верхний регистр в пунктах меню, то конверсия в добавление в корзину вырастет за счёт более быстрого чтения и снижения ошибок навигации.
- Если закрепить непрозрачную шапку с меню при скролле, то конверсия в возврат к Каталогу вырастет за счёт постоянной доступности навигации на длинных страницах.
- Если сократить количество пунктов меню до 5–6, то конверсия в переход по ключевым разделам вырастет за счёт снижения когнитивной нагрузки и выборной парализации.
