A repeated visual treatment suggests a shared meaning.
01 / UNDERSTAND
Elements that share a colour, shape, size or other visual treatment tend to be perceived as related, even when they are separated by space. People may also expect similar-looking controls to behave in similar ways. Repetition therefore carries meaning, not just visual consistency.
Define which relationships the visual system should communicate. Give the same kind of action or status a consistent treatment and distinguish genuinely different categories. Then look for accidental matches: an ordinary label that looks like a button can invite a click, while two different actions styled identically may hide a consequential difference. Colour can reinforce a category, but a label, icon or shape should provide another way to understand it. Check both the first encounter and repeated use.
02 / RECOGNISE
Examples of how the principle can appear in an interface.
Duolingo’s Practice tab presents several practice activities with a repeated row treatment. Their common layout signals that they are options at the same level, while icons and labels identify their different content. Repeated styling supports comparison; the activity names still have to explain the real difference.
Apple Reminders shows available tags as similarly shaped buttons above tagged reminders. Their common treatment identifies them as a family of filters even when their labels differ. A selected state can then distinguish the active filter, while the words preserve the meaning for people who cannot rely on colour alone.
03 / CONNECT
Consistent visual categories may help people recognise related actions and statuses. Test whether they predict behaviour accurately instead of only judging the screen’s consistency.
Possible influences to investigate, rather than guaranteed outcomes for every product.
04 / APPLY
Assign repeated styles to consistent meanings
Distinguish controls from non-interactive labels
Pair colour categories with text or another visual cue
05 / EXPLORE WITH UPSLIDE
Use a practical guide, read a deeper explanation, or examine a related Upslide project.
Define consistent visual cues and verify that their meaning stays consistent across the interface.
Compare controls that look alike and check whether they behave alike.
Inspect consistent status tags and controls across related workflow stages.
CONNECT THE IDEAS
Keep exploring
An explicit connection makes a relationship visible.
