Fundamentals of hierarchy in user interface design (UI)

Concept, resources and its importance in design

Leonardo Moreno
The Startup
Published in
7 min readDec 23, 2019

--

Website illustration with focus on hierarchy levels of the components

Visual hierarchy is the order in which the user process information by importance. In interface design, like in any other form of design, this concept is necessary to be functional at sight. With the correct use of hierarchy, the mind can group and prioritize elements to give them a specific order, which facilitates the understanding of what you want to communicate and the sense of achievement by the user.

A regular problem in interface design is the excessive use of elements or components scattered on the screen, which if not placed through a correct hierarchy, generate disorder and greater effort in navigation. The exercise of prioritizing these elements is important to avoid this problem.

A big circle and an a small square representing the concept of hierarchy
In this example, size, shape, and color resources are used to orient the view to a specific element.

The average user tends to “scan” the entire content of a screen. Therefore, the highlights should give a clear idea of what the website or application is about.

This prioritization should not only be treated as an aesthetic problem, but also as an important part of the user experience. Many of the elements included, especially in mobile…

--

--

Leonardo Moreno
The Startup

Product Designer, currently working at Yalo. based in Lima, Peru. My site: www.leonardoxmoreno.com