What's the difference between cards, panels, and tiles?

Question

It seems as if with some of the modern front-end development frameworks there is a blur between the different types of 'container' elements. Whether this is an attempt to abstract the design from implementation or if this is due to there not being any standardization of terminologies I am not sure, but it leads to the fact that in some design frameworks I see the term panels being used but not cards (e.g. Bootstrap 3) while in others the term cards exists but not panels (e.g. Iconic), and perhaps both exist in others?

From a design perspective, it seems that both cards and panels are just containers, and since there's nothing that defines how big a card can get and how small a panel can be, I am wondering whether there's really any difference. From an implementation perspective, it seems that cards should be used for smaller size design elements and are preferred on mobile specific applications, whereas panels are used for a wider range of design elements and are preferred on desktop specific applications.

Is there any evidence/reference/examples that will help to illustrate or highlight the (lack of) differences? For some reason I think cards and tiles are more closely related to each other, and that panels seem to be in a slightly different class/family?

If we take the argument that there are no differences, then it is hard to understand why people associate 'tiles' with Microsoft 'Metro' style home pages, while on Google and Android apps it is 'cards' and for Java and Gnome applications it is 'panels'. Perhaps there are some contextual or implementation differences?

UPDATE: with the release of Bootstrap 4, it seems like cards are basically equivalent to panels (since one component has replaced the other), but with this comes the cost of having to maintain a more flexible container that will make it difficult to implement consistently. According to Bootstrap:

A flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

FURTHER UPDATE: It seems as if Bootstrap 5 and Material.io have adopted the card UI component in the new world of responsive and mobile first/multi-device ecosystem design systems while "tiles" have a very specific meaning in the Microsoft Fluent Design System:

A tile is an app's representation on the Start menu. Every app has a tile. When you create a new Universal Windows Platform (UWP) app project in Microsoft Visual Studio, it includes a default tile that displays your app's name and logo

Panels don't seem to be part of the vocabulary anymore, as least in terms of a UI component, but in the Microsoft and Java world it still represents an abstract concept of organisation layouts of UI components.

Answer 1

The container zoo

The terms card, panel, tile, and others are often used interchangeably, so their definitions not precise and can change from company to company or ecosystem to ecosystem. But, there is a loose vernacular definition for the different containers.

Why does it matter?

Because in practice, naming things is important. Here is an example of why container names are important (click image to expand):

• Now, imagine that some of these container names were swapped. For example, if card were swapped with panel or toolbar were swapped with tile. That would lead to some pretty confusing UX discussions.

• This thought exercise shows us that although the container terms are all loosely interchangeable, there is a loose convention around what they mean.

• It also illustrates why it's important to have different terms for containers (imagine how hard it would be to work with this layout if all of the containers were named 'panel').

---

Vernacular definitions

Here's a rough definition of vernacular use for the terms. The illustration above is a decent reference for examples of each container:

• Window

  • Common ecosystem: MS Windows, Mac OS, Ubuntu, and other operating systems
  • Typically refers to the largest visual container for an application view, and is typically defined by the operating system.

• Frame

  • Common ecosystems: all digital UI's
  • Typically refers to an outside element or border object which contains a single body of content.
  • e.g. in HTML, panels are often wrapped inside a frame object which allows the frame to be styled independently from the panel contents.

• Panel

  • Common ecosystems: all digital UI's
  • Typically refers to a container within a window which contains multiple related elements. For example, a panel might contain a form, a set of information, a data table, etc.
  • Panels are often used to section window contents to ease visual organization.

• Card

  • Common ecosystems: web, Google Material Design, mobile and table applications
  • Typically refers to a rectangular container that contains multiple related elements that can appear several times on a page. For example, news articles, search results, and restaurant listings are all items that may contain multiple elements (image, title, description) and are well suited to card layouts.
  • Cards are a convenient way to chunk and organize content in grid-layout, to facilitate the presentation of complex/hierarchical information.
  • Cards (unlike tiles) can and frequently do contain multiple interactive elements. For example, in the illustration above you have approve/deny buttons, and the user might be able to click on the card title to load more details.
  • Cards are often manipulable as containers....often users can dismiss, drag, swipe, or rearrange cards.

• Tile

  • Common ecosystems: Microsoft Metro interface
  • Tiles typically represent small, single-purpose containers. Tiles may present a single piece of information (e.g. an icon for an application) or a small cluster of related information (e.g. weather temperature and humidity), but rarely present extensive information.
  • Tiles are often distinguished by their single use....in Microsoft Windows 8+ tiles are clickable and send the user to a single application, view or web page.

