Fundamentals of Hierarchy in Interface Design

• fundamentals, Hierarchy
fundamentals-of-hierarchy-in-interface-design

Concept, resources and its importance in design

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.

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 devices, will be relevant to site navigation. While the hierarchy in graphic design has existed for years, the constant interaction factor is added to the UI design. The fact that users interact with the elements makes it more relevant to design an intuitive interface.

There are seven resources that must be taken into account to create a correct hierarchy:

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.

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.

If the jump from one text to another is smaller, say from 32pt to 24pt, it can make the reading order more difficult when sending two messages at the same time. This may not be a big problem, but you should keep in mind that this could create a less efficient hierarchy.

It is equally unnecessary that the important elements were too large. Creating an unnecessary imbalance can end up overshadowing the rest of the design and cause other information to get lost in the reading. Like everything else in design, balance is the key.

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.

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.

There are three ways to create hierarchy using color:

Hue: Some colors stand out over others. The color tone can create several types of conflict for human eyesight, red versus green, blue versus yellow or turquoise versus brown.

Saturation: Saturated colors stand out more than gray colors. Grays and their scales always tend to be relegated by colors of great saturation, which even give the user more sense of closeness. The use of red on a gray background is an example.

Brightness: Bright colors stand out over dark ones and vice versa. Playing with bright elements on dark backgrounds creates an immediate hierarchy, this also applies when we have a white background and some dark elements.

It is important to know that the abuse of color can end up confusing the user, since it creates the illusion that everything is important in the composition. The idea of ​​hierarchy, on the other hand, starts from the idea of ​​orienting oneself on what is most relevant as opposed to what is not.

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.

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.

Proximity is therefore the grouping of objects in a design to create connections and associations. When things are closer, it usually means they must be related. If things are further away, it should mean that they may not be related. In short, proximity creates these relationships and brings organization and hierarchy to information.

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.

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.

Alignment of elements is very important to create visual coherence in the design of an interface, as it allows to assign relevance to the elements on the screen and also establish the beginning and end of specific elements, either interactive or informative.

The human brain loves patterns, that’s why many of the best websites are symmetrical. This gives us the opportunity to break this rule to strategically call the user’s attention to a specific point. A user will be able to associate these elements according to their alignment or misalignment.

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.

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.

In interface design, repetition creates a sense of unity and consistency throughout the experience. For example, in this Medium article, the subtitles (h2) are marked with a repeated style, the use of bold and a larger font size give the user a sense of orientation and hierarchy based on repetition. We must know that human nature finds comfort in familiarity.

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.

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.

While some designers may think more is better, the visual perception is very different. Designs with a large load of closed elements cause the interface to be saturated and without a hierarchy indicating which element is more important, causing confusion and a sense of overwhelm on the part of the user.

The idea is that the more important the element, the more negative space there is around it. Isolating one element from the others is not only an elegant resource to create hierarchy, but also serves to give the design a support structure. That is to say, it creates the necessary spaces so that the view can pass from one element to another in a fluid way and without visual noise.

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.

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.

This resource should be used in a dosed manner, as the abuse of textures will end up distracting rather than informing or perhaps leading to unnecessary squeumorphism. Textures tend to overlap other hierarchical resources, including size, so you must take into account the entire composition and everything the user will see on the screen of their device before incorporating texturized elements. Again, balance is the key.

Hierarchy of Needs in UX

• Hierarchy, Needs
hierarchy-of-needs-in-ux

Vinoth

In order for a product or an experience design to be successful, it must meet people’s basic needs before it can attempt to satisfy higher-level needs.

This is termed as the hierarchy of needs principle, which specifies that a design must serve the low-level needs (e.g., it must function), before the higher-level needs. Good designs follow the hierarchy of needs principle, whereas poor designs may attempt to meet needs from the various levels without building on the lower levels of the hierarchy first. The five key levels of needs in the hierarchy are described below.

Hierarchy of needs for a product to be designed with

Designs of little or no value

Functionality needs have to do with meeting the most basic design requirements. For example, a video recorder must, at a minimum, provide the capability to record, play, and rewind recorded programs. Designs at this level are perceived to be of little or no value.

Reliability needs have to do with establishing stable and consistent performance. For example, a video recorder should perform consistently and playback recorded programs at an acceptable level of quality. If the design performs erratically or is subject to frequent failure, reliability needs are not satisfied. Designs at this level are perceived to be of low value.

Image source: dilbert.com

Designs of moderate value

Usability needs have to do with how easy and forgiving a design is to use. For example, configuring a video recorder to record programs at a later time should be easily accomplished, and the recorder should be tolerant of mistakes. If the difficulty of use is too great or the consequences of simple errors too severe, usability needs are not satisfied. Designs at this level are perceived to be of moderate value.

A video recorder that can record programs based on keywords

Designs of high value

Proficiency needs have to do with empowering people to do things better than they could previously. For example, a video recorder that can seek out and record programs based on keywords is a significant advance in recording capability, enabling people to do things not previously possible. Designs at this level are perceived to be of high value.

Designs of highest value

Creativity is the level in the hierarchy where all needs have been satisfied, and people begin interacting with the design in innovative ways. The design, having satisfied all other needs, is now used to create and explore areas that extend both the design and the person using the design. Designs at this level are perceived to be of the highest value, and often achieve cult-like loyalty among users.

Consider the hierarchy of needs in design, and ensure that lower-level needs are satisfied before resources are devoted to serving higher level needs. Evaluate existing designs with respect to the hierarchy to determine where modifications should be made.

If you like this article, like or comment on it. I write articles on UX follow my blog on my Website or on Medium. Thanks and good bye!