Eng

Рус

ОБЗОР

IM это продукт системы MaxPatrol 10 компании Positive Technologies, направленный на обеспечение работы отдела SOC, а так же, который поможет выстраивать резидентный компонент безопасности в проектах PT и создаст эффект синергии в экосистеме.

Состав команды: 10 инженеров, 1 тимлид и 1 продукт овнер, 1 дизайнер.

РОЛЬ

Старший дизайнер продукта

Проработка пользовательского опыта, визуальный дизайн, построение гипотез, прототипирование, спецификации, улучшение дизайн-системы.

Май 2024 - Март 2025

БЭКГРАУНД

Продукт Incident Management разрабатывался как внутренний инструмент, который будет использоваться для проектов ESC по мониторингу, но со временем стало ясно, что подобная функциональность может прекрасно продаваться в виде дополнения к другим продуктам компании и тогда задумались над тем чтобы привести в соответсвие пользовательский опыт и выпустить Incident Management на рынок.

В линейке PT порядка 30 продуктов. Для облегчения процесса разработки, идентичности использования и узнаваемости, все они должны быть спроектированы на единых компонентах и в единой стилистике и использовать единые строго определенные паттерны.
Я присоединился к команде IM около года назад, продукт был с минимальной функциональностью, UX/UI требовали переосмысления. IM стал первым продуктом который проектировался на новой единой для всех продуктов PT дизайн системе Koobik (которая на тот момент еще требовала доработок).

КЛЮЧЕВЫЕ ДОСТИЖЕНИЯ:

Спроектировал и внедрил единые компоненты и паттерны в корпоративную дизайн-систему для 7 продуктов

Провел анализ 6+ продуктов — выявил 40+ UX-проблем, внедрил 25+ решений (снижение поддержки на 28%)

Оптимизировал процесс передачи дизайна в разработку: создал шаблоны спецификаций, документацию по анимациям и состояниям

Провел дизайн-ревью для 15+ экранов, улучшил согласованность интерфейсов

Менторил junior/middle-дизайнеров.

•


•


•


•

•

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

Один из кейсов

“Возможность сохранять и загружать пользовательские фильтры”

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

В Positive Technologies нет каких-то устоявшихся дизайн процессов, все работают, кто во что горазд. Внедрять какой-то новый процесс в продукт не представлялось возможным (команда работала в режиме успеть все, еще больше и в кратчайшие сроки).

Мы обговорили все требования и нюансы, а далее аналитик ушел оформлять Feture Request и первую итерацию спецификации (первую потому что PO и Аналитик не могли до конца предусмотреть все нюансы которые могут возникнуть во время разработки флоу работы фильтров, были лишь общие вводные на основе которых создание четкой спецификации либо поставило бы меня в жесткие рамки, либо ее пришлось бы почти полностью переписывать на финальном этапе).

Существующие фильтры

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

Замечания по существующим фильтрам:

Помимо добавления функциональности сохранения и загрузки фильтров стоит учесть и исправить вышеперечисленные замечания.

2. Обзор аналогов

Обзор аналогов необходим в первую очередь для того чтобы выявить лучшие практики и не тратить время на проработку очевидно провальных решений.

3. драфт сохранения фильтров

Был подготовлен первый набросок, для обсуждения с PO и аналитиком.

Элементы панели фильтрации

Кнопка «Сохраненные фильтры»

Кнопка «Required фильтр»

Фильтр в режиме Required нельзя очистить и скрыть с панели фильтрации. Такой режим используется, когда фильтр обязательно должен быть заполнен. Значение фильтра можно лишь поменять на другое.

Кнопка «Removable фильтр»

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

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

Кнопка "Добавить фильтр"

Кнопка «Добавления новых фильтров» всегда располагается в самом правом краю (за всеми фильтрами)

4. Презентация первого драфта РО и аналитику

