RackTables Redesign: Укрощение сложности
Роль
Product Designer / Frontend UI
Фокус
Информационная архитектура, снижение когнитивной нагрузки, проектирование слоистых данных.
Контекст
Трансформация исторически сложного legacy-инструмента дата-центров в продукт потребительского качества (Consumer-grade UX).
Key Visual
Промышленный стандарт. Новый взгляд на управление инфраструктурой.
🎯 Импакт редизайна
-
•
Снижение визуального шума: Отказ от заливки строк в пользу семантических токенов ускорил считывание статуса объектов.
-
•
Оптимизация IA: Сокращение 13+ разрозненных вкладок до 4 логических хабов с помощью прогрессивного раскрытия (Progressive Disclosure).
-
•
Масштабируемая навигация: Разделение конфликтующих глобального и локального меню.
-
•
Live Prototyping: Перенос макетов в живой HTML/Tailwind код для валидации плотности данных в браузере.
Проблема: Когнитивный барьер
Оригинальный интерфейс RackTables проектировался по принципу дампа базы данных. Инженеры сталкивались с экстремальной информационной плотностью, где не было визуальной иерархии. Хаотичное цветовое кодирование, разорванные паттерны сканирования и избыточная навигация заставляли тратить критически важное время на поиск нужного статуса, а не на решение самой проблемы.
Рис 1. Анализ "Before": Цветовой шум, сломанные F-паттерны и перегруженная панель вкладок.
Прямая речь: Боли инженеров
«Глаза разбегаются. Вся таблица залита красным, желтым, серым цветом. А теги написаны мелким текстом прямо под именем сервера, из-за чего колонка прыгает по высоте.»
«Чтобы понять, какие правила NAT прописаны для этого сервера и в каком пуле он балансируется, мне нужно прокликать три разные вкладки, теряя общий контекст.»
Решения и Архитектура
1. Реестр объектов: Восстановление вертикального ритма
В главном списке я очистил «визуальный мусор». Цветовые заливки строк были заменены на семантические токены статусов (Alert, Active). Теги вынесены в отдельную колонку в виде бейджей, а фильтрация переведена в горизонтальный формат Faceted Search, освободив 25% ширины экрана.
Рис 2. Data Grid: Фокус на читаемости имен и быстром сканировании статусов периферийным зрением.
2. Слой данных: Network Hub & VS Groups
На экране самого объекта я отказался от 13 вкладок. Вместо этого создан единый логический поток: от физического интерфейса (IP) к маршрутизации (NATv4) и балансировщику (VS Group). Это позволяет инженеру мгновенно отследить путь трафика. Для NAT использована визуализация направления (стрелки) вместо сухих колонок.
Рис 3. Группировка сетевых зависимостей и вынос критических алертов в шапку (Hero header).
3. Разрешение конфликта навигации
Оригинал страдал от смешения глобального меню (база данных) и локального (настройки сервера). Я спроектировал два масштабируемых паттерна глобальной навигации под разные нужды энтерпрайза: Collapsible Sidebar (боковая панель для глубокой вложенности) и Top Mega Menu (для экономии горизонтального пространства).
Рис 4. Вариант структуры с левым сайдбаром (Sidebar Pattern).
4. Стойка как контекст (Мини-карта)
Блок Rackspace allocation был переработан. Чтобы он не перетягивал внимание от сетевых настроек, я перевел его в режим «темной мини-карты». Инженер всегда видит, где физически находится устройство (например, Unit 8), но графически этот блок ушел на второй план.
Рис 5. Боковой виджет стойки, не отвлекающий от траблшутинга.
Живой прототип (Tailwind CSS)
Статичные макеты не передают истинной работы с таблицами и скроллом. Для проверки гипотез о плотности данных я собрал интерактивный frontend-прототип с помощью AI (vibecoding). Код написан на Tailwind CSS, адаптивен и готов к интеграции.
Запустить Live Preview
Рефлексия: Инженеры заслуживают Consumer-grade UX
Работа над enterprise-продуктами часто сводится к попыткам уместить максимум инпутов на одном экране. Этот кейс показывает, что даже суровые инфраструктурные инструменты вроде RackTables могут быть элегантными.
Секрет не в том, чтобы «сделать красиво», а в том, чтобы понять логику принятия решений. Выстроив правильную иерархию слоев (Физический объект → Сеть → Логика балансировки) и убрав визуальный шум, мы радикально снижаем время реакции на инциденты. Данные больше не мешают работе с данными.