Principles of Web Design: Hierarchy and Gestalt
We all know what it’s like to have a frustrating web experience or get lost in a site with many pages. Hierarchy and visual cues can help alleviate the confusion and point the user to where you want them.
Hierarchy and visual elements are paramount in web design and usability.
The human brain has a very distinct organizational system for viewing the world around us. We take in so much information through our eyes that our brain has to have a specific set of rules for sorting everything.
One theory of visual perception is that of the Gestalt principles. Gestalt is a German term meaning “unified whole.” Humans tend to organize visual elements into groups by nature.
The image to the left is a series of various shapes, yet because of their proximity to one another, and their similarity in shape, they are perceived as a group by our brain.
The Gestalt principles of similarity, continuation, closure, proximity, and figure–ground are all used in web design. A good web designer will know exactly how to direct a user’s attention by combining several of the concepts above.
The picture above is a great example of the similarity principle. In this case, three of the human figures are similar. The one on the right is different, which immediately captures our attention.
It’s easy to see how similarity – and dissimilarity – can play a role in dictating user focus. For example: A large, bold header will draw more attention than light-gray text underneath, and a navigation bar with a bold color will be seen before other elements. As westerners, we read from left to right. This is also how we scan the web. A logo in the top left corner won’t be missed nearly as much as a logo in the center or on the right of the page.
The navigation is the most important feature on a website. As web designers, we have to ensure that the navigation stands out to the point that people can easily find it. This is a prime example of when hierarchy should be used.
The user needs to know how to operate your site. Our brain identifies elements that are bolder, larger, or brightly colored as being more important.
The use of visual groupings is aesthetically appealing and draw a user in. This value of hierarchy will make your site easier to read and use. There are no defined rules when designing a website—but basic principles we follow to make the best web experience for a user.
The standards of web design have evolved since the inception of the Internet. It has become standard for all websites to have: a header with a logo and navigation, a body holding main content and a footer. These standards have progressed because users have become comfortable with them, and know how to use them.
Over time the standards will continue to transform because technology changes. Currently most standards are based off of mouse clicks. In ten years, we may not be using the mouse anymore. The standard of hierarchy will not change; it will continue to be used to help our eyes find what we need.
Tune in next week for part two of our four part series, “The Principles of Web Design”. View the introduction to the four part series here.
For more news and articles, visit our blog page.
