[Docs]: Empty-state message topic: image, content (text), and screen capture suggested improvements

[lesnider]

Project

https://www.carbondesignsystem.com

Section

https://carbondesignsystem.com/patterns/empty-states-pattern/

Problem

Anatomy

What we mean by "icon" is unclear.

1. Image (optional): The box image, especially being closed, doesn't suggest emptiness. Can we come up with another image to suggest?

2. (Current) title description:

A short and concise explanation. Where possible, write this as a positive statement. In this example, “Start by adding data assets” feels more positive than “You don’t have any data assets.” Alternatively, you could say “You don’t have any data assets yet”.

mustn't be clear enough to designers and developers because many designers and developers think the title should be

No {thing}

so it would be best to revise the title to directly state that this style is not the preferred style (see the Solution area).

“You don’t have any data assets.” and “You don’t have any data assets yet”. aren't action driving.

3. The Body section might benefits from a few edits (see the Solution area).

Also,

Solution

Anatomy

1. Image (optional): A non-interactive image that relates to the situation (optional).

The guidelines show a box as the image example so all designers and developers use this box. Is the closed box a mandated image to use for empty-state messages? To many designers, the box, especially being closed, doesn't suggest emptiness. Can we come up with another image to suggest?

2. (Current) Title: A short and concise explanation. Where possible, write this as a positive statement. In this example, “Start by adding data assets” feels more positive than “You don’t have any data assets.” Alternatively, you could say “You don’t have any data assets yet”.

This is good, but many designers and developers think the title should be

No {thing}

so it would be best to revise the title to directly state that this style is not the preferred style, such as

Title: A short and concise explanation. Write this as a positive, action-driven statement, for example “Start by adding data assets” rather than "No data assets". Stating that nothing is there is what users already see so it's not helpful.

“You don’t have any data assets.” and “You don’t have any data assets yet”. aren't action driving, so I suggest omitting these as examples.

3. I also suggest the following terminology and stylistic edits to the Body section:

Body: Explain clearly the next action to populate the space. You might also explain why the space is empty and include the benefit of taking this step by using one of the three options:

• Direct the user to a primary action button positioned underneath the copy.
• Include a primary action link in the copy.
• Direct the user to the UI element (see the following example) to teach the user where elements are and how they will perform tasks in the future.

"may" should be retained to indicate permission (IBM Terminology)

Suggested Severity

Severity 3 = The documentation is mis-leading, somewhat true, missing minor details, or grammatically incorrect. It doesn't present conflicts with other parts of the design system.

Application

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[sstrubberg]

Referenced this issue in a larger epic we are taking on soon regarding Empty States.

carbon-design-system/carbon#17553