E4.20.1divider as forced cutdesignresearch

A divider is a forced cut for when the relationship would otherwise be unclear

Aliases: rule line · hard separation · section rule

What it is

A divider is a drawn boundary used to force a cut when spacing cannot make the relationship clear. In settings, Account and Privacy would be read as one set of switches if they sat together; a line between them says “this far, another class below.” The line’s job is to break a wrong ownership, not to stroke a border around blocks that are already distinct. A line on a relationship that is already clear is decoration, and it interrupts a reading that should have stayed connected.

Why it happens

Grouping perception prefers proximity, alignment, and common region. When those cues are weak — similar distances, shared alignment, no plates of their own — the eye welds items into one group. A line offers a content-independent break: not distance, but “there is an explicit edge here.” The cost of force is that it cannot be ignored: a line steals more attention than space and becomes a pause in the scan. Pauses should fall where the class actually changes. Inside one class, the pause is noise, and people re-parse the next item as a new class when it is only the next member of the same group. A line also implies the two sides are peers; if one side is a heading and the other is content, cutting with a line can expel the heading from the group it names. Forced cuts are typical when like-looking controls run on but the meaning has shifted, or when the gap between two groups cannot grow any further.

Studying it

Present the same settings as no dividers, dividers only at class changes, and a divider on every item. Ask people to circle “what is one group” and to locate “go change Privacy.” Independent variables: line placement, whether line and spacing are both present. Dependent variables: grouping accuracy, times an item under a line is taken as a new class. Lines at class changes should raise accuracy; a line on every item should lower it and slow locating.

Where it stops holding

Table grid lines locate cells; they are not this kind of class cut. Cards already cut objects with a plate; a line between cards is usually extra. Print has a tradition of rules; the same density on a screen feels more fragmented because the screen also scrolls and every line is another pause. A very low-contrast “line” does not cut; do not expect a pale hairline to do a forced cut.

Applying it

  • Draw a line only on the boundary where, without it, items would be seen as one group and they are not.
  • Do not put lines between items of the same class as a substitute for row height.
  • If one side of the line is a heading, check whether the heading should remain in the group; if it should, do not expel it with a line.
  • How to check: remove every line and see which items are wrongly fused. Put back only those boundaries. Every extra line is a fake class change.

Related

  • Within the group: E4.20.2 Whitespace groups by spacing, without drawing an edge · E4.20.3 Too many dividers make the surface look shattered · E4.20.4 Too little whitespace makes separate items read as one group
  • Adjacent: E4.01 Cards · E4.17 List grouping and sticky headers
  • Search terms: divider · forced grouping · visual separation

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E4.20.1