Visual hierarchy, according to

Gestalt psychology Gestalt-psychology, gestaltism, or configurationism is a school of psychology that emerged in the early twentieth century in Austria and Germany as a theory of perception that was a rejection of basic principles of Wilhelm Wundt's and Edward ...

, is a pattern in the visual field wherein some elements tend to "stand out," or attract attention, more strongly than other elements, suggesting a hierarchy of importance. While it may occur naturally in any visual field, the term is most commonly used in design (especially graphic design and

cartography Cartography (; from grc, χάρτης , "papyrus, sheet of paper, map"; and , "write") is the study and practice of making and using maps. Combining science, aesthetics and technique, cartography builds on the premise that reality (or an ...

), where elements are intentionally designed to make some look more important than others. This order is created by the visual contrast between forms in a field of perception. Objects with highest contrast to their surroundings are recognized first by the human mind.

Evidence

There is some scientific evidence for visual hierarchy using eye tracking. For example, one study found that when people agree that a graphic design is good, they exhibit more similar eye movements; measured by the Fréchet distance.

Theory

The concept of visual hierarchy is based in Gestalt psychological theory, an early 20th-century German theory that proposes that the human brain has innate organizing tendencies that “structure individual elements, shapes or forms into a coherent, organized whole,” especially when processing visual information. The German word Gestalt translates into “form,” “pattern,” or “shape” in English. When an element in a visual field disconnects from the ‘whole’ created by the brain's perceptual organization, it “stands out” to the viewer. The shapes that disconnect most severely from their surroundings stand out the most. This is commonly encapsulated as the Von Restorff effect, which states that isolation attracts attention.

Physical characteristics

The brain disassociates objects from one another based upon the differences between their physical characteristics. These characteristics fall into four categories: color, size, alignment, and character. Each type of contrast can be used to construct a visual hierarchy. The same characteristics are also sometimes categorized (especially among cartographers) according to the visual variables of Jacques Bertin. NIE 1905 Denver

* Color encompasses the hue, saturation, value, and perceived texture of forms. Dark figures will stand out on a light background, light figures will stand out on a dark background, brightly-colored figures will stand out on a muted background, and so on. The

fluorescent Fluorescence is the emission of light by a substance that has absorbed light or other electromagnetic radiation. It is a form of luminescence. In most cases, the emitted light has a longer wavelength, and therefore a lower photon energy, th ...

colors used for tennis balls and other sports equipment is intended to make them instantly stand out against almost any natural visual field. * Size has a strong influence on visual hierarchy. Large elements will almost always attract attention, as long as they can be recognized as figures. * Alignment is the arrangement of forms relative to one another. For example, items in the upper left corner of a page are often seen first (at least for those readers accustomed to western languages), the center of the field has prominence.

Negative space Negative space, in art, is the empty space around and between the subject(s) of an image. Negative space may be most evident when the space around a subject, not the subject itself, forms an interesting or artistically relevant shape, and s ...

can also be employed: a figure isolated among large amounts of white space will stand out more than one amid other figures. * Character includes several kinds of contrasts based on shape. For example, complex patterns attract more attention than simple or predictable patterns, intricate shapes attract more attention than generalized ones. Even large-scale patterns can attract attention if they contrast with the pattern in the remainder of the visual field.

Camouflage Camouflage is the use of any combination of materials, coloration, or illumination for concealment, either by making animals or objects hard to see, or by disguising them as something else. Examples include the leopard's spotted coat, the b ...

is an example of eliminating contrast in character in color and/or character specifically to reduce visual hierarchy. The "squint test" is often suggested as a simple, if unscientific, method to evaluate the visual hierarchy of a graphical product like a map or web page. When viewed out of focus (or from a great distance), the viewer is not distracted by details, but can only see overall (gestalt) patterns such as visual hierarchy. All of the above patterns, except some aspects of character, are recognizable by this method.

Application

Visual hierarchy is an important concept in the field of graphic design, a field that specializes in visual organization. Designers attempt to control visual hierarchy to guide the eye to information in a specific order for a specific purpose. One could compare visual hierarchy in graphic design to grammatical structure in writing in terms of the importance of each principle to these fields.

Cartography

In cartographic design, visual hierarchy is used to emphasize certain important features on a map over less important features. Typically, a map has a purpose that dictates a ''conceptual hierarchy'' of what should be more or less important, so one of the goals of the choice of map symbols is to match the visual hierarchy to the conceptual hierarchy. The Visual hierarchy of a map may apply to individual geographic features (such as making a single country stand out), to map layers of related features (e.g., making lakes stand out more than roads), and to the entire layout of map and non-map elements (e.g., making the title look more important than the scale bar). Like the main map elements, such features have weight, and the properties that apply to visual hierarchy of map layers also apply to other elements on the page. Size and alignment are the two main determinants of the visual hierarchy for these features.Slocum, Terry A. Chapter 5 in ''Thematic Cartography and Geovisualization'', Pearson, 2014. Cartographers often utilize principles of

negative space Negative space, in art, is the empty space around and between the subject(s) of an image. Negative space may be most evident when the space around a subject, not the subject itself, forms an interesting or artistically relevant shape, and s ...

and figure-ground contrast to design an appropriate visual hierarchy by employing contrast between unused space and layout features.

User experience design and behavioral design

user experience design User experience design (UX design, UXD, UED, or XD) is the process of defining the experience a user would go through when interacting with a digital product or website. Design decisions in UX design are often driven by research, data analysis, an ...

and behavioural design, such as

web design Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...

, visual hierarchy is used to prioritize navigational structures and content, so that audiences focus on elements that facilitate system usage, or increases the chance that they notice content that contains psychological nudges. Color is one of many factors used in the design of a visual hierarchy, and a key factor due to the high salience of color perception.Cugelman, B. Cugeman, R. et al. (2019) Color Psychology. AlterSpark. https://www.alterspark.com/color-psychology/visual-hierarchy

References

{{Reflist Cartography Page layout Knowledge representation