Visual Hierarchy

With emerging technologies and changes in the user interface, the strength for visual design continues to grow. However, the way we perceive visual information remains the same.

Visual hierarchy can be defined as follows:

Visual hierarchy controls the delivery of the experience. If you have a hard time figuring out where to look on a page, it’s more than likely that its layout is missing a clear visual hierarchy.” – by Nielson Norman group

In short Visual Hierarchy is the organization or arrangement of design elements in such a way that it influences the user’s perception and helps them take desired actions.

Visual hierarchy is one of the most important principles behind an effective user interface. We need to ask the following questions in order to see that the visual hierarchy works on a screen:

  1. What is the purpose of this product?
  2. How can I use it?
  3. Why should I use it?  

These are the same questions we ask while creating a user-friendly product. When we use visual hierarchy, we make it easier for visitors to find what they are looking for. This definitely highlights the actions we want the users to perform too.

Some tips to help you create a strong visual hierarchy: 

  1. Understand the priority of the user’s tasks: Conduct a task analysis of the end-users while using the product or interface and prioritize the tasks based on frequency and importance. In such a situation, visual cues (like colour or size) may play a role in identifying possible actions and affordance.
  2. Know reading pattern: In general, users read from left-to-right and top-to-bottom. The most important piece of content should always be placed in such a way that the user’s eye gaze falls on it. Ensure readability of text by choosing the right fonts, style and weight.
  3. Minimalism : Keep your information short and precise
  4. Provide statistics and infographics: In case of a task-based application, it’s best to provide statistics or infographics (for eg: timelines) so that they may track the progress of tasks performed. This is really useful in the case of dashboards.
  5. Designing for catching the end user’s attention: This is really helpful while creating a user interface for factory workers. For eg:- Let’s say if a major breakout or disaster happens in a factory and this needs to be informed to the factory workers, a loud visual cue of color, size and shape needs to be present within the center of the screen to get their attention

Examples of designs that have used good visual hierarchy:

  1. Instagram :
  1. Nameforchange.org
  1. Garden studio
  1. Nike website

To explore more on this topic, please take a look at the following links:

  1. http://osmanassem.com/visual-hierarchy-principles-you-need-to-know/
  2. https://www.impactbnd.com/blog/15-golden-principles-of-visual-hierarchy-infographic