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

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

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

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

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

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

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

1. Проанализировать существующий интерфейс и выявить основные проблемы — перегруженность, навигационные тупики, неинформативные экраны.
2. Разработать новую информационную архитектуру — оптимизировать структуру разделов, перераспределить функциональные блоки и выстроить понятную навигацию.
3. Адаптировать интерфейс под Ant Design — использовать компоненты библиотеки для унификации элементов, ускорения разработки и визуальной целостности.
4. Учесть разные пользовательские роли — обеспечить администраторам, операторам, руководителя отделов и т.д. удобный доступ к нужным инструментам .
5. Снизить когнитивную нагрузку — упростить восприятие интерфейса, сократить путь к действию, улучшить читаемость данных.

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

Результат

Что получилось

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

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

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

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

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

Артефакты:

• Бизнес-требования.
• Список пользовательских сценариев, основных интерфейсных сущностей и фокусов.
• Информационно-архитектурная карта интерфейса.
• Поэтапный план работ по редизайну интерфейса, разбитый на 3-4 части, примерно одинаковые по объемы и связанные по смыслу.
• Детальные списки сценариев с отклонениями (по каждой части интерфейса).
• Макеты интерфейсов.
• Библиотека используемых компонентов (Ui-kit).
• Описание логики работы системы.

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

Дополнительно

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

Нюансы и особенности процесса

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

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

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

Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.

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

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

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

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