Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance. In other words, visual hierarchy influences the order in which the human eye perceives what it sees. 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. The term visual hierarchy is used most frequently in the discourse of the visual arts fields, notably so within the field of graphic design.
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.” 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.
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. The category of color encompasses the hue, saturation, value, and perceived texture of forms. Size describes the surface area of a form. Alignment is the arrangement of forms with respect to their direction, orientation, or pattern. Character is the rectilinearity and curvilinearity of forms. Forms that have differences in these characteristics contrast each other.
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.
Examples
color contrasts highly against most naturally occurring colors. Fluorescent substances achieve this contrast by emitting light. Forms of this type of color are almost always high in visual hierarchy. Tennis balls are fluorescent green for the perceptual ease of players, match officials, and spectators. Camouflage patterns diminish the contrast between themselves and their surroundings. Camouflage describes a form that mimics the physical characteristics of its environment. These patterns are difficult and sometimes impossible to perceive. Certain animals and military forces have both developed their own camouflaged patterns as mechanisms of defense.
Cartography
In cartographic design, visual hierarchy is used to emphasize certain important features on a map over less important features. The apparent importance of map features is controlled by a number of visual variables, including color, size, labeling, and detail. Typically, a map has a purpose that dictates a conceptual hierarchy of what should be more or less important. Thus, one of the goals of the choice of map symbols is to match the visual hierarchy to the conceptual hierarchy. Visual hierarchy applies to features on the entire map page as well as the map elements described above. These features include legends, scale bars, and north arrows, and are important to consider with regard to visual hierarchy because they contain valuable information about the map. 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 position are the two main determinants of the visual hierarchy for these features. Cartographers often utilize principles of negative space and figure-ground contrast to design an appropriate visual hierarchy by employing contrast between unused space and layout features. On map layouts, the title often ranks higher in the visual hierarchy because it is the first thing the reader notices. Other features, such as the legend, scale bar, and north arrow, rank lower because they do not contain the main message of the map but are there if the reader needs them.
In user experience design and behavioral design, 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.
