The Startup
Published in

The Startup

Fundamentals of hierarchy in user interface design (UI)

Concept, resources and its importance in design

Website illustration with focus on hierarchy levels of the components
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.

Size

The larger the element, the more it will attract attention. It is a fact that people first see larger objects, and this includes text and images. The idea behind the use of size hierarchy is to give a focal point to start the visual journey.

A screenshot of the Google Art App with two differences font sizes
In this snapshot of the Google Arts & Culture application, the title “Pawtraits: Our Changing Relationship …” is much larger in size than the subtitle “How do we really feel …”. By separating these scores considerably, the reading order avoids any confusion.

Color

Bright colors stand out more than muted tones. Color is a powerful visual resource, its proper use can effectively separate the elements in a screen to prioritize or depriorize them. In interface design, often the strongest color is for interaction, because of the user’s need to take action or receive feedback from the system.

Screenshot of the Cabify app showing a line route in purple
In this Cabify app screenshot, the use of purple color acts as the primary color. Both, the route of the trip and the “Continue” button are first hierarchy, followed by the map and the car in second hierarchy. The harmonic use of hue and saturation separates these elements from a more unsaturated and less important background.

Proximity

Elements close to each other attract more attention than distant elements. Making groups using distance is a very viable resource when creating a reading order. Human sight tends to categorize elements, therefore, making this aggrupations basically facilitates the mental work of the user.

Screenshot of the Netflix website showing the hierarchy of the movies options
On the Netflix homepage, the first group contains the title and synopsis of the film; and the second group contain a list of six films at the bottom. The distance between these groups makes it easier for the view to pass from one group to another without visual noise. Likewise, each element in their respective group has its own paddings and margins.

Alignment

Any element that separates from the alignment of the others will attract attention. This is because alignment creates order between the elements, any change in this rule will be interesting to human sight and will therefore stand out considerably.

Screenshot of Airbnb website showing hierarchy by alignment
On the page of an Airbnb accommodation, the title, location and name host belong to one alignment, while the description of the apartment, accompanied by iconography, belong to another. This rupture of an invisible straight line creates hierarchy on two levels.

Repetition

Repeated styles give the impression that the elements are related. This type of hierarchy consists of reusing the same or similar elements in an interface. Repetition also gives some preponderance based on visual patterns. If something is repeated, it is because is important.

Screenshot of Uber website showing hierarchy by repetition in their menu
In the white menu of the Uber website, an icon and a label are placed 8 times for their categories. This, balanced with a smaller size, places the menu second in the hierarchy, after the main title “Get in the driver’s seat …”. It is important to know that repetitions are very good for creating second or third level relevancies.

Negative space

The more space around the element, the more attention it generates. The negative space is the area where the empty canvas is shown, this can be found not only around, but between and inside the same element. It is not proper to a single color, but adopts the color of the background to give the illusion of space.

Screenshot of Design Better website showing hierarchy by negative space
In this example of the web Design Better, both the number “01” and the title “Motion’s purpose” are remarkably surrounded by negative space. Although the illustration has a greater hierarchical weight due to its variety of textures, the well applied negative space can make a balance that prevents the other elements from being relegated.

Texture

Varied and complex textures attract more attention than flat ones. The flat surface of a wall will stand out less than the surface of a pavement. This is because complexity will always attract more user attention than minimalism. The use of textures also incorporates other important design elements such as style and atmosphere.

Screenshot of Masterclass app showing hierarchy by texture with photographs
Photographs in UI design could be the best example of hierarchy by texture that exists. Their shapes, colors and gradient will always convey more sensations than flat elements. In the case of the Masterclass application, the photographs of the instructors are, without a doubt, first hierarchy, followed by their names in white, and the red color in the menu that indicates the location of the user.
  1. A Graphic Designer’s Guide to Visual Hierarchy by Zevendesign

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Leonardo Moreno

Product Designer @Yalo. Writing about design. Based in Lima, Peru. Watch my work at www.leonardoxmoreno.com 🥽