It's not a matter of “better or worse”, but one of “appropriate or inappropriate given context”. This is what our experience as Toronto developers has taught us.
And that given context is given by your website's specificity itself!
So, you should start weighting up the two UI styles, the two ways of displaying content on your website, from this perspective: each one provides the best UX for a particular type of website that you're owing/developing.
It's your Drupal website's particularities that shape your own purposes and your users' main goal, too, once they land on your website, and which determine the best type of web design to use, as well.
In this respect: what kind of website do you have in mind?
Now, how about pushing these 2 “leading actors” into the spotlight?
How about shading some light on each one's advantages and limitations and pointing out the best contexts when they can help you provide the best UX to your visitors?
What's a List (or Grid) Design?
A more or less basic definition of a list would go something like this: a list is a page featuring several entries or candidate items meant to match the user's search criteria.
Lists are ideal for newspaper websites!
They ease users' “job” of quickly scanning over the headlines in order to gain an overview of the latest news before they decide which article's worthy for being further explored.
Till they decide which is the piece of news worthy, interesting enough for them to “click on for more information”, they need to quickly “overfly” all the headlines.
And a list design, being more compact, is by far the best means for organizing content, for steamlining this scanning process after all.
Did anyone said that: facilitation is a synonym for “better user experience”?
What's a Card in Web Design?
An “entry point”, a “container of related information” or a “brief summary of information”. These are but three possible vague definitions of a card in web design.
Now, let's detail a bit, shall we?
Imagine a card as some sort of an “informational teaser”: it's a container that gives users just an entry point to some more detailed information.
“More detailed information” that the user can access, for further exploration, once they've clicked the card-shaped entry point.
It's no news for anyone that Pinterest's been THE card-based UI's trend setter.
Its popularity, among users, convinced Google, Jelly, Tinder, Weotta, and other giant “players” on the online arena to adopt this UI design.
Although a product of flat design, a card is rather a Flat Design 2.0, since it features light 3D effects (such as drop shadow) pointing out to users that they should click for “unlocking” the rest of the information prepared for them.
What else could we briefly (for now) say about cards?
They work best on archive pages, where you, as a web developer in Toronto/Drupal website owner want to just “tease” your users with brief summaries of the additional content available for them for further exploration.
When Should You Go For a Card-Based UI?
1. For Grouping Various Types of Content
If lists make the best choice when it comes to organizing and displaying similar content, cards, on the other hand, work wonders for helping users easily navigate through several types of content.
Just rely on borders for marking the differences among various elements on your website, among the various pieces of content. Thus, you'll provide a visual boundary for your users to rely on for easily navigating through your “puzzle” made of several distinct items.
2. For Enhancing Information Browsing
Think of Pinterest (again)!
You don't visit Pinterest to search for a particular piece of information.
Instead, you have a content category in mind and some spare time to invest in exploring whatever collections of stunning images you'll might get surprised with.
So, basically you go on Pinterest for scanning through pins, through all those stunning images.
And there you have it!
You've just named precisely the type of user goal that the card-based web design best responds to: “scrolling through”/”scanning through”/”browsing through” or however you wish to call it.
It's not for searching for specific information that you should use this type of UI, but for encouraging and enhancing the act of browsing through a whole collection of bits of information.
You impose your users no content hierarchy whatsoever (like you do when using a list-style design).
Instead, you grab their attention with visually-arresting images encapsulated in those cards and, moreover, you layer bits of information on their surfaces, making teasing textline + eye-catching images work together hand-in-hand.
And since it's browsing that you're encouraging and not the act of quickly accessing a particular type of information, the card-based UI turns all the “scanning through” into a delightful, effortless and fun scroll down card-shaped results.
Whenever your users spot something that surprised/intrigued/stirred their curiosity, they get to click the specific card(s) and indulge in further exploring the additional content.
And there you have it: instant gratification!
When Should You Go For a List-Style Design?
1. For Ensuring Quick Access To The Needed Information
As already mentioned: the list-style web design is perfect for newspaper and newspaper-like websites.
How come?
Just think about it: on this type of site users usually land for eye scanning the given content and for quickly spotting precisely the information/article that they're interested in.
It's not for passing time browsing through a visually-appealing collection of card-based results that they'll access your website.
No sir! In fact they'd hate spending too much of their priceless time looking at amazing pictures, for they're on the look for specific information and they want to gain access to it as quickly and as effortlessly as possible.
So, quickly scanning through a vertical list (far more easily to eye scan than a dashboard of cards featuring no helpful hierarchy) increases their chances to find what they're looking for quick and easy, with no unnecessary distractions whatsoever.
2. For Smaller Screens
It's obvious why lists make a better choice for smaller screens than cards: they take up less space on the screen.
Therefore, users aren't constrained to keep scrolling down, when using their mobile devices, if they want to access more content and they're not forced to rely on their short-memory either.
And this can only lead to better UX!
It's no rocket science why: list-style design enables you to display more choices, in short rows down the length of your web page.
Thus, you take out the (otherwise imminent) possibility of the discouraging “never-ending” scrolling of the equation!
In Conclusion
Cards are informational “teasers” linked to the content to be explored deeper into the website navigation.
They make the ideal choice when it's information browsing (instead of searching) that you'd like your users to do on your website and when you're displaying several types of content that they need to easily navigate through.
Lists are pages displaying search results matching the search items that your users will have typed in.
Being far more compressed and allowing you to establish a visual-guiding hierarchy, too, they enable users to quickly access particular information as they scan through similar types of enlisted content.
With these contexts, specific to each one of the 2 dominating UI styles, in mind, you should now be able to choose one over the other and thus to organize your content for ensuring the best user experience on your website.
