Дизайн интерфейса системы управления IT-инфраструктурой

ООО «Гиперус» — компания, которая разрабатывает и внедряет решения для управления IT-инфраструктурой. Их флагманский продукт — одноимённая система для автоматизации мониторинга, администрирования и поддержки серверов и облачных сред.

Бизнес-задача

Упростить управление ИТ-инфраструктурой, сократив время на рутинные операции (развёртывание, мониторинг, устранение неполадок) за счёт интуитивного интерфейса, сокращающего когнитивную нагрузку на администраторов.

Дизайн-задача

Создать понятный, логичный и адаптированный под задачи пользователей интерфейс. Для этого нужно было:

1. Проанализировать существующий интерфейс и выявить основные проблемы — перегруженность, навигационные тупики, неинформативные экраны.

2. Разработать новую информационную архитектуру — оптимизировать структуру разделов, перераспределить функциональные блоки и выстроить понятную навигацию.

3. Адаптировать интерфейс под Ant Design — использовать компоненты библиотеки для унификации элементов, ускорения разработки и визуальной целостности.

4. Учесть разные пользовательские роли — обеспечить администраторам, операторам, руководителя отделов и т.д. удобный доступ к нужным инструментам .

5. Снизить когнитивную нагрузку — упростить восприятие интерфейса, сократить путь к действию, улучшить читаемость данных.

Дашборд. Вариант 1

Дашборд. Вариант 2

Артефакты:

- Бизнес-требования.

- Список пользовательских сценариев, основных интерфейсных сущностей и фокусов.

- Информационно-архитектурная карта интерфейса.

- Поэтапный план работ по редизайну интерфейса, разбитый на 3-4 части, примерно одинаковые по объемы и связанные по смыслу.

- Детальные списки сценариев с отклонениями (по каждой части интерфейса).

- Макеты интерфейсов.

- Библиотека используемых компонентов (Ui-kit).

- Описание логики работы системы.

Список проектов

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

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

Инстанс, карточка

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

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

Создание инстанса

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

Создание инстанса, базовая конфигурация

Создание инстанса, конфигурация сети

Некоторые цифры

Переработали 5 разделов 

Обновили дизайн, добавили новую функциональность

Отрисовали 17 подразделов 

User-flow создания сущностей и карточки самих сущностей

Для дашборда 85 макетов 

В разных состояниях, при взаимодействии с разными элементами

В разделе «Дашборд» отрисовали работу с таймлайном, добавление виджетов, изменение размеров и т.д. — для двух пользовательских ролей отдельно.

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

Дашборд. Добавление виджета

Финансовый эффект

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

Список доменов