Exemplos para uso em sala de aula

Explicações relacionadas a este exemplo foram utilizadas nas seguintes aulas:

(devido a dinâmica de gravações, não necessariamente todas as aulas que utilizaram o exemplo estarão listadas aqui)

(aula 147f) Tooltip ou Popover (módulo 14 - Design System)

Design de Interação em componentes do tipo Tooltip ou Popover

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes interativos do tipo Tooltip ou Popover.

Importante:
Dependendo do contexto de construção de seus respectivos componentes, é possível que haja mais questionamentos, bem como alguns dos apresentados aqui não ser necessários. A avaliação precisa ser feita caso a caso.

Projetando para a "não interação"

Antes de interagir com o componente é possível perceber visualmente que o componente é interativo?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Há feedback visual ao passar o mouse no componente acionável?
Há feedback visual ao clicar no componente acionável?
O conteúdo adicional do componente não é acionado ao passar o mouse, mas sim apenas após o clique?
O conteúdo adicional aberto após o acionamento do componente se sobrepõe a algum outro conteúdo relevante na tela?
O fechamento do conteúdo adicional ocorre após clique em qualquer região fora do conteúdo aberto?
O conteúdo adicional aberto possui controle de fechamento e permite o fechamento por mouse ao clicar no item respectivo de fechamento?

Projetando para uso com gestos

Há feedback visual ao acionar o componente?
O conteúdo adicional aberto após o acionamento do componente se sobrepõe a algum outro conteúdo relevante na tela?
O fechamento do conteúdo adicional ocorre após toque em qualquer região fora do conteúdo aberto?
O conteúdo adicional aberto possui controle de fechamento e permite o fechamento por toque ao clicar no item respectivo de fechamento?

Projetando para uso com teclado (qualquer dispositivo que não seja de apontamento)

Há feedback visual ao focar no componente acionável?
É possível interagir com o componente acionável através da tecla "enter" ou "barra de espaço"?
Ao ser acionado por teclado o componente exibe o conteúdo sem sobrepor outros conteúdos relevantes?
O conteúdo aberto possui controle de fechamento que permite o seu acionamento por teclado?
É possível realizar o fechamento do conteúdo adicional com a tecla "esc"?

Projetando para uso com leitor de telas

Ao focar no componente é possível ouvir de que se trata de um botão (e não um link)?
Ao focar no componente é possível ouvir claramente qual é o conteúdo adicional que será aberto?
Após a abertura do conteúdo adicional é possível ouvir o conteúdo diretamente?
Com o conteúdo adicional aberto é possível utilizar o teclado para localizar o controle de fechamento e ao localizar é possível perceber de que se trata do fechamento do conteúdo adicional?

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Tooltip ou Popover.

Importante:
Apenas os principais métodos estão listados aqui. Componentes customizados devem ter estudos aprofundados.

Interação com mouse (qualquer dispositivo de apontamento)

Ao passar o mouse, o componente deve retornar feedback visual confirmando possibilidade de interação.
Ao clicar com o botão do mouse, o componente deve retornar feedback visual confirmando o clique.
Ao clicar com o botão do mouse, o conteúdo deve ser aberto.
Ao clicar com o botão do mouse fora do componente, o conteúdo que estiver aberto e for referente a ele, deve ser fechado.
Caso haja controle de fechamento no componente (exemplo: botão fechar), ele deve ser fechado após clique com o mouse.

Interação com teclado (qualquer dispositivo que não seja de apontamento)

Ao focar com teclado, o componente deve retornar feedback visual com foco visível.
Deve ser possível acionar o componente que abre o conteúdo adicional com a tecla ENTER ou BARRA DE ESPAÇO.
Após a abertura do conteúdo adicional, existindo controle de fechamento do conteúdo aberto, ao se pressionar a tecla TAB, deve ser possível ir direto para este controle.
O fechamento do conteúdo adicional deve ocorre quando o controle de fechamento for pressionado (quando este existir) ou quando as teclas ENTER ou BARRA DE ESPAÇO forem pressionadas enquanto o foco estiver no componente responsável pela abertura do conteúdo adicional.
Pressionar a tecla ESC também ocasiona o fechamento do conteúdo adicional, caso ele esteja aberto.

Interação com teclado (ou gestos) + leitor de telas

Ao focar no componente que abre o conteúdo adicional é possível identificar de que se trata de um botão.
Ao focar no componente que abre o conteúdo adicional é possível ouvir qual é o conteúdo que será aberto.
Após a abertura do conteúdo adicional é possível ouvir o conteúdo que foi aberto.
Caso exista um controle de fechamento (no caso do conteúdo adicional estar aberto) deve ser possível ao pressionar a tecla "tab", ouvir que o controle é um botão e que ele é responsável pelo fechamento do conteúdo adicional.
Com o conteúdo adicional aberto, caso a tecla "esc" seja pressionada, deve ser possível identificar que o conteúdo adicional não está mais aberto.

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Tooltip ou Popover.

Ainda não existe um consenso link externo - abre em uma nova janela de métodos de interação para este componente funcionar adequadamente. As construções em diferentes locais não trazem consistência nem de funcionamento e nem de nomenclatura (há variações de nomes em diferentes bibliotecas). Neste caso, as interações indicadas neste material se baseiam em modelos mentais relacionados a componentes similares.
A utilização de tooltip ou componentes similares é comumente interpretado como um indício de "design ruim", justamente devido a sua complexidade de interpretação das interações. Caso seja realmente necessário dar algum tipo de dica, considere a utilização de "modal" ou componentes expansores como "accordion".
Em telas menores (responsividade), a atenção ao seu uso deve ser redobrada. Evite sempre que possível.
Interações com eventos do mouse do tipo "mouseover" ou "mouseout" não são recomendados, principalmente para conteúdos que exibam mais de uma linha de informação.

Referência

Referências adicionais sobre componentes do tipo Tooltip ou Popover.

Importante:
A maior parte das referências estão na plataforma do curso junto com as aulas citadas neste material.

Isenção de responsabilidade:
Os links indicados aqui não são recomendações, mas apenas uma curadoria de referências onde você pode encontrar componentes construídos. É importante ressaltar que não há uma unificação nos formatos de construção e não há garantias de que os links mencionados aqui cumpram todos os padrões de design. Dúvidas devem ser direcionadas para as respectivas equipes envolvidas nas construções dos materiais indicados. Antes de "copiar" algum modelo apresentado, leve em consideração que todos os materiais são atualizados constantemente e que os padrões (principalmente proprietários) podem sofrer alterações.

Exemplo utilizado exclusivamente no curso
AccessBoost