use UI

Master-Detail vs Split View

On screen they are the same picture: two panes side by side. The difference is whether one pane navigates the other. In a split view both panes are of equal standing — source and preview — so nothing about the split is a location, and the only real work is making the divider an operable control rather than a decorative line. In master-detail the left pane chooses what the right pane shows, which makes every selection a navigation: it needs an address, a working Back button, and a second design for phones where selecting becomes a page change rather than a pane swap.

If one pane chooses what the other shows, it is master-detail and the selection belongs in the URL. If both panes are read together, it is a split view and only the divider needs work.

Master-Detail

A list of items beside the detail of whichever one is selected.

Reach for it when

  • People move through many items of the same kind — messages, tickets, records — and compare as they go.
  • Keeping the list visible saves repeated navigation back to it.
  • A selected item is worth linking to on its own.

Avoid it when

  • There are five items. Show them all; a list beside a detail is overhead for a set that fits on one screen.
  • The detail needs the full width — a document, a canvas, a wide table.
  • Items are read once and never returned to. A plain list of links to full pages is simpler and faster.

Split View

Two panes shown together with a movable divider between them.

Reach for it when

  • The two panes are consulted together — writing beside a preview, a diff beside its file, a form beside its result.
  • Different people want different proportions, and the split is worth adjusting.
  • Both panes are of equal standing: neither is a menu for the other.

Avoid it when

  • One pane selects what the other shows. That is master-detail, and the selection needs an address.
  • The window is narrow. Two panes below about 700px are two cramped columns; stack them instead.
  • The proportion never changes. Then it is a grid, and a draggable divider is a control nobody needs.