0

We are building dashboard for C-level executives for our web app and currently debating on whether we should use cards or tiles in our dashboard. What would be a recommended option from either of these two? Thanks!

4

That also depends on your content. In my experience tiles are not that scalable if the length and amount of content can vary.

But if you have some fixed graphs (e.g. pie charts, donut charts, line charts) tiles would be a clean choice. Tiles create a clear grid and look neat, but cards can look neat and clean too when implemented in a good way.

If you want the dashboard to be fully-responsive, keep in mind that square tiles will limit the height of the tile (and therefore can limit the amount of content).

Do you have an example by what you exactly mean with cards?

  • thanks! the content within tiles keeps varying based on the data. I dont have any example of cards within a dashboard for web app, but I do see card based implementation on my Google Now app which I really like. It is easy to discard the cards when not needed. Can you please point me to any card-based dashboards that you like/have inspired you. Thanks! – Ruchita Oct 3 '16 at 22:56
1

"Tiles" and "cards" are vague terms -- in fact, you could easily argue that tiles are exactly the same thing as cards except without a shadow. If whether to have a shadow is your main question, then:

  • Consider the design of the rest of the web app. How are shadows applied? Are they applied at all? Is the rest of the app starkly flat or are there 3D elements throughout? If there are, what are they used for? Do they serve a purpose other than decorative (e.g. they might indicate touch targets or relation to other elements)?
  • Also consider any affordances a shadow might give. Does the element move independently, e.g. if swiping it away or expanding it?

Google's Material Design guidelines are a bit more prescriptive, though:

  • Cards "display content composed of different elements whose size or supported actions vary."
  • Tiles, the elements of a grid list, are "best suited to presenting homogenous data, typically images, and is optimized for visual comprehension and differentiating between similar data types."

I recommend reading through those two pages.

  • thanks! the shadows currently do not have any affordance and it creates 3 different layers of delineation (outer container: #grey. inner container" #white; and tile-color is grey along with the shadows). Visually this creates a very heavy look and feel for the dashboard. – Ruchita Oct 3 '16 at 22:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.