Skip to content

Add updated content about empty states#651

Draft
ywolpers wants to merge 3 commits intoePages-de:develop-essencefrom
ywolpers:Empty-states
Draft

Add updated content about empty states#651
ywolpers wants to merge 3 commits intoePages-de:develop-essencefrom
ywolpers:Empty-states

Conversation

@ywolpers
Copy link
Contributor

No description provided.

layout: beyond-essence
---

A list that doesn’t contain any items, or a search result page that doesn’t display any results are examples of empty states.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this accurate? I can't think of a list anywhere that needs and empty state. I see them as relevant on tables with no entries (products, orders, coupons) and graphs (Matomo statistics). I suppose on the Storefront it's a "search result page"- is that what you were referring to?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, okay, I guess you meant the apps list. I see.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I took this sentence from the concept page: https://epages.atlassian.net/wiki/spaces/BEYOND/pages/182668816/Concept+Empty+states and totally open to make edits to it as you mentioned in your first comment.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think it's important to put the word "tables" in there. I would say: "Examples of where empty states should be present include a table or list with no entries or a search result page with no results.

---

A list that doesn’t contain any items, or a search result page that doesn’t display any results are examples of empty states.
We want to use empty states to a) guide the merchant on what to do next and b) avoid confusion on the merchant’s end.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3rd benefit of empty states: an empty orders table or graph is depressing and demotivating. Empty states are motivating and encouraging for users at the beginning of their journey.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will include this

* A headline that briefly describes the state
* A text that conveys the purpose of the page and explains what the merchant could do next
* A CTA button that links to the next action (if there is a logical next action)
* An illustration matching the tone of voice of the page
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* An illustration matching the tone of voice of the page
* An illustration matching the theme of the page

Copy link

@sarahwr sarahwr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great to me! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants