K3.03.3hinge-safe content placementdesign

The hinge must not hold anything the user has to read or hit

Aliases: hinge exclusion · crease avoidance · fold-safe layout

What it is

The inner display has a physical hinge or an optical crease down the middle. Pixels there are either blocked by the seam or worse in brightness, touch, and flatness. Keep critical content off the hinge band: primary buttons, the line being read, text fields, icons that must be hit, all belong on intact glass on either side. The system publishes a hinge exclusion zone, but an app can still draw a centered dialog, a full-width progress bar, or a banner into that band. Size jumps and state preservation are problems in time. This one is spatial: after unfolding, the physical seam is still there.

Why it happens

A hinge is a mechanical seam along a short or long edge. Polarization, reflection, and a slight depression at the crease soften type and break thin strokes; touch sampling can also jump across the seam. Gaze is pulled to the discontinuity, so a centered title looks torn. A hit target on the seam may receive a contact on the other side, or in a region the system treats as a split gesture. In half-fold the hinge goes from a thin seam to a near-right-angle corner; controls that sat on the seam flip onto the side or the base, invisible and untappable. Full-screen video and games sometimes let the picture cross the seam—that is a compromise for content that can be cut, with interaction still landing on the two sides. Body text, forms, and navigation cannot take that compromise.

Where it stops holding

Wallpaper, full-bleed photos, and video may cross the seam if no required subtitle or required control sits on it—captions should clear the exclusion zone. A drawing canvas spanning the seam is reasonable; toolbars and palettes should still rest on one side. On devices whose hinge is nearly invisible, the exclusion can be thinner, but a 44-point button still should not be centered on the midline and split in half. Dual screens with a real gap (two separate pieces of glass) are a harder constraint than a flexible crease: content cannot ride a physical hole. Dragging a desktop window across two displays is a similar discontinuity, but the user can move the window; a foldable’s seam sits in the middle of the device, so the window cannot dodge it—only the content can.

Applying it

  • Read the system hinge exclusion zone. Place primary actions, fields, navigation, and the line being read outside it. Shift a centered sheet to one side, or guarantee its buttons clear the seam.
  • Do not let full-width splitters, sliders, or steppers ride the midline. If a progress indicator must be full width, put the draggable thumb off the seam.
  • In half-fold, pull the interactive surface onto the panel that still faces the user. Do not leave the primary button on the half that became a base.
  • Verify by unfolding the inner display and drawing a translucent hinge band over the primary button, the current reading line, and the focused field. Anything that must be read or hit intersecting the band is not yet clear. Half-fold and tap the main path again; no hit target should remain on the side face.

Related

  • Within the group: K3.03.1 Folding and unfolding are a live change of size · K3.03.2 A fold change has to keep scroll position and input state
  • Adjacent: K3.01 Large-screen Two-pane Layout · K3.05 Split-screen and Multitasking · K2.02 Multiple Displays
  • Search terms: hinge occlusion · fold crease · display cutout

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/K3.03.3