0

Some web apps from Google such as Gmail and Drive offer a "comfortable" option with lots of wasted white-space, which I'll refer to as being diluted for lack of a better term.

enter image description here

I'm creating a web app, and I'm currently deciding between implementing a normal layout, or a diluted layout.

My question is, why would a user choose a diluted layout like this:

enter image description here

Over a more sensible layout like this:

enter image description here

  1. How is the diluted layout practical/justified?

  2. If I should consider implementing it, why?

  • Why is the second one more sensible in your opinion? – Alvaro Feb 1 '17 at 1:11
  • For me, it's way easier to scan, let alone to tap or click. The one you call diluted seems more balanced (IMHO) while the other looks OK, but it could use some spacing – Devin Feb 1 '17 at 2:00
  • 3
    Why do you think lots of white-space is wasted space? – SteveD Feb 1 '17 at 10:00
2

Legibility.

tl;dr Really depends on your target audience's average age and reading abilities. Gmail is trying to cater to everyone so they provide options.

I'm not saying which version is "right" as that would take an eye tracking setup and/or tasks that require the user to use the table to answer questions and then see which one had a higher success rate.

As we age our eyes get worse. Always. By the time we're in our 60s we need about 3x the amount of light to see something the same as when we were in our 20s. That white space actually helps us folks as we age.

Also, the muscles that control saccades weaken as we age and a densely packed table, especially one with lines separating columns and rows (read Tufte on that matter, please!), take longer and are less accurate. The closer things are jammed together the more our eyes will go "off track" and jump to lines that we perceive as figure vs ground.

Line height has an impact because of proximity. Too close and rows will be interpreted on a precognitive level as the same element and it takes effort to separate them. Too big and they'll seem like different tables, practically. So, again, depending on your target audience finding the right line height so that rows are seen as distinct but related would be the goal and you'll need data to really say what the right answer is for your needs.

There is a measurable impact on readability for people with dyslexia when it comes to spacing as well. About 1 in 10 people have dyslexia. That's high and likely involves a good number of the people you're designing for.

Remember, the web isn't only for people in their prime though it's easy to forget that in the tech world. Though your app/site may be intended for the young so it may not be a question.

This says nothing about people who have reading and comprehension issues outside of dyslexia if you're trying to make your content as available as possible.

On a personal note, there was a time I'd have liked the more compact table. At 45, with the introduction of 4k and 5k monitors, I'd practically need the more spaced out version. My sight isn't any worse than average for my age.

0

Users feel less overwhelmed with the 'diluted', spaced out layouts. Especially for use cases like Gmail, spaced out layouts can be easier to read, and easier to skim when looking for a particular email. If you're trying to accomplish similar goals as Gmail, you should consider implementing the spaced out, 'diluted' layouts.

0

Myth #28: White space is wasted space

Although many may consider it a waste of valuable screen estate, white space is an essential element in web design and “is to be regarded as an active element, not a passive background,” Jan Tschichold wrote in 1930.

While you may consider the layout "diluted" it is likely designed that way for a reason.

Why, exactly? You'll have to ask the people who went through the trouble of researching why that particular design works better.

One point of justification to why it works - white space is not wasted space. Nor is it a "dilution" of the content. It is part of the content.

Should you do it for your design? Dunno. That is what research, prototypes, and testing is for.

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.