All principles

    08 · Seeing

    Figure-Ground

    People split what they see into a thing in front and the background behind it. When it's unclear which is which, the eye flips between them.

    Evidence: Holds up

    What we do with it

    1. 01

      Make it obvious what's in front. A dialog needs a dimmed page behind it; a border alone isn't enough.

    2. 02

      Text has to stand out from what's behind it. WCAG asks for a contrast ratio of at least 4.5 to 1 for body text.

    3. 03

      Busy photos behind text make the eye work. Put a solid panel or a dark wash between them.

    Examples

    Getting it wrong, getting it right.

    Don't

    A pop-up with no backdrop over a busy page. People can't tell it's on top, and click the page behind it.

    Do

    The page dims behind the pop-up, and clicking the dimmed area closes it.

    The evidence

    What the research says.

    Evidence: Holds up

    A cornerstone of perception research since Rubin. Later work found the eye uses many cues to decide what's in front: regions that are smaller, enclosed or familiar tend to become the figure, and so do regions lower in the scene, as Shaun Vecera, Edward Vogel and Geoffrey Woodman showed in 2002.

    A second look

    Is your product breaking one of these?

    Most teams can't tell from the inside. Send us the page or the flow that's not working, and we'll tell you which of these we'd look at first.

    Email hello@synergyprod.com