B2B
Web
Sigma
Боковое меню Sigma Cloud
Дополнительные проблемы
Проблема.
- В сайдбаре мало места по ширине для пунктов с длинными названиями, что приносит массу неудобств и ограничений.
- Настройки пользователи обычно ищут в хедере, а не в меню.
- Присутствуют пункты с «замочком» — на них не кликают, что снижает продажи.
- Пункт «Маркировка» выбивается по цвету.
- Отсутствует название компании — только тип бизнеса и логотип. Не все пользователи знают, чьим продуктом пользуются.
Этот кейс начался с запроса от продуктовых менеджеров, цель которого была — добавить ещё несколько пунктов в сайдбар. Сделать это так легко, как раньше, было невозможно, так как, исходя из аналитики, средняя высота экрана у наших пользователей — 740 px, а значит, в некоторых типах бизнеса предел уже достигнут, даже если мы будем убирать неважные пункты. Проведя дополнительный анализ бокового меню, я выделил ещё ряд проблем, которые можно было бы решить при редизайне навигации.
Задача.
- Спроектировать и нарисовать навигацию таким образом, чтобы повысить масштабируемость компонента бокового меню.
- Распределить разделы меню по смысловым группам, а также изменить приоритетность пунктов в зависимости от задачи бизнеса.
- Сделать два режима меню: компактный и полноценный. Старые пользователи ориентируются по иконкам, новым нужны названия разделов.
- Вынести настройки в хедер
Архитектура.
Собрав информацию у продуктовых менеджеров по направлениям, изучив метрики и прочитав результаты последних кастдевов, стало понятно, что можно смело сгруппировать разделы по типам информации, доступ к которой они предоставляют. Получилась следующая структура:
Наводим эстетику.
Положив знак на подложку белого цвета, у меня получился более крепкий акцент на знаке, который теперь выглядел как иконка. Впоследствии этот знак на подложке мы использовали для PWA на кассовых аппаратах и телефонах клиентов. Добавил название компании и изменил расположение знака на горизонтальное.
Для того чтобы не просто выполнить задачу, но и сделать боковую навигацию визуально приятной, необходимо было поработать с деталями. Одна из таких деталей — это логотип. В старой версии отсутствовало название компании, и в целом логотип разваливался на знак и подпись типа бизнеса.
Компоненты меню.
Выделение пунктов отдельным цветом было нужно для того, чтобы подсветить новые функции. Теперь эту задачу будет выполнять индикатор напротив пункта, а также появилась возможность в некоторых разделах указывать на события, такие как приход новых документов.
Во время подготовки новых компонентов, при обсуждении выяснилось, что некие «замочки» когда-то были добавлены как инструмент, показывающий, что функция ещё не куплена или заблокирована тарифом. От этой идеи было решено отказаться. Вместо этого приёма я предложил разрабатывать небольшие посадочные страницы, продающие фичу.
Сверхузкие экраны.
Правило работает следующим образом: когда пункты меню перестают помещаться на экране, появляется элемент со стрелкой вниз. Стрелка плавно перемещается по подложке и предлагает проскроллить. После достижения последнего пункта стрелка пропадает. То есть пользователя мы учим один раз и записываем это событие в куки.
Продуктовую команду не покидает опосение что будет в случае со свехузкими экранами. Специально для таких кейсов я предложил добавить стрелку указатель что меню можно проскроллить. Такой кейс являеться негативным и к нему не хотелос бы скатываться но вероятность ситуации есть.
Результат.
По всем трём типам бизнеса было отрисовано множество макетов, но не вижу смысла показывать их тут, поэтому вот финальный макет, который пошёл в продакшен и показал отличные результаты при тестировании.
Кое чо ещё.
Во время разработки тестировщики подкинули интересный кейс, касающийся того, на каком соотношении экрана мы показываем полное меню, а на каком компактное. Вопрос оказался очень важным, ведь большая часть рабочих страниц у нас — это таблицы. Снова взяв аналитику по размерам экранов и популярным кейсам, мы поняли, что на экранах шириной более 1366px можно смело показывать полный вид меню, не боясь отобрать ценное пространство рабочей области у пользователя. Для пользователей с меньшей шириной экрана был подготовлен кейс, когда при первом входе в систему мы показывали тултип, указывающий на новую для них кнопку «Развернуть», тем самым показывая, что у меню есть два вида. Тултип отображался единожды, после чего записывался в куки и больше не мешал пользователю. Просматривая записи экранов пользователей, мы поняли, что это было правильным решением. Негатива не было, все использовали то, что им было удобно.