Select / Dropdown
Resumo
Dropdowns, também conhecido como Combobox (quando possui a possibilidade de input de texto) mostram aos usuários uma lista de opções. Eles podem filtrar e selecionar múltiplas opções caso necessário
Anatomia
Label (opcional): Comum em formulários para identificar o campo
Container: Corpo que abriga o placeholder e ícone
Seta para dropdown: Indicador que a lista pode ser expandida
Placeholder: Texto que indica que tipo de infomação é esperada
Barra de rolagem: Pode ser padrão do sistema ou personalizada pelo designer
Item do dropdown: Opções disponíveis para seleção
Estados
Active: Estado original do gatilho
Disabled: Quando componente não permite interação
Hover: Indica que o item é clicável ao passar o mouse
Focus: Estado de destaque quando o componente é selecionado
Error: Comum em formulários para indicar que uma seleção obrigatória não foi feita ou está incorreta
Filled/Completed: Quando um item já foi selecionado e o componente volta ao estado original exibindo a escolha
Select vs Dropdown
Select e dropdown são visualmente similares, no entento, a aparência do select será determinada pelas configurações do navegador ou dispositivo do usuário.
Dropdown vs Popover
Dropdown e popover são confundidos porque visualmente parecem a mesma coisa (um container flutuante que aparece sobre o conteúdo), mas a diferença real está na função e no contrato de interação, não na aparência. Se o objetivo é o usuário decidir entre opções, é dropdown; se o objetivo é mostrar/editar algo contextual, é popover.
Esse assunto possui múltiplas conclusões
Também é possível entender o popover como um elemento do próprio combobox, no caso como uma lista de opções selecionáveis que aparece ao clicar.
Dropdown | Popover | |
|---|---|---|
Propósito | Selecionar uma ou mais opções de uma lista | Exibir conteúdo/ações contextuais |
Tipo de conteúdo | Itens selecionáveis semelhantes | Conteúdo livre |
Trigger comum | Click no campo | Click, hover ou foco em um elemento âncora |
Comportamento ao selecionar | Fecha e aplicar o valor | Permanence até a ação explícita |
Fechamento | Ao escolher item ou clicar fora | Clicar foca, esc ou botão de fechar |
Onde usar
Menus de comando
Quando inicia uma ação de acordo com a opção selecionada
Menus de navegação
Quando leva o usuário para uma nova página
Em formulários
Quando o usuário selecionada uma opção dentro do formulário
Seleção de atributos
Quando o usuário seleciona itens de uma lista de opções possíveis
Quando não usar
Menos de 5 itens
Nessa situação, é mais provável que uma lista de checkboxes seja selecionado
Quando é mais fácil digitar
Quando o dado é muito familiar para o usuário
Quando as opções são binárias (sim/não)
Quando as opções são numéricas
Quando é necessário selecionar valores
Quando você tem um range de valores
Variações
Auto sugestão
Interessante para listas longas
Auto complete
Dropdown sugere a continuação do que está sendo digitado
Multi seleção
Enquanto a versão padrão é uma extensão do funcionamento de um radio button, essa opção utiliza o componente checkbox e permite seleção de vários itens
Com grupos
Longas listas podem receber essa categoria
Seleção de data
Usados para agendamentos de reuniões, seleção de datas de aniversário, check in/out e outras situações
Com imagens + Tags
Além de exibir uma lista com imagens, podemos usar o componente de tag/pill para indicar itens selecionados.
Boas práticas
O que colocar o placeholder
Deixar em branco
Usar indicação genérica
Indicar o que é pra ser selecionado
Exemplificar com uma das opções
Tipo de dado esperado
Deixe claro as opções indisponíveis
Em vez de remover, mantenha qualquer item que não pode ser selecionado com estado inativo
Padrão obscuro de UX
Alguns sites menos escrupulosos podem pré-selecionar uma opção em um menu suspenso sem que o usuário perceba. Isso é particularmente comum ao perguntar sobre recursos adicionais. Para evitar frustrar e irritar seus usuários, é melhor deixar todos os menus suspensos desmarcados ao carregar a página.
Altura do menu suspenso
Exibir apenas algumas opções por vez torna a visualização menos confusa.
Uma pessoa comum só consegue manter 7 (mais ou menos 2) itens em sua memória de trabalho.
Permitir opções que não estejam na sua seleção.
Às vezes, a opção que o usuário procura não está disponível na seleção atual. Se ele já criou outras opções (por exemplo, categorias, pastas, etiquetas etc.), então ele também deve conseguir criar uma nova a partir desta lista.
Mantenha o título do menu visível
Acessibilidade
A
O campo precisa de um rótulo visível que identifique o que se seleciona (WCAG 3.3.2).
Quando uma seleção obrigatória falta ou é inválida, o erro precisa ser descrito em texto, não apenas por cor ou borda (WCAG 3.3.1).
Estado e seleção não podem ser comunicados só por cor (WCAG 1.4.1).
Ícones dentro do campo ou das opções precisam de nome textual equivalente (WCAG 1.1.1).
Nenhuma instrução pode depender só de característica sensorial — posição ou cor (WCAG 1.3.3)
AA
O texto do campo, do valor selecionado, do placeholder e das opções da lista precisa de contraste de pelo menos 4.5:1 contra o fundo (WCAG 1.4.3).
A borda do campo, a seta, o indicador de foco, a borda do estado de erro e o check do item selecionado precisam de pelo menos 3:1 contra a cor adjacente (WCAG 1.4.11).
O campo e cada item da lista precisam de área de toque de no mínimo 24×24px (WCAG 2.5.8).
O indicador de foco precisa estar visível no campo e em cada item alcançado por teclado (WCAG 2.4.7).
Ao abrir, a lista não pode esconder o campo que tem foco, e o item focado dentro da lista não pode ficar atrás de outra coisa (WCAG 2.4.11).
Quando a correção do erro é conhecida, ela deve ser sugerida ao usuário (WCAG 3.3.3).
AAA
O texto do campo e das opções com contraste de 7:1 (WCAG 1.4.6).
O campo e cada item da lista com área de toque de no mínimo 44×44px (WCAG 2.5.5).
O indicador de foco com espessura equivalente a um perímetro de 2px ao redor do elemento e contraste de 3:1 entre focado e não-focado (WCAG 2.4.13).
Referências
https://componentes.design/aulas/select-dropdown