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 community
Is there any logic behind when to use cards with margins in design VS edge to edge containers. I've gone through material design guidelines as well as iOS guidelines, which does not give any clear logic. Checked Facebook, which used to have cards with margin before, but has now switched to edge to edge containers. Could not find any research behind their decision to switch as well.
That's the motto of material design. To make things appear as real objects. Objects are presented to the user without breaking the continuity of experience.
Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
Disclaimer: Please keep in mind that last time I checked Apple didn't have a section for cards, so this applies to Material.
The difference that you have noticed is that one is a card (the one from the margins) and the other is a tile from a list.
Cards allow for different types of content, like large photos (including the full size of the card), titles, text and actions. It is then used when they have a hierarchy high enough to deserve their own container.
When to use
Use a card layout when displaying content that:
- As a collection, comprises multiple data types, such as images, movies, and text
- Does not require direct comparison (a user is not directly comparing images or text)
- Supports content of highly variable length, such as comments
- Contains interactive content, such as +1 buttons or comments
- Would otherwise be in a grid list but needs to display more content to supplement the image
However, if the content is too homogeneous and there are few actions (or none), then it is better to use a tile list. In fact, Material shows this specific example
A quickly scannable list, instead of cards, is an appropriate way to represent homogeneous content that doesn't have many actions.
The use of cards here distracts the user from being able to quickly scan. These list items are also not dismissible, so having them on separate cards is confusing.
Always remember that Material is only a guideline, and you can play with it a bit. In fact, unless you really want your app to look like everyone else's, I suggest you give your app a bit of personality
A lot of web apps or websites use edge to edge cards in mobile screens.
This gives them more space to show the content in an already small width screen estate. Imagine a mobile phone with 360dp width. If by any guidelines you use margins of either 8dp or 16dp, you essentially lose 16dp or 32dp respectively. And that 16dp or 32dp can play a huge role(For example, You can fit in an overflow button or show more characters in a single line).
Also having inset cards on mobile, give the feeling of content breaking frequently. To demonstrate this idea, imagine you are viewing in Full HD, an email app like Gmail having cards with 4px gutter in between, instead of table cell rows. Wouldn't that be uncomfortable?
Most* of the responsive websites/web apps that you see use Bootstrap grid style thinking. That is, they have a defined max widths set to containers at different breakpoints but for mobile devices the container width is set to 100% of the browser width. So obviously the cards when placed in the containers, are adjusted to 100% of browser widths by default(i.e edge to edge). This one is more of an outcome than logic. I explained the probable logic in the previous two points.
*Most - I don't have any stat to support it, but I used it here only to highlight the probably reason.
