created by Alejandro Cuffia

Recently, I’ve been creating card UI components library for the system. I noticed that there are instances when cards are designed and used differently between web and mobile. Also, given that cards may have unique attributes from one system to another, it’s too generic to say that cards are box containers that hold pieces of information.

Cards in Google Material Design

#1 Cards in Apple OS system

Apple uses both translucent and opaque cards in cross-platform designs, including iOS, macOS, and tvOS. The translucent and vibrant visual blurriness communicate a sense of depth and evokes a nice visual hierarchy. One success story of using cards in designs is the re-designed App Store as a part of the iOS 11 system released last year(2017). The new App store uses curated cards for “Apps of the Day”, which helps users discover the most in-trend apps and give download recommendations.

Cards in Apple OS designs (Gif by Mohamed kerroudj)

Meanwhile, cards are designed with additional affordances in tvOS. For tvOS, cards are optimized specifically for focus states. Designs adjust to leaving more paddings to avoid overlaps between cards. Cards are also sized up accordingly when they come to focus. In rows, cards are displayed partially offscreen to indicate that more content would be revealed.

tvOS uses offscreen cards to indicate hidden content (image from Apple tvOS guidelines)
Cards are elevated on the focused state with parallax effects

#2 Cards in Google Material Design system

The discussion of cards becomes further open-ended when Google Material Design advocates cards as a fundamental UI component. Cards are broadly used in their web and mobile designs, in order to offer contextual information and make features more discoverable. For example, Google Now uses predictable cards as feeds based on users’ previous search history and encourages users to search and explore. It’s a step towards onboarding users to use conversational searching like Google assistant.

Google Now cards UI kit create by Manu Akash

Another example, Google Flights uses interactive cards for flights information from different airlines and optimizes the browsing experience. Cards are used to provide the entire list of options sufficiently and help users make deliberate decisions.

Google Flights uses cards in a list view to display content
A list view to display cards makes it easy for scanning (image from Material Design/Lists)

#3 Cards in Windows Fluent Design system

Though cards are excellent for displaying rich media content like full-bleed images, auto-played videos and looping gifs, the immersive experience that cards create can also distract us from scanning information quickly. For example, Windows 10 follows UWP (Universal Windows Platform) design guidelines and puts app icons in tiles(another way of calling cards) in the system start menu. Comparing to displaying app icons in a list, displaying app icons in tiles in a grid looks less efficient for quick scanning.

Windows 10 start menu (image from Jason Gonzalez)
When tiles resize on Windows 10 (gif from Giphy)

Also, since the tiles are designed to be resizable, the margin between an icon to the edge of the container looks redundant when a screen resizes — the tile containers become merely empty shells and they don’t communicate critical affordances such as the volume of the content and the potential interactions like tapping and clicking.

Scaling rules from UWP/Tile and icon asset guidelines

Closing thoughts

Cards are great when it comes to displaying heterogeneous content in one page — the borders of cards resemble physical cards and indicate how much content each card contains. Cards can also communicate a wide spectrum of screen interactions like swiping, scrolling, tapping and clicking. When we use cards in interfaces, we want to be diligent about when and where cards are used. Are they designed to display information in a feed? Or are they designed to bring users’ focus on action-required modals? When cards comply with different design , what are the universal and unique patterns?

Source link


Please enter your comment!
Please enter your name here