2

Are there any studies that having some space between two tiles would improve readability in an app experience?

I've included two wireframes that give an idea of what I mean, which is better spacing between or no spacing between?No Spacing between cards

Space between card

5

Let's scroll through your first design and stop somewhere in the middle:

enter image description here

Now, quick: Which button applies to the card? The one above or the one below?

This is the advantage of having a clear division between each section. A space is merely one way to handle that division.

In terms of graphic design, we're talking about creating a relationship between visual elements via the concept of proximity (making sure the toolbar is connected to the content block) while maintaining a clear separation between the groups using the specific technique of white space.

My favorite example of why these concepts are important is when you're reading a long news article or blog post that is a stream of photos separated by captions but there's no visual cue as to whether the caption applies to the image above or below:

Lorem ipsum dolor set...
-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...
-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...
-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...
-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...
-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...

This always takes a bit of cognitive load to figure out at first. I have to figure out the first couple of photos and connect the subject matter of the photo with the text to figure out which I should be focusing on. The simple addition of a bit of white space can make this so much easier to read:

Lorem ipsum dolor set...

-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...

-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...

-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...

-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...

-----------------------
|                     |
|                     |
-----------------------
Lorem ipsum dolor set...

As for data, I'm sure there's some out there, but this is really a fundamental concept of good visual design. Google 'white space' to find all sorts of information on the topic.

  • I like this answer. DA01 you've explored the nittie gritties and exposed the problem accurately. And the illustration was quite self explanatory. Thanks! – Jezza Jul 25 '15 at 14:04
3

I cannot supply you with the reasons why or usability studies that point to which is better, but by the Google Material Design standards you are supposed to leave a space in between cards.

Card margins on mobile

  • Padding from edge of screen to card: 8dp
  • Space between cards: 8dp

Material Design - Content Blocks

Example of cards with margin

enter image description here

  • This is great, I forgot about this doc from Google. I was hoping some body had conducted a study on this topic and published the data. Looks I'll have to do some A/B testing myself. – Jezza Jul 24 '15 at 15:16
  • Yah, I assume Google thoroughly tests everything and found this to be the optimal solution but I understand you don't want to blindly follow convention. Perhaps someone will come up with statistics it would surely be interesting to read. – DasBeasto Jul 24 '15 at 15:19

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.