5

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.

Card types for reference

  • The logic behind such an approach is more technical i believe. Using full width gives you more space to work with and makes it also more easy to display the content on different devices i believe. – Pectoralis Major Sep 11 '17 at 11:16
  • Hey.. not sure how it would help in displaying content better on different devices. Can you elaborate please. – Mayank Sagar Sep 11 '17 at 11:20
6

Cards with margin and shadow look like real cards.

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.

https://material.io/guidelines/#introduction-principles

  • So from what I understand, it's more or less from a visual point of view. But again, that might be subjective. – Mayank Sagar Sep 11 '17 at 12:26
1

The logic is in the content.

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

enter image description here

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

enter image description here

Do

A quickly scannable list, instead of cards, is an appropriate way to represent homogeneous content that doesn't have many actions.

Don't

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.

However...

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

  • What would qualify as homogenous content? Are we deciding it based on the layout or the kind of content? – Mayank Sagar Sep 13 '17 at 11:24
  • Both are connected. Your content will guide your layout. If you see the images, cards are very different, even in size, while tiles have very repetitive and similar content. Think on the metaphor: when you use a card in real world, it may have any kind of content, information is a bit more difficult to read and locate. However, if you write a list, it will be quite similar, you'll probably follow the same pattern – Devin Sep 13 '17 at 15:42
0

A lot of web apps or websites use edge to edge cards in mobile screens.

  1. 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).

  2. 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?

  3. 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.

  • Why would anyone check an app in a Full HD screen? And how? Also, Bootsrap has 15px padding on their containers for mobile, so the rows will have a margin by default (unless you modify it) – Devin Sep 11 '17 at 14:36
  • 1
    1. app means application. Applications can be both for mobile or desktop. In my context, i meant imagining 'Gmail on Desktop ...', 2. Containers have 15px padding, Rows have -15px margins and then Columns have 15px paddings. So doesn't the card fit edge to edge? – Anvesh Dunna Sep 11 '17 at 15:29

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.