Fundamentals of Hierarchy in Interface 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…
Like to keep reading?
This article first appeared on medium.com. If you'd like to keep reading, follow the white rabbit.