Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

http://www.useit.com/alertbox/reading_pattern.html

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?

share|improve this question
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 May 9 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 May 9 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 May 10 at 0:45

4 Answers 4

up vote 1 down vote accepted
+200

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.

share|improve this answer
3  
Backticks aren't apostrophes. –  Lèse majesté Mar 4 '12 at 22:24

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.

share|improve this answer

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.

share|improve this answer

Reading

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."

http://repucom.net/

Conclusion

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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