Listas

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes do tipo Listas.

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 ler o conteúdo é possível perceber visualmente que os itens fazem parte de um conjunto?
A ordem da lista é relevante ou apenas agrupamento visual?
Cada item mantém relação clara com o grupo?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Links ou botões dentro de itens possuem feedback visual ao passar o mouse?
Itens clicáveis deixam claro qual parte é acionável?
A interação não quebra a relação visual entre item e conteúdo?

Projetando para uso com gestos

Itens com ações possuem área tocável confortável?
A ordem visual dos itens é mantida em telas pequenas?
A lista continua compreensível quando quebrada em múltiplas linhas?

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

A ordem de foco segue a ordem visual e semântica da lista?
Componentes interativos dentro dos itens têm foco visível?
Itens estáticos não entram na ordem de foco desnecessariamente?

Projetando para uso com leitor de telas

O leitor de telas anuncia que se trata de uma lista?
A quantidade de itens é perceptível quando suportada?
A ordem e hierarquia de listas aninhadas são compreensíveis?

Métodos de Interação

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

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

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

Listas estáticas não exigem interação.
Links e botões dentro da lista devem se comportar conforme seus próprios padrões.
Áreas clicáveis devem ter objetivo claro.

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

A navegação por teclado deve alcançar apenas componentes interativos.
A ordem de foco deve seguir a ordem dos itens.
Listas usadas como navegação devem preservar semântica de lista e links.

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

Use ul quando a ordem não altera o significado.
Use ol quando a sequência importa.
Evite simular listas apenas com quebras de linha ou elementos genéricos.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)). , Ref 2 (abre em uma nova aba).

Cenário: Considerando que estou em uma página que contém listas

Navegação por teclado

QUANDO uso teclado para navegar por uma lista com itens acionáveis
VEJO que o foco segue a ordem esperada dos itens
ENTÃO, quando aciono um link ou botão dentro da lista
VEJO que a ação correspondente acontece

Leitor de telas para desktop

Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e navego pelo componente
- OUÇO que o conteúdo é uma lista quando a semântica é apropriada.
- OUÇO a quantidade de itens quando suportada.
- OUÇO cada item na ordem correta.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Leitor de telas para dispositivos móveis

QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para navegar pelo componente, acontece o seguinte:
- OUÇO que o conteúdo é uma lista quando a semântica é apropriada.
- OUÇO cada item na ordem correta.
- Consigo compreender listas aninhadas quando existirem.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Pontos de Atenção

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

Não remova a semântica de listas apenas para facilitar layout visual.
Evite listas muito longas sem agrupamento, busca ou navegação auxiliar quando necessário.
Listas aninhadas precisam ter hierarquia clara.

Referências

Referências adicionais sobre componentes do tipo Listas.

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.