Visual hierarchy

Visual hierarchy refers to the arrangement or presentation of elements in a way that implies importance.[1] 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.

A representation of hierarchical feature extraction and combination in the visual system.

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.” [2] The German word Gestalt translates into “form,” “pattern,” or “shape” in English.[3] 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.[4] Character is the rectilinearity and curvilinearity of forms. Forms that have differences in these characteristics contrast each other.

Application
The first issue of The New York Times in 1851 (top) had poor visual hierarchy, making it difficult to tell what news was considered most important. By 1919 (bottom), the paper, in keeping with broader industry trends, had established a clearer hierarchy, with larger headlines taking precedence over smaller ones.

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

Fluorescent 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.[5] The apparent importance of map features is controlled by a number of visual variables, including color, size, labeling, and detail.[6] 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.[7] 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.[8] 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.

UX Design and Behavioral Design

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. [9]

See also

References
  1. "visual hierarchy". GIS Dictionary. ESRI. Retrieved 2019-09-26.
  2. Jackson, Ian. “Gestalt—A Learning Theory for Graphic Design Education.” International Journal of Art and Design Education. Volume 27. Issue 1 (2008): 63-69. Digital.
  3. Pettersson, Rune. “Information Design—Principles and Guidelines.” Journal of Visual Literacy. Volume 29. Issue 2 (2010): 167-182. Digital.
  4. Feldsted, CJ. Design Fundamentals. New York: Pittman Publishing Corporation, 1950.
  5. Robinson, Arthur H. Elements of Cartography. 6th ed., Wiley, 1995.
  6. https://www.ordnancesurvey.co.uk/resources/carto-design/clear-visual-hierachy.html.
  7. Slocum, Terry A. Chapter 5 in Thematic Cartography and Geovisualization, Pearson, 2014.
  8. ESRI GIS Dictionary. Visual Hierarchy. https://support.esri.com/en/other-resources/gis-dictionary/term/visual%20hierarchy
  9. Cugelman, B. Cugeman, R. et al. (2019) Color Psychology. AlterSpark. https://www.alterspark.com/color-psychology/visual-hierarchy
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.