Whitespace versus content

Question

Given a larger amount of content (e.g. a table of data or a list of fields and options in a form) that absolutely need to be on a website, would it be better to space it out so that scrolling is necessary but there is always a lot of whitespace / not too much content in the same view, or would it be better to put as much as possible on one view and risk cluttering the screen?

To give an example, we have a table with many elements (around 30-100 lines). Each row just contains text and a few buttons that link to further actions that can be done with the corresponding entry.

Would it be better to use more whitespace (like e.g. Bootstrap does by default) to make each row higher so that only about 10-15 rows fit onto the screen at the same time, or would it be better to reduce the whitespace so that more lines (~30) fit on the screen at the same time?

We are having this discussion at the moment where one side of the argument says, it is better to have less content on one screen (e.g. how Google does it versus Yahoo, so there are only very few elements on the screen) so that the user is not overwhelmed by too many items at the same time. E.g. too much stuff (no matter if relevant or not) is bad.

The other side of the argument says, it's better to reduce unnecessary/unrelated content (e.g. how Google does it versus Yahoo, as in there is only a search bar and no unrelated/unnecessary stuff on the screen), but reducing the amount of relevant content is not helpful. E.g. Content is better than whitespace, but whitespace is better than unnecessary stuff.

Answer 1

You should try to avoid these discussions, they will not result in anything valuable. Instead, either make it a user choice by providing a switch, or test it with real users.

As with most such discussions in UX, context is utterly important, and the best course of action is a test: Give realistic tasks to target users, who will need to use your design to complete these tasks without help.

Ask them to think aloud, don't help them, and avoid suggestive tasks.

The design should be shown on a representative screen for your audience, to make sure users get a feeling of the reality, of how much data they will actually see at once.

If the table is already live, you can easily run an A/B test with online users, or you can use a completely static design which at least allows scrolling, and users solve the task hypothetically.

The question in both cases is how you measure which table is better. This depends on the kind of task users need to complete when using the table. If usability is important, you could measure task completion times, if you're interested in subjective impressions (the experience) you could prepare a survey.

"I'm lacking an overview on my data"

was feedback we had in user tests with a spacious design that replaced a ultra-dense layout. Users needed to use that table once a week, and compare rows.

Answer 2

It sounds like each row holds "a few buttons" and you're going to need the right amount of space to make sure that the user doesn't accidentally click the wrong button by mistake, especially if they'll be tapping a touch screen.

White space is good for preventing cognitive overload, but sometimes data density is the greater UX need. The important part is to help the user see the right amount of information to accomplish their necessary tasks. Start by defining those tasks, and then test a few versions of the design with your users to see which is the most supportive in helping them be successful.