Skip to content
QIO journal

Websites and development4 min read

An interface to manage 10,000 PCs: seven decisions from a designer's practice

A B2B interface for monitoring and scheduling tasks on 10,000+ computers runs into three things: a 40-column table, a stack of modal windows and the price of one accidental error. Designer Alisa described on Habr how she solved this with an administrator's real working screen about 630 px tall. Seven UX design decisions, from the navigation rail to the master-detail pattern, that transfer to any enterprise interface.

An interface to manage 10,000 PCs: seven decisions from a designer's practice

The constraint everything started from

Administrators work on 13-inch laptops with browser panels open, so the useful window height is about 630 pixels. Mockups on large monitors hide that reality. Hence the project's first rule: every vertical pixel is worth more than a horizontal one.

We test client admin panels on a laptop with browser panels open for exactly this reason: a mockup on 27 inches and an operator's workplace are different interfaces. We now add a mandatory 'what happens on failure' scenario to the brief for any bulk operation.

Seven decisions

Space first, then complex interactions, then error prevention.

  • A compact navigation rail instead of a full sidebar.
  • A collapsible filter panel so the table gets maximum area.
  • A select menu instead of tabs: new sections do not break the layout.
  • An 8 px micro-grid as a functional rather than aesthetic tool.
  • Layered drawers instead of modal windows: context stays, previous data remains visible.
  • Master-Detail with a timeline that shows task density over time.
  • Splitting collisions into logical (schedule conflicts) and resource (network overload) with indicators right in table rows.
Diagram: three panels sliding out in layers from one side
Layered drawers instead of modals: each next one narrower than the previous, context is kept.

Protection against an expensive error

In a system where one action touches thousands of machines the interface must make errors hard. Creating a task requires a mandatory 'On failure' block: what to do if some machines do not respond. A load heat map shows when a task exceeds network capacity: a red line, not a paragraph in documentation.

How to measure the result

The author sets two metrics: time on task, reduced by mask search and bulk operations, and error rate, reduced by conflict validation and the absence of blind spots. Both are measurable before and after and independent of taste.

Summary

An enterprise interface is designed from the real screen and the cost of an error, not from a pretty mockup. Rail, drawers, timeline and a mandatory failure scenario work in website admin panels and client areas too.

Sources

  1. Designing a B2B interface to manage 10,000+ PCs (Habr, in Russian)
  2. Material Design 3: Navigation rail
  • UX design
  • Navigation Rail
  • Master-Detail
  • Enterprise interface

Follow the journal

New pieces on websites, SEO and AI come out in the QIO journal. Follow in Google, by RSS or in Telegram to get them first.

Read next

How can we help?
Discuss a project