Unit 08.03: Hierarchy: what the eye reaches first

The eye reaches things in a predictable order, and you can decide what it reaches first.

Five channels, ranked by strength

Position, size, contrast, colour and shape, in the order they capture attention.

The code ranks them.

ORDER = [
    (1, "position",  "highest -- the eye finds top-left first"),
    (2, "size",      "large elements read before small"),
    (3, "contrast",  "dark on light before mid-grey"),
    (4, "colour",    "one saturated element among greys"),
    (5, "shape",     "lowest -- only noticed on inspection"),
]
print(f"{'rank':>4} {'channel':10} strength")
for rank, channel, note in ORDER:
    print(f"{rank:>4} {channel:10} {note}")

print("""
A chart where everything is the same weight has no hierarchy, so the eye
starts top-left and works across -- which is rarely the order of the argument.

Decide what should be seen first and give it the strongest channel available.
Usually that is position: put the finding at the top left.
""")

Position is strongest, which means the single most effective design decision is what goes top-left. Shape is weakest and is noticed only on deliberate inspection - which is why encoding a category in marker shape alone rarely works.

A chart where everything has equal weight has no hierarchy at all, so the eye starts top-left and works across. That is rarely the order of the argument.

The mistake this prevents

The mistake is creating hierarchy with colour when position was available. Colour is the fourth-strongest channel and the most overused; moving the finding to the top-left costs nothing and works better.

Takeaway

Decide what the eye should reach first and give it the strongest available channel. Position beats colour, and shape alone is barely noticed.

Mark complete