“Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance. In other words, visual hierarchy influences the order in which the human eye perceives what it sees. This order is created by the visual contrast between forms in a field of perception.”
Through basic design principles you emphasize one element over another so more important content looks more important. You design related elements to provide visual cues that those elements are on the same level in the hierarchy. You organize everything on the page to create a sense of order.
By creating visual hierarchies, designers enable pages to be scanned and make information easier to understand.
Compare the two images below, one with no hierarchy and one with a clear hierarchy.
The image on the left has no hierarchy and as a result anyone visiting the page will need to do a lot of work to determine if this page is what they want. Assuming it is, the visitor has no choice, but to read every word on the page to find the bits of information they’re interested in or need to complete their task.
The image on the right on the other hand makes the page easy to scan. It’s easily scanable and won’t require much effort for the visitor to determine if she’s on the right page. Assuming she is, the page leads her quickly to the information she wants or needs.
You design one element to have more dominance than another by giving it more visual weight. The greater its visual weight, the more an element will attract the eye and exhibit dominance.
here are the most common characteristics you can vary to set different visual weights:
- local white space,
- intrinsic interest,
- perceived physical weight,
You can create dominance through visual direction as well. For example, you might surround an element with arrows all pointing to that element. If there are enough directional cues, the element could become dominant even if it’s of lesser visual weight than other elements on the page.
Visual hierarchy enables visitors to scan information. It helps you communicate a message quickly and effectively. The top of the hierarchy (the dominant element) should help to answer questions a visitor might immediately have upon landing on the page.
Within seconds, visitors should be able to pick up the key points and main message of the page. They can do this if you make the most important information the most visually prominent.
People who stick around longer than a few seconds should be able to scan through the focal points in your design to gain the next most important message(s) that you want to communicate, and so on with the rest of your information.