UX Insights
Cards System— molecular, consumable & responsive
Card design is a popular design style that has taken over the community of UI designers by storm. The pattern has been well adopted by top brands and applied beautifully to their products. Few worthy mentions are Facebook, Airbnb and Uber — all three employing unique layouts and interactions to present information most relevant to the context.
Why Card Design?
Helps present information in consumable chunks: Segregation of information across a design has never been more crucial given the ever-diminishing attention spans they are blessed with.
Scales easily in responsive or adaptive design frameworks: With no control over the screen sizes & aspect ratios of devices and their rapid expanse, the need for better design constraints has a demand like never before.
Allows molecular level interactions: With micro-layouts possible through Atomic design approaches, micro-interactions have seen a new daylight through the contextual & hierarchical presentation of data & affordances.
Properties of a Card System
While designing for card-based layouts, the iterations to follow combined with the analysis of existing card patterns specific to a certain representation of data, we unearthed properties that might be universal to all cards. These properties are crucial to not just information but also affordance & interaction.
1. Matryoshka Effect
Ever heard of the Russian dolls stacked into each other? Well, this isn’t quite different from that but simply in context with the boxing of elements to create perceivable chunks. We sometimes tend to overdo it and end up mimicking the Russian doll property or Matryoshka effect in design, particularly in card designs.
The aim is to find the right balance through boxing and bounding related data sets to form a cognizable unit to consume or interact with.
2. Scrolling Accessibility
Swipe gesture is crucial to any card design and along comes thumb reach and it’s caveats. With most cards employing not just a natural vertical scroll but a horizontal scroll to provide two-dimensional depth to IA. One such case is stacking horizontal scrolling card constructs that can afford multiple swipe gestures which may invite accidental and inconvenient flicks & swipes.
As the physiology of our hand enables our index finger to press (tap) & thumb to oppress (drag), interfaces built to enable them to the fullest offer perceivably better experiences than the ones who don’t.
3. Visual Friction
With tons of UI elements encountered by us daily, the most recognisable are the ones that bear resemblance to the physical world. It comes into the picture when we have moving blocks of UI or cards that transition in response to interactions like swipe.
The aim should be to offer effective Foregrounding of layers without ignoring transitional states of UI. The ideal design could simply extend base layers or parent views to extend to their full width, acting as a freeway to the cards vector.
4. Grouping
Turns out 8.5 out of 10 times a unit was successfully perceived without an enclosing container for a card. Mere play of whitespace and visual hierarchy can do the trick without an obvious box (shoutout to Minimalism).
It all boils down to considering nuances of motion over static design for any interface and the many many ways to reduce the guiding lines that don’t align with the scroll vector.
5. Rack & Carousel
While the rack sniffs a sense of high intent by the user and presents the respective data set, the number of cards and their position is often affected by short-term memory load and serial position effect. Hence it’s all but a choice between how many cards to accommodate unidirectionally and beyond which point to loop it back to feed a bi-directional scroll.
For metrics like impressions & clicks, cards often depict a decreasing trend with a higher depth of data. Between business and user centres, the right balance is almost always within the constraints mutually agreed upon.
6. Guiding Lines
Closure & continuity is crucial to any repeating pattern in design with no exception to cards. With every indentation & padding introduced by elements at the atomic level, the human eye tends to distract itself with an ever-increasing number of lines to follow, dots to connect & spaces to leap.
While individually all constructs aim to deliver the best experience, the overall composition of the screen is often left unattended that weakens an experience instead of cumulatively empowering it.
7. Foregrounding
With a callback to Material Design and its physicality, cards can be imagined in the same space separated by depth or z-axis. In order to seamlessly translate and transition, cards can afford hierarchy along all three axes.
With a reference to the philosophy of an interface being a mirror, the information most relevant always seems to be closer.
8. Form of action
The card itself being an interactive element decimates the need of a contemporary primary button, at-least on the mobile or tap-able devices while secondary buttons enable other actions.
The core usage of cards being presentation & preview, the secondary interactions could be designed by pure affordance keeping in mind the modularity of the construct.
9. Card count
With too many cards popping up within the field of view, the load to comprehend and remember all the relevant information rose tremendously. Multiply that by the number of cards per rack or carousel and suddenly it doesn’t make sense anymore.
The intent to present information in consumable chunks lead to card design and should be a non-compromise when faced with the designer’s dilemma to overdo it.
10. Alternation
The feed format is a composition of cards which is generally designed to serve information in various ways for consumption. A well design feed actually helps make sure the user is engrossed in consuming large chunks of information without experiencing visual fatigue.
With a very limited screen-space to play with, it’s the designer’s digression from user-centeredness that seldom ends up affecting the users’ short-term memory; and the case of poor visual alternation is no exception.
Myntra Feed Cards
These were few of many learnings that could be tangibly translated from all that seemed too aesthetically austere to convey. We tried applying few of these learnings and came up with the redesign of feed on Myntra. From employing full-width banners to exploring interactive carousels, the properties have helped us define an interaction guideline and helped shape out very own Card design sytem. What comes next is just a matter of endless iteration and frequent learnings.
See you at the next blog then.
