Today, in this post, I wanted to take a few minutes with you and play around a very spread concept in UI/UX design, which is the use of cards. It’s very rare to see me posting about a design topic but if you stick around till the end of this post you’ll find out that digital cards is something you’d better get familiar with…
Digital cards or simply cards are a UI design element that groups related information in a flexible-size container visually resembling a real-world tangible card. Or, in plain words, cards are those simple rectangles that we find in many web sites and mobile apps containing information and usually a link to open another site or location.
Cards are commonly used as an entry point in a web page or a mobile app to point the end user to more detailed information or to other location.
But cards are not new to us, we’ve been using cards all our lives. Just think about it: when we were kids we used to play with football players cards, we used to send post cards, gift cards and even now, we still see people using business cards (yes, I know, I do also hate business cards).
Think of a web site or app as a collection of cards. When you’re visiting a web site, you’re just going through all the cards and when one of them gets your attention you pick it up, flip it over and see the back of the card and read more information.
Why Cards have become so popular?
Now, take a moment to see how often you see these cards. They are everywhere. Facebook, twitter, pinterest… all of them use them. Windows 10 notifications use cards. Most of your mobile apps use them.
But, why are cards so popular? What does it make them so good? There are a few reasons for that, use the cards below to experiment it yourself 🙂
Hover to find out more
Because of the similarity with real-world card they are great for user experience: swipe them for the next piece of information or flip them over to get more info about the topic on the card.
Hover to find out more
They are great for responsive design, they give the web designer the flexibility of adapting and reordering the content based on the device or the size of the screen rendering the card.
Hover to find out more
Visually are very powerful, are intuitive, not distractive and allow us to organize content into content blocks. They help avoid scrolling up and down to see all the content, all content is at a glance.
Types of Cards
Believe it or not, a simple card can be used for many different purposes. Here below is a list of different examples of cards that we see everyday:
Used in web sites and intranets to provide a good mix of the content. Most of the times are presented in a grid layout that combines very heterogeneous content: latest news, weather forecast, useful links, stock trends, ads… Combined with some extra info from the user it can provide a personalized user experience, where the content is especifically filtered and adapted to the end user profile. Facebook, Pinterest or YouTube are perfect examples of this. They represent the perfect example of the content looking for the users and not the other way around.
Typically used in blogs to provide a quick preview of the different blog posts. Cards is a fantastic way of bringing content to a newsfeed or any other type of feed. This Blog is a great example of that.
You might have not noticed but the most of the chat UI, like whatsapp, use cards to exchange text, images, links, etc between users.
Flow and Dashboard Cards
Cards are also used to organize to-do lists, notes… Ordered by category and structured in bucket lists, cards help the end user to have a full overview of tasks and priorities mimicking what we would be doing with post-its in our desk. Trello or Evernote are good examples of this approach.
3 Design Tips for cards
A card can contain different types of elements: Texts,Images, multimedia, Links, Graphs… they can even contain actions – they can display fields and buttons that can be used to collect information and/or trigger an action when submitted. But appart from the design of the card you also need to consider when to use cards and when not to use them. I’m not a professional web or UX designer but if I could just add my two cents, my three simple tips for cards design would be:
- Use headlines and subheadlines. It always helps to identify the topic and why that would be relevant for the end user.
- They should have rounded corners and short shadow. That’s very personal but i believe the more they remind real-world cards the more unique is the design.
Shadows gives the impression of depth and rounded corners the impression of a block.
- Don’t use cards to show homogeneus content, use them to display different types of content: a weather card + stock graph card + latest news card + video card… Using cards for showing too many items of the same piece of content might not help and overwhelm the end user.
Ok, great, Cards are awesome but I'm not a designer. Why is this relevant to me?
Yes, that’s true, seems like cards design is something that only web designers should care of. Not really! The design is only the surface of something much more relevant for people like you and me who build software solutions. With all of the above we need to see cards as a way of communicating to our end users. Think of tasks, notifications or forms as examples of the type of content we exchange with users and that could be formatted as cards. Wouldn’t just be great that we could use cards for our workflow solutions? Well, good news, we’re already doing it, in fact, Microsoft has built an open standard for exchanging cards between different channels and systems. They are called Adaptive Cards and we’ll explore them in our next post. Stay tuned!