Презентация прошла успешно и никаких критических замечаний выявлено не было (лишь пара уточняющих вопросов).
Далее, как мне казалось, предстоял самый сложный из всех этапов, это защита решения перед командой департамента дизайна (решение надо было согласовать с 15 дизайнерами, других продуктов) ...

5. Презентация решения дизайн команде

Тут, как и ожидалось, вопросов уже было больше, но по итогу решение было одобрено.

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

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

Существующие в PT фильтры:

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

Используется в случае когда полей фильтрации очень много и их постоянное отображение нежелательно (их добавляют и удаляют по необходимости).

+ Не на всех продуктах требуется сохранение фильтров (сделать опцией)

+ Многие продукты используют 2, а то и все 3 вида фильтров одновременно

В данных фильтрах как правило продвинутый пользователь задает условия фильтрации путем описания сложных условий.

Исходя из вышеперечисленного, было решено просто определить “типы” кнопок-фильтров и позволить продуктам использовать их по своему усмотрению (но с некоторыми ограничениями):

- Removable. Фильтр можно очистить, а кнопку можно скрыть.

- Cleanable. Кнопка не исчезает после сброса фильтра.

- Required. Фильтр нельзя очистить, можно только изменить его значение.

6. Доработка

7. Презентация команде разработчиков

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

8. Финальная проработка решения + спецификация

В итоге я подготовил детальную спецификацию которую я согласовал с ребятами из отдела дизайн системы.

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

Описание работы с сохраненным фильтром

С выбранным сохраненным фильтром можно делать 5 операций через связанное меню:

С выбранным сохраненным фильтром можно делать 5 операций через связанное меню:

Сохранить изменения

Система отслеживает изменения, и с помощью индикатора показывает, когда выбран сохраненный поиск и затем пользователь изменил набор фильтров. У такого сохраненного поиска в меню доступно действие «Сохранить изменения». При запуске этого действия выпадашка закрывается, фокус возвращается в кнопку-меню. Индикатор несохраненных изменений пропадает.

В меню у сохраненного поиска без изменений больше не будет пунктов «Сохранить изменений» и «Сбросить изменения».

Показываем ошибку в тосте, если что-то пошло нет так.

Сохранить как новый

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

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

Создание нового из меню сохраненных фильтров

Если набор фильров отличается от настройки по умолчанию для раздела, то в меню выбора сохраненных фильтров доступна кнопка «Сохранить как новый фильтр». Она доступна даже если выбран сохранённый фильтр и в нем нет изменений.

Сбросить изменения

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

Изменить

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

Сохранить с тем же именем нельзя

С пустым именем сохранить нельзя. Если форма короткая, то можно не писать, что нужно заполнить единственное обязательное поле. Кнопку отправки блокировать не надо.

Общая ошибка традиционно показывается алертом над формой. Используйте компактный вид сообщения, потому что форма открыта в поповере.

Удалить

При удалении набор фильтров будет сброшен до настроек по умолчанию для раздела, и результаты поиска обновляются. Чаще всего будет показана поисковая выборка вообще без фильтров, но иногда бывает по‑другому. Например, система покажет все инциденты за сутки. После запуска команды выпадашка закрывается, фокус переходит на кнопку-фильтр.

После активации кнопки будет показан тост со статусом операции и возможностью отменить удаление.

В случае отмены удаления в фильтре снова будет выбран восстановленный пресет, результаты поиска обновятся. Фокус окажется на кнопке-меню фильтров.

Спецификация кнопок фильтров (Filter Button)

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

Данный элемент управления реализован в виде кнопки, которая состоит из 2-ух частей:

Filter Button

Filter Button - Multiple

Filter Button - Empty

Режимы работы фильтров

Removable. Фильтр можно очистить, а кнопку можно скрыть.

—

—

Cleanable. Кнопка не исчезает после сброса фильтра.

Required. Фильтр нельзя очистить, можно только изменить его значение.

—

Removable

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

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

