Even as the notion of cards as the next big software interaction paradigm continues to gain momentum, it hasn’t gotten much easier to explain to the uninitiated what, exactly, a card is. When asked this question, I find it hard not to ramble on at great length, and even harder to avoid using technical jargon, which usually produces diminishing returns in conversations with “normal people.”
So I thought I would try to unpack this idea a little bit, as simply and briefly as I can. No guarantees, though.
To begin, when we talk about cards in digital products, it’s important to understand that there are actually two, interrelated concepts at work that some people conflate as one. I’ll use some grossly simplified language to label them as cards as presentation and cards as third-party content.
Cards as Presentation
This is the most visible permutation of cards right now. It simply entails adapting the visual form of cards that we know from the real world (e.g., index cards, business cards, credit cards, etc.) into a visual unit for presenting an app’s content or features. This is familiar to many users from Tinder, Pinterest or even The New York Times, where the things that you read or do are displayed concisely in rectangular shapes, and are arranged so that they’re clearly distinct from one another, whether they’re separated by vertical space or laid on top of one another in a virtual stack.
Choosing to visually package content in this way seems arbitrary, but this trend is reflective of our changing relationship to software. We used to sit down with software and point and click on things; now we carry software around and tap, swipe, pinch and zoom on things. As our computing habits have gotten more mobile and more physical, the metaphor of pages, which implies a more focused, dedicated frame of mind, has become less useful.
Cards offer an alternative metaphor that’s much more complementary to how we use phones and tablets. Just as in the real world, you don’t need to sit down at your desk in order to use cards; you carry them around and whip them out whenever or wherever they can help you—again, think of index, business or credit cards—in context of what you’re already doing (that respect for the user’s current context is important to cards as third-party content, too). Cards just make more sense on mobile than pages.
Moreover, cards in digital products are ideal for a world in which users often expect the same content or feature to be usable regardless of the screen size or platform they’re viewing it on. A card’s inherently simplified design form almost always consists of a single column of words and images—there’s no room for multi-column layouts or fancy grid systems (sniff). As a result, cards are much more conducive to responsive design methods, and can scale up or down according to the screen size.
Cards as Third-Party Content
If that was all there was to this cards phenomenon, it would make for an effective user interface approach, but not a particularly powerful new interaction paradigm. The second concept at play in cards makes them much more interesting: the idea of cards as third-party content. This describes a more advanced conception of cards in which they look the way I’ve described above, but they can also surface content or functionality from elsewhere—and make it available and interactive directly within a user’s current context.
This is a departure from the convention of clicking on a link and being taken to its destination, familiar to us from years of using web pages. In a third party card, the content is embedded in the card itself so that it can be experienced wherever a user might encounter that card.
You can see the fundamentals of this approach in action today with Twitter cards, which for some time now have proactively transformed links in users’ tweets into cards (even though, frustratingly, they don’t look much like cards). Twitter cards first require third-party sites to do some technical work to make their content visible to Twitter as cards. Once that’s done, a link to a story on a news site, say, will render with the story’s headline and accompanying picture right alongside the original tweet itself.
Granted, that’s not a tremendous amount of third-party functionality to surface. It doesn’t truly obviate the link itself; it just gives the user a better idea of what awaits on the other side of clicking that link. But cards are getting more robust as time goes on, and before long they won’t require the user to click through at all.
This tweet from Acura is a very recent example of Twitter’s ambitions for the form. It showcases a more advanced card in which users can configure the features on an Acura TLX sedan without leaving the Twitter stream. It’s still fairly rudimentary stuff, but it doesn’t take much imagination to extrapolate from this a not-too-distant future in which cards will allow users to book travel plans, bid on auctions, check in at venues, scan for real world objects around them, and much more.
This kind of syndication of content and features is nothing less than an attempt to reshape the mobile landscape. Rather than requiring dedicated apps for every situation, an ecosystem that supports third-party cards can allow you to access the content or features that you need, where and when you need it. Is it truly necessary to go to the trouble of logging into the App Store to download a native app from a given airline, say, if you only fly that airline once in a while? Given the right cards, you could book your flight, check-in, track its progress and more, all at your whim. What’s more, when you’re done, you can essentially dispose of the cards until you need them next; that functionality that you needed from Delta for just a few days no longer has to reside on your device, taking up space while it sits unused until you fly Delta again at some unknown point in the future. That’s a much more fluid, much more lightweight experience that’s easier for consumers and more efficient for companies on many levels.
A Working Definition
So much for brevity, right? And I’ve only just touched on the most basic underpinnings of the card concept—there are many more aspects to this paradigm. Having run through all of this, though, is it still possible to write a simple answer to the question, “What is a card?” Here’s what I would say:
A card is a single unit of content or functionality, presented in a concise visual package. More advanced cards use that form to surface content or functionality from other apps, and allow users to interact with that content or functionality directly in the context of where a user encounters the card.
That’s not perfect by any means, but if you have some suggestions as to how that can be improved—and, ideally, shortened—let me know and I’ll update it here.
Further Reading on Cards
- Wildcard. Full disclosure: I get paid to think about and design cards at this startup in New York City, where we’re working on the world’s first browser for cards. You can read more here or find out about our partner program here. None of what I’ve written today has been vetted by the company, and I’m solely responsible for its content.
- “The Most Special Thing About Cards That No One Is Talking About.” Wildcard CEO Jordan Cooper, on his blog, goes into greater detail about the two kinds of card concepts I’ve described above. I cribbed the term “third-party” from this article.
- “Twitter, Canvases and Cards.” This article by Benedict Evans from last year was a highly influential rumination on cards based on changes that Twitter was making at the time to move towards the new paradigm.
- “Why Cards Are the Future of the Web.” Paul Adams of Intercom wrote this early article on the rise of cards last year, and it remains a terrific primer on the form.
- Cardstack.io. This is an open source initiative by Chris Tse that aims to create standards around writing and distributing cards.
- “Card Architecture > Card Design.” This article by Taylor Davidson talks about “the difference between the card design and the card architecture” in this excellent overview.
- “What Are Cards? Why Do You Need Them?.” Peter Meyers of Citia runs down many of the properties of cards and why they’re advantageous.
- “The Rise of Mobile Cards.” Cezary Pietrzak offers another cogent summary of the characteristics and benefits of cards.
- My Board of Card User Interfaces on Pinterest. I’ve been maintaining this collection for about a year. If you know of something I’m missing, please send it to me.