Empty state Web app

Turn blank space into useful guidance.

6 checks · 2 content groups

Checklist contents

Review progress

Information and structure

Compare information and presentation in context of use.

Clearly state what is missingUse a specific title to differentiate no content from no results found.Tried an account that didn't generate data and a filter with no results. The two states require different instructions; It is not recommended to create a new one when you only need to edit search conditions.Example The message “No projects matching the conditions” is accompanied by “Remove filter”; New accounts use “Create first project”.Explanation of content will be availableTell newbies what this area is for and where the data comes from.Make it clear that this is your first time using it, you don't have permission to view it yet, or the filters don't match; Each cause requires a different treatment.Have a clear first stepSet a new create, data import, or connection action to match the empty cause.Choose an action that gets the data first. If the user is not authorized to create, show how to contact the person with permission.

Actions and status

Try the operation, change the status and continue working.

Expand search resultsIf there are no results, keep the keyword and suggestion to edit or remove the filter condition.Keep keywords and conditions in use; Please remove each filter before requesting to delete all.Don't call the error emptyWhen downloading data fails, report an error and try again instead of saying there is no content.Don't present network errors as an empty list; holds loaded data and provides a retry step.Keep illustrations usefulUse symbols to support meaning, don't cover up action, and don't replace explanations with pictures.Illustrations should support the message, not take up a narrow screen or push the main action out of view.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Check the cause of the empty list

Tried an account that didn't generate data and a filter with no results. The two states require different instructions; It is not recommended to create a new one when you only need to edit search conditions.

EXAMPLES

Usage examples

Empty list due to filter

The message “No projects matching the conditions” is accompanied by “Remove filter”; New accounts use “Create first project”.