Gutenberg Diagram
0
A diagram that describes the general pattern followed by the eyes when looking at evenly distributed, homogeneous information. id="footnote108a"> class="nounder totri-footnote" href="https://www.safaribooksonline.com/library/view/universal-principles-of/9781592535873/xhtml/ch53_fn.html#footnote108">1
The Gutenberg diagram divides a display medium into four quadrants: the primary optical area at the top left, the terminal area at the bottom right, the strong fallow area at the top right, and the weak fallow area at the bottom left. According to the diagram, Western readers naturally begin at the primary optical area and move across and down the display medium in a series of sweeps to the terminal area. Each sweep begins along an axis of orientation—a horizontal line created by aligned elements, text lines, or explicit segments—and proceeds in a left-to-right direction. The strong and weak fallow areas lie outside this path and receive minimal attention unless visually emphasized. The tendency to follow this path is metaphorically attributed to reading gravity—the left-right, top-bottom habit formed from reading. id="footnote109a"> class="nounder totri-footnote" href="https://www.safaribooksonline.com/library/view/universal-principles-of/9781592535873/xhtml/ch53_fn.html#footnote109">2
Designs that follow the diagram work in harmony with reading gravity, and return readers to a logical axis of orientation, purportedly improving reading rhythm and comprehension. For example, a layout following the Gutenberg diagram would place key elements at the top left (e.g., headline), middle (e.g., image), and bottom right (e.g., contact information). Though designs based directly or indirectly on the Gutenberg diagram are widespread, there is little empirical evidence that it contributes to improved reading rates or comprehension.
The Gutenberg diagram is likely only predictive of eye movement for heavy text information, evenly distributed and homogeneous information, and blank pages or displays. In all other cases, the weight of the elements of the design in concert with their layout and composition will direct eye movements. For example, if a newspaper has a very heavy headline and photograph in its center, the center will be the primary optical area. Familiarity with the information and medium also influences eye movements. For example, a person who regularly views information presented in a consistent way is more likely to first look at areas that are often changing (e.g., new top stories) than areas that are the same (e.g., the title of a newspaper).
Consider the Gutenberg diagram to assist in layout and composition when the elements are evenly distributed and homogeneous, or the design contains heavy use of text. Otherwise, use the weight and composition of elements to lead the eye.
See also Alignment, Entry Point, Progressive Disclosure, and Serial Position Effects.
id="page_119"> src="https://www.safaribooksonline.com/library/view/universal-principles-of/9781592535873/images/f0119-01.jpg" alt="image" width="419" height="620" data-mfp-src="/library/view/universal-principles-of/9781592535873/images/f0119-01.jpg" />
Reading gravity pulls the eyes from the top-left to the bottom-right of the display medium. In homogeneous displays, the Gutenberg diagram makes compositions interesting and easy to read. However, in heterogoneous displays, the Gutenberg diagram does not apply, and can constrain composition unnecessarily.
src="https://www.safaribooksonline.com/library/view/universal-principles-of/9781592535873/images/f0119-02.jpg" alt="image" width="374" height="439" data-mfp-src="/library/view/universal-principles-of/9781592535873/images/f0119-02.jpg" />
The redesign of the Wall Street Journal leads the eyes of readers, and does not follow the Gutenberg diagram. Additionally, recurring readers of the Wall Street Journal tend to go to the section they find most valuable, ignoring the other elements of the page.
src="https://www.safaribooksonline.com/library/view/universal-principles-of/9781592535873/images/f0119-03.jpg" alt="image" width="550" height="304" data-mfp-src="/library/view/universal-principles-of/9781592535873/images/f0119-03.jpg" />
The composition of these pages illustrates the application of the Gutenberg diagram. The first page is all text, and it is, therefore, safe to assume readers will begin at the top-left and stop at the bottom-right of the page. The pull quote is placed between these areas, reinforcing reading gravity. The placement of the image on the second page similarly reinforces reading gravity, which it would not do if it were positioned at the top-right or bottom-left of the page.