Why do many sites leave half of each webpage empty?

Question

Why do many sites leave half of each webpage empty? Isn't this a waste of screen space?

One nice example of this is the Stack Exchange Network sites:

As you can see, there is a ton of whitespace left on both sides of each page.

Does the whitespace make sites compatible with certain screen sizes?
Does leaving the space help make sites mobile friendly?
Does space make pages seem less crowded, and thus, more usable?
Or, is there no good reason and people just do it because they don't realize they shouldn't?

I've worked on sites that use both designs and haven't had users complain either way.

Examples of sites that have space: Stack Overflow, GitHub, Facebook
Examples of sites without space: Amazon, Chase, Gmail

Answer 1

There are many reasons, but the main ones are visual cluttering and hierarchy of information on one side, and structural consistency on the UI side.

Visual Cluttering

Clutter is an important phenomenon in our lives, and an important consideration in the design of user interfaces and information visualizations. Many existing visualization systems are designed to reduce clutter by filtering what objects or information the user sees, or using non-linear magnification techniques so that objects in the center of the screen are allowed more display area. Tips for designing web pages, maps, and other visualizations often focus on techniques for displaying a large amount of information while keeping clutter to a minimum through careful choices of representation and organization of that information. [Rosenholtz et al., 2005]

Simply put: the idea is to avoid visual and therefore cognitive overload by presenting elements in a logical way. This logical way is related to the next point:

Hierarchy of Information

Information has a hierarchy, and it's the most important part of what you want to show. Namely, the difference between failure and success.

The hierarchy of information is a universal design principle that should be used in all forms of design, including e-Learning design. By definition, it is the arrangement of elements or content on a page/screen in such a way that it reveals an order of importance (either ascending or descending).

Take a look at the boxed model below:

As you may see, it's quite clear that the hierarchy is structured and understandable by most people. Please note that in responsive mode this hierarchy will stack all the elements as expected, so the mobile advantage is very clear

Now, the same layout, transformed to full-width:

(try seeing it full size)

Now, hierarchy 1 has gone, and user's eye will probably scan 2 and 3 first. And then 6 and 7! Basically, our most important element is down below the hierarchy. We can change it so the order is something like 3-1-2-4. Then we'll also have issues when stacking on responsive models (not only devices, even screen resizing), because 3 will be the first element, so again, we're creating issues rather than solving problems.

As you can see, the issues are quite big, and these are just the main ones.

But then we also have the UI or layout side:

Structural Consistency

Let's say you have a full width page. No matter what, it will be 100%. 100% for the person on a small laptop and 100% on a 24 inches monitor. It's easy to see that the person on a laptop will see condensed information, with a certain structure that will show elements in a very specific way with a very specific amount of information in the screen.

Now, the user on that 24 inches monitor will see something extremely different. First of all, chances are the user will feel as in a tennis match, with her head going from one side to the other. Visual saturation and friction will be incredibly high, of course. But the vertical display of information will be different as well. See below:

1366x768

Now 1920x1200 (24 inches monitor)

Quite a difference, huh? Images have been enlarged (and this could be yet another issue!) and text kept his size, almost doubling the amount of text. Now think on this multiplied by the incredible amount of screen sizes that exist, and those that still don't exist and will maybe show up in the next months

In other words: instead of preserving control, we're giving it up in favor of randomness.

Of course, we're talking of general rules, not extremely specific cases, so there will be exceptions here and there

One final note:

