Excellent article in vanseodesign blog about Gutenberg Diagram, Z-Pattern and F-Pattern. These are terms I’ve seen and heard so many times when people are explaining designs and talking about certain decisions in designs. I found this post really valuable information with many excellent points. Please read it fully.
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
Here’s couple of my favorite points quoted from that post.
“The f-pattern suggests that:
- Important information should be placed across the top of the design where it will generally be read.
- Lesser information should be placed along the left edge of the design often in bullet points where little horizontal eye movement is required to take everything in.
- People don’t read online. They scan.”
…
“However keep in mind that if someone scanning your page finds it interesting, they will read so you can place information in places outside the F for those people who will read.”
…
“I’ve alluded to it a few times already, but it’s important to understand these patterns describe where the eye naturally goes when there’s a lack of hierarchy in the design. They describe natural patterns for evenly distributed and text-heavy content.”
..
“Instead of trying to force your design into one of the patterns described, decide instead what information you want the viewer to see and through a series of focal points and design flow lead their eyes through your hierarchy of information. That’s really the only pattern you need to use.”
How I read this is, that it’s not about how generally people see or read things, but it’s about how they behave in your design. You can use common patterns to define how people normally behave, but you need to adjust it to your website or service. Make sure there’s an easy way to get to the content you prefer your user to get to.
Once more thanks to Steven Bradley and vanseodesign for this lesson on my journey to learn more on customer experience.