Cards vs lists. Their influence on user experience
he most common ways to organize web content today are cards and lists. Each of them has its pros and cons. If lists were used for this purpose for a long time (starting from the first days of the Web development), then the card design style only recently began to be trusted by web developers, gaining enormous momentum in popularity recently. Cards and lists are unique ways to display content that can be perfect in one situation and spoil everything in another. The key point here is the ability of the web designer to determine the face that separates the use of each of the methods, thereby achieving the maximum level of user convenience. The criteria that should be followed during the selection process may surprise you and make you revise some previously known principles of web design. In this article we will define cases when the use of cards in web design will be more preferable than lists and vice versa. What are the cards and lists? In order to understand in which situation the cards should be used, and in which lists, one must first of all decide what each of them represents separately and what function it performs (or should perform).A card is a kind of container displaying various bits of relevant information, which as a whole object is able to transfer even more information to the user. Despite the fact that the cards are the result of the use of a “flat design”, it would still be more appropriate to attribute them to Flat Design 2.0, since they often contain simplified 3D effects like a drop shadow, giving them a clickability property. We are talking about 3D effects like this, which creates a visual deepening of the function, which informs the user about the possibility of clicking on an element and then receiving additional information. Interestingly, cards tend to have something like an association with real playing cards, both in size and shape. To some extent, this resembles the already outdated skevomorphism (* The interface design used on Apple platforms, in which its elements were represented as icons in the form of objects from the real world — an envelope (for e-mail applications), a basket (for deleted files), scissors ( to put a piece of text on the clipboard, etc.). A lined page is a better option in terms of providing a familiar way to view and satisfy search criteria for a user. In essence, at the expense of the list, we get a certain number of items or entries that claim to be chosen by the visitor. Thus, the list contributes to a quick and effective visual viewing of information, which is an integral part of the proper level of user interaction. These particular features of the list are the most important arguments in its favor in terms of usability.
When to use flashcards. Now, knowing the key differences between the card and list view of information, the task of choosing one of them for use in web design is much easier. To view the information (the process opposite to the search). Cards hardly allow or even deprive the user of the possibility of unhindered recognition of the degree of importance of the content. That is, the cards themselves do not provide any information regarding the sequence to be followed when viewing content on a page. The reason for this is the strong external similarity of the cards among themselves, since their contours and borders have no significant differences. No, well, you can, of course, say that according to the basic research of the movement trajectory of a glance, the user starts viewing the page content from the top left corner, but in the case of lists, it is much easier for people to decide on this issue, since they correspond to the basic principle of online content perception .
That is why the cards are perfect for viewing huge collections. Take, for example, Pinterest, when instead of thinking about which side to approach the content, you simply look at the information grouped with the help of cards, which does not bother you at all, moreover, it is a pleasure. And as soon as your look stops at something interesting, you can immediately click on the appropriate card for more information. In short, sheer pleasure. To group a variety of elements. Depending on which application or program you use, sooner or later you will come across an interface built on the basis of a panel using card design that facilitates the orientation process with a wide variety of types of content being presented. The following example demonstrates all the power of the card method, which allows you to quickly determine the categories into which the content of the resource is divided. Because the boundaries inherent in the cards create visual limits, they are ideal for cases where it is necessary to group disparate elements. When to use lists? With lists everything is a little easier than with cards. This is most likely due to the fact that they are present in web design for a long time. And as a result, it is much easier for us to single out situations where the use of lists is more preferable. Creating the conditions for effective visual scanning. In the case when the user needs to quickly find the necessary information, the lists will be simply irreplaceable, as it happens, for example, when displaying the results of a search query. The vertical orientation of the following items in the list contributes to a better focus of the user’s gaze, in contrast to the scattered arrangement of cards that are not tied to a specific place. For smaller screens. It is hard not to agree that the cards take up more space. This makes it problematic to use them on mobile devices, because in order to see more options offered, users will have to use scrolling. Lists, in turn, lack this flaw. Their elements fit into a substantially lower row space, thus allowing you to see more options on the page and make your choice without relying on short-term memory (which is not the case for users who have a card design and have to scroll down the page for more information). As soon as your design requires the user to memorize all of the previously viewed options, this will entail the appearance of a cognitive load, which, of course, is detrimental for the convenience of user interaction. The cognitive load implies the intensified work of your brain in order to memorize certain things, while it must process new, continuing information. It is no secret that such a state of affairs will complicate the process of performing the required task for the user, and may lead to a complete failure. The App store application installed on my smartphone uses a neat vertical list to demonstrate the available programs, which allows you to view eight elements at the same time, which saves me from having to remember the applications I saw earlier when scrolling down the page. If everything were arranged with the help of larger cards, then I could see, at best, only a few options at a time, which, of course, would hamper me in terms of convenience.
Cards vs lists. Card design is an organizational system for displaying interconnected fragments of content, which in turn lead to additional information located on other, deeper levels of site navigation. Cards are great for grouping and viewing lots of information. Lists are text link blocks that are variations of the search query results. It is best to use them to organize similar information with a vertical orientation. Making your content perfect will be if you always keep in mind these important differences between the main ways of presenting content – cards and lists.