Visual hierarchy

Last updated
A representation of hierarchical feature extraction and combination in the visual system. Wiki hierarchies.png
A representation of hierarchical feature extraction and combination in the visual system.

Visual hierarchy, according to Gestalt psychology, 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. [1] While it may occur naturally in any visual field, the term is most commonly used in design (especially graphic design and cartography), 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.

Contents

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

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. [3] The German word Gestalt translates into “form,” “pattern,” or “shape” in English. [4] 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. [5] 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. [6]

In this 1905 map, the rivers and parks are at the top of the visual hierarchy due to color contrast and size, the title stands out due to size and alignment, and to a lesser degree, the central city stands out due to character, because the angled street pattern contrasts with the rest of the grid. Even the empty space in West Denver attracts attention due to its contrast with the overall complexity of the map and its central position. The individual streets and their names are at the bottom of the visual hierarchy due to lack of contrast, even though that was probably the intended primary purpose of the map. NIE 1905 Denver.jpg
In this 1905 map, the rivers and parks are at the top of the visual hierarchy due to color contrast and size, the title stands out due to size and alignment, and to a lesser degree, the central city stands out due to character, because the angled street pattern contrasts with the rest of the grid. Even the empty space in West Denver attracts attention due to its contrast with the overall complexity of the map and its central position. The individual streets and their names are at the bottom of the visual hierarchy due to lack of contrast, even though that was probably the intended primary purpose of the map.

Camouflage 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. [8] 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

The New-York Daily Times first issue.jpg
The New York Times - 1919 April 04.png
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.

Cartography

In cartographic design, visual hierarchy is used to emphasize certain important features on a map over less important features. [9] 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. [10]

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. [11] 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. [1]

User experience design and behavioral design

In user experience design and behavioural design, such as web 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. [7]

See also

Related Research Articles

<span class="mw-page-title-main">Map</span> Symbolic depiction of relationships

A map is a symbolic depiction emphasizing relationships between elements of some space, such as objects, regions, or themes.

Gestalt psychology Theory of perception

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 Titchener's elementalist and structuralist psychology.

<span class="mw-page-title-main">Visual communication</span> Method of communication

Visual communication is the use of visual elements to convey ideas and information which include but are not limited to, signs, typography, drawing, graphic design, illustration, industrial design, advertising, animation, and electronic resources. Humans have used visual communication since prehistoric times. Within modern culture, there are several types of characteristics when it comes to visual elements, they consist of objects, models, graphs, diagrams, maps, and photographs. Outside the different types of characteristics and elements, there are seven components of visual communication: color, shape, tones, texture, figure-ground, balance, and hierarchy.

<span class="mw-page-title-main">Infographic</span> Graphic visual representation of information

Infographics are graphic visual representations of information, data, or knowledge intended to present information quickly and clearly. They can improve cognition by utilizing graphics to enhance the human visual system's ability to see patterns and trends. Similar pursuits are information visualization, data visualization, statistical graphics, information design, or information architecture. Infographics have evolved in recent years to be for mass communication, and thus are designed with fewer assumptions about the readers' knowledge base than other types of visualizations. Isotypes are an early example of infographics conveying information quickly and easily to the masses.

Figure-ground (cartography) Focus of attention on features in a map

Figure-ground contrast, in the context of map design, is a property of a map in which the map image can be partitioned into a single feature or type of feature that is considered as an object of attention, with the remainder of the map being relegated to the background, outside the current focus of attention. It is thus based on the concept of figure–ground from Gestalt psychology. For example, in a street map with strong figure-ground contrast, the reader would be able to isolate and focus attention on individual features, like a given street, park, or lake, as well as layers of related features, like the street network.

Composition (visual arts) Placement or arrangement of visual elements or ingredients in a work of art

The term composition means "putting together". It can be thought of as the organization of the elements of art according to the principles of art. Composition can apply to any work of art, from music through writing and into photography, that is arranged using conscious thought.

<span class="mw-page-title-main">Page layout</span> Part of graphic design that deals in the arrangement of visual elements on a page

In graphic design, page layout is the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives.

Visual language

A visual language is a system of communication using visual elements. Speech as a means of communication cannot strictly be separated from the whole of human communicative activity which includes the visual and the term 'language' in relation to vision is an extension of its use to describe the perception, comprehension and production of visible signs.

Visual design elements and principles describe fundamental ideas about the practice of visual design.

Salience is that property by which some thing stands out. Salient events are an attentional mechanism by which organisms learn and survive; those organisms can focus their limited perceptual and cognitive resources on the pertinent subset of the sensory data available to them.

Multivariate map Thematic map visualizing multiple variables

A bivariate or multivariate map is a type of thematic map that displays two or more variables on a single map by combining different sets of symbols. Each of the variables is represented using a standard thematic map technique, such as choropleth, cartogram, or proportional symbols. They may be the same type or different types, and they may be on separate layers of the map, or they may be combined into a single multivariate symbol.

Applied aesthetics is the application of the branch of philosophy of aesthetics to cultural constructs. In a variety of fields, artifacts are created that have both practical functionality and aesthetic affectation. In some cases, aesthetics is primary, and in others, functionality is primary. At best, the two needs are synergistic, in which "beauty" makes an artifact work better, or in which more functional artifacts are appreciated as aesthetically pleasing. This achievement of form and function, of art and science, of beauty and usefulness, is the primary goal of design, in all of its domains.

