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?
Add a comment
|
2 Answers
Let'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 like this answer. DA01 you've explored the nittie gritties and exposed the problem accurately. And the illustration was quite self explanatory. Thanks!– JezzaJul 25, 2015 at 14:04
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
answered Jul 24, 2015 at 14:39
-
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.– JezzaJul 24, 2015 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. Jul 24, 2015 at 15:19