The Gutenberg diagram describes a general pattern the eyes move through when looking at evenly distributed content stimuli. The pattern applies to text-heavy content. Think pages in a novel or a newspaper.
The Gutenberg diagram divides the layout into 4 quadrants.
- Primary optical area located in the top-left
- Strong fallow area located in the top-right
- Weak fallow area located in the bottom-left
- Terminal area located in the bottom-right
The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area and this path is referred to as reading gravity. (Universal Principles of Design, p.118)
However, as people have started reading on websites, a new eye movement pattern has been identified as the F- shaped pattern, where the lower left corner is actually an area of focus. (Nielsen, 2006)
Another pattern that has been identified is the Z- shaped pattern. (Babich, 2017) A Z-pattern design traces the route the human eye travels when they scan the page— left to right, top to bottom:
- First, people scan from the top left to the top right, forming a horizontal line
- Next, down and to the left side of the page, creating a diagonal line
- Last, back across to the right again, forming a second horizontal line
Resource Example
ONLINE EXAMPLE
REAL LIFE EXAMPLE
I love the Harry Potter example! I didn’t even see the application of this strategy prior to your example. Excellent deduction. I personally follow the f-shaped pattern when creating websites. That is why I really believe in the single page scroll technique for laying out content. I primarily place branding on the top left corner of any corporate communication too for this exact reason. Because even if you stop, you stop at the brand. I think that Airbnb has done it incredibly well in their redefined website. https://www.airbnb.com
You’re right Shilpa, F pattern is the more popular way of designing websites. The example you gave represents this pattern perfectly!
I had never heard of Gutenberg Diagram before, had you? Did you use it for designing something in the past?
I didn’t know it by its name!
While I was creating lots of Landing pages, I sued Gutenberg Diagram almost on every page. I found it is effective to use this strategy to engage the user in the limited amount of time (5-7 seconds) on above the fold space. While I spot Gutenberg Diagram all over on online space, I like what you choose as an off-line (real life) example. As another example, I think the package design often employ this strategy. https://i.pinimg.com/originals/0f/bd/d2/0fbdd2b9959cac226c875986c925874c.jpg
That’s interesting to know that you used GD for designing websites. I had only heard of F and Z patterns and followed only those.
After seeing your example of package design, I agree that product packaging use this style of designing more often. Thanks for sharing Miyuki!
Hi Anuja, you explained the concept of the Gutenberg diagram extremely well and I enjoyed reading your entry. I appreciated the fact that elaborated on your examples and elucidated on the various eye movement patterns in scanning a page or skimming text on a website. Moreover, beyond elaborating on user behavior in reading gravity, you described how a layout can be divided into quadrants in its varying degrees of strength—how detailed of you! I can extrapolate that the lower left portion is the blind portion of the Gutenberg Diagram and the terminal area is the perfect spot to insert a call-to-action. 🙂
An example is the Facebook start/sign-up page. The higher left portion of the page (Primary Optical Area), where the eyes will automatically focus, reads: “Connect with friends and the world around you on Facebook.” When the user reaches the lower right portion of the page, there is a break in the reading or “page scan” process and the user will need to take an action. Here, there is a call-to-action button to sign up.
It seems like this behavior is rooted in the western habit of reading left-to-right, top-to-bottom. Would this concept also apply for languages that read in opposite directions? I’d like to also see you discuss how this principle can be used to one’s advantage in design and instances where a visual hierarchy could follow it or even override it. It seems like these patterns describe where the eye naturally goes when there’s evenly distributed and text-heavy content, or a lack of hierarchy in the design. If visual elements don’t follow the Gutenberg Diagram, is it rendered less effective?