User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
We are developing a platform and we need to show a visual way the most relevant information from different sources to the users. The user need to interact with this "pieces of information" and this content will has a dynamic structure and that is meant to be updated frequently. I am thinking of using something like Tiles or Cards, but that begs the question:
What are the differences between Tiles and Cards UI?
The difference is semantic but from industry standard usage whenever I heard the word tile, the implication is that there is another screen associated with the tile. For example in Microsoft's "Modern UI" a tile is much more than just an Icon, it can provide rapid information and the tiles on the Windows Phone or Windows 8 start screen act as both "at a glance" information radiators as well as means of starting the associated app. The important feature of the Tile is that the user decides their placement based on importance or even aesthetics.
Cards on the other hand imply that all of the relevant information are contained on them. You might be able to "zoom in" or "flip" a card to see more. But they should convey everything they need to within those interactions. In addition, placement matters with a card. Either relational placement like in a mind map or a class diagram showing similar concepts or absolute placement like a Kanban board showing the state of a task.
A tile used in a place where cards are normally used would be confusing, the user might not even be aware that the tile does anything more than display information. Likewise a card in a group of tiles may cause frustration, the user would expect more to happen when interacting with it.
What's best for your app depends on it's content, without knowing any of this here are a few things to look into about both design patterns:
Tiles are more like gallery's, flat, small margins. Here is the wikipedia page explaining the Metro UI pattern which is reliant on tiles.
Cards are pieces of bite sized information displayed; spaced out from each other, on top of a graphic element other than the background.
Cards are useful for reading quick information because the design clearly directs you to the content.
Here is an article explaining the cards UI (its a bit biased)
I think of tiles as more plain than cards, and as the name implies they are fixed in size (or limited to a small subset of geometrically related sizes) and spaced out regularly along a grid. Tiles are almost always incomplete providers of information: if you want to know anything about them, you have to interact with them. Their displays are less static than icons, and tiles can perform graphical operations to get your attention when needed. They also remain in fixed relationships to their canvas: if I place a tile in the upper left corner of the canvas, it should always be in the upper left corner unless I move it or I force it to move.
Cards are more dynamic, they hold more info, and they can be located in irregular places on the canvas. Cards are not always a fixed size, nor are they limited to a fixed set of sizes. Cards can also be complete: you may or may not need to interact with a card in order to learn all the information it has to offer. Cards can often overlap. Moving a card in relationship to the canvas should be easier than it is with tiles or icons. Cards can even rearrange themselves if they need to.
Tiles are more of a navigation tool, while cards are more of a content tool.
Tiles, cards, widgets, gizmos, grids - the name does not matter. What matters is the functionality and principle.
Be very careful of creating a interface method that forces all content and functionality into an overly consistent way of working. Consistency can make things look pretty and is vital, up to a point.
The trick is to learn when what you are doing needs a new way of doing it.
For example I have seen many websites and intranets that needlessly using the 'widget' approach to allow the user to build pages themselves. It failed for the BBC and Google and I've yet to see it work effectively for any company - no matter how many times companies and less expeirenced UX folks use it.
The use of 'tiles' to present 'like items' is, on the other hand, standard practice. Often it's just referred to as a grid view (although it's best not to expose that to the users). Most ecommerce sites use this. A tile view on sites like pinterest is just a grid view with variable vertical heights. The underlying principle remains the same but the presentation is tweaked in a good way.
I hope that helps.
Tiles are more suitable for homogeneous type of elements (like gallery of images) without any space between, for example images. Users can easily compare items because of visual continuity. However, cards are better for heteregeneous items which space between items gives users the impression of dealing with different/unique elements as they scroll up and down.
