I'm working on a Inventory System where users make orders using a form. The user will fill a couple of fields and then he will choose the products that he wants.

I'm wondering on how to show the items added by user. The simplest way is to use a table, and every time the user choose a product, add a row in this table, with the info about that product. Something like this:

Items on a table

Another possible way (and I don't know if it is good) is to show the items listed as cards, like this:

Items as cards

An important point here is that there are fields that have to be shown, and some of them have to be editable.

The question is: which one is the best way to show the items?


I personally feel the Second option is a treat to the eyes.

Since you're going with CardView, I would also recommend having an image on the Card for categories or anything relevant to that entry so it's far more clear to the user than to check each card and scroll through the entries.

However, you might want to go with the first one, if your users are dealing with a lot of items.

This depends on how many items your users might deal in a particular transaction.

P.S. The Remove button suggests a negative action, so my suggestion would be to not keep it so distinguished from the rest of the UI.

  • 1
    Thanks for your explanation. But, about the Remove button color, you mean that I shouldn't user that red, right? Maybe should I use a lighter red? – Victor Leal Sep 16 '15 at 18:38
  • Yes, the shade of the Remove button could be changed or you could only have a Bin icon in Gray shade to not attract attention towards a negative action. – Swapnil Borkar Sep 17 '15 at 6:16
  • 1
    I agree with you in all points, but I'll use the table view because, for now, I won't have images of the products neither colors for each category (a product can be inside two or more categories), so it will be difficult for the user to check each card. I don't like to use inputs inside tables rows, but I think that's the way. – Victor Leal Sep 17 '15 at 12:52

The Second is better for two reasons:

1st reason : You can add image on each card to have a "sexy" and visual interface.

2nd reason : It's more useful if you must develop a responsive interface.

If you have a lot of card, you can adapt the number of card by line with a fluid container.


I prefer the FIRST one as more scannable and easy to show/calculate a summary of orders. It could serve the scenario of adjusting quantities to fit in a budget well. Like the most common shopping cart model from Amazon and etc.

The second design is modern and may fit better if the item thumbnail adds value to the user decision making. To make consistent information display, maybe put the add-item form into a card by the end of the card array?

Overall I think to account for user goal and decision making process is important here. Start with questions of what data and in what form do users need to make shopping easier?

  • I got your point. Certainly the user have some experience with e-commerces and using that same way of ordering stuff may be comfortable. Also, summarize the things is more simple with a table view, but to adjust some values is not. – Victor Leal Sep 16 '15 at 18:56

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