Cards in User Experience (UX) and User Interface (UI) Design.
Completing a search for UX and UI card design articles, Medium is saturated with them. I thought I would put my 2p worth in.
Cards are an essential component of modern user interface (UI) design. They allow information to be presented in a compact yet visually engaging way. Using cards effectively can greatly improve the usability and accessibility of a website or app. There are several types of cards that are commonly used. They have different names, depending on what organisation you are working with/ for. For the purpose of this article, I have used generic names.
Profile cards display a user’s profile information like their name, photo, bio, contact details etc. They help identify users and quickly provide key details about them. For example, social media sites like Facebook and LinkedIn use profile cards to summarise user accounts.
Product cards are used by e-commerce sites and they often use these to display product listings. Key product details like title, image, price, ratings etc. are neatly organised into cards, allowing users to easily browse products. The compact card layout allows more products to be shown per page.
Notification cards provide alerts and updates to users through compact card-style notifications. For example, card notifications in apps like Slack and Trello notify users of new messages, assignments etc. This is more visually engaging than plain text notifications.
Feature cards in UI highlight key features of a product or service. For example, companies often use feature cards on their websites to summarise the capabilities of their tools. This makes it easy for visitors to quickly understand what the product offers.
Testimonial cards showcase customer testimonials and reviews using a card-based layout. The customer’s photo, name, company and feedback are presented attractively.
Cards need to be used thoughtfully
Too many cards on one page can overwhelm users and key information may get lost.
Card-based layouts offer several benefits that enhance UX and accessibility. For example, cards scan better visually and stand out individually, allowing users to quickly scan information. This takes advantage of the F-pattern scanning behaviour people often use when browsing. Content segmented into cards with ample white space is easier to read than dense walls of text.
Card widths can flexibly adapt to different screen sizes and devices, preventing horizontal scrolling on mobile.
Cards often include call-to-action buttons that encourage desired user behaviours e.g. signup, download, buy now.
A card-based layout creates visual consistency across different types of content and screens. Here are some tips for using card rows effectively:
Limit card rows
Typically 3–5 rows work well depending on content. More than that becomes visually distracting.
Vary card heights
This adds visual interest while preventing the layout from looking too rigid. But don’t vary too randomly.
Highlight important cards
Make 1–2 cards per row visually prominent through size, colour etc. But don’t overdo it.
Use white space
Add sufficient spacing between cards and rows to prevent a cluttered look.
Be consistent
Use the same card style and spacing across all pages and templates for a consistent experience.
Follow logical order
Arrange cards in a logical way so users can easily find what they need. Common patterns are newest first, alphabetical, by category etc.
Optimise card content
Each card should serve a single purpose and highlight one key message. Remove unnecessary text and links.
Cards allow designers great flexibility to present information in a visually engaging and accessible way. Using them effectively as part of an overall UX strategy can greatly enhance usability. The card-based layout has become a staple of modern web and app design because of these user benefits.
