In a list of products one underneath the other, showing them in cards is the better solution?

Imagine there are a lot of situations: a list with one specific category of items; a list with products different from each other... I will use the same appearance

I was searching for something to answer this question and I've found this:

  • "Cards are better suited when users browse for information than when they search."

Also the examples i've found (they use two kinds of lists) enter image description here enter image description here

So, my question is: divide the items by cards or divided by simple lines, like a common list? (MOBILE)

PS: I'll do the 3 kinds of items presentation: grid, lists and block, I just wanna know if the content inside them are better in cards or simply divided by lines

closed as too broad by plainclothes, Evil Closet Monkey, Mayo, Michael Lai, JohnGB Jun 8 '17 at 8:03

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Never take Mercado Libre as a good UX example :D – Devin May 30 '17 at 17:52
up vote 3 down vote accepted

About cards...

Cards were democratized by Google, first with Google Now app before becoming an basic component of material design system. A lot of social and e-commerce platform use cards to present a single element with multiple meta-informations and it associated actions. Google Material Design specifications describe cards this way :

Cards display content composed of different elements whose size or supported actions vary.

More about cards :

https://material.io/guidelines/components/cards.html#cards-usage https://blog.intercom.com/why-cards-are-the-future-of-the-web/

enter image description here

About your question

In the exemples you provided, cards seems to have only two actions, an implicit one (Taping on it = go the item page) and an explicit one "Add to wishlist".

It looks like your asking if you should use a mosaic view (or grid view) or a list view (1 line = 1 item).

This choice will mostly depends of this three points :

Are pictures more important than information ? You wont buy a t-shirt in the same way as you buy an external storage disk, you need to emphase the picture for the first one, you need to emphase the product description for the second one. For the first case, mosaic view or even a full width image view is the best approach, if text informations are more important, use a list view.

Do you need to preserve the size ratio of each item picture ? Mosaic view with a masonry system will be the best.

Do you need to show a lot of items above the fold ? Mosaic view will sole this problematic.

Whatever your choice is, the whole UI Feeling of the type of list you use will be really relative to the harmony of your item pictures.

If your designing a generalist e-commerce app, I strongly suggest you to let the user manually choose between grid, full width or list view. This way you'll cover all the cases.

Flipkart exemple : enter image description here

Think about consistency

Cards work well with the notion of depth that Google introduced. If only this part of your app use cards and shadows then you should avoid cards and keep a simple list or blocks view.

Relative questions Material Design: list items or cards to display a large collection of elements? Material Design: using cards for homogeneous content instead of list

Indeed both the lines and the cards have advantages and could be used whenever people search for a specific thing or simply browse into a category. However, if you want to go with only one option, than I'd recommend you to go with the first one: dividing the products with lines.

From a usability and design point of view you will simply have more design space in the line separation. You won't have to squeeze more icons or text about each product, you can have shipment and so on.

One more thing you should consider is pagination for the search vs browse.

Not the answer you're looking for? Browse other questions tagged or ask your own question.