Home » Why do many sites leave half of each webpage empty?

Why do many sites leave half of each webpage empty?

Solutons:


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:

enter image description here

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:

enter image description here
(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:

1366×768
enter image description here

Now 1920×1200 (24 inches monitor)
enter image description here

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

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.

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:

enter image description here

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?

enter image description here

enter image description here
enter image description here

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.

enter image description here

Related Solutions

Why not drop the “auto” keyword? [duplicate]

Your proposal would be rejected on the basis of backward compatibility alone. But let's say for the sake of argument that the standards committee like your idea. You don't take into account the numerous ways you can initialize a variable widget w; // (a) widget...

Recursive to iterative using a systematic method [closed]

So, to restate the question. We have a function f, in our case fac. def fac(n): if n==0: return 1 else: return n*fac(n-1) It is implemented recursively. We want to implement a function facOpt that does the same thing but iteratively. fac is written almost in...

How can I match values in one file to ranges from another?

if the data file sizes are not huge, there is a simpler way $ join input1 input2 | awk '$5<$4 && $3<$5 {print $2, $5-$3+1}' B100002 32 B100043 15 B123465 3 This Perl code seems to solve your problem It is a common idiom: to load the entire...

Javascript difference between “=” and “===” [duplicate]

You need to use == or === for equality checking. = is the assignment operator. You can read about assignment operators here on MDN. As a quick reference as you are learning JS: = assignment operator == equal to === equal value and equal type != not equal !==...

Compiler complains about misplaced else [closed]

Your compiler complains about an misplaced else because, well, there is an else without a preceding if: // ... for (j=1; j<n-i; j++) { if(a[j]<=a[j+1]) { // ... } // END OF IF } // END OF FOR else { continue; } // ... The else in your code does not follow...

Bootstrap – custom alerts with progress bar

/* !important are just used to overide the bootstrap css in the snippet */ .alertContainer { border-radius: 0 !important; border-width: 0 !important; padding: 0 !important; height: auto !important; position: absolute !important; bottom: 15px !important; left:...

How to Garbage Collect an external Javascript load?

Yes, s.onload = null is useful and will garbage collect! As of 2019, it is not possible to explicitly or programmatically trigger garbage collection in JavaScript. That means it collects when it wants. Although there is cases where setting to null may do a GC...

Math programming with python

At first, what you are looking for is the modulo operator and the function math.floor() Modulo from wikipedia: In computing, the modulo operation finds the remainder after division of one number by another (sometimes called modulus). for example: 12%12=0...

Android slide over letters to create a word [closed]

Here some advice you can use: First for each cell you can create an object that represents the state of that cell: class Cell { char mChar; int row,column; boolean isSelected; } then you can create a 2D array of your cells Cell[][] mTable = ... For views you...

Sum two integers in Java

You reused the x and y variable names (hence the variable x is already defined in method main error), and forgot to assign the ints read from the Scanner to the x and y variables. Besides, there's no need to create two Scanner objects. public static void...

Extend three classes that implements an interface in Java

Using this simplified implementation of the library, using method() instead of M(): interface IFC { void method(); } class A implements IFC { public void method() { System.out.println("method in A"); }; } As akuzminykh mentions in their comment You'd write a...

How to set the stream content in PHPExcel? [closed]

Okey, First thing first PHPExcel_Worksheet_MemoryDrawing() can't solve your problem if you insist to use stream content and pass that to your worksheet your PDF will not render your image. But you can use `PHPExcel_Worksheet_Drawing()' if you want to render...

How to remove all files from a directory?

Linux does not use extensions. It is up to the creator of the file to decide whether the name should have an extension. Linux looks at the first few bytes to figure out what kind of file it is dealing with. To remove all non-hidden files* in a directory use: rm...

Hacker used picture upload to get PHP code into my site

Client side validation The validation code you have provided is in JavaScript. That suggests it is code that you use to do the validation on the client. Rule number one of securing webapps is to never trust the client. The client is under the full control of...

First Time HTML5/CSS Site

Semantically, I would suggest using HTML5 elements more. For example, instead of... <div id="header"> <div id="logo"></div> </div> Use instead: (the ID can stay if you want it to) <header> <div id="logo"></div>...