Tooltips, modais, loading states e empty states

Esta seção possui recomendações para a criação de textos para componentes específicos do layout.

Vamos conferir? 🤝

---

Boas práticas gerais

Estes elementos orientam usuários sobre processos, esclarecem dúvidas rápidas e informam sobre status de carregamento, melhorando a compreensão e experiência.

• Tooltips devem ser curtas e explicativas, nunca contendo informações essenciais.

• Modais precisam ter textos claros, informando claramente a ação necessária e suas consequências, indicando formas de continuar.

• Loading states devem ser amigáveis e informativos, evitando mensagens técnicas.

• Telas de empty state devem explicar claramente por que o espaço está vazio e orientar sobre como preenchê-lo.

Tooltip

A tooltip (balões informativos) é um componente com textos curtos que explicam funcionalidades específicas da interface quando o usuário interage. Ela deve ser breve, esclarecedora e curta, sem repetir palavras e termos que já estão visíveis.

A tooltip é muito baseada no conceito de microcopy! Os pequenos textinhos que completam o sentido da navegação e confortam o usuário.

Microcopy é todo texto curto que ajuda o usuário a entender ou interagir com a interface. São pequenos detalhes que geram uma grande diferença na experiência. Eles nascem do conceito de que cada palavra para o UX writing precisa ter uma função e finalidade bem definidos.

Modal e pop-ups

Mensagens em modais e pop-ups exigem precisão, clareza e foco na ação imediata do usuário, uma vez que elas "interrompem" a navegação e são um tanto quanto incômodas.

• Indique rapidamente o propósito e ação desejada, evitando ambiguidades ou um tom alarmista exagerado:

✓ Sair sem salvar? Ao continuar, as músicas que você adicionou à essa playlist não serão salvas em seu perfil.

Telas de carregamento (loading states)

As telas de carregamento (loading states) contêm textos que aparecem enquanto conteúdos ou ações são carregadas, ajudando a diminuir a percepção de espera.

• Use mensagens curtas e amigáveis ao invés de termos genéricos e impessoais:

✓ Estamos separando as melhores músicas para você...

✕ Carregando...

Estados vazios (empty states)

Estados vazios são momentos em que o usuário ainda não fez uma ação ou não existe conteúdo disponível para exibir. Um bom texto para esses casos deve ser informativo, acolhedor e incentivar o usuário a agir.

• Explique claramente por que o espaço está vazio e como preenchê-lo.

• Use o momento para incentivar uma ação desejável:

✓ Sua playlist ainda está vazia. Que tal adicionar uma música para começar?

• Seja amigável e encorajador, nunca frio ou impessoal.

• Evite mensagens negativas vazias, como:

✕ Nada aqui

✕ Nenhum resultado

Aproveite estados vazios para instruir e motivar o usuário, transformando uma possível frustração em oportunidade de interação.

---

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo.