Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
lesnider opened this issue Oct 8, 2024 · 1 comment

Comments

@lesnider
Copy link
Contributor

lesnider commented Oct 8, 2024

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:

  • 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)

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
Copy link
Member

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

carbon-design-system/carbon#17553

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: ⏱ Backlog
Development

No branches or pull requests

2 participants