An empty state happens when there’s nothing to display in a particular context.
We differentiate between two ways of handling this - either you want the empty area to draw attention, or you want it to be subtle:
- In some cases this is a “problem”, for example the user doesn’t have any accounts to display in an overview.
- In other cases it’s quite normal for a table to be empty, for example an empty list of payments.
Empty state with higher attention
In this case user doesn’t have any accounts. In zone 2 where the accounts should have been listed, an error-ribbon (whisper) is used to indicate where the accounts should have been. In zone 3 we do our best to sell the prospect of opening the missing products if this is appropriate for this user.
Empty state with low attention
In this case we have a function where the user has simply not added any information yet. The table headers are visible, but the table contains no rows yet. This is subtle and is not a cause for major concern.