This week’s ProTip is brought to you by the letter F! Yay!
There are always 1000 ways we can design a website. One major factor that makes a layout easy to use is how well you use the F-Pattern.
If my memory serves me correctly Jakob Nielsen coined the term “F-Pattern”, based on eye-tracking studies. It is the pattern that people’s eyes follow when they are reading or scanning a column of content.
(ProTip Tuesdays are a weekly series of simple, practical UX tips that you can share with your non-UX colleagues. Come back next week for another one!)
How the F-Pattern Works
The first thing a user will look at is the biggest, highest contrast piece of text. We usually call that a title (although the logo can play this role sometimes). Make sure you have one, because when the user reads the title or the first item in a list, from left-to-right, it is the top of the F.
Then the user will scan down the left side of the content block until the next piece of text that catches their eye. Then they read it left-to-right. That is the middle of the F. And so on.
This pattern is repeated over and over. This is why in a horizontal menu (or a set of tabs) the popularity of clicks is usually from left to right. The 5th option is only seen by people who have not clicked option 1, 2, 3 or 4.
So why does this matter?
When we create a layout we usually think of the text as a box, or a block. But we should think of it as a line or an edge. A vertical edge down the left side of the text. Look at any layout and find the main edges created by the text; even this post has an F-Pattern!
When we put things like buttons and icons on that line they get noticed more often. When we put them away from that line they might be missed. The closer they are to the line, the more noticeable they will be.
So should we put everything on the line? Hell no! Only the important stuff. Put the important items on the left of a menu. Put the Call-to-Action button on the line, under the text. Etc.
We should also try to create those types of lines in our layouts to keep the user moving down the page. Fewer lines also means more focus, and every time a user has to jump to another line we interrupt their experience, even if it’s just for a microsecond.
Exception to the Rule:
I want to point out that the key point is not “put things on the left”. The key point is put things on the line if you want them to be noticed. If you right-align everything it is on the right. If you center-align everything, the line is in the middle, but our left-to-right reading habit can fight against you, so be careful.
If you make columns of text, every column has a line. If your content is in boxes or groups, each box or group may have a line. Pinterest, for example, is scanned as little F’s all over the page (starting with each image). Not one big F.
For more examples of F-Patterns, check out my eye tracking board on Pinterest.
An F-Pattern-friendly design makes people say that it has “clean lines”. A design with a lot of F’s looks more random and jumbled. Make the lines point to your important design elements if you want the user to see them.
And that is why the F Pattern rules.
Have a great week!
****
If you liked this ProTip, try ProTip Tuesday #8: What Isn’t A Wireframe?