Cleanable

Эти фильтры нельзя скрыть, доступна только очистка. После очистки компонент не пропадает с панели фильтров.

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

Required

Фильтр в режиме Required нельзя очистить и скрыть с панели фильтрации. Такой режим используется, когда фильтр обязательно должен быть заполнен. Значение фильтра можно лишь поменять на другое.

Состояния

Пустой фильтр

Когда значение фильтра не заданы, то компонент имеет сдержанное незаметное оформление. В режиме Removable показывается кнопка сброса.

В режиме Cleanable у пустого фильтра нет кнопки сброса.

А в режиме Required фильтр не мозжет быть пустым.

Заполненное состояние

В заполненном состоянии компонент имеет более заметное оформление, чтобы пользователь обращал внимание, какие параметры влияют на поисковую выдачу.

Единственное выбранное значение показывается внутри кнопки после названия фильтра. Если выбрано несколько значений, то после названия располагается счетчик с количеством.

В неактивном состоянии подпись значения отображается бледно.

Кнопка сброса

Разделитель пропадает по ховеру и фокусу

В режиме Cleanable кнопка сброса очищает значение, фокус переходит на кнопку фильтра.

По ховеру и фокусу сброса показывается тултип.

В режиме Removable кнопка сброса удаляет фильтр, фокус переходит на следующий focusable-элемент.

Длинный текст в кнопке

Кнопка-фильтр растягивается в зависимости от содержимого, но ширина ограничена 320px, а переноса текста на новую строку не бывает.

Ограничение ширины дает возможность списку фильтров аккуратно вмещать множество элементов и располагать их на разных строках с переносом.

По ховеру или фокусу в тултипе будет показано полностью нахвание фильра и выбранное значение

Управление с клавиатуры

Фильтр

Enter, Space

Tab

Переход к кнопке сброса или к следующему focusable-элементу, если сброс недоступен

Открыть меню выбора значений фильтра. Фокус на первый элемент меню

Открывает меню, перемещает фокус на его первый элемент

Arrow Down

Arrow Up

Открывает меню, перемещает фокус на его последний элемент

Кнопка сброса

Enter, Space

Закрыть меню выбора значений фильтра без сохранения,
Очистить фильтр
Cleanable: перевести фокус на основную кнопку
Removable: удалить фильтр, перевести фокус на следующий focusable-элемнет

Esc

Скрыть тултип

Добавление нового фильтра

Фильтр по дате

Одиночный выбор

Множественный выбор

Поиск в "множественном выборе"

Фильтр по тексту

Поиск

По умолчанию поиск свернут под кнопку с иконкой лупы.

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

Если расстояния до фильтров достаточно, то само-собой не будет никакого перестроения элементов. Расфокус из пустого поля сворачивает его.

Заполненное поле

Заполненное поле не сворачивается при потере фокуса. Поле скрывается по нажатию на крестик, значение очищается. Фокус переходит на кнопку с лупой. Результаты поиска обновляются.

9-10. Передача в разработку / Приемка реализации

Финально собранный фильтр

К сожалению на момент описания кейса, данный компонент не успели имплементировать ни в один из продуктов (но програмная часть была уже готовой). Думаю показать работу компонента фильтров в динамике будет более наглядно и понятнее всего выше описанного.

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

Заключение

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

Полностью переработано и оптимизировано флоу работы компонентов фильтрации.

Добавлена функциональность по сохранению наборов фильтров, и взаимодействия с ними.

В результате проделанной работы можно подвести итог по основным решенным задачам:

Виталий Говор, Старший дизайнер дизайн-системы РТ

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

Было создано множество прототипов, проведено А/Б тестирование фильтрации, после чего был создан универсальный "швейцарский нож" для наших продуктов! 🙂

Также, отдельно бы отметил, что были постоянные предложения по улучшению наших продуктов и отдельных компонентов, что тоже приятно!

Отзыв