Borden D. Dent (1938–2000) was an American geographer and cartographer who served as professor emeritus and chairman of the Department of Geography and Anthropology at Georgia State University. His textbook, Cartography: Thematic Map Design, is one of the seminal texts in the field, and its sixth edition was reissued in 2009.

<span class="mw-page-title-main">Color psychology</span> Study of influence of color on human behavior

Color psychology is the study of hues as a determinant of human behavior. Color influences perceptions that are not obvious, such as the taste of food. Colors have qualities that can cause certain emotions in people. How color influences individuals may differ depending on age, gender, and culture. For instance, heterosexual men tend to report that red outfits enhance female attractiveness, while heterosexual females deny any outfit color impacting that of men. Although color associations can vary contextually between cultures, color preference is to be relatively uniform across gender and race. Colors can also enhance the effectiveness of placebos. For example, red or orange pills are generally used as stimulants.

The principles of grouping are a set of principles in psychology, first proposed by Gestalt psychologists to account for the observation that humans naturally perceive objects as organized patterns and objects, a principle known as Prägnanz. Gestalt psychologists argued that these principles exist because the mind has an innate disposition to perceive patterns in the stimulus based on certain rules. These principles are organized into five categories: Proximity, Similarity, Continuity, Closure, and Connectedness.

<span class="mw-page-title-main">Map symbol</span> Graphic depiction of a geographic phenomenon

A map symbol or cartographic symbol is a graphical device used to visually represent a real-world feature on a map, working in the same fashion as other forms of symbols. Map symbols may include point markers, lines, regions, continuous fields, or text; these can be designed visually in their shape, size, color, pattern, and other graphic variables to represent a variety of information about each phenomenon being represented.

<span class="mw-page-title-main">Map layout</span> Arrangement of map elements on a page

Map layout, also called map composition or (cartographic) page layout, is the part of cartographic design that involves assembling various map elements on a page. This may include the map image itself, along with titles, legends, scale indicators, inset maps, and other elements. It follows principles similar to page layout in graphic design, such as balance, gestalt, and visual hierarchy. The term map composition is also used for the assembling of features and symbols within the map image itself, which can cause some confusion; these two processes share a few common design principles but are distinct procedures in practice. Similar principles of layout design apply to maps produced in a variety of media, from large format wall maps to illustrations in books to interactive web maps, although each medium has unique constraints and opportunities.

A visual variable, in cartographic design, graphic design, and data visualization, is an aspect of a graphical object that can visually differentiate it from other objects, and can be controlled during the design process. The concept was first systematized by Jacques Bertin, a French cartographer and graphic designer, and published in his 1967 book, Sémiologie Graphique. Bertin identified a basic set of these variables and provided guidance for their usage; the concept and the set of variables has since been expanded, especially in cartography, where it has become a core principle of education and practice.

<span class="mw-page-title-main">Cartographic design</span> Process of designing maps

Cartographic design or map design is the process of crafting the appearance of a map, applying the principles of design and knowledge of how maps are used to create a map that has both aesthetic appeal and practical function. It shares this dual goal with almost all forms of design; it also shares with other design, especially graphic design, the three skill sets of artistic talent, scientific reasoning, and technology. As a discipline, it integrates design, geography, and geographic information science.

Typography (cartography) Text used to label maps

Typography, as an aspect of cartographic design, is the craft of designing and placing text on a map in support of the map symbols, together representing geographic features and their properties. It is also often called map labeling or lettering, but typography is more in line with the general usage of typography. Throughout the history of maps to the present, their labeling has been dependent on the general techniques and technologies of typography.

References

  1. 1 2 "visual hierarchy". GIS Dictionary. ESRI. Archived from the original on 2016-03-03. Retrieved 2019-09-26.
  2. Urano, Yoko; Kurosu, Aaron; Henselman-Petrusek, Gregory; Todorov, Alexander (2021). "Visual hierarchy relates to impressions of good design". CHI'21 Workshop on Eye Movements as an Interface to Cognitive State: 1–9. doi:10.31234/osf.io/hksf9. S2CID   236599584.
  3. 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.
  4. Pettersson, Rune. “Information Design—Principles and Guidelines.” Journal of Visual Literacy. Volume 29. Issue 2 (2010): 167-182. Digital.
  5. Feldsted, CJ. Design Fundamentals. New York: Pittman Publishing Corporation, 1950.
  6. Tait, A. (2018). Visual Hierarchy and Layout. The Geographic Information Science & Technology Body of Knowledge (2nd Quarter 2018 Edition), John P. Wilson (ed.). DOI: 10.22224/gistbok/2018.2.4
  7. 1 2 Cugelman, B. Cugeman, R. et al. (2019) Color Psychology. AlterSpark. https://www.alterspark.com/color-psychology/visual-hierarchy
  8. Jeff Gothelf, The Squint Test: How quick exposure to design can reveal its flaws, Usabilla
  9. Robinson, Arthur H. Elements of Cartography. 6th ed., Wiley, 1995.
  10. https://www.ordnancesurvey.co.uk/resources/carto-design/clear-visual-hierachy.html. Archived 2017-12-22 at the Wayback Machine
  11. Slocum, Terry A. Chapter 5 in Thematic Cartography and Geovisualization, Pearson, 2014.