I want to make clear that from your examples with full width, only Amazon uses it, and it took them years of testing (there was a very interesting article about this I can't find right now) with countless A/B tests. But here you have hierarchy working: they're selling products where they can't know hierarchy before hand since most products will hold a similar approximated weight , so you'll do your best to match user's search.

As for Google, they use a boxed model and align content to the left with a small gap of white space on the left. LinkedIn main pages are boxed and centered, although it's true the landing page for non logged in users has a full width element. But if you pay close attention, everything else is boxed, even on that page

Answer 2

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable.

source

Keeping a website clean (and simplistic) is a design trend, but it also has usability values. There is less noise and users can find stuff more easily.

But adding a max width to your content is primarily good for readability. Just take a look at reddit and you'll notice why line length matters.

Answer 3

There is a reasonable limit in the amount of information the user should see at once.

If the view is filled with more information than the user can assimilate/understand it becomes overwhelming. This will depend on the kind of content and the way the information is displayed.

It is not a matter of leaving empty space, but of using the amount of space needed, not more.

To illustrate the point with your example:

As websites can make use of scroll, there is no need to put as much information as possible in a single screen.

Now, how to distribute the content?

Depending on the site the content might be centered or left aligned (this last one probably due to reading Left to Right). There is another alternative which is not to distribute the space in the boundaries of the containers, but instead inside the elements. This kind of layout might be useful if there are several columns inside the containers and there is a sidebar in each side. In other words, it is worth if there are enough columns, and at some point the consistency of each element (each row) will start to break due to the information being too far apart. And when we reach that point we are back to continue adding that empty space in any of the previous ways.

Answer 4

As a web developer speaking for the sites I've made: we didn't design for large width display. And white space is what defaults when you scale the browser width up (or whatever the CSS background color is).

The costs of designing and developing a responsive and scalable website across desktop and mobile are already quite high. Our analytics show that 90%+ of our users view our site in <1400 px wide resolution.

At the end of the day, it's not worth it to spend the time and money designing and implementing for the <10% of users who browse our sites at >1400px wide resolution.

Related: https://webmasters.stackexchange.com/questions/7932/what-is-the-standard-width-for-a-website-in-pixels

Answer 5

Academic studies on white space

Yes, white space is used to increase readability and reduce visual clutter [1], [2].

The more objects are on the screen the more the eye and the brain has to process [3]. With empty space we reduce the required attentional resources to process the page. However, too much (more than 50%) of it can have a negative effect on readability and user satisfaction [4].

Does the whitespace make sites compatible with certain screen sizes?

Not really. If the page has no white space (and is stacked with content), when designing for different resolutions it will become a huge problem how to position all elements of the page for the different resolutions.

Does leaving the space help make sites mobile friendly?

Well not exactly. On mobile resolutions you can notice there is not that much white space. They have different layout structure because of the limited screen space available on mobile phones.

---

References:

[1] Chaparro B. et al., Reading Online Text: A Comparison of Four White Space Layouts, 2004

[2] Coursaris C. and Kripintris K., Web Aesthetics and Usability: An Empirical Study of the Effects of White Space, 2012

[3] S. Luck and E. Vogel The capacity of visual working memory for features and conjunctions, 1997

[4] Bernard M., Chaparro B., & Thomasson R., Finding Information on the Web: Does the Amount of Whitespace Really Matter?, 2000

Answer 6

Because some people browse like me, with the monitor turned 90°.

Other people are on tablets, phones, and Win 3.11 with 640*480 resolution and 8 bit colour. The best websites are generally designed to look readable on all devices, not look great on any particular device.

Answer 7

If the content is naturally that wide, then by all means make the page wider. So for example, a large table, would be much more usable if it used as much width as it needed, than by being cramped in a narrower column. I have used google docs spreadsheet full screen in the past, and that's useful.

But as others have said though, there's a limit to how long lines of text should be before they get hard to read. It's because it becomes difficult to find the start of the next line as your eye moves back to the left, so text columns should only be so wide.

Another argument for not having wide webpages is that I didn't buy a huge monitor just so I could see more of any one website. As screens get larger people become less likely to maximise windows, so the browser isn't that wide anyhow.

I bought a huge monitor (actually, two huge monitors side by side, and I'd have more if my machine would drive them) so that I could have multiple windows, browsers, editors, etc side by side. That way I don't have to constantly switch between apps, I can just glance from one to the other, which makes things much more efficient. This is likely most true for sites like stackexchange, which are often used in work contexts, where people are working on other things at the same time. It's almost certainly much less important for entertainment sites.

So, as with any usability question, think about the context your users are working in. Is your site the only thing they're looking at, or is it just one part of what they're doing? Can you really be sure of that? Have you logged that info for example?

Even if it is the only thing they're doing, there's still no point in putting things on screen unless they actually serve some purpose. Otherwise they're just noise which detracts from the thing you actually want them to be looking at (or indeed, they want to be looking at). So, if it's genuinely useful then go ahead. But don't just fill space for the sake of it.

Answer 8

That design is easily found and changed using bootstrap, the example is here: http://getbootstrap.com/css/#grid-example-fluid

Simple answer for the UI is that paragraph width is comparable to the amount of unforced movement an eye can make from left to right - also it's comparable to a sheet of paper.

Normally the readable area of a paragraph should be no wider than an average sized hand.

Answer 9

I was really surprised to see this question and the interest for the subject. This seems to me to be part of the old debate around the question "Is white space wasted space?"

I think this is a myth and there are a lot of arguments that sustain the idea that white space is the key to successful design.

The most important argument for limit the width of the main block of content and have layout white space is it makes the design more usable and helps users focus on the most important elements. I can tell you from experience I simply leave those websites with so much info in a page that I have that feeling I will never find what I need. It is exhausting to see information all over the screen and I don't understand how I could focus on the middle column with text on the left side and the right side.

I know this is a little subjective, but on the page with a lot the info in the page, I have the feeling the developers didn't want to spend more time to add a button with "more" or synthesize what is important. It feels like a punishment and it feels cheap.

White space helps to:

• focus on the most important content;
• improves reading comprehension;
• create the look and feeling of minimalism and elegance.

In this article, Why White Space Is Crucial To UX Design, I found an interesting opinion:

White space has been proven to increase comprehension up to 20%.(...)

White space helps create mental maps.(...)

The power of white space comes from the limits of human attention and memory

Update: To be more specific, the alternative to having margins on the left and on the right is to have more columns or have a main box with a bigger width.

The problem with the first option is that it is hard to prioritize the important information and with the second one is it is hard to read a text with a big width.

A good argument to limit the width of a column is presented here and this reference is important to be mentioned:

Is there an ideal line length for content?

To quote a passage from “Web Style Guide – Basic design principles for creating web sites”.

The ideal line length for text layout is based on the physiology of the human eye…

At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.

Web Style Guide – Basic Design Principles for Creating Website Patrick J. Lynch and Sarah Horton 2nd edition, page 97.

Answer 10

I would say field of vision plays a role. You can easily read a piece of paper and the width of the website is about the same size. This way you don't have to move your head as much in the horizontal direction while reading or parsing the page.

Also even if you tried to reduce the whitespace, then how would you do it? It's not necessarily easy. Most of the questions are already quite short. 2 Pages next to each other ? How would that work with inifinte scroll or scrolling in general ?

Answer 11

I have read all the answers above, but didn't see anywhere any mention to responsive issues that might occur.

Although I still don't get the 'mobile first' design, if you are to design a web application responsive, the same content has to look nice from 320px up to.. whatever. I am mainly working with dashboards, so, a lot of space is needed, but most of the times I still can't stretch content so much that would responsively look good along all the resolution tiers.

Always keep in mind that the longer the container width is, that content will be stacked in smaller resolution tiers and the larger the height of the content block in those resolutions. For example a single line of text in a 1920px width container, consumes 140px of height on a mobile screen view - that's 30% of a small phone screen height and that's excluding browser UI. I am currently on a 21:9 3440x1440px screen. Imaging having items that stretch from side to side on my screen.. Let alone that sometimes I have to turn my head to see desktop from side to side! :D

Here is an example: https://jsfiddle.net/cjj1Ln36/1/

By experience, anything more than 1400px is an overkill especially for rich content, eg combination of a title, text and a chart. Usually, the logical thing to do in higher resolutions, is to break content in columns, however, depending on the resolution and by experience, these columns end up being either too barren or too dense depending on the resolution. It is also highly unlikely that two blocks of code will contain the same content - likely impossible to predict in dynamic websites, so the content of a column might be dense and the other sparse.

For photo-rich websites, things are even worse.

a) If photos use full container width of 1400px, but have to keep a common ratio, like 4:3, then it would most likely occupy all of the screen's height and most likely exceed it.

https://jsfiddle.net/mg965au8/1/

b) If the photo is used on the side of the text, then going from a resolution of 1400px down to a resolution where the photo makes sense to sit above the text (eg > 768px), most probably the content would start too sparse and will probably exceed the image's height while shrinking. I have created a fiddle to illustrate the issue. Try expanding from a low resolution up to the maximum 1400px (imagine without a container!). Does it look nice to all browser widths? Probably not.

