Pular para o conteúdo principal

Popover

O Popover é um elemento flutuante que apresenta informações adicionais sobre um elemento da tela.

O Popover pode ser disparado através do clique em um determinado elemento ou automaticamente através do carregamento da página.

Após aberto, ele pode ser fechado com qualquer clique fora dele ou pode permanecer aberto até que haja interação com ele, através do clique em suas ações ou do clique no botão ”Fechar”.

Somente um Popover pode estar ativo por vez em uma página.

Popover transacional

Utilizado para trazer informações adicionais a um determinado elemento da tela, deve conter pelo menos uma descrição curta e pode conter um título curto.

Ele também pode conter uma ilustração, link na descrição e até 2 botões.

Pode, ainda, permanecer aberto até que uma de suas ações seja tomada. Nestes casos, recomenda-se exibir o botão de ”Fechar”.

Quando utilizar

  • Para trazer informações adicionais relacionadas a determinado elemento ou assunto
  • Para oferecer ações adicionais relacionadas a determinado elemento ou assunto

Popover de destaque

Utilizado para introduzir novos elementos ou funcionalidades em uma tela ou fluxo (Onboarding).

Pode conter um título curto, um texto descritivo com link e até dois botões, que podem ser utilizados para navegação entre Popover em Onboardings guiados.

Deve permanecer aberto e só será fechado através do botão de ”Fechar”.

Quando utilizar

  • Para apresentar novos elementos ou funcionalidades em uma página
  • Para mais informações sobre a criação de Onboardings, acesse nossa documentação

Textos

Título

  • Conciso e claro: Deve ser breve e comunicar de forma clara o propósito ou ação associada ao Popover. Evite termos técnicos.
  • Consistente: Mantenha a linguagem consistente com o tom e voz dos produtos RD Station. Isso ajuda a criar uma experiência familiar.
  • Destaque a informação principal: Destaque palavras-chave ou detalhes importantes da informação. Isso ajuda na identificação do contexto ou finalidade do Popover.

Descrição

  • Sucinta e objetiva: Diga as informações adicionais ou instruções relevantes de maneira objetiva. Evite textos longos ou que exijam alta carga cognitiva para ser compreendido.
  • Linguagem clara e acessível: Deve ser fácil de ser compreendida por qualquer pessoa, independente da maturidade em relação ao produto. Evite termos técnicos ou formais.
  • Relevância: Foque nas informações mais importantes para quem está lendo. Evite excessos ou detalhes dispensáveis. O que a pessoa realmente precisa saber?
  • Formato adequado: Use negrito, itálico ou cores para destacar informações importantes ou destacar partes da descrição. Isso ajuda a melhorar a leitura e escaneabilidade do texto.

Ações

  • Relacione o texto da ação com o verbo do título, para criar uma dupla confirmação de forma orgânica.
  • Ofereça sempre a opção de “cancelar” a ação.
  • Caso precise relacionar o Popover com uma informação externa, use um link na descrição.

Boas práticas

Feedback