Flattening weakens hierarchy cues and needs other compensation

What it is

A redesign drops card shadows, section fills and the bevel on buttons, leaving a monochrome plane and hairlines. The old file could split “this is a tappable layer, that is ground” on height and fill. On the new file, toolbars, content and a destructive button stand on one sheet of paper, and people tap captions as if they were buttons. What flattening removes is a set of cues that used to carry hierarchy, not a cleaner hierarchy for free. Unless size, luminance, spacing or shape put the difference back, flattening is taking hierarchy apart. Compensation is an explicit replacement, not “they will learn to tell.”

Why it happens

Classic control hierarchy was written heavily in depth and material: raised meant pressable, inset meant input, shadow meant a floating layer. Removing them shuts two feature maps. What can still rank strong versus weak is size, light–dark, position, verbal meaning. If the redesign also “tidies” those (type sizes equalised, greys narrowed, spacing evened), the maps are almost empty and classification falls to guessing. Blame often lands on “flat taste.” What is missing is a nominated replacement channel after the old cues were switched off. A line border can compensate “this is a block.” It cannot compensate “this is higher, this can be pressed.”

Where it stops holding

A tools UI whose type ladder and luminance ladder were already steep still ranks after shadows go; compensation is already there, and flattening itself need not worry you. Subtle states that skeuomorphism split with highlights (pressed / unpressed) were going to move to colour or a label anyway — that is state recoding, not page hierarchy. A full high-contrast assistive mode will crush remaining greys; a flat UI that only splits levels with pale grey fails a second time in that mode.

Applying it

• Before dropping shadows and gradients, write “old cue → new cue”: floating layers get a scrim plus size, primaries get a solid fill and a larger hit area, sections get spacing instead of a tinted ground.
• Do not “remove height and also collapse type to two rungs” in one pass. Flatten one class of cue at a time, and confirm the replacement can classify on its own.
• Tappable versus not must still split on shape or luminance, not only on the pointer becoming a hand.
• Check: make wordless block maps of old and new (type replaced with bars). Ask which blocks can be tapped and which sit above. If the new map cannot be marked and the old can, compensation failed. Open only the channel you added and test again: restore a size gap without restoring shadow; if classification returns, compensation holds. If it still fails, taste is not the shortage — a working replacement has not been chosen.

Related

• Same group: F3.08.1 Emphasising everything emphasises nothing · F3.08.3 Hierarchy failure shows up as not knowing where to look first
• Nearby: F3.06.1 Shadows express how elements stack · F5.12.3 Hierarchy that depends on shadow or gradient needs an alternative in high contrast · E1.02 Button states
• Search terms: flat design · elevation · affordance · hierarchy cue