Навигация без тупиков
Перепроектировала навигацию, чтобы пользователи перестали терять контекст, а главная страница стала рабочим инструментом вместо списка приложений
О проекте
Навигация по iikoWeb жила в трёх местах. Путь назад занимал несколько кликов, а главная страница не помогала начать работу. Пользователи теряли контекст при переходах и не видели всех разделов в одном месте.
Я спроектировала единую точкую навигации (двухуровневый сайдбар) и новую главную с ключевыми показателями. Путь в навигации сократился вдвое, время на главной увеличилось в 1,5-2 раза.
Контекст
iikoWeb — большая B2B SaaS-платформа для управления рестораном. Более 600 внутренних страниц, разные роли пользователей, большое количество сценариев
Как было
Навигация работала через три разные точки входа
-
Первая точка - главная страница. Плитки не были самостоятельными страницами — они лишь группировали функциональность. Вся работа происходила на внутренних страницах, поэтому главная становилась промежуточным шагом без собственной ценности.
-
Клик на карточку «Лояльность». Пользователь переходит на первую страницу подраздела «Лояльность». Навигация в сайд-баре ограничена одним разделом «Управление бизнесом». Все остальные разделы первого уровня исчезают, из-за чего теряется понимание общей структуры продукта.
-
Стрелка воспринимается как действие «Назад». Однако вместо возврата на уровень выше она сворачивает сайдбар. Из-за этого пользователь теряет ориентацию и вынужден искать другой способ перейти в нужный раздел.
-
Открываем бургер-меню, чтобы увидеть всю структуру. Первый уровень появляется, но разделы третьего уровня снова скрыты. Чтобы открыть их, приходится переходить на первую страницу нужного раздела.
Я разложила навигацию на сценарии и точки принятия решений. Схема показала, что проблема была в отсутствии единой логики переходов. В зависимости от точки входа пользователь видел разную структуру продукта и не всегда понимал, где находится и как перейти дальше.
Проблемы
- Навигация не давала целостной картины продукта. В зависимости от точки входа пользователь видел разную структуру разделов и быстро терял контекст
- Система требовала запоминать правила вместо того, чтобы быть предсказуемой. Разные разделы использовали разные паттерны навигации, поэтому один и тот же сценарий работал по-разному
- Дорогой шаг назад. Возврат на уровень выше и переход между разделами часто требовали нескольких лишних действий
- Разделы приходилось искать вручную. Глобального поиска не было, поэтому единственным способом найти нужную функцию оставался перебор пунктов меню
- Главная страница не помогала начать работу. Вместо рабочего пространства с ключевыми показателями пользователь видел каталог разделов, а важная информация была разбросана по системе
- Функционал продукта оставался незаметным. Пользователи не понимали возможности отдельных разделов и использовали лишь часть доступных сценариев
Дискавери
- UX-аудит пользовательских сценариев. Разложила существующую навигацию по шагам и выявила места, где пользователи теряли контекст, делали лишние переходы и сталкивались с тупиковыми сценариями
- Бенчмаркинг B2B SaaS-продуктов. Изучила паттерны навигации в крупных сервисах, экспертные исследования и лучшие практики. В результате подготовила документ с рекомендациями, который помог оценить разные варианты решения и выбрать направление для проектирования
- Анализ обращений клиентов за два года: «навигация / меню / раздел» — 1026 обращений, «не могу найти» — 267, «поиск» — 218. Это подтвердило, что проблема носит системный характер, а не связана с отдельными сценариями
- Метрики Matomo. Несмотря на высокую посещаемость (15 076 посещений в день), главная не становилась рабочим экраном. Пользователи проводили на ней в среднем 24 секунды, после чего переходили во внутренние разделы. Это подтвердило идею заменить каталог приложений на рабочий дашборд с ключевыми показателями
- Анализ устройств. Почти 44% пользователей заходили с мобильного, поэтому новое решение должно было хорошо работать в компактных разрешениях
Гипотезы
Если сделать единую точку входа в навигацию и добавить глобальный поиск, пользователи будут быстрее находить нужные разделы и перестанут терять контекст, потому что структура продукта станет более предсказуемой
Что измеряем:
- Среднее количество переходов до целевого раздела
- Доля сессий с открытым поиском и доля переходов из него
Если заменить каталог приложений рабочей главной страницей с ключевыми показателями, пользователи смогут быстрее начать работу после входа в систему, потому что нужная информация будет собрана в одном месте
Что измеряем:
- Среднее время на главной
- Переходы с главной в рабочие сценарии
Ограничения
- В разных продуктах глубина навигации отличалась
- Некоторые разделы зависели от лицензий, могли быть недоступны
- Мобильная версия обязательна: 43% трафика со смартфонов
- Нужно было сохранить поддержку мобильной версии
- Решение должно было масштабироваться вместе с продуктом
Поиск решения
Я рассматривала два разных подхода к навигации. Оба решали главную проблему (показать «где я и что рядом»), но по-разному влияли на вид экрана и удобство для пользователя.
Вариант 1. Навигация в хедере
Карта навигации живёт в хедере: по наведению на пункт меню раскрывается панель с каталогом приложений
| Плюсы | Минусы |
|---|---|
| Не занимает место по ширине | Перекрывает контент и увеличивает хедер, до контента нужно скроллить |
| Привычный паттерн | Требует лишнего действия: меню нужно каждый раз открывать |
| Позволяет добавить подсказки и обучение | Если меню закрыто, то не видно, где именно находится пользователь |
Вывод. Пользователь терял текущий контекст, каждый раз приходилось заново открывать меню, а количество действий практически не сокращалось. От идеи отказались.
Вариант 2. Левый сайдбар
Навигация постоянно перед глазами. Пользователь видит, где он находится и что есть рядом, без дополнительных действий. При необходимости может свернуть сайдбар до компактного вида
| Плюсы | Минусы |
|---|---|
| Открыта без лишних кликов, активный раздел подсвечен | Уменьшает рабочую область |
| Два уровня рядом, контекст не теряется | Скролл для длинных списков разделов и маленьких экранов |
| Быстрый возврат наверх: один клик вместо возврата на главную | Нужны промо-страницы, если разделы недоступны по тарифу |
Вывод. Этот вариант оказался самым понятным и масштабируемым, поэтому именно он стал основой дальнейшей работы.
Решение
Спроектировала двухуровневый сайдбар: крупные приложения на первом уровне, подразделы и страницы внутри них — рядом, а не вместо. Так пользователь одновременно видит все уровни навигации. Вход на главную с ключевыми показателями и поиск в шапке убирают лишние клики.
Сайдбар и взаимодействие с ним
-
Спроектировала все варианты взаимодействия с навигацией: два уровня сайдбара, правила раскрытия и сворачивания, активные состояния
-
Продумала гибкую систему управления сайдбаром: пользователь может раскрыть все панели, закрыть панель 2-3 уровня или свернуть все в navigation rail
Все панели раскрыты: видны первый, второй и третий уровни навигации 
Панель 2-3 уровня закрыта, при этом видны разделы первого уровня 
Навигация свернута в navigation rail. Самый компактный вариант, удобен при работе с большими таблицами 
Первый уровень отображается компактно, панель 2-3 уровня открыта -
Продумала адаптив для мобильной версии
-
Предложила концепт промо-экрана для разделов, которые недоступны пользователю по тарифному плану
-
Задача включала сложное взаимодействие и большое количество состояний, поэтому разработала кликабельный прототип в Figma Make для презентации команде
Главная страница
Отдельной задачей стало переосмысление главной страницы. Моей целью было превратить ее в рабочий экран, который отвечает на вопрос: "Что требует внимания сейчас?"
Я начала с исследования сценариев разных ролей (управляющий, бухгалтер, владелец бизнеса) и собрала несколько концепций главной страницы. В первых вариантах было больше персонализации и гибкости.
Я хотела провести исследование, чтобы понять, какая информация действительно нужна пользователям в зависимости от их роли. Эта инициатива не получила приоритет, поэтому в MVP стали рассматривать универсальные виджеты вместо персонализированных.
В итоговую версию вошли ключевые показатели ресторана и два оперативных виджета: открытые кассовые смены и сотрудники в заведении. Главная перестала быть каталогом разделов и стала первой точкой взаимодействия с продуктом.
Результаты
- Единая и предсказуемая система навигации
- До двух раз меньше кликов для перехода на уровень выше
- Главная стала рабочим экраном, а не лишним шагом
- Нужный раздел можно быстро найти с помощью поиска
- Метрики Matomo (за первые 30 дней после роллаута): время на главной 24 с → 42 с, входы через главную +15-18% в день, визиты на главную +4,6% в день. Отказы держатся на 6–7%. Рост времени на странице и количества входов позволяет предположить, что новая главная стала более полезной и начала использоваться как рабочий инструмент, а не как промежуточный экран
Что не удалось реализовать
- A/B-тестирование двух вариантов навигации (долго, дорого)
- Карточки с описанием ценности раздела внутри сайдбара (перенесли в следующие итерации)
- Сценарий управления дашбордом на главной, возможность скрывать и показывать нужные виджеты (долго, дорого)
- Исследование ролей пользователей (т.к. в MVP отказались от персонализированных виджетов)
Рефлексия
- Не все хорошие идеи доходят до релиза. За время проекта было придумано значительно больше решений, чем удалось реализовать. Приоритизация, ограничения разработки и стоимость реализации приземляют "хотелки" дизайнера
- Если бы я начинала этот проект сегодня, то с первого дня заложила бы детальную аналитику навигационных сценариев. Это позволило бы измерять влияние изменений не косвенно, а напрямую и принимать решения на основе более точных данных
Следующий кейс