Again, these terms are only loosely defined and usage may vary from organization to organization.

But it's still useful to have a loose/informal definition for the reasons outlined above: distinguishing containers by name is very helpful in practice for UX professionals.

Answer 2

There probably isn't objective answer to this question. As you said, if Microsoft, Google or Oracle doesn't seem to agree, how could we?

My view is mostly based on Google Material design on cards and Microsoft Metro tiles. To me a card is close to what Google calls cards. Metro tiles and tiles in general are more homogenous items that may have some actions associated with them. Google uses image gallery as an example for tile usage.

Appearance

Google Material design cards always have constant width within a collection.

Cards have a constant width and variable height. The maximum height is limited to the height of the available space on a platform, but it can temporarily expand (for example, to display a comment field).

In Google Material design cards always have rounded corners while tiles always have square corners.

Microsoft Metro tiles can be of variable size within a collection.

The user can change your tile's size at any time, there is no programmatic way to know which size is currently being used, and only notifications that match its current size are displayed.

Tile and toast visual assets (Windows Runtime apps)

Content

Microsoft Metro tiles:

This topic discusses the concepts and terminology surrounding app tiles, which are the Start screen tiles that represent and launch your app. An app tile is more than a big icon; it has the ability to display a continuously changing set of content that can be used to keep the user aware of events associated with that app (such as new social networking posts, new news headlines, or stock quotes) when the app is not running.

Google Material Design cards:

A card is a piece of paper with unique related data that serves as an entry point to more detailed information.

[...]

Cards are a convenient means of displaying content composed of different elements. They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

So Metro tiles are bit more restricted when it comes to content. They display only the application logo and possibly some notifications sent by the application. Google cards can support multiple types of content, dynamic or static.

So in a way Google cards are like panels in Java. From Java api docs for panel:

Panel is the simplest container class. A panel provides space in which an application can attach any other component, including other panels.

But unlike panel in Java, Google cards or Metro tiles can't contain other cards or tiles in them.

Actions

Metro tiles have one action, start the application, while Google cards can support multiple supplemental actions in addition to card's primary action:

The primary action in a card is typically the card itself.

Supplemental actions can vary from card to card in a collection, depending on the content type and expected outcome; for example, playing a movie versus opening a book.

Metro applications can have secondary tiles that launch the same application but with distinct content or from distinct state:

A secondary tile allows a user to launch directly from the Start screen to a specific location or subexperience in an app. The app decides which content to offer as a pinning option, but the user chooses whether the secondary tile will be created or deleted.

On panels

I have always thought of panels to be clearly different to cards/tiles. To me panels are containers too but never to be used as a collection in a way cards/tiles are used.

Panels are used as callouts that can contain actions, mainly CTA's. Panels contain much more information than cards/tiles and are almost always bigger in size than cards/tiles. Here is an example panel from Foundation framework, this is what I think when panels are mentioned. These panels can be used to create cards/tiles, though.

Answer 3

1. Cards - 2. Tiles - 3. Panels

The short answer is there really is no difference between these terms. Any of these can be any size and I've used the terms interchangeably on various projects.

We should adapt to use whatever terminology the rest of the team is comfortable with because very little can be gained from spending cycles trying to make a distinction between them.

Card layouts are very good at chunking data into bite sized pieces and work nicely in a responsive design. I prefer the term cards because most people carry around cards in their wallet while tiles and panels are a little less common.

Answer 4

According to Google's Material Specification...Tiles have square corners, no more than 2 actions, cannot be rearranged or dismissed. Cards have rounded corners (like playing cards), have multiple actions, can be rearranged or dismissed

Answer 5

I'm documenting apps that use what might be termed tiles, cards or panels. From a programming standpoint, maybe the differences are acceptably vague. From a documentation standpoint, I need descriptive handles for reference that make logical sense.

My read on most of the comments I've seen is that the differences don't matter too much. I would suggest that, from a taxonomical perspective in documentation, the differences are critical.

With this in mind: 1) Tile - single-purpose, static image used as a pointer to other content 2) Card - multi-purpose, multi-element container displaying a subset of live data that may contain links to other content or functions 3) Panel - complex document that may, in certain contexts, be the equivalent of a Word doc, and in other contexts, be the equivalent of an ordered layout of a row of data or query results

Maybe there are existing UI terms in database design that I'm unaware of at present. However, forms and query results don't fit in the model I'm laying out here.