Why People Love Card-Based UI

Source: www.mrowe.co.za

If you’ve been on social media lately, you may have noticed that things are shaped a little differently. Rather than the big, wide-open spaces or dozens of clickable buttons on webpages of the early aughts, content is now more often divided into smaller, rectangular boxes containing easily digestible information. Usually with a colorful image and supporting text, these sites bear a striking resemblance to playing cards. As such, this new design trend is often called “card-based design,” and it doesn’t appear to be going anywhere soon.

What makes cards so appealing to UI designers is that they work equally well on desktop and mobile. Swiping through a deck of playing cards is simple to do on either platform, and the format is intuitive and immediately understandable. From a usability perspective, they are ideal for today’s market—since consumers are constantly online in short bursts on the go, this quick interaction is the perfect distraction for sitting on the bus or waiting in the lunch line. If your product is one that offers frequent updates and new content, then card design is well worth your time.

UI card design arguably originated in 2006 with Microsoft’s Metro design language. The collection, seen with the Windows startup screen, used the card format as a sort of catalog. It featured a grid of colored squares each clearly representing some function on the computer. These ranged from shortcuts to programs like Internet Explorer to news headlines and pictures from the Associated Press. The simple click of a card would take you to its corresponding place with ease and efficiency. At the same time, anyone who’s familiar with the Windows XP interface can tell you it takes far less time to open, say, Microsoft Word than IE. Since then, these card-inspired interfaces have shifted from large, generalized options to a sharper, more myopic focus on larger cards at a time.

One of the most notable examples of this shift in card-based design is Tinder. The popular dating app has gained a large following (and inspired lots of competitors) because of the way it successfully implements card-based shapes into user interaction. As you open the app, you’re presented with a card-based profile, which features a picture of the potential match, their education or employment position and a brief, self-composed bio that highlights any hobbies and friends you two may have in common. The UX is intended to feel like sorting through cards in a deck, making it a quicker, more entertaining experience than dating apps of the past. Inspired by the success of this method, popular dating sites OkCupid and Match.com have followed suit and implemented similar card-based designs for their mobile apps. Even broader social media titans Facebook and Twitter now feature post-it type cards for information as well.

tinedSource: https://www.marieclaire.co.uk/blogs/543941/tinder-the-online-dating-app-that-everyone-s-talking-about.html

A Wireframe Mockup of the Tinder Card-Based UI

Want to take advantage of this simple, versatile trend? Programs like LiveTiles are ideal for the job! The many rectangular tiles on offer function in much the same way as the interfaces of Tinder or Pinterest. But now, setting them up on your page requires no coding knowledge—simply drag and drop to create a layout that’s simple, compact and beautiful. And just like flipping through a deck of cards, LiveTiles makes it seamless to switch between pages as well, helping keep content straightforward and separate.

cardscreenshot1

Source: LiveTiles Design

Jerry Cao of tech trend site TheNextWeb.com claims that “cards are far from a trend, they’re a practical method for design whose usefulness is just now being understood.” Based on the way new popular sites continue to employ this style, this may just be true.

Employ Card-Based Design with LiveTiles

Test Drive our Platform

LiveTiles provides the platform to create customized digital workplaces in a single day, where teams can easily access applications, resources and more—from one central place.

Give Us a Test Drive