Callout

Uma chamada de destaque (callout) é um tipo de dica flutuante ancorada a um elemento, a qual pode ser usada para ensinar usuários ou orientá-los pela aplicação, normalmente sem bloquear completamente a interface em volta.

Alguns design system nomeiam este componente com termos abstratos como "pulo sobre" (popover), "voo para fora" (flyout), ou "balão de ensino" (teaching bubble), enquanto outros o consideram uma variação de dica de ferramenta (tooltip). Em nossa concepção, todos estes casos de uso podem ser válidos e são factivelmente representáveis por uma única especificação, a qual optamos por chamar de callout ou de flyout.

Evidentemente, um dos casos de uso mais comuns de um callout é justamente servir como uma dica de ferramenta (tooltip). Embora o uso de dicas de ferramenta nativas do navegador web (atributo title do HTML) seja válido e ofereça excelente acessibilidade por padrão, uma apresentação personalizada, desde que possua apropriada lógica de posicionamento dinâmico, também é aceita por este design system.

Variações

Este componente pode ser utilizado conforme as variações descritas a seguir.

Padrão

A variação padrão deste componente representa seu layout mínimo, representado por um balão flutuante atrelado a um elemento da interface. Esta variação não exige ação do usuário para ser descartada, podendo tal acontecimento ser atrelado a outra ação na interface, como o movimento do mouse para fora do elemento atrelado, bem como qualquer outra ação conveniente de acordo com as necessidades de instrução desejadas.

A aparência desta variação em modo claro:

A aparência desta variação em modo escuro:

Com botão

Esta variação é muito parecida visualmente com a variação padrão, porém exige ação explícita do usuário, através do botão de ação ou do ícone de fechamento da caixa de chamada de destaque. É uma variação especialmente útil durante ensino guiado do usuário por novas interfaces, quando este precisa confirmar que entendeu determinado comportamento antes de seguir para o próximo, ou explicitamente fechar as instruções que não deseja mais ver.

A aparência desta variação em modo claro:

A aparência desta variação em modo escuro:

Boas práticas

Para que este componente seja utilizado da melhor maneira possível, observe as práticas a seguir.

Exibição e comportamento

Este componente é mais informativo do que intrusivo, portanto não utilize uma chamada de destaque para pedir confirmação de ação. Nestes casos, use Dialog, pois este bloqueia a ação no restante da interface e garante total atenção do usuário em relação à confirmação a ser concedida.

Sempre coloque uma chamada de destaque perto do objeto que está sendo descrito, com a "cauda" do balão apontando diretamente este elemento, se possível. Assim, intuitivamente, nunca mostre chamadas de destaque sobre elementos atualmente invisíveis ao usuário.

Não use blocos de texto grandes em seu texto explicativo da chamada de destaque, pois eles se tornam difíceis de ler e acabam sendo esmagadoramente ignorados.

Evite bloquear elementos de interface importantes ao usuário com o posicionamento de alguma chamada de destaque. É uma experiência de usuário ruim que levará à frustração.

Não abuse dos callouts, usar muitas chamadas abertas automaticamente em sequência pode ser percebido como uma interrupção no fluxo de trabalho de alguém. Algumas aplicações tem cometido esse erro ao receber novos usuários após o primeiro login, exigindo que o usuário veja e confirme vários passos instrutivos (por vezes, mais de 5 passos) antes de efetivamente usar a aplicação. É uma experiência de usuário muito ruim e deve ser evitada.

Uma abordagem sutil e útil para utilização deste componente é quando um conceito particularmente complexo precisa de explicação. Então, coloque um ícone de informações ao lado do texto para indicar que há mais informações úteis disponíveis e quando alguém passar o mouse ou acionar o ícone, a chamada de destaque explicativa aparecerá.

Acessibilidade

Se a chamada de destaque estiver sendo usada como uma caixa de diálogo (o que nós realmente não recomendamos), ao menos defina role="dialog" no container da chamada de destaque.

Se a chamada de destaque possuir botões, estes devem ser acessíveis através de navegação por teclado e devem respeitar seus próprios padrões de acessibilidade conforme documentado em Button.

Qualquer callout aberto em uma interface deve ser descartada imediatamente se a tecla Esc for pressionada.