← Close file
FR 06Interaction Design20263 min readOpen file · no password

Who gets to close the filter?

An AI chat panel had to fit next to an existing filter tray on a 1440 px screen. Every panel competes for the same width, and the content pays for all of it.

In 30 seconds

Problem
A new chat panel, an existing filter tray and the data people read, all competing for one screen.
What I did
Built the three candidate layouts as a working prototype and measured the content width of each, instead of estimating it.
What changed
My recommendation: the filter collapses when the chat opens, and stays one click away.
RoleSenior Product Designer: options, prototype, recommendation
TeamWith product directors and product leads
StatusRecommendation · in discussion

01 · The situation

Three panels, one screen

Analysts mostly work on a 1440 px screen with a side navigation and a filter tray. We were adding an AI chat panel. Every panel competes for the same horizontal space, and the content, the tables and charts people are actually reading, pays for all of it.

It looks like a layout question. It's really a question about who is allowed to close what.

1 · SIDE BY SIDEFILTERCHAT724 px contentnothing moves · three panels2 · FILTER COLLAPSESMY RECOMMENDATIONNAVCHATFILTER832 px contentnav expanded · filter collapsed next to the chat, one click away3 · CHAT OVER FILTERCHAT1060 px contentfilter hidden under the chat · chat and filter exclusive
Three layouts · measured at 1440 pxFig 01

02 · The options

Measured, not estimated

All three built in a working prototype at 1440 px: same panels, same content. Filter and chat are 336 px each.

  1. Side by side. Nothing moves, nothing is hidden. Also the most expensive: three vertical panels at once, and the data squeezed into a 724 px column.
  2. Filter collapses when the chat opens. The chat takes the filter's place. The filter folds away but stays applied, and it can be reopened next to the chat at any time. 832 px of content, even with the side navigation expanded.
  3. Chat over the filter. The widest content, 1060 px, because the chat simply covers the filter. The cost: chat and filter become mutually exclusive. Opening one closes the other.
724px content · side by side
832px content · filter collapses · recommended
1060px content · chat over filter

03 · What I recommended

Follow the intent

  1. Opening the chat is a statement of intent. The layout follows what the user just did, instead of asking them to clear space first.
  2. Collapsed, not removed. Filters stay applied and stay editable, one click away, even next to the chat. And adjusting filters isn't the main job of the chat, so folding them away costs little.
  3. Focus without lock-in. The chat gets room without taking too much of the report, especially if most people work with the side navigation open.

Option 3 wins on raw width, and I still didn't pick it. An overlay makes a choice for the user and keeps it. Option 2 makes a sensible default and lets the user undo it.

Let the user's last action set the layout, and never remove what they set.

04 · What I'd check next

Space is measured. Comprehension isn't.

I measured space, not understanding. The open question is whether people notice their filters are still applied while the tray is collapsed. That's a short unmoderated test, and it's the thing most likely to change my answer.