Tooltips, modais, loading states e empty states

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.

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