Without question, the web is now buzzing about what web cards, (a la Google Now), bring to the table, but the idea of content-rich “cards” has been around for a long time. Let’s take a look at how collectible card games can offer insight into this burgeoning UX metaphor.
There is a specific market out there with millions of users that have been addicted to the concept of cards for decades, and that market has little to do with the internet. Welcome to the world of collectible card games. A world in which players obsess over cards and their design, and use these cards daily as a form of constant engagement.
Of course, first comparisons between analog and digital content cards seem abstract and far-fetched; however, upon a further examination, it’s quite startling how similar the cards of the web are to those of collectible card games.
Creating (Digital) Decks of Cards
Imagine you take your phone out of your pocket and start flipping through some web cards you’ve collected, perhaps using a single aggregator app. This is not much different than the analog concept of shuffling through your hand in a card game in search of the perfect card to put into play.
As long as those people have a card deck, they will eventually interact with it. So how do you deliver a deck of digital cards that entices a user to engage with it?
Analog card players collect such cards through various means (gifts, trades/swaps, specialty purchases, card pack purchases, etc.). Similarly, the digital card user can also collect cards through various digital sources. In both worlds, once the cards are yours, you can mix them up, sort them, and arrange them any which way you like to suit your needs. Each card has its own purpose, and each card can be picked up or discarded easily. And that feeling of deploying the perfect combination of cards can be priceless.
You have to allow a user to carry their decks of cards across different mediums and ensure the cards function correctly. This kind of card deck is worth keeping.
Powerfully Simple Design
The power of the card’s design lies in its simplicity. It has the ability to convey a great deal of information at a glance, and offers even finer detail upon deeper interaction.
When you look at a card from a collectible card game, you will most likely first notice the card’s image. The image is the main attention grabber and is the focal point of the card.
The more interesting the image is, the more you forget that you are looking at a rectangular card. The card becomes an experience based on a centrally placed image, accessorized with details in the form of interactive data all around the image, to be explored only if your attention to the card increases.
If you already know what the card is about, you might only look at the image and move on. This kind of shallow experience is important for users who don’t want to invest too much time into one card and would rather browse the other cards. Or perhaps you are so familiar with the card that the image is all you need to process its information and carry on with other tasks.
Digital cards should also be designed with simplicity in mind.
Relevant Grouping
Looking further into the design of collectible cards, we see that they are usually organized into familiar groups which makes it easier for players to learn what they are used for.
This is represented visually through different background colors and themes, which can set the tone of the card quickly. The small icons found in various layouts on the cards, are usually not only cool looking, but allow users to understand the underlying content and make faster decisions when they are needed. The icons themselves can be interactive and play important roles and functions in the cards, often making the card a little more special to the user who is counting on these interactions.
Of course, there is usually one small representation of data that can be crucial for making fast but educated decisions. This can be found in the top corner of the cards, a place visible on every card even when they are stacked on top of each other.
This powerful and precise piece of information can come in many forms: a number, a rating, a price. This data point can be crucial in making important decisions quickly, especially when you have a “hand” of cards to compare.
The best part is that this grouping metaphor translates directly to digital cards!
Rich Content Is Key
And now we come to the most involved part of the card: the information written in text. This can take the form of descriptive titles framed in their own containers, or full on descriptions which are brief and to the point.
In card games, the main card description is the real heart of the card experience because it describes the underlying functionality. The description will answer your questions about the card, help you formulate opinions on how to use the card, and will serve as the source of further actions taken with the card.
This translates to the web card UI world quite simply: the card’s description is where links live; is where flight times are listed; is where an amazing comment is displayed; is where your photo captured a moment in time. The card’s description is where your rich content lives, accessible at anytime from the convenience of your pocket.
Why is this important?
We all grew up with cards. Whether it was collectible card games or just normal playing cards, most of us have experienced fun moments playing with them. For the collectors, it started with the excited feeling of getting new cards, and unwrapping them to play with them for the first time. If you got a rare card or one that you paid for, it felt special because it was harder to obtain and you knew that it would be very useful.
When interacting with the cards, you would completely focus on a card, and each card would tell you a different story.The best part was that the cards could be used to interact with others, creating a truly involving experience. We can draw from every one of these great aspects of playing with non-digital cards and apply them to web cards.
The limitless flexibility in mixing and matching web cards combined with the rich content available in the card format gives us unprecedented control over the information that governs our daily life. With web cards, we can track our packages, schedule flights, share photos and videos, and even make dinner reservations all in one customizable experience right at our fingertips. But all of this functionality already existed on the internet before web cards came along. What web cards changed is how we experience and aggregate our web content. They have turned your web experience into a deck of playing cards, and they are waiting for you to play with them.
