Why I had to break up with the famous F-pattern in UX and move on?
My relationship with Z-pattern, F-pattern, and my new partner.
Disclaimer: You can find a friendly conversational style in my articles and it is intended for the sole purpose of making learning fun.
Hey! Before you judge and start throwing rotten tomatoes at me, I deserve a chance to explain myself. Every person is innocent until proven guilty.
Thank you!
Now that you are calm and ready to talk with an open mind, we can have a great conversation.
Just because I’m moving on doesn’t mean that I didn’t love the F-pattern. It’s just that I have found my new love and it makes our lives more meaningful.
Keep reading to find who’s my new love. ❤️
Z-pattern, my first love
A decade ago, while I was reading a book in a cafe with a warm cup of coffee, I found my first love. I looked at it and my pupils dilated.
The Z-pattern!
Would it surprise you if I reveal that even you came across it multiple times? Probably you never paid enough attention to its beauty.
It’s okay! All of us have preferences and it’s okay to be different.
Let’s look at the image on the right and take a moment.
No headlines. No images. No breaks or pull quotes. Just text, in even columns, from corner to corner.
If you look at this block of newspaper, you might find it extremely boring. Because you don’t know where to fix your eyes. And you would most probably scan it in the Z-pattern.
You gave a quick glimpse to it and struggled to find the important elements in there. Completely understood! Not your fault at all.
Where do UX designers go wrong?
Most of us are creators and we love every pixel we create. We love every line we write and we love every design we ship.
But in this process, we are guilty of making assumptions.
That our customers would focus on every pixel.
That they would read every alphabet.
We often miss the lessons from the visual hierarchy.
Our customers are not consuming every pixel or reading every alphabet. And they are hunting like a hungry wolf.
They are just scanning.
All they care about is — they find what they are looking for. And they stop only to focus on something that they find is worthy of attention.
Why do people scan and not read everything?
Because we are not programmed to follow an algorithm that makes us go through everything to find something. That isn’t the most effective way of searching.
We tend to minimize the work we have to do and maximize the benefits.
When we search for something we need, we try to economize our time and optimize the behavior accordingly.
We look for bits and pieces that would lead us to our goal.
Let’s take your example.
How do you find a milk packet in a local grocery store near you?
You don’t check out everything in the store, or do you?
The beauty of the Z-pattern
Many popular products have realized the beauty of the Z-pattern and they have been in partnership with it for a long.
They know that customers would start scanning from the top left and they would end at the bottom right after a quick scan.
And what they do smartly here is, they give the information bites to convince the customer for an action and then they place the CTA at the end of the Z-pattern.
It might feel like a trap but I would rather consider it as guiding customers to what they are looking for.
Let’s look at how these products have been growing with the help of this Z-pattern.
Isn’t this just beautiful?
What’s the fuss about the F-pattern?
The credit goes to the founders of the Nielsen-Norman group. These folks worked hard, observed the scanning pattern of hundreds of people, and published a breakthrough study.
They leveraged eye-tracking research and came up with heat maps. It helped us understand how people read digital content and the world came to know about the famous F-pattern.
When people are scanning through the documents, they are trying to economize the number of fixations they have to do and learn the most they possibly can.
In simple words, they start reading from the top left with the most attention and goes to the right. Then they again go back to the left side and this time read a little less to the right. As this continues, it forms an F-pattern of scanning and reading.
If you just give the users a wall of text, they’ll find their pattern to scan through it, struggling to find the content they are looking for.
How to make scanning easier for people?
As designers, you would want to help people achieve their goals of finding what they are looking for as quickly as possible.
You do not want them to spend decades on your page. This could lead to frustration and disappointment.
To make scanning easy, these are the recommended actions.
Chunking
Don’t go for really long and boring paragraphs. Break them down into the smallest of chunks possible. That is the way our users won’t skip everything in just one glimpse.
Bullet Points
People really appreciate the content broken down into points. Easy to digest.
Heading and sub-headings
You could play with the elements here. It could be a different typeface, bolder or a different color.
This would help our users find the category they are interested in by just looking at headings and if those words interest them, they would go ahead to read the normal text.
If this is executed properly, it brings out a new pattern of scanning.
The Layer-cake pattern, my new love.
Yes. This is the reason why I moved on. I’m no longer relying on F-pattern to help my users find what they are looking for.
If the above suggestions are executed properly, we would see the pattern where it resembles the frosting of cake on the top and then different layers towards the bottom.
In this scanning pattern, they would scroll down quickly to the section they are interested in without spending a lot of time on the un-necessary text.
Wikipedia is a good use-case of this.
The layer-cake is a good pattern. The F-pattern should be avoided and all of us should attempt to move to the layer-cake pattern.
This is my new love. But my users have always been my first and last love. As a designer, I’ll keep moving on with new patterns if they help my users save their time and achieve their goal effectively.
One more thing
There are a lot of research studies going on and we should always strive to remain updated with the latest findings.
Here are different kinds of patterns that one would come across. Let me know in the comments section if you would want to learn more.
Continue reading…
UX crash course.
Loved by hundreds of thousands of medium readers ❤️
References
A lot of researchers have worked hard to come up with these scanning patterns and we are grateful for their contribution to our UX community.
Studies for the layer-cake pattern, NN group
Z pattern examples, Instapage
Visual Hierarchy, Interaction Design
