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 120) feedbacks não visuais (módulo 12 - UI)
(aula 147g) Botão (módulo 14 - Design System)
(aula 187e) Técnicas rápidas para testes de sites (módulo 18 - Testes)

Design de Interação em componentes do tipo Botão

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes interativos do tipo Botão.

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 é acionável?
Antes de interagir com o componente é possível identificar que será realizada uma ação na mesma tela? (ver "Pontos de atenção")
Para o caso de botão desabilitado, é possível perceber visualmente que o componente não é acionável?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Há feedback visual ao passar o mouse no componente?
Há feedback visual ao clicar no componente?
Ao clicar no componente ocorre o acionamento da ação respectiva?

Projetando para uso com gestos

Há feedback visual ao acionar o componente?
Ao acionar o componente ocorre o acionamento da ação respectiva?

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

Há feedback visual ao focar no componente?
É possível interagir com o botão através da tecla "enter" e da tecla de "espaço"?
Ao ser acionado por teclado o botão aciona algo na mesma tela ou executa uma ação concreta?
Para o caso de botão desabilitado, a navegação por teclado não é permitida?

Projetando para uso com leitor de telas

Ao focar em um botão é possível ouvir de que se trata realmente de um botão (e não um link)?
Ao focar em um botão é possível ouvir claramente o objetivo do botão?
Quando uma mesma página exibir mais de um botão, é possível identificar claramente o objetivo de cada botão sem ambiguidade?

Métodos de Interação

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

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, a ação deve ser executada.

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 botões com a tecla ENTER ou BARRA DE ESPAÇO.

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

Ao focar em um botão é possível ouvir de que se trata de um botão.
Ao focar em um botão deve ser possível identificar o objetivo do botão com clareza.
Em telas que possuem mais de um botão, deve ser possível identificar o objetivo de cada um com clareza.
Após acionar a tecla "enter" ou "barra de espaço" é possível identificar que a ação foi executada.
Para botões que acionam menus ou componentes ocultos, ao focar é possível identificar o estado do componente (exemplo: aberto ou fechado).
Para botões que acionam menus ou componentes ocultos, após acionar o botão é possível identificar o estado do componente (exemplo: aberto ou fechado).

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Botão.

Botões devem ter o comportamento de botão e não de um link.
Botões podem ter a aparência de links, mas se eles executam uma ação na mesma tela em que a pessoa está, este é um comportamento de botão e deve ser construído como botão.
Botões desabilitados não devem receber foco por teclado. É uma boa prática (não obrigatória) projetar ações específicas para ajudar as pessoas, como a exibição de uma mensagem informando o que a pessoa precisa fazer para que o botão seja habilitado.

Referência

Referências adicionais sobre componentes do tipo Botão.

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