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.

---

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 do usuário.

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

✓ Estamos quase lá!

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

Tooltip

A tooltip (balões informativos) 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:

• Indique rapidamente o propósito e ação desejada:

✓ Confirma a exclusão da sua lista de músicas? Esta ação não poderá ser desfeita.

• Evite ambiguidades ou tom alarmista exagerado.

Telas de carregamento (loading states)

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

• Use mensagens curtas e amigáveis, tomando cuidado com termos técnicos, genéricos ou impessoais:

✓ Afinando as cordas..., Quase lá!

✕ Carregando

Estados vazios (empty states)

Estados vazios são momentos em que o usuário ainda não realizou 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 Lista ainda está vazia. Que tal adicionar uma música ao seu repertório?

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

• Evite mensagens negativas 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.

---