Why Your Cards Need a Footer for Metadata

Data design for faster scanning

List format is a popular way to display data, but it’s not ideal for cards. Users need to scan cards to find what they’re looking for fast. If all they see is a list of data, it’ll be hard for them to recognize what makes each card different.

Every card has a hierarchy of data. There’s the primary data and then metadata. Primary data is the content itself, while metadata are details that describe the content to give it more context.

Instead of displaying metadata in a list format, you should put it in the footer of the card. The footer makes it easier for users to distinguish the content characteristics influencing their selection.

For example, if the user wants to buy a car with low mileage and high MPG, a card footer would make this metadata easier to scan. With little effort, the user can scan multiple cards and identify all the cars that meet their criteria. In a list format, the user has to read each line to compare.

Even a horizontal list is hard to scan without a designated footer. This example shows the number of guests, bedrooms, beds, and bathrooms for each stay in a horizontal list separated by bullets. When you display this metadata in the footer of the card, it’s much easier to scan.

Adding icons to the metadata enhances its meaning and increases the scannability even more. However, you don’t always have the opportunity to use icons if the metadata is too abstract.

Sometimes you may have too much metadata that can’t all fit in the footer. In this case, you must decide which makes the most sense as a group.

For example, this property management app has a lot of metadata on each card. The designer has decided to put the metadata related to sales in the footer. As a result, there’s a clear hierarchy between the different content characteristics.

You don’t always have to use a line divider to distinguish the footer. A color fill can also work when you want to differentiate the metadata even more.

Sometimes the metadata influences the user’s selection more than the primary data. Creating a footer area in your card is essential to make the metadata quicker to scan. When it’s easy to recognize what makes each card different, users can compare and select the right content that meets their needs.

To get insightful design articles delivered to your inbox weekly, subscribe to the official UX Movement Newsletter on Substack