1

I am confused on how the main content layout should be on a wide screen monitor.

enter image description here

So should I keep my main content on the left or middle? Since I have read many places that content should be on the left to support F-layout. But visually the centered content looks better.

I would choose user engagement more over visual aesthetics and would like some advice...

I am looking for some strong reason to choose the either.

  • You can do this as you wish. I personally prefer centered – BlueWizard Sep 14 '15 at 14:02
4

Centered.

The F-shape only matters¹ for the content, not the whitespace.

You can liken it to reading a magazine on a desk. The contents of the magazine need to be arranged carefully and have to take in to account reading order and such; this is similar to the actual content block/column on a website. The desk is analogous to the (browser) screen. You generally wouldn't read a magazine on the corner of a desk, but in the middle.

1 - note: even in content layout the F isn't all-mighty. Note how readers skip the menu column and go to the middle column in examples 1 and 2 of DasBeasto's image. The F-shape is more a comment on how we read texts than it is on how we should arrange interfaces.

2

As far a I know the F-Layout applies to the actual content area not the whole screen. So if that content block is centered like in your first picture the blank space will be ignored and the F-Layout begins when the user finds the content.

Look at this image: enter image description here http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Even though some of the main content is more centered it still follows the F-Layout and the more blank areas are ignored.

I will also say I've personally seen a majority of sites (Stack Exchange for example) center this block when zoomed out or on a bigger screen, so people on wider screens are likely used to this layout.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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