7

Consider Paul Graham's site as an example:

enter image description here

There is a lot of white space. He chooses to put his content at the left of the web page. Alternatively, he could have chosen to center it (while still left-aligning the text):

enter image description here

What are the advantages and disadvantages of each approach? Is there a best practice?

My question is very similar to Should forms be aligned left or center, if less than full page width?. However, I'm curious as to whether the recommendation for text differs from the one for forms.


It seems clear that it's a bad idea to just make the lines longer. http://practicaltypography.com/line-length.html recommends 45-90 characters per line:

Shorter lines are more com­fort­able to read than longer lines. As line length in­creases, your eye has to travel far­ther from the end of one line to the be­gin­ning of the next, mak­ing it harder to track your progress vertically.

I've seen many other recommendations in this range. Paul Graham himself explains why his lines are so short, and notes that he doesn't think the white space is a problem:

Why is the text on your site so narrow? It wastes screen space.

The aim of web design is not to use all available screen space. It is legibility. Text is most legible with no more than 70 characters per line.

  • 1
    Should it be the text itself that is centered, justified or left-aligned, the answer would be easy for me, as the fixation for each of the rows would need less effort if it was left-aligned (well, for LTR languages). But in this case, the shift needed for eye fixation is just necessary one time, so I think there is no difference, especially as the line width does not change. – Dominik Oslizlo Mar 15 '17 at 20:14
  • Thanks @DominikOslizlo - I like the point you made about considering "shift needed for eye fixation". – Adam Zerner Mar 15 '17 at 20:16
  • With your example Center is OK, you could improved it by justifying, And if it don't break layout/reading the CSS3 multiple columns could be a nice addition. – ColdCat Mar 22 '17 at 11:33
3
+25

Design is purely a contextual approach.

In the current context, the example you've presented, there the left column navigation is a fixed element throughout the web-pages, so the best perceivance for the human eyes to co-relate its other elements is left aligned body. If it was a row navigation pane, the best perceivance for the human eyes would be a center aligned body. (Ex. Medium)

There is nothing like best practice in design, its ever evolving. White spaces are generally used to draw attention of users from a blank to something interactive. It’s completely on designers, how creatively they use these principles of psychology in their design to make the experiences effective and pleasant for users.

  • 1) Why do you say that it being a fixed element throughout web pages means that it's best to have a left aligned body? 2) What do you mean by "row navigation pane", and why is that best to be center aligned? – Adam Zerner Mar 20 '17 at 20:07
  • Ans 1) it’s because of association of the navigation links with the contents presented in the body. And when the navigation is on the left, our eyes are instantly drawn to it apparently look pleasant to eyes too because of harmony among Navigation and Contents. – Anunay Mahajan Mar 22 '17 at 15:20
  • Ans 2) By Row-navigation pane, I mean horizontal navigation. Aligned at top-center of the content. It’s best to be aligned at center, as it creates a balanced structure of your page eventually appears to be pleasant to eyes. Top-Center Aligned horizontal navigation is more popular because it is responsive, can be designed according to viewport of the device and fits perfectly with the body width. Whereas, with columnar navigation we can achieve those things, sometimes the content might be lengthy or shorter than navigation which creates an unbalanced structure and negative sight. – Anunay Mahajan Mar 22 '17 at 15:20
  • It’s all again a matter of context, self-interest and motivation behind design. It’s all up to you, how you want to present your matter in front of viewers and how you want your viewers to engage with it. – Anunay Mahajan Mar 22 '17 at 15:21
1

Most of the answers here are dwelling deep into the text readability & legacy research (I am not saying that there is anything wrong about it) about typography. However, I'd be more concerned about the purpose that text serves.

