The F-Shaped pattern is a pattern found in an eye-tracking study as the primary areas people glance over when reading a website.


Is this something we as graphic designers should consider not only in web but in all mediums? If so do we give priority placement to our content for maximum benefit to our end-users or to advertisers/sponsors for maximum revenue?

  • 1
    Mediocre examples :) Text heavy web pages naturally lead to the F pattern in a LTR reading language. That pattern isn't as prominent in other areas of design.
    – Scott
    Commented May 9, 2014 at 20:37
  • 1
    @Scott you're welcome to leave an answer. I'm happy to give you back your bounty if you've got something on the topic. Its not even an adobe how-to!
    – Ryan
    Commented May 9, 2014 at 20:39
  • Didn't even realize this was a couple years old at this point :) I may answer.. but not mentally organized today to do so :)
    – Scott
    Commented May 10, 2014 at 0:45

4 Answers 4



Web users tend to browse sites based on their reading habits. The F shape is logical because reading starts at the top left (for LTR languages). Then, when a line ends, readers need a bit of orientation to find the beginning of each next line. Little breaks like headings, paragraphs, images, quotes and their white space give new focus points, a new place to drop into the text. This is where readers orientate again. All this reading behavior leads to a F shape scanning pattern.

Pull the eye

There is a F shape because the content is structured in a F shape, the eye will follow that shape. But the F shape structure isn't true for every design. You can guide the eye with composition and visual mass (color, size, etc) and pull the eye to any position.

Constructivism has great examples:

George Bernard Shaw's Captain Brassbound's Conversion

Ladislav Sutnar's design for a 1932 translation of George Bernard Shaw's Captain Brassbound's Conversion [1932]. Source: http://www.sil.si.edu/ondisplay/czechbooks/intro.htm

There are other ways to pull the eye. Attention is also drawn by images of people and faces.

Scanning a page has also a strong relation with the task at hand. Think about a typical F shape layout and the task to find a phone number. The eye will ignore the text block and will scan the edges (last items in the navigation, column, footer, etc).

Priority placement

Use priority placement for your main message in your design. The most prominent place doesn't have to be top left. It can be anywhere. It's about visual hierarchy.

Advertisers pay for space to get their message across. Again, this doesn't have to be top left. In speed skating it is the upper left thigh (lower right side for the viewers). This position has most exposure and therefor most value.

enter image description here

"The speed skating world believed the right leg, at the stand side of the track, is best for sponsor logos. Not true: the left leg is gold."



The F shape pattern doesn't apply to all designs or all tasks. You can pull the eye to any position. Designers should consider this power and use it to their advantage.


I think this is a very important concept that shows us a few things about design.

For one it confirms that people aren't going to read or look at everything so we must be very selective in the amount of data we present. It's often hard to be selective when you have a client that wants way more information then will possibly fit.

Perhaps we should link those kinds of clients to that article..? Probably not though!

For another, it shows us where on a page the eye is likely to go first so that we can better decide what the primary data is; vs what the secondary data is; vs the somewhat arbitrary and unimportant design elements.

Why include arbitrary design elements? - Because every aspect should be designed and whether it is a rule on a page or white-space it should be considered. We should be creating compositions that present the data in a visually clear manner and design elements can be used to guide, divide and join elements together.

I'm in the school of thinking that the end-user's experience is the most important. Perhaps this is wrong but I think we must consider our end-users before our advertisers.

If you read more on that website or order the book you'll see how alignment and obstacles occur in designs.

Should we always follow this guideline though?

I think the answer there is no. But perhaps that no is my print background speaking and when there is very little content on a page so that it is easy to see all of it.

It seems that in reasoning this out from my experiences as a designer, the more content you have, the more important it is to use a more standardized layout. A poster with one word on it can put that word anywhere; while a page in a book or magazine should certainly follow standardized formats to avoid confusion.


I'd say it depends on your goals. If speed of getting information is your top priority, then probably yes. If you seek to delight, impress or surprise users, then better think of it after achieving what's more important.


This is a good question indeed. But I would say 'No'. And why not?

Well, as graphics designer (I sometimes hate that word) we have the ability to guide the end-user, as Ryan suggested (and I agree with him on " that the end-user's experience is the most important"; we create for them not for other designers).

There are no set-in-stone rules (only guidelines), so it comes down to what are trying to achieve with your design? What is the goal?

And also try to find those answers outside of graphics design (via psychology, sociology etc) and then try to translate your finding into graphics.

One of my professors once said: "A designer must know everything!". And I believe he was referring to not limiting yourself, and trying to understand what it is that you are supposed to do, research.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.