Visual hierarchy properties priority?

Question

I know that size, color, proximity, etc. are the building blocks of visual hierarchy but I'm wondering, which properties have priority over others?

For example in this video it is shown that when you add color to a bunch of circles the eye is drawn to it. However in that same example there is a circle with bigger proportions than the others. So, why wouldn't the eye be taken to the size first and then the color? Does color have a higher priority than size?

Also, I don't really agree with his demonstration of visual hierarchy on a previous version of the apple site. I think the image is visually more powerful than the big-sized bold headline. What do you think? Do images have a higher priority in the visual hierarchy than other properties?

Answer 1

There is no way to definitely say that one property of visual hierarchy always takes precedence over another. It depends on the exact implementation.

For example, a button that takes up 99% of the screen that is a feint gray make take precedence over a bright red button that takes up 1% of the screen. But if we have a regularly sized button that is bright orange over a fully gray background then it takes visual precedence, even though the size is still much larger for the grey section.

We can't just say "size always take precedence over color" or the opposite. It also varies from person to person to some degree.

As such, you should keep the visual hierarchy principles in mind when designing and do testing as you go to make sure that people are being lead as you want them to be.