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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityLet's scroll through your first design and stop somewhere in the middle:
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 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