Confused with what to use - List vs Table

Question

So, I've been browsing for an hour now regarding what the best practice is for this and the majority of what I read is to use e table for tabular data and a list for lists, which makes sense. However, I'm confused about this type of UI:

So it has columns and rows but its a contacts list. Can you give your thoughts on what should I use for this type of UI? (Btw, there's nothing particular in this image, I'm not trying to create exactly this, just needed something to show what I mean)

Answer 1

Before answering that question, let's try to understand/interpret the scenario in the example image you have provided. Although it may not be the case but it may provide us some direction.

Looking at the image, it is evident that it is not a traditional contact list since it is part of an Agile CRM system. One may require more information than just email or have more than just edit option to work with. These systems include tons of information about a person and in such a scenario a table makes more sense since we will have to represent data about one source in an intuitive and readable manner.

So back to your question, what to use when. Let's take a similar example to get to the answer

Let's assume the dataset to be something like this

Name, Email, Number, Social connections, Tags, Location, Designation, BirthDate

Now say that the use case requires you to show almost everything because a location can be an action or a link and Social connections may redirect to their respective social media page, then a table would suit here since it will lay out everything in a consistent and orderly fashion.

But let's say you don't want all these and just want to show few details and a couple of actions then a list would do. Because the final usage result would be different in this case.

Now there is a mid way between these two as well. A list of card which can show multiple pieces of data arranged in the way you want them to be. For ex: arranged against information priority which a table does but only as columns, Grouping certain piece of information which, again, doing it in a table would make it clumsy. In such cases, a list of card would help quite a lot and also make it look a little more interesting.

There is a lot you can tell by just looking at the dataset and the requirement. I may have not been able to tell them all but I hope I was able to help you at least streamline some thought process for such problems.

I hope if not the solution I was able to direct it somewhere useful. Thanks!

Answer 2

A table only makes sense semantically as long as it has rows and columns, while a list of lists is more flexible.

So the table would be a good choice only when the data should be displayed or interpreted as an actual table, instead of a flexible view for a list of items with a number of properties.

Answer 3

An accessible table only makes sense semantically if there is a header row and header column. There are at least 4 cols of tabular data in yours that would work best in a table because it will help people who rely on screen readers to navigate and understand the combination of column and row headers that will interpret the data in each cell so that screen reader users can understand the table similarly to how a sighted user would be able to see it. A list will not be able to provide the same result. Anytime there is more than 2 columns and headers across the top (each col) and down the left side (each row), it should be a table.