https://jsfiddle.net/2xnt3mk2/

Also, what all the others above said - too overwhelming, etc

Answer 12

Especially in text-heavy websites, a narrow column of text is more pleasant to read than a full-width wall of text. Also, if the text is not a novel, you will find that more than half the lines of text don't reach full width so it creates an unpleasant and uneven "text blot".

Think about how text is displayed in a (physical) novel vs. a dictionary. Dictionaries are usually displayed in two columns. It allows the reader to focus better on what is being read because it's important. It's not so important to retain all the words in a novel, as well as not as difficult because we assume the reader is already interested in the story.

In short: humans have poor attention spans and retain focus better if given little information at a time.

Answer 13

It also depends on a content type, its size and on a distance of a user from the screen.

For videos, dashboards with large photos or presentations - full screen is the best option.

For the text content and small to middle pics it is critical to take a comfortable perception field into account.

How wide would be a comfortable perception field without a need to move your eyes from left to right for a normal PC or notebook with 50 to 65 cm (20 to 26 inches) distance to a sitting user?

Eyes are too valuable and get tired quickly, so people prefer to fix the extensive degrees of freedom from 2-D motion to 1-D motion and scroll the page vertically and let the eyes stay fixed in their position.

Scrolling the page vertically is easier for people, as moving the eyes back and forth from left to right and additionally re-fixing the vertical position of the current/next content. Some content can simply be lost, if it is placed outside the main perception field.

As a result the overall visual impression from a page may suffer.