Visual hierarchy

From Wikipedia, the free encyclopedia

Jump to navigationJump to search
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.

Contents

 1Theory
 2Physical characteristics
 3Application
o 3.1Examples
o 3.2Cartography
o 3.3UX Design and Behavioral Design
 4See also
 5References

Theory[edit]
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[edit]
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[edit]
This section does not cite any sources. Please help improve this section by adding
citations to reliable sources. Unsourced material may be challenged and removed.
Find sources: "Visual hierarchy" – news · newspapers · books · scholar · JSTOR (February
2015)(Learn how and when to remove this template message)

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[edit]
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[edit]
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[edit]
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[edit]
 Bauhaus
 Cognitive psychology
 Pattern recognition

References[edit]
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
Categories:
 Page layout
 Knowledge representation
Navigation menu
 Not logged in
 Talk
 Contributions
 Create account
 Log in
 Article
 Talk
 Read
 Edit
 View history
Search
Go

 Main page
 Contents
 Featured content
 Current events
 Random article
 Donate to Wikipedia
 Wikipedia store
Interaction
 Help
 About Wikipedia
 Community portal
 Recent changes
 Contact page
Tools
 What links here
 Related changes
 Upload file
 Special pages
 Permanent link
 Page information
 Wikidata item
 Cite this page
Print/export
 Create a book
 Download as PDF
 Printable version
Languages
Add links
 This page was last edited on 14 October 2019, at 18:24 (UTC).
 Text is available under the Creative Commons Attribution-ShareAlike License; additional
terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy.
Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc., a non-profit
organization.
 Privacy policy

 About Wikipedia

 Disclaimers

 Contact Wikipedia

 Developers

 Statis