Трудночитаемый шрифт в главном меню сайта

Критичность проблемы: Средняя | Сложность внедрения: Средняя | Встречаемость: Средняя

Главное меню — первый ориентир на сайте. Если текст в нём трудно читать, пользователь теряет опору. Он не понимает, где «Каталог», где «Цены», где «Доставка». Время на поиск растёт, уверенность падает, ошибки множатся.
Трудночитаемость возникает по разным причинам. Шрифт слишком тонкий. Кегль мелкий. Контраст низкий: серый по серому, белый по фото, цветной по градиенту. Буквы слепаются или, наоборот, расползаются из‑за неверного трекинга. Весь текст набран капсом, строки получаются монотонными, форму слов сложнее считывать.

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

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

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

Что говорят пользователи

Опишите, что мешает вам быстро найти и выбрать нужный пункт главного меню на нашей главной странице: где вы спотыкаетесь взглядом, что считаете непонятным или незаметным? Укажите устройство, браузер и условия (свет, тема).

Бесполезные ответы пользователей

• Всё норм, я справился.
• Не знаю, просто непривычно.
• Мне всё равно, я через поиск хожу.
• Ну… как у всех сайтов.
• Я не дизайнер, не могу сказать.

Полезные ответы пользователей

• iPhone 12, Safari, светлая тема. Белый текст меню на полупрозрачной шапке теряется на светлых баннерах. «Акции» и «Доставка» сливаются, промахиваюсь.
• Ноутбук 15", Windows, Chrome. Кегль меню мелкий, тонкий вес. При 90% масштабе читаемость падает, выбираю пункт со второй попытки.
• Android, Chrome, тёмная тема. В бургере межстрочный интервал маленький, элементы близко. Боюсь задеть соседний пункт, нажимаю медленно.
• MacBook, Safari. Активный пункт почти не отличается по цвету. Теряю понимание, где я, особенно на вложенных страницах.
• Монитор с низкой яркостью. Серый текст на сером фоне шапки выглядит бледно, «Каталог» вижу только когда навёл курсор.

Решение проблемы

1. Задача. Сделать пункты главного меню читаемыми с первого взгляда в любых условиях и на любых устройствах.
2. Критерии. Контраст текста к фону не ниже WCAG AA (желательно выше). Кегль не меньше 16 px на десктопе и 16–18 px на мобильных. Вес шрифта 500–600 для навигации. Площадь клика от 44×44 px. Фокус и активное состояние заметны.
3. Шрифт. Используйте гротеск с хорошей межсимвольной разборчивостью. Исключите сверхтонкие начертания. Не набирайте пункты капсом; если капс обязателен, увеличьте трекинг и проверьте читаемость.
4. Контраст и фон. Уберите полупрозрачность над пёстрым контентом. Дайте меню сплошной фон. Проверьте контраст каждого состояния: обычное, hover, active, focus, disabled.
5. Интерфейсные состояния. Сделайте фокус-кольцо заметным для клавиатуры и тачпада. Активный раздел выделяйте не только цветом, но и толщиной/подчёркиванием. Ховер не должен размывать текст.
6. Отступы и кликабельность. Дайте горизонтальные отступы, чтобы слова не слипались с соседними элементами. Область клика — по всей высоте шапки для пункта, а не только по тексту.
7. Адаптив. На мобильных избегайте превращения текста в иконки без подписи. В бургере обеспечьте достаточные интервалы между пунктами. Исключите переносы внутри слов.
8. Техдолг. Сведите параметры в дизайн-токены: --menu-font-size, --menu-font-weight, --menu-color, --menu-bg, --menu-padding, --menu-focus. Примените единообразно на всех страницах.
9. Тесты. Прогоните меню на светлой/тёмной теме, при разных масштабах (80–125%), на матовых и глянцевых экранах, в ярком свете. Проверьте клавиатурную навигацию и скринридер.
10. Контроль. Добавьте в регрессию чек-лист: контраст, кегль, активные состояния, кликабельная зона, адаптивные брейки. Зафиксируйте метрику «время до первого клика по пункту меню» и отслеживайте.

Гипотезы для роста конверсии

• Если повысить контраст текста меню до уровня AA и выше, то конверсия в переход к разделам может увеличиться за счёт того что пользователи быстрее считывают пункты с первого взгляда.
• Если увеличить кегль и вес шрифта пунктов меню, то конверсия в просмотр каталога может увеличиться за счёт того что снижается число промахов и повторных кликов.
• Если сделать активный пункт меню явным (цвет, подчёркивание, индикатор), то конверсия в углубление по разделам может увеличиться за счёт того что пользователи лучше ориентируются, где они находятся.
• Если убрать полупрозрачный фон у шапки и закрепить сплошной контрастный фон, то конверсия в первый клик по меню может увеличиться за счёт того что текст не теряется на баннерах.
• Если расширить кликабельную зону пунктов меню до 44×44 px, то конверсия в успешный переход по меню может увеличиться за счёт того что уменьшаются промахи на мобильных.

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

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