Empty state alternatives?

[jess-watson]

Do we have an patterns our guidance for an empty state where a user hasn’t filled out a setting yet? I can use the Paste empty state but it seems visually heavy for my needs.

For example, in the flows I'm designing:

• A user can start the creation flow, then save as a draft and see their settings in a read-only state. In this case, they may not have filled out fields (one is required and one is optional), but can enter the edit flow and fill them out later.

• A user finishes the creation flow but doesn’t fill out an optional setting because they don’t need it for their use case. They cannot edit this after publishing. They see a read-only view of their settings where it shows that the optional field wasn't filled out.

[dosubot[bot]]

🤖

Hey there, @jess-watson! 🌟 I'm Dosu, your friendly neighborhood bot here to help you solve bugs, answer questions, and guide you on your way to becoming a contributor while we wait for a human maintainer to chime in. I'm all ears (figuratively speaking) and ready to dive into your issue about empty state alternatives. Let me take a closer look and get back to you shortly! 🤖🔍

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Feedback on empty states - Answer (updated: 04/04/2023, similarity score: 86%)
• Feedback on empty states (updated: 04/04/2023, similarity score: 85%)
• Empty state in tables - Answer (updated: 06/14/2022, similarity score: 84%)

[dosubot[bot]]

🤖

Based on your description, it seems like you're looking for a more subtle way to handle empty states in your user interface. Here are a few suggestions:

1. Simplify the Empty State: If the Paste empty state seems too visually heavy, you can simplify it by removing the illustration or reducing the size of the text and the button. This can make the empty state less visually heavy and more suitable for your needs.

2. Conditional Rendering: You can use conditional rendering to only show the empty state when it's necessary. For example, if a user hasn't filled out certain fields, you can hide those fields in the read-only state until they're filled out. This can help to reduce visual clutter and focus the user's attention on the fields they need to fill out.

3. Use Placeholder Text: Instead of showing an empty state, you can use placeholder text in the fields that the user hasn't filled out. This can give the user a hint about what they need to do without making the interface look empty.

Here's an example of how you can implement these suggestions:

export const EmptyState: React.FC<React.PropsWithChildren<{ handleClearAll: () => void }>> = ({ handleClearAll }) => (
  <Box
    height="size30"
    borderStyle="solid"
    borderColor="colorBorderWeaker"
    borderWidth="borderWidth20"
    display="flex"
    justifyContent="center"
    alignItems="center"
    columnGap="space110"
  >
    <Box>
      <Heading as="div" variant="heading30">
        No results found
      </Heading>
      <Paragraph>Try changing the filters or the search term.</Paragraph>
      <Button variant="secondary" onClick={handleClearAll} data-cy="filter-group-empty-state-clear-button">
        Clear all
      </Button>
    </Box>
  </Box>
);

In this example, I've removed the NoResultsIllustration to simplify the empty state. You can also adjust the size of the Heading and Button to make them less visually heavy.

This is just one way to handle empty states, and it may not be suitable for all scenarios. Always consider the specific needs of your users and the context of your application when designing your user interface.

Regarding the discussions you found, I'm sorry but I can't see the content of the links you provided. However, I hope the suggestions above can help you in handling the empty states in your design. If you have more specific questions or need further clarification, feel free to ask.

Sources

• packages/paste-website/src/component-examples/filter-group/components/EmptyState.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[nkrantz]

Hey @jess-watson - we don't really have any existing patterns or guidance for empty states other than the regular empty state pattern. The only other empty state we document is the Combobox empty state. Can you share a link to your Figma or some screenshots so we can get a better sense of what you're looking for and why the existing empty state pattern doesn't work? Thanks!