It is easy to imagine every user excitedly reading every letter you write and every pixel you make. Get over it, because real users don’t do that. They scan. Scanning means they only stop to read when something catches their eye. So today we will learn about scanning patterns:
Let’s start with the most boring design I can imagine: an entire newspaper page of solid text. All one story. No headlines. No images. No breaks or pull quotes. Just text, in even columns, from corner-to-corner.
In a design like that — which I hope younevercreate — users will generally scan it in a pattern something like the “Z” shown above.
If we add a bigger headline (visual weight), create one column to follow (line tension), and use smaller sections (repetition)we can get people closer to the famous F-Pattern.
The colorful image above shows eye tracking results, called “heat maps”. Eye tracking records where people look; the longer they look at something, the more “hot” it looks in the heatmap.
The F-Pattern works like this:
- Start in the upper left corner, like the Z-pattern.
- Read/scan the first (head)line of the text.
- Scan down the left side of the column until you find something interesting.
- Read the interesting thing more carefully.
- Continue scanning down.
By repeating that method over and over, the heatmap starts to look like an ‘E’ or an 'F’, hence the name.
You may notice that some parts of the page get lots of attention “naturally” while other parts of the page are overlooked most of the time. This is what we mean by “strong” and “weak” spots in a layout.
A button in the top left will get more clicks than a button in the top right, which will get more clicks than a button in the bottom left, which will get more clicks than a button in the bottom right. And all of those will get more clicks than something randomly stuck in the middle …unless you do something about it.
It might also be good to know that each “block” of content and each column can have their own F-pattern. It doesn’t have to be one-F-pattern-per-page.
When you consistently use typography to indicate the importance of text, and certain colors to highlight buttons, and when you give more visual weight to things that matter, it creates a visual hierarchy. i.e. — a design that people can scan easily. Our eyes jump from important thing to important thing rather than scanning like a robot.