Why do many sites leave half of each webpage empty?

  • 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:

    Screenshot of UX Stack Exchange with annotations

    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

    Comments are not for extended discussion; this conversation has been moved to chat.

    Because no one wants to read a 27-inch-long line of copy.

    I'm not sure about your Google Search example. The one you included has an additional element that fills in the space. A different query could be made that leaves empty space.

    @DavidStarkey You are not the first to mention something with that example, so I replaced it with Gmail.

    Amazon, Chase, and Linked in all use space - maybe you need a bigger monitor...

    @BradWerth My monitor screen is wide enough. Those sites do not have huge empty gap on the sides, at least not on the pages I was looking at.

    They do on the links that you posted... maybe the pages you were looking at would have made better link targets.

    Make note that you're comparing an application (Gmail) with informational websites. Applications meant to perform functions operate under a somewhat different criteria from applications meant to present text information. Somewhat like comparing the UI of Word to that of Photoshop. Also note that once opening an email to read in gmail, there is empty whitespace on the side.

    @MartinBean, Some of us do want that space used (e.g. on Stack Exchange I have a user script that changes it such that the space is used). Allowing the user to define the space used is part of what having *windows* is all about. By not adapting to what the *user has selected* for a width (by resizing the browser window), the site is usurping user agency. It can imply arrogance on the part of the web sites' designers' that they *know* better what the user wants than the user. Note: that this applies to both wide and narrow views.

    @Makyen If you take issue with Stack Exchange using fixed-width containers and see it as an attack on your proficiency to use a computer, then browsing the Internet is going to be a very woeful experience for you indeed.

    As a sidenote, many websites look much better on HD screens when you rotate those screens to portrait position.

    They're not empty, they're full of comfort space, to ease visualization.

    The last guess, *"people just do it because they don't realize they shouldn't?"* can't be right, because you have to take some action to specify a margin like that. I suspect the reason is that the authors believe their users to be incapable of resizing a browser to a comfortable width. Many authors seem to have a misconception about text size, too.

    Could you be clearer what you mean by "both designs" in your penultimate paragraph? You've only described one design above it.

    this is the reason I use all my screens in vertical mode (a.k.a. portrait mode). The thing is that it was movies and games that made the 16:9 format popular, *not* websites.

    Your screen's logical DPI is set incorrectly. :-)

    all about the saccades

    This can't be fully serious, can it?

    Whitespace **is not** wasted space, it's an important element in typography and design. See here: http://www.seguetech.com/whitespace-web-design/

    `...because they don't realize they shouldn't?` Huh?? There's the problem, a false assumption.

    Hehe, do they? :-P

    FWIW Facebook's messenger.com is full width and I find it very hard to read when the window width reaches about 1000px.

    Interesting that your _Examples of sites without space_ is the same as my _sites that make my eyes bleed_ list.

    It is "Stack Exchange", not "StackExchange". (the last section, "Proper Use of the Stack Exchange Name"). And "Stack Overflow", not "StackOverflow" . Please edit your question. Thanks in advance.

    @PeterMortensen I didn't know that. Thanks. I updated the question.

  • Devin

    Devin Correct answer

    4 years ago

    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:

    1366x768 enter image description here

    Now 1920x1200 (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

    1+ @Devin Very informative and comprehensive answer. Keep up the good work!

    I might be mistaken, but even Amazon doesn't use full-width. or at least, they don't fill the page with 100% content, there still can be found quite some white space. https://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords=scene+switch

    @Rvervuurt, that's why I mention they're constantly testing. For example, I have a quite big monitor. When I clicked your link on Firefox, it gave me a boxed, centered layout. After I logged in, I got a page with around 90% of space used, aligned to the left. On Safari, logged off, I got a 100% width. This kind of *inconsistency* (so to speak) is typical of Amazon, but most pages out of results page are usually at 100%, no matter if logged in or out. Results pages are quite random

    I disagree that we are giving up control, and I disagree that the result is randomness, when we do not attempt to constrain the outer bounds of the content. We are acknowledging our lack of control over the user's greater workspace layout, and affirming the user's prerogative in organizing that, using tools that all users either have, or don't need. The result is not random, or even arbitrary. The result, is the layout that the user believes is best suited for their task at hand, in which your product *may be a small, insignificant part* despite it's overall potential.

    Just to throw in my 2cents, full width is super tricky to pull off without it looking like mess, nobody wants to read such a long line and most of text would fall into single line which is not great, also in my case, only <2% uses screen resolution so big that empty space on sides is noticeable.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM