Боковое меню Sigma Cloud

Проблема.

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

Дополнительные проблемы

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

Задача.

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

Архитектура.

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

Метрики и статистика

Аналитика
Финансы

Интеграции

Приём платежей
Каталог раширений

Профиль

Настройки
Личные данные

Информеры

Уведомления
Помощь

Онлайн запись

Запись
Мастера

Лояльность

Одиночный раздел в своей группе.

Работа с товарами

Каталог
Маркировка
Документы
Услуги

Наводим эстетику.

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

Положив знак на подложку белого цвета, у меня получился более крепкий акцент на знаке, который теперь выглядел как иконка. Впоследствии этот знак на подложке мы использовали для PWA на кассовых аппаратах и телефонах клиентов. Добавил название компании и изменил расположение знака на горизонтальное.

Компоненты меню.

Во время подготовки новых компонентов, при обсуждении выяснилось, что некие «замочки» когда-то были добавлены как инструмент, показывающий, что функция ещё не куплена или заблокирована тарифом. От этой идеи было решено отказаться. Вместо этого приёма я предложил разрабатывать небольшие посадочные страницы, продающие фичу.

Выделение пунктов отдельным цветом было нужно для того, чтобы подсветить новые функции. Теперь эту задачу будет выполнять индикатор напротив пункта, а также появилась возможность в некоторых разделах указывать на события, такие как приход новых документов.

Сверхузкие экраны.

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

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

Результат.

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

Кое чо ещё.

Во время разработки тестировщики подкинули интересный кейс, касающийся того, на каком соотношении экрана мы показываем полное меню, а на каком компактное. Вопрос оказался очень важным, ведь большая часть рабочих страниц у нас — это таблицы. Снова взяв аналитику по размерам экранов и популярным кейсам, мы поняли, что на экранах шириной более 1366px можно смело показывать полный вид меню, не боясь отобрать ценное пространство рабочей области у пользователя. Для пользователей с меньшей шириной экрана был подготовлен кейс, когда при первом входе в систему мы показывали тултип, указывающий на новую для них кнопку «Развернуть», тем самым показывая, что у меню есть два вида. Тултип отображался единожды, после чего записывался в куки и больше не мешал пользователю. Просматривая записи экранов пользователей, мы поняли, что это было правильным решением. Негатива не было, все использовали то, что им было удобно.