Pular para o conteúdo principal

EmptyState

Empty state, ou estado vazio, é o que as pessoas vêem quando não há dados a serem exibidos em uma tela.

O componente deve ajudar as pessoas, informando o que pode ser criado ou exibido na tela, além de incentivar a realização de uma ação, seja criar, configurar ou ver algo.

O EmptyState pode ter uma imagem ilustrativa, um título, uma descrição e ações. Apenas o título é obrigatório.

Imagem​

  • A imagem no EmptyState é o que o caracteriza, portanto é obrigatória
  • A escolha da imagem deve estar relacionada ao contexto

Textos​

  • A mensagem do EmptyState deve ser positiva e focada no benefício da funcionalidade em questão. Deixe claro o benefício e encoraje a ação
  • As imagens e textos devem conversar entre si de maneira holística. Elas devem ser complementares e dentro do contexto da ferramenta ou produto

Ações​

Geralmente, EmptyState traz uma ação para ajudar na continuidade do uso de determinada tarefa no produto.

Ação primária​

É a ação principal do contexto em que o EmptyState está inserido. É a ação que fará com que a função em questão seja usada. Pode acontecer de em alguns casos não ser necessário ter uma ação primária. Exemplo: empty state de busca com zero resultados

Ação secundária​

É a ação que apoia a ação primária, normalmente é usada para contribuir com mais informações de como usar a função em questão

Feedback​