carbon-design-system / carbon-website

The website for the Carbon Design System.
https://www.carbondesignsystem.com
Apache License 2.0
279 stars 782 forks source link

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

Open lesnider opened 4 days ago

lesnider commented 4 days ago

Project

https://www.carbondesignsystem.com

Section

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

Problem

Anatomy

Image

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.

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

Also,

Image

Solution

Anatomy

Image

  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?

  1. (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.

  1. 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:

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

Image

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

sstrubberg commented 4 days ago

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

https://github.com/carbon-design-system/carbon/issues/17553