Interaction design with cards / tiles

Hagan Rivers
10 min readJul 12, 2020

It’s always nice to see a new design element appear and then gain widespread use. The card (or tile) is a UI element that gives the designer a way to show information in an eye catching form. A key part of their success is that they are flexible, making it easy to share information on both mobile and desktop platforms.

Microsoft Windows 8 card-based UI

Cards can be displayed in a grid, or use flexible sizes (as they are in the Windows 8 example, above). They can contain images, text, charts, videos, color coding, and symbols. They can be automatically positioned or manually positioned. But what are some key interaction design considerations if you’re thinking about using cards?

Variety is better

Part of what makes cards works so well is the visual variations that make it easy to spot a particular item. The designers for Windows 8 understood this, making use of bold color, sizes, and different content (icons, images, text) to make it easy to rapidly spot a particular card.

Homogeneous presentations of cards are less effective. In the example below, the user is forced to essentially read the titles of each card to find the information he’s looking for.

--

--

Hagan Rivers

Interaction Designer (UX) for over 30 years, with a focus on business / enterprise application design.