Ops Queue Triage.

Interface concept

The screen an operations team lives in all day: 420 shipment exceptions, filtered, sorted and cleared under time pressure. Built to argue that the ordinary internal table is where the craft actually shows — density as a measured decision rather than a default, a keyboard path that does not require the mouse, and an export that cannot be turned into an attack on the person who opens it.

Interface concept — not a live product. The data is generated, the company is fictional, and the mutations are simulated in the browser.

ops-table · interface conceptOpen full screen ↗
Live and interactive. Press / to search, j and k to move, or ? for the full shortcut sheet. Best opened full screen.
Design notesFour decisions you cannot see by looking

The CSV export guards against formula injection

A cell beginning =, +, - or @ is executed as a formula when Excel or Sheets opens the file, and a customer name is attacker-influenced data — so an export is a live path out of an ops tool and into someone's spreadsheet. Those cells ship prefixed with an apostrophe, alongside a UTF-8 BOM so Windows Excel stops mangling non-ASCII names.

420 rows, one tab stop

A plain table puts every focusable control in the tab order, which is 840 stops before a keyboard user reaches the end. A roving tabindex keeps exactly one row in the sequence and moves with the arrow keys or j/k. Full role="grid" would also solve it but commits to cell-level focus management and application-mode screen-reader semantics — if these rows ever become editable this should be promoted to a real grid rather than patched further.

Fixed layout, tabular figures, headers that follow their column

The ecosystem default lands on 49px rows with proportional digits and every column left-aligned, which makes figures impossible to compare down a column and lets widths shift as data loads. Here the numerics are right-aligned with their headers, every figure is tabular, and table-layout is fixed against an explicit colgroup — which is most of how 19 rows fit in the space that usually shows 12.

The verification pass found five defects, and they are in the README

Rows measured 35px rather than the designed 33px because the status pill, not the text, was setting the height; a second easing curve had ridden in from the component library's defaults; the skip link animated a layout-inducing property; numeric headers computed as left-aligned and only looked correct; and the page scrolled horizontally at 320px. Portfolio work usually hides that list. Publishing it is the more useful signal.

← Back to Labs