Названия пунктов меню не выровнены и обрезаются по краю

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

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

Длинные названия обрезаются, как ножницами. На десктопе хвост уходит под кнопку «Войти», на мобильном — текст ломается пополам и выглядит чужеродно. В конце болтаются многоточия, но смысл теряется.

Курсор навожу — всё пляшет. Ховер меняет высоту строки, меню дергается, соседние пункты скачут. Хотел «Каталог», попадаю в «Акции».

На русском ещё терпимо, на английском — ад. Локализация растягивает слова, и те врезаются в границы. Заглавные упираются в край, нижние хвосты букв отрезаны.

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

В адаптиве меню то складывается, то расползается. На одном брейкпойнте читаемо, на соседнем — каша: перенос не там, кликабельная область мимо текста.

Пиксель к пикселю — не про него. Базовые линии не совпадают, оптические поля не держатся. Левый край плывёт, правый режет буквы. Шапка как полка, где ценники на разной высоте.

Пользовательская логика ломается. Ищу «Доставка», сканирую горизонталь, а горизонтали нет. Каждый пункт — отдельный остров, между ними — швы.

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

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

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

Шапка — первый кадр бренда. А у меня она как кривой заголовок в газете: сразу бросается в глаза и портит впечатление. Контент достойный, но меню шепчет: здесь неаккуратно.

Когда проблема критична, а когда нет

Критична:

• Интернет-магазины с широким каталогом, фильтрами, акциями; навигация — основной путь к товару.
• SaaS, личные кабинеты, сложные B2B-сервисы, где меню ведёт к ключевым функциям.
• Многоязычные сайты (немецкий, финский, английский), длинные названия, капслок в пунктах.
• Мобильный трафик >50%, узкие экраны, нестабильные брейкпойнты, sticky-хедер.
• Порталы услуг, банки, госуслуги: ошибка выбора раздела = потерянная задача.
• Медиа с мегаменю: пользователи сканируют заголовки горизонтально.
• Премиум-сегмент: визуальная неаккуратность бьёт по доверию и чеку.

Не критична:

• Лендинги с 1–3 пунктами и доминирующей CTA-кнопкой; основная воронка не через меню.
• Продукты с поиском по умолчанию (маркетплейсы, каталоги, где люди сразу вводят запрос).
• Контентные проекты с бесконечной лентой, где меню — второстепенно.
• Кампании и микросайты с короткими однословными пунктами.
• Аудитория — постоянные пользователи, фиксированное меню в приложении/кабинете.
• Когда есть дубли навигации в карточках, футере, на странице раздела, и люди ими пользуются.

Что говорят респонденты

Опишите, как вы пользовались верхним меню: на каком устройстве и в каком браузере вы были, какие пункты видели целиком, какие обрезались или «плясали» по выравниванию, и как это повлияло на выполнение вашей задачи на сайте?

Бесполезные ответы

• В целом красиво, пользоваться можно.
• Наверное, так и задумано.
• Я не дизайнер, мне всё равно.

Полезные ответы

• iPhone 12, Safari, 390×844. «О компании» обрезается до «О комп…». Дважды промахнулся, думал это «Контакты».
• Windows 11, Chrome 128, 1366×768. При зуме 125% пункты становятся на разной высоте, «Доставка и оплата» уезжает на вторую строку.
• Android, Chrome, системный шрифт увеличен на 130%. «Каталог аксессуаров» обрезан, видно только «Каталог акс…». Иконки не по центру.
• MacBook, Safari, 1440×900. При появлении верхнего баннера «Скидка -10%» меню рвётся, «Возврат и гарантия» исчезает за край.
• Русский/укр переключение: на украинском «Повернення та гарантія» почти всегда уходит под соседний пункт, кликабельно только по краю.

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

• Приведите контент к формату. Составьте список всех пунктов меню на всех языках. Уберите лишнее, сократите до 1–3 слов, оставьте ключевые слова в начале.
• Выравнивайте по сетке. Задайте единую высоту строки и отступы. Выравнивайте текст по левому краю, иконки — по базовой линии текста. Уберите разный paddings между пунктами.
• Сделайте адаптив предсказуемым. На десктопе — один ряд с равномерным gap. На планшете — уменьшите gap, разрешите перенос до двух строк внутри пункта. На телефоне — сверните в бургер или горизонтальный скролл с явными краями.
• Уберите «скрытую» обрезку. Отключите обрезание букв контейнером. Если используете троеточие, покажите полное название в тултипе и доступном имени (aria-label), но приоритет — чтобы влезало без троеточий.
• Задайте пределы. Для каждого пункта определите min/max ширину. Длинные слова переносите: включите перенос по слогу, настройте word-break и hyphens для нужных языков.
• Стабилизируйте шрифты. Используйте один размер и межбуквенный интервал в меню. Проверьте рендеринг на Windows и macOS, на зуме 100–200%.
• Учтите состояния. Проверьте меню с баннерами, бейджами, уведомлениями и длинными заголовками. Меню не должно скакать от появления служебных блоков.
• Протестируйте на контрольных точках. Минимум: 320, 360, 390, 768, 1024, 1280, 1440 px. Проверьте RTL/длинные переводы, системный шрифт 120–130%.
• Зафиксируйте регламент. Опишите правила именования пунктов, ограничения по длине и макеты для всех брейкпоинтов. Подключите визуальные тесты, чтобы исключить регресс.

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

• Если сократить формулировки пунктов меню до 1–2 слов и вынести второстепенные в «Ещё», то конверсия в переходы к ключевым разделам может увеличиться за счёт того что названия читаются целиком и не обрезаются.
• Если разрешить перенос пунктов меню в две строки на планшетах и мобильных, то конверсия в просмотр категорий может увеличиться за счёт того что длинные названия остаются видимыми и понятными.
• Если выровнять текст и иконки по базовой линии и задать единые отступы, то конверсия в целевые разделы может увеличиться за счёт того что взгляд идёт по ровной линии без ошибок и промахов.
• Если спрятать редкие и длинные пункты в выпадающее «Ещё», то конверсия в основные сценарии может увеличиться за счёт того что шапка перестанет ломаться и отвлекать.
• Если настроить перенос слов и гайд по длинам для всех языков, то конверсия в первые касания на многоязычных версиях может увеличиться за счёт того что пользователи сразу понимают пункты меню без догадок.

Уведомления, баннеры, бейджи толкают меню. Оно рвётся на две строки, ломает шапку.

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

В сумме растёт число возвратов к главной, повторных кликов, времени поиска нужного пункта. Это не «косметика», а помеха навигации и доверию.