F3.09.3position meaning by layout modedesign

The same position does not mean the same rank under every layout mode

Aliases: sidebar is not always secondary · mode-bound position · right rail

What it is

On a desktop news site the right rail has been ads for years, so people learn “the right is secondary.” The same pixel strip, in a settings split view, is the primary action: save, permissions, danger. Carry “right rail = ads” from the news site into settings and save becomes skippable. The rank a position implies follows the layout mode in force, not screen coordinates. Change breakpoint, change columns, change master–detail roles, and the same place can flip from secondary to primary or back.

Why it happens

Position can imply rank only after a layout schema has been used enough: where the main column is, where the auxiliary is, where actions pin. Swap the schema (three desktop columns to a phone stack, master–detail to tabs) and the coordinates remain while the slot’s job changes. People read slots by the current schema, not as “this is 300 px from the right edge.” The ad-rail schema on news is strong, so a first visit to a settings split may briefly apply “the right does not matter” — until other weight on the action corrects it, or fails to and an action is missed. Mode is not a device name. It is the structure this page is using: master–detail, wizard, media-plus-caption, tools-plus-canvas. Each assigns a different grade to the same place.

Where it stops holding

Strong platform conventions (iOS top-end Done, LTR desktop left nav) stay still across apps for a while and look like fixed position meaning; the platform has nailed the mode. Diverge (Done on the top-start) and the convention becomes a lie. Under responsive layout the same URL is two modes at wide and narrow; secondary-ness of a wide right rail does not inherit to the second block after a narrow stack — that block may now be the main content below the fold.

Applying it

  • Write a position dictionary per layout mode: “in master–detail the detail is always lighter than the master; in a settings split the right is the submit region, not an ad rail.” Do not reuse dictionaries across modes.
  • When a narrow breakpoint folds the right rail underneath, re-grade it. If it becomes the primary action, restore size or contrast; do not take the desktop “secondary” greys with it.
  • A split component borrowed from a news product must drop ad-rail defaults before it is used on a tools page.
  • Check: embed the same component in “media plus ad rail” and “form plus submit rail.” Ask which block you can skip. If the answers match, position has been read as fixed coordinate semantics. Change the rail’s relative weight in each mode until people say “ad rail skippable, submit rail not.” Ask again after a narrow stack, to confirm the skippable-ad schema did not travel onto the submit button.

Related

  • Same group: F3.09.1 The top and the start side are granted higher rank by default · F3.09.4 Rank that relies on position alone, with no other visual cue, is easy to miss
  • Nearby: F2.10 Responsive breakpoints · F2.11 Fluid and adaptive layout · F1.14.3 Conventions vary by platform and writing direction
  • Search terms: layout mode · sidebar · responsive · positional hierarchy

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F3.09.3