[Design Pattern]: Empty data states

[adamnel]

Cover empty data states for the following contexts:

• Empty page
• Empty region of page (empty card in a set of cards, for example)
• Empty row or item (such as a list item that doesn't have content in a larger set)

[adamnel]

Spec sheet

Empty page sample design

Empty region sample design

Empty item sample design

[aciccarello]

For reference, here is the material design spec on empty states
https://material.io/guidelines/patterns/empty-states.html

It has some good recommendations for alternative content

Educational Content

[kyleledbetter]

Examples from a Google product (Tag manager):

[adamnel]

I do like the more minimal nature of that one. The drop shadow on the icon isn't good but otherwise it's basically a cut down variant of the pattern I proposed.

[adamnel]

Another pattern from Google Trends:

[adamnel]

Another pattern from Google Optimize:

[adamnel]

From Google Business Manager:

From Google Contacts:

From Google Data Studio:

From Google Firebase:

From Google Keep:

From Google Optimize:

[kyleledbetter]

Awesome research

[jennmedellin]

Thanks for the great input. We're thinking this one will work well. What do you all think?

[jennmedellin]

Except without the background on the icon, since that looks custom.

[adamnel]

I would argue that the background color is important to add some visual consistency to the pattern, as the specific icon in use could vary wildly in visual weight. The background lends structure to what otherwise appears more like a jumble of loosely associated items.

Here are comparisons: