1

I am developing a web application targeting desktop using Material Design and I am now facing a dilemma.

The layout of the application is rather standard: toolbar on top, left sidebar and large content area. something like this (it's the layout of the starter app for Angular Material):

enter image description here

In the content area I have now to display a (possibly) large set of elements, which represent "customers".

I'm considering mainly 2 possibilities:

  1. Using a traditional list, where each element fills the entire width and for each element I show a pic of the client, the client name in one row and some extra details in the second row. This is probably the most traditional approach, however I don't like it very much because it wastes a lot of space on large screens.

  2. Using a grid" of cards, where for each customer I have a card, showing the same info as above but in a more space efficient way.

What do you think? Any suggestions?

Improve this question
0

3 Answers 3

Reset to default
2

I think this is a valid design question! I agree the list takes up too much space and on tablets can look unnecessarily elongated. This is one of many reasons card designs are increasingly popular across both websites and mobile applications. Card design lends to a clean and attractive user interface. Card design will also display the information appropriately to the device screen. On a mobile it may be a two-up card design but on tablet it may be three or more per row.

For further reading check out this article.

Improve this answer
7
  • Just because it is an important design decision doesn't make it a valid question for SE. There's not enough context to give an objective answer.
    – Cai
    May 1, 2016 at 6:44
  • Well he's got an answer. I'm (thankfully) not in the business of caring much for maintaining some kind of QA for SE.
    – user5854648
    May 1, 2016 at 8:17
  • Apart from the fact that that isn't a very helpful attitude to anything or anyone, my point was there isn't enough context for an objective answer regardless. Unless your answer is "always use cards over lists".
    – Cai
    May 1, 2016 at 8:23
  • I have always understood your original point. If you feel there is something wrong with the question, then why don't you use your expertise to help the person asking it? As for me I could care less. I feel for data that would be for customers that contain two lines of text a card design would most likely be most appropriate given the information given (customer, two lines of text, web app).
    – user5854648
    May 1, 2016 at 8:32
  • 1
    That is your opinion, and theres nothing wrong with that. But that doesn't change my point, and stating how little you care in every comment isn't very helpful to anyone, especially not the person asking the question.
    – Cai
    May 1, 2016 at 9:14
0

If you are not targeting touch devices, you could think about showing a grid with just pics and name, at the mouseover the pic enlarges, or pop-up, showing the surname and other informations too. This save a lot of space and become something more interactive (and fun, why not)

Improve this answer
0

I am going to have to say that the list view is better in this circumstance given that the scanabitily is preference with finding these customers.

I think a more comprehensive answer can be given with more context as to the purpose of displaying the customers and for what function.

You don't like the list view because it wastes space. Does this mean you want to add complexity and visual noise (regardless of how pretty it looks) to something that functions as a quick way to access a customers details? This is assuming that is the goal.

If the goal is to access customers where the user of the application may find preference and ease in using the customers facial details for recognition then i'm all for having 'cards'.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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