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 T ...

, 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 Graphic design is a profession, academic discipline and applied art whose activity consists in projecting visual communications intended to transmit specific messages to social groups, with specific objectives. Graphic design is an interdiscipli ...

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 im ...

), 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 In mathematics, the Fréchet distance is a measure of similarity between curves that takes into account the location and ordering of the points along the curves. It is named after Maurice Fréchet. Intuitive definition Imagine a person traversin ...

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 The Von Restorff effect, also known as the "isolation effect", predicts that when multiple homogeneous stimuli are presented, the stimulus that differs from the rest is more likely to be remembered. The theory was coined by German psychiatrist and p ...

, 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 Jacques Bertin (27 July 1918 – 3 May 2010) was a French cartographer and theorist, known from his book ''Semiologie Graphique'' (''Semiology of Graphics''), published in 1967. This monumental work, based on his experience as a cartographer and ...

* Color encompasses the

hue In color theory, hue is one of the main properties (called color appearance parameters) of a color, defined technically in the CIECAM02 model as "the degree to which a stimulus can be described as similar to or different from stimuli that ...

saturation Saturation, saturated, unsaturation or unsaturated may refer to: Chemistry * Saturation, a property of organic compounds referring to carbon-carbon bonds **Saturated and unsaturated compounds ** Degree of unsaturation **Saturated fat or fatty aci ...

value Value or values may refer to: Ethics and social * Value (ethics) wherein said concept may be construed as treating actions themselves as abstract objects, associating value to them ** Values (Western philosophy) expands the notion of value beyo ...

, and perceived

texture Texture may refer to: Science and technology * Surface texture, the texture means smoothness, roughness, or bumpiness of the surface of an object * Texture (roads), road surface characteristics with waves shorter than road roughness * 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, tha ...

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 Figure may refer to: General *A shape, drawing, depiction, or geometric configuration *Figure (wood), wood appearance *Figure (music), distinguished from musical motif *Noise figure, in telecommunication *Dance figure, an elementary dance patter ...

. * 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 ...

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

, 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 Behavioural design is a sub-category of design, which is concerned with how design can shape, or be used to influence human behaviour.Lockton, D., Harrison, D., Stanton, N.A. (2010)The Design with Intent Method: a design tool for influencing user ...

, 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 an ...

, 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