In the wake of mobiles & complexity reduction, Big, bold, centred typography with short line length seems to be the first choice of the industry. This behaviour seems to be driven more by the dynamic business requirements (I'm excluding the obvious ones) such as:

  1. Centre aligned text plays well with multimedia content insertions.

  2. Negative space/minimalism is a widespread UI pattern now and is part of all the major design frameworks to an extent (flat design, material design and all new systems draw something or other from minimalism).

  3. A centred text plays really well with varied screen sizes, combined with (even) larger text sizes, it creates the best mobile reading experience.

  4. Talking about design perception for humans, equally distributed white space is known to increase user comprehension and allow users to create mind maps easily. (https://www.fastcodesign.com/3046656/why-white-space-is-crucial-to-ux-design)

In addition, it's all the matter of the objectives of the design more than anything. "Providing ultimate reading experience with implementing all UX laws" is rarely the objective. sometimes a page is just meant to share a piece of information which caters to a targetted audience or for sharing information at the individual level without much of a business objective.

Paul Graham's site has a lot of white space and it still a regular left to write text orientation. but it's also not mobile optimised, neither it is the most aesthetically appealing designed page. It's there to serve a purpose and it's doing it greatly for while now. That's one of best learning for me as well. First & foremost reason behind any design is it should get work done, everything else is secondary.

Here are two screenshots for ya'

Paul Graham's page

A medium article screenshot, shamelessly it's my article

Now, they both serve their own purposes, however medium caters to a large audience and thus requires an aesthetically appealing interface with compatibility for all screen sizes. Also, it caters so a very wide audience. On the other hand, paul graham's page is more like a place where one would reach when he is looking for some expert advice and it serves that purpose as well.

What are your business/personal objectives? who is your target audience? Discussing anything before putting these two questions in context will not yield you any good results.

PS: I'd always go with minimalistic, centered (but left aligned) text with a short line length & relatively higher line hight. why? because that just makes more sense in the time we live in ;)

Cheers.

  • 1) Why do you say that centered content does better with multimedia insertions? 2) Negative space/minimalism could be accomplished with left-aligned content, right? 3) Why do you say that centered text plays well with different screen sizes, particularly mobile? Stacked had a point that for large screens, left aligned content could cause you to move your head. But for mobile, I don't see the disadvantage to left aligned content. – Adam Zerner Mar 23 '17 at 16:42
  • 1) Because it does, Images, videos and interactive elements which are centred on screen grab more attention and with centre aligned text creates a seamless transition of focus from text to content and back to reading. 2) Yes, any white space is white space but distribution is important too. white space enveloping content gives a sense of clean, balanced interface. 3) end to end lines are better suited for mobile reading (because the width is less, users can scan the content faster.) text orientation is still left to right (always should be) but the whitespace is balanced both sides. – Himanshu Vaishnav Mar 24 '17 at 7:11
0

Wouldn't make a strong rule to generically center or left justify content as there are pleasing designs that can be accommodated either way.

In the case shown, because it has left navigation, I would left justify all of the content and constrain the width of the body text to a readable length.

For this example, centering the content (including the nav bar) introduces distracting white space from the left edge of the window. Would be more appropriate to anchor the nav on the left and float the text in the center, but that then introduces eye travel with little (no) visual benefit.

0

It doesn't really matter as long as it's readable. But in the example you have taken, the paragraphs should be left aligned to match with the layout. Make sure you keep good font-size to line-height ratio. Avoid justifying paragraphs as it effects the continuity of flow of words - which makes it less readable.

0

You should utilize the space given to you. That means that you should not waste screen space if it can be put to use to prevent your users from needing to scroll. Now, that doesn't mean you should make the text as wide as the page... it's difficult to read text that wide. But what about a responsive page design that adds a second or third column of text if possible?

If you are utilizing the space, then the page will naturally become left justified. If you choose to keep the whitespace then there are only aesthetic reasons to prefer one over the other.

  • 2
    Hm, interesting idea to have a second or third column of text. My impression of the cost-benefit is: cost = eye travel from bottom of one column to top of the next, benefit = less scrolling. The cost seems to outweigh the benefit to me, but I'm interested in hearing other opinions and seeing any readability studies. I know newspapers often have two column designs, but I suspect that's due to limited space. – Adam Zerner Mar 18 '17 at 1:11
  • The cost of scrolling is vastly higher than the cost of moving your eye to the next column. The problem with multiple columns is more one of browser compatibility (it's hard to make CSS do columns well) and user confusion (you need to clearly indicate that the columns continue the thread) than it is of being worse in a usability context. – Myrddin Emrys Mar 19 '17 at 16:35
  • 2
    "The cost of scrolling is vastly higher than the cost of moving your eye to the next column." - Is that your impression, conventional wisdom, or the result of research? – Adam Zerner Mar 19 '17 at 17:02
  • The first link in my answer. Everywhere on page one has more frequent and more lengthy user engagement than anything on page two. – Myrddin Emrys Mar 20 '17 at 2:45
  • IMO, the article is arguing: 1) The fold matters because a) there is an interaction cost associated with scrolling, and b) sometimes users don't even know there's something beneath it. 2) In general, the fold matters a lot. The impact isn't trivial. They support this claim with qualitative user research and the aggregate data of eye tracking studies. However, I don't think that this tells us 1) what the significance of the fold is in the context of a textual article, or 2) whether the cost outweighs the cost of moving your eye to the next column. – Adam Zerner Mar 20 '17 at 20:23
