К содержимому
Журнал QIO

Сайты и разработка2 мин чтения

Интерфейс для управления 10 000 ПК: 7 решений из практики дизайнера

B2B-интерфейс для мониторинга и планирования задач на 10 000+ компьютеров упирается в три вещи: таблицу на 40 колонок, стопку модальных окон и цену одной случайной ошибки. Дизайнер Алиса описала на Хабре, как решала это при реальном рабочем экране администратора высотой около 630 px. Разбираем семь решений UX-дизайна, от Navigation Rail до паттерна Master-Detail, которые переносятся в любой корпоративный интерфейс.

Интерфейс для управления 10 000 ПК: 7 решений из практики дизайнера

Ограничение, с которого всё началось

Администраторы работают на 13-дюймовых ноутбуках с панелями браузера, и полезная высота окна — около 630 пикселей. Дизайн-макеты на больших мониторах эту реальность скрывают. Отсюда первое правило проекта: каждый пиксель по вертикали ценнее горизонтального.

Мы проверяем админки клиентов на ноутбуке с открытыми панелями браузера именно по этой причине: макет на 27 дюймах и рабочее место оператора — разные интерфейсы. Обязательный сценарий «что делать при сбое» мы теперь добавляем в бриф на любую массовую операцию.

Семь решений

Сначала пространство, потом сложные взаимодействия, потом защита от ошибок.

  • Компактная навигационная рейка вместо полноценного сайдбара.
  • Свёртываемая панель фильтров, чтобы таблица получала максимум площади.
  • Выпадающий выбор вместо табов: новые разделы не ломают верстку.
  • Микросетка 8 px как функциональный, а не эстетический инструмент.
  • Многослойные шторки вместо модальных окон: контекст сохраняется, предыдущие данные видны.
  • Master-Detail с таймлайном, который показывает плотность задач во времени.
  • Разделение коллизий на логические (конфликты расписания) и ресурсные (перегрузка сети) с индикаторами прямо в строках таблицы.
Схема: три панели, выезжающие слоями с одной стороны
Слои шторок вместо модальных окон: каждая следующая уже предыдущей, контекст не теряется.

Защита от дорогой ошибки

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

Как измерять результат

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

Итог

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

Источники

  1. Как впихнуть невпихуемое: проектируем B2B-интерфейс для управления 10 000+ ПК (Хабр)
  2. Material Design 3: Navigation rail
  • UX-дизайн
  • Navigation Rail
  • Master-Detail
  • Enterprise-интерфейс

Подписаться на журнал

Новые разборы о сайтах, SEO и ИИ выходят в журнале QIO. Подпишитесь в Google, по RSS или в Telegram, чтобы получать их первыми.

Читайте также

Чем можем помочь?
Обсудить проект