Visual hierarchy is the order in which people notice things on a screen. Designers control it with scale, color and contrast, weight, spacing and grouping. On this site it covers salience and focus: whether the primary action is the one that stands out, whether the recommended plan looks recommended, and whether the committing button is distinct from Cancel.
NN/g defines visual hierarchy as arranging elements so people take them in by order of importance. Their 2017 eyetracking study (Kate Moran, 71 participants) found that pages with weak visual cues for clickable elements took 22% longer to use and drew 25% more eye fixations than the same pages with strong cues, a sign that people had to hunt. WCAG sets a floor for legibility: at least 4.5:1 contrast for normal text and 3:1 for large text.
On paywalls and plan pickers, hierarchy decides what people choose. If every plan's button looks the same, the recommended one has no pull; if the Next button is muted purple on purple, it becomes the weakest thing on the screen. One clearly dominant action per screen is usually the right target.
How to use it
- Give each screen one filled, high-contrast primary button; make secondary actions outlined or text links.
- Make the plan you recommend visibly different (badge, border, filled button), and keep the others plain.
- Check that buttons and key terms meet WCAG contrast (4.5:1 for normal text) and are not the faintest element on the screen.
Watch out
- Making the paid option bright and the decline option a barely visible grey link manipulates the choice; hierarchy should match what is best for the user, not just the business.
- Emphasizing too many things (badges, colors, animations everywhere) flattens the hierarchy so nothing stands out.
