Нечёткие ссылки в меню разделов сайта мешают найти нужный товар

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

Пользователь хочет купить кроссовки, а в меню видит «Обувь», «Спорт», «Активный отдых». Где искать? Непонятно. Ссылки сливаются в кашу: мелкий шрифт, одинаковый цвет, невнятные названия. Человек тыкает наугад, теряет время и уходит.

Трудноразличимые ссылки в рубрикаторе — это когда всё выглядит одинаково. Названия вроде «Ассортимент» или «Продукция» ничего не объясняют. Мелкий текст, отсутствие визуальной иерархии и скудное оформление заставляют глаза уставать. Пользователь не хочет быть Шерлоком — он хочет найти товар за секунды.

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

Как быстро и легко вы смогли найти нужный товар в рубрикаторе сайта? Какие трудности возникли при навигации по разделам?

• «Я искала беспроводные наушники, но в рубрикаторе всё смешалось: Гаджеты, Электроника, Аксессуары. Названия не помогли, всё слишком мелкое, еле разобралась, минут пять ушло.»
• «Запутался. Хотел найти чехол для телефона, но ссылки Ассортимент и Для устройств ни о чём не говорят. Шрифт мелкий, всё сливается.»
• «Рубрикатор неудобный. Искала кроссовки, но категории типа Спорт и Обувь не раскрывают, что там. На телефоне вообще не попасть пальцем по ссылкам, всё мелкое и серое.»
• «Я минут десять тыкался в разделы, пока нашёл рюкзак. Названия разделов какие-то общие, неясно, где что. И шрифт такой, что глаза устают читать.»
• «Искала детскую одежду, но рубрикатор — просто каша. Всё называется как-то расплывчато, ссылки почти одинаковые. В итоге плюнула и закрыла сайт.»

Рекомендуемое решение

1. Конкретные названия
Замените размытые «Продукция» и «Спорт» на точные: «Кроссовки», «Ботинки», «Футболки». Пользователь должен сразу понять, что найдёт в разделе. Никаких загадок.

• Было: «Ассортимент» → Стало: «Смартфоны»
• Было: «Для активного отдыха» → Стало: «Рюкзаки и палатки»

2. Читабельный шрифт
Увеличьте размер текста до 16–18 px для десктопа, 18–20 px для мобильных. Используйте жирный начертание для заголовков категорий. Добавьте межбуквенное расстояние (tracking) на 0,02–0,04 em, чтобы текст не сливался.

3. Визуальная иерархия
Разделите категории цветом или иконками. Например: «Кроссовки» — с иконкой кеда, «Куртки» — с иконкой вешалки. Подкатегории выделяйте меньшим шрифтом или отступами. На мобильной версии увеличьте тап-зоны до 44×44 px, чтобы пальцем было удобно попадать.

4. Контраст и цвет
Ссылки делайте тёмно-синими (#003087) на белом фоне или белыми на тёмном. Избегайте серого на сером — это убийство глаз. Активная ссылка должна подсвечиваться: например, оранжевым (#F28C38) при наведении или нажатии.

5. Тестирование на людях
Дайте прототип рубрикатора 10 пользователям. Попросите найти товар за 10 секунд. Если 8 из 10 справятся — рубрикатор работает. Если нет — правьте.

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

1. Если заменить размытые названия разделов на конкретные и понятные, например «Кроссовки» вместо «Спорт», то конверсия в покупки может увеличиться за счёт того, что пользователи сразу найдут нужный раздел и не уйдут из-за путаницы.
2. Если увеличить шрифт ссылок до 18 px и добавить контрастные цвета, например тёмно-синий на белом, то конверсия в переходы по рубрикатору может увеличиться за счёт того, что людям станет легче читать и выбирать категории без напряжения глаз.
3. Если добавить иконки к каждому разделу, например кеды к «Обуви», то конверсия в клики по категориям может увеличиться за счёт того, что визуальные подсказки ускорят понимание структуры рубрикатора.
4. Если увеличить тап-зоны ссылок на мобильной версии до 44×44 px, то конверсия в переходы по рубрикатору с телефонов может увеличиться за счёт того, что пользователи будут попадать по ссылкам с первого раза без случайных промахов.
5. Если выделить подкатегории отступами и меньшим шрифтом, то конверсия в нахождение нужного товара может увеличиться за счёт того, что иерархия разделов станет интуитивно понятной даже новичкам.

Чёткий рубрикатор ведёт клиента прямо к товару. Два клика — и он в корзине.