#card-based interface

It’s hard to experience mobile these days without using a card interface. In just a short period of time, cards have proliferated across the medium. Popular apps like Tinder, Jelly, Swell and Secret have used the design metaphor to define their entire products, while companies like Google, Facebook and Twitter have integrated cards into their UI. Many other apps and mobile websites are also embracing card-based thinking, sold on the promise of a better user experience and higher engagement.

Cards are taking over mobile

The problem is that few people can articulate what makes cards special and why they’re so popular. In order to understand the concept, I’ll examine:

The broader context of mobile which led to the creation of cards

The key characteristics of cards

The benefits cards provide to end users

At the end of the post, I’ll present a simple definition of mobile cards. My hope is that this will establish common language around the concept for existing discussions and shed new insights on how the design convention may evolve in the future.

THE CHALLENGE OF SMALL SCREENS Despite the immense promise of mobile - 24/7 access to people, a bevy of sensors and contextual data - smartphones are still quite difficult to use. Think about how long it takes to wake up your device, input text, search for information, find apps, share content or make purchases. Then think about doing this on the go and in a hurry. It’s often frustrating and inefficient at best.

While most people blame the physical dimensions of the smartphone for a bad experience, that’s only part of the story. An arguably bigger issue is that many apps are not really built for touchscreen devices. They often force too much information into a small screen and don’t fully utilize native interactions like taps, swipes and flicks.

Cards solve the challenges of mobile presentation and interaction. They build on a metaphor that’s already understood in the physical world, giving it a natural and familiar feel, while also embracing mobile for its unique capabilities.

Cards have emerged at an opportune time. As people spend more and more time time on their devices (162 minutes per day at the last count), their frustrations with mobile will continue to grow. It’s unacceptable to think that value derived from mobile is only slightly higher than the effort required to extract it. Something must change, and cards appear to be one of the solutions.

DECONSTRUCTING CARD FUNCTIONALITY So what exactly is a card? In the physical world, the idea is fairly simple. We can all relate to sitting around a table and playing cards with friends. Most of us also have credit cards and business cards, and some of us have sent postcards or collected trading cards while growing up. Merriam-Webster defines a card as:

Card (n.) A flat stiff usually small and rectangular piece of material (as paper, cardboard, or plastic) usually bearing information

When it comes to mobile, however, this definition feels both vague and generic. While many of the characteristics of physical cards are transferable to the digital environment, mobile has its own special interpretations. Let’s take a closer look at what defines a card.

Cards are rectangular containers. Per the dictionary definition, cards are often squares or rectangles. In mobile, cards also have four sides and clear boundaries. One of the elements that make them different from news feeds - a competing mobile design pattern - is the presence of vertical constraints (upper and lower borders).

Cards are small and portable. Cards have a size limit that enables them to be both accessible and portable. In the physical world, this is typically defined by their ability to fit inside a wallet or pocket, while in mobile, the constraints are defined by the dimensions of a device’s screen. Mobile cards should also be comfortably accessed with one thumb - the most common way to interact with a touchscreen - and hence also cannot be too small.

Cards house information. Cards can house a wide range of information, from credit card numbers and personal data to playing card suits and athlete statistics. Content on mobile cards can be even more diverse and includes both static media (text, images) and rich media (videos, embedded content).

Cards present information in a structured way. Given their physical limitations, cards can only present a finite amount of information at one time. Therefore, they must contain only the most important information required for a particular context. On mobile, determining what information to include and how to structure its presentation is a big challenge, given the many possible options. It’s no surprise that a larger movement around “single-purpose apps” has emerged to reflect this emphasis on focus.

Cards can be manipulated as a single entity. Cards exists both as single entities and individual pieces of information. This means that a card can be interacted with as a whole, separate from the content it houses. For mobile, this means that certain interactions will be global (entire card), while others will be local (specific buttons on card).

Cards can have multi-directional movement. Because of their inherent flexibility, cards can be moved up, down, left, right, diagonally and everything in between. In mobile, this bucks the general convention of vertical movement and opens up the doors to various interactions based on the natural movement of our fingers.

We can see that cards are a very close reflection of mobile technology in general.  They’re small, portable, rectangular, single-purpose and built for our fingers. In fact, cards may be the most native manifestation of the mobile experience, mirroring both the constraints and possibilities of the medium.

============================= Subscribe to my newsletter to receive essays on marketing + mobile. =============================

UNDERSTANDING CARD BENEFITS Let’s now shift our focus to understanding the popularity of cards. To do this, it’s necessary to examine the benefits that they bring to end user, or the millions of people who use smartphones. I’ve distilled these benefits to the following descriptors.

Glanceable. The structure of mobile cards allows key information to be viewed in a single glance. Viewers can quickly determine the relevance of content and to take action on it, rather than panning, zooming or scrolling just to find what they want. The term “glanceable” is becoming more popular mobile circles, especially as wearables place an even greater constraint on screen sizes and lend themselves to hyper-relevant, contextual bursts of information.

Fast. Taking action on information presented in cards is fast and easy, because well-designed cards have built-in controls. Whether it’s tapping, swiping or flicking, the desired result is only a split second away. Speed, as we know, is paramount in mobile, which is often accessed on the go and with one hand. Cards eliminate the friction of web-native interactions (eg typing, scrolling) by using the touch interface to a greater potential.

Shareable. One of the biggest challenges of mobile, in the words of Benedict Evans, is “passing things around,” because the medium lacks the URL structure of the web. Cards solve this problem by atomizing content into a shareable object, making it easy to distribute to others. This increases the chances of content spreading virally and gives it greater value over time.

Monetizable. Another challenge of mobile is poor conversion rates for transactions. Cards can solve this problem by creating a more streamlined checkout process within their borders, or by simply becoming a digital equivalent of credit cards (eg storing financial information in “mobile wallet”).

In many ways, cards are a new lens for viewing web content. Through their simple structure, they deliver a more natural, intuitive and interactive mobile experience, allowing people to achieve their objectives (find, share, transact etc) more quickly and efficiently.

============================= Subscribe to my newsletter to receive essays on marketing + mobile. =============================

DEFINING MOBILE CARDS This brings us to the definition of mobile cards. How can the concept be explained in a simple way, and convey both its key functions as well as its underlying benefits? I've used the insights above to synthesize it as follows:

Mobile card (n.) A small, rectangular container of information that is glanceable and interactive

The first part of the definition explains the functional characteristics of a mobile card. I’ve purposely stayed away from vague terms like “unit” or “canvas” as they leave too much to interpretation. The second part of the definition explains the benefit of cards. I believe that glanceable is one of the defining characteristics of the design pattern in mobile, and also carries connotations of speed. Interactivity, on the other hand, is robust enough to embrace both sharing and transactions.

SUMMARY Born from the frustrations of using a smartphone, cards have quickly become the go-to design metaphor of mobile. They’re simple to understand and visually appealing, and they perfectly accommodate the interactive nature of the medium. While cards won’t always be the appropriate design pattern for apps, they’ve already disrupted several industries and are even influencing the underlying architecture of the web. That’s an exciting proposition, and one that every mobile company - big or small - should heed.