1

I have the table below:
enter image description here

I want to show each table row using a Material card view.
Something like this:
enter image description here

Is this a good idea?
Is there any better approach?


Edit: i understand the table usage , but in some scenario its not suitable for show data.ex: what if product name is "White Mountain Puzzles Vintage Foods & Drinks - 1000 Piece Jigsaw Puzzle" and its necessary to show full name of product

closed as primarily opinion-based by Shreyas Tripathy, locationunknown, Ken Mohnkern, maxathousand, Michael Lai Jun 27 '18 at 5:48

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • I'm not sure I understand... Does the card view appear when clicking the row? – RobbyReindeer Jun 11 '18 at 12:58
  • @RobE no each row show as card! – Moshhegh Faghdan Jun 11 '18 at 15:05
1

First thing, I would try to know is – what's the purpose of showing this data here? It looks like the data is about orders places, and relevant details. And it would be presented into the web-based Admin Panel of the system.

So here, showing it in the tabular format would be the best way according to me. Because with the tabular format, it's easy to see and find order numbers, quantity, price, etc.

With material design card view, a user would need to scroll down through a big space to find something relevant to the order, because card view occupies more space.

  • why not showing this way?? – Moshhegh Faghdan Jun 10 '18 at 14:12
  • @MoshheghFaghdan Do you mean why should not we show it in Material Design card view? – gautamlakum Jun 11 '18 at 5:56
  • yes i mean why not display each row in one card? in card view i can show more date – Moshhegh Faghdan Jun 11 '18 at 6:17
  • I answered based on what you have presented in two screenshots. It depends on what data you want to show, and what is the purpose of it. I feel the focus should be, making it simple, easy to check the data, and good use of space. As far as the long names concerned, you can show it on mouse hover of the table cell. It's just a thought. – gautamlakum Jun 12 '18 at 5:10
0

Whether it's good or bad depends on users' goals.

For sure, direct mapping the table rows into cards isn't a good decision.

Take step back from the UI to UX. Make some research on how users use the table, what are their's goals, etc.

Then having this in mind, you can explore and test solutions, striving to reach the users' goals in a best way. Usability metrics, like error rate and task speed will give you a solid ground to pick a winner.

0

No, it's not a good idea (but that's just my opinion)

Tables are a super useful way to display data with many properties. You remove the 2 dimensional way for people to triangulate the information they are looking for and put it in a one dimensional list. Unless you have a good filter and sort system above your cards, I don't think it's going to work well. You would also use more vertical space with cards, making it harder to find specific data. The sort order would be less easy to follow as the values are not all stacked in a column.

Maybe for a mobile view this would make sense as tables seldom work well on such small screens. Put a nice searchbox on top, could work.

  • table are useful for show many properties , but not for long width property – Moshhegh Faghdan Jun 11 '18 at 7:02
0

As mentioned before, I'd suggest to understand the table usage cases first, and maybe hide or remove the columns which are not needed, maybe also group some of the elements (looks like the Order track number has several "children" — products).

Search bar is also a powerful addition to the UX improvement.

One addition to the UI: user will definitely benefit from the improved readability, that can be reached by aligning numbers and prices by the right side and text-based entries by left. Avoid centre-alignment. Here's the discussion on this topic.

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