0

If you are aiming for a reading website/content rich website, Keep the following for reference,

  1. The elements you keep in your website increases the user efforts i.e elements like accordions, tabs,etc should be kept at the minimum. It is noted excessive use of this may improve the look and feel but reduces the readability. Try formatting the content instead of using these.

  2. Eye movement required to cover the content of the website, should not move between the screen window. Example: If there is two columns the end of the 1st column should not go beyond the screen height, i.e user should not scroll to the bottom and then back to the top to read the same article. Usually News websites follow this rule if you have observed.

Many modern famous websites try to distribute the content uniformly with the content of importance as close to the center as possible. i.e users are accustomed to see ads at the LHS and RHS and long widths/lengthy text makes up for eye movement which could be straining to the user.

Now to the answer, I prefer to place the content type website's content/articles in the center with text left aligned and leave the spaces on the left and right like this website and many other major websites. I've noticed this also helps during the responsive designs keeping the contents intact.

  • The first point doesn't seem relevant. I like that second point though! I hadn't previously thought of it, but it makes a lot of sense. With a blog, there is often enough content such that the user would eventually need to scroll, in which case, the use of columns would be bad for the reason you say. I also like the point you make about users being used to seeing ads on the LHS and RHS. – Adam Zerner Mar 20 '17 at 20:32
0

One difference which I suspect is sheer performance and functionality. I suspect Paul Graham's site is static and does not care about the responsive layouts. Medium, on the other hand, does care about the overall length and breadth of the browsers and adjusts accordingly.

A static site is faster to load is more compatible with old browsers and overall wins from a performance standpoint. Keeping something at the center does need some work on the browsers part. If you happen to resize the window, you will find that Paul's site doesn't even flinch. If you center the content, would you keep the nav bar at the left most edge? On a widescreen monitor, will the text look orphaned?

Another example comes to mind is Reddit. That site does not care much about the overall world/letter length of a column. It is aimed at being functional and that is expected from the target user base.

enter image description here

I am not advocating for or against an approach. I am just musing about the various considerations which go into the choice of layout. Highly performance oriented and functional, vs. heavier but arguably more pleasing to the eye.

On a related note, I personally do not find the multi-column layout favorable for the web. Amazon Kindle's online reader does offer a multiple column view and I have rarely used it. But that's just me.

Bottomline is, I do not find this decision to be very straightforward. If you users are expected to be using the site in old browsers/older systems, I would not trouble the machines with responsive layouts. On the other hand, if I am aiming to be a modern new-age web publication platform like Medium, I might as well go all-out.

Just my two cents.

  • Hm, I hadn't thought of performance as a criterion. It seems doubtful to me that someone have a system old enough that it would struggle to handle centering. – Adam Zerner Mar 22 '17 at 17:09
  • It is not limited to centering. I also pointed out other factors like responsive design etc. For a purely bare-bones site, all this is just fluff. – Harshal Mar 23 '17 at 5:25
0

I would argue it should be centered.

On big screens (21 inches+) you would have to turn the whole head to read the text and it would be quite uncomfortable. Also the text is very small; I would make it at least 16px and close to 20 or even more on bigger screens.

Also I'd say we are more accustomed to centered websites (we read best what we read most), so left aligned ones are seem unusual and may require more mental effort & attention. It may be good for a promo site where they want the attention, but for content-heavy sites you want to be concentrated on text.

Site has other usability issues, e.g. in the navigation it mixes internal and external links.

  • Ah, good point about turning your head on big screens. – Adam Zerner Mar 22 '17 at 22:00
0

I found that no one answer listed out the advantages and disadvantages comprehensively. Based on the current answers, here are some things to consider. To me, the list below feels incomplete and I am still interested in hearing about other factors to consider.


Advantages of center-aligned content:

  • Users with large screens won't have to turn their head [answer].
  • Users expect to see ads at the left-hand side and right-hand side of displays [answer].

Advantages of left-aligned content:

  • Centering introduces white space at the left edge that is distracting to readers [answer]. Maybe?
  • Centering requires work from the browser and could thus be less performant when initially loading and when resizing [answer]. Personally, I find it implausible that a system would be so slow as to not handle centering well.

It should be noted that the alignment of the navigation menu matters. A left-align menu works better with left-aligned content. A centered menu works better with centered content.

The possibility of using columns was also brought up. The advantage of columns is that there is more content above the fold (see link for the importance of the fold). The disadvantage is that it takes effort for the user to go from the bottom of one column to the top of the next one. Especially when there is enough content such that scrolling is required [answer] (which happens the majority of the time).

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.