Empty placeholders

An empty placeholder is an image and text which fills the space in an empty list or grid.

When to use

Empty placeholders perform a number of important functions: they prevent confusion and guide the user, and they make your interface look better and more cohesive. They are also one of those nice touches which helps to communicate an attention to detail.

An empty placeholder should be displayed whenever a list or grid is empty.

Empty placeholders should not be displayed when an application is being run for the first time. In these situations an empty state is too negative and a richer, more characterful and positive experience is better.

Guidelines

  • Follow the standard layout for the size and placement of the image and labels, so that your application is consistent with other GNOME 3 applications.

  • For the image, use a symbolic icon that either represents your application, or the type of content that would ordinarily appear in the grid or list.

  • An empty placeholder should always include a label which communicates the empty state. It is often appropriate to include a smaller subtext which provides additional guidance (such as how to add items). However, this should only be included if there is additional information that it is useful to provide.

  • If there are controls that allow items to be added, it can be appropriate to highlight them using a suggested style while the list/grid is empty.