Então, qual é a diferença entre combobox, multiselect, listbox e dropdown? Embora todos esses componentes da IU possam parecer semelhantes, eles servem a propósitos diferentes. A escolha muitas vezes se resume ao número de opções disponíveis e sua visibilidade.
Vamos ver como eles diferem, para que serveme como escolher o caminho certo — evitando mal-entendidos e expectativas erradas ao longo do caminho.
Nem todos os padrões de lista são iguais
Todos os componentes de UI destacados acima têm exatamente uma coisa em comum: eles suportam as interações dos usuários com as listas. No entanto, eles fazem isso de maneira um pouco diferente.
Vamos dar uma olhada em cada um, um por um:
- Suspenso → a lista fica oculta até ser acionada.
- Caixa de combinação → digite para filtrar + selecione 1 opção.
- Seleção múltipla → digite para filtrar + selecione várias opções.
- Caixa de listagem → todas as opções da lista visíveis por padrão (+ rolagem).
- Caixa de listagem dupla → mover itens entre 2 caixas de listagem.
Em outras palavras, Caixa de combinação combina um campo de entrada de texto com uma lista suspensa, para que os usuários possam digite para filtrar e selecione uma única opção. Com Seleção múltiplaos usuários podem selecionar muitas opções (geralmente exibidas como comprimidos ou chips).
Caixas de listagem mostrar todas as opções da lista visíveis por padrão, geralmente com rolagem. É útil quando os usuários precisam ver todas as opções disponíveis imediatamente. Caixa de listagem dupla (também chamado lista de transferência) é uma variação de uma caixa de listagem que permite aos usuários mover itens entre duas caixas de listagem (esquerda ↔ direita), normalmente para seleção em massa.
Nunca oculte opções usadas com frequência
Conforme mencionado acima, a escolha do componente de UI correto depende de 2 fatores: quantas opções de lista estão disponíveis e se todas essas opções precisam estar visíveis por padrão. Todas as listas também podem ter estruturas em árvore, aninhamento e seleção de grupo.
Há um princípio que venho seguindo há anos para qualquer componente de UI: nunca oculte opções usadas com frequência. Se os usuários confiam frequentemente em uma seleção específica, há muito pouco valor em ocultá-la deles.
Nós poderíamos conseguir pré-selecionadoou (se houver apenas 2 ou 3 opções usadas com frequência) mostre-as como chips ou botõese, em seguida, mostre o restante da lista na interação. Em geral, é uma boa ideia sempre exibir opções populares — mesmo que isso possa sobrecarregar a interface do usuário.
Como escolher qual?
Nem toda lista precisa de um método de seleção complexo. Para listas com menos de 5 itensbotões de opção ou caixas de seleção simples geralmente funcionam melhor. Mas se os usuários precisarem selecionar um lista grande de opções (por exemplo, mais de 200 itens), caixa de combinação + seleção múltipla são úteis devido à filtragem mais rápida (por exemplo, seleção de país).
Caixas de listagem são úteis quando as pessoas precisam acessar muitas opções ao mesmo tempoespecialmente se eles também precisarem escolher muitas opções dessa lista. Eles podem ser úteis para filtros usados com frequência.
Caixa de listagem dupla muitas vezes é esquecido e ignorado. Mas pode ser muito útil para tarefas complexas, por exemplo, seleção em massa ou atribuição de funções, tarefas e responsabilidades. É o único componente de UI que permite aos usuários revisar sua lista de seleção completa lado a lado com a lista de origem antes de confirmar (também chamado “Lista de transferência”).
Na verdade, a caixa de listagem dupla costuma ser mais rápida, mais precisa e mais acessível do que arrastar e soltar.
Considerações de usabilidade
Uma observação importante a ter em mente é que todos os tipos de lista precisam suportar navegação pelo teclado (por exemplo, teclas de seta ↑/↓) para acessibilidade. Algumas pessoas quase sempre confiam no teclado para selecionar opções assim que começam a digitar.
Além disso:
- Para listas com Mais de 7 opçõesconsidere adicionar as funcionalidades “Selecionar tudo” e “Limpar tudo” para agilizar a interação do usuário.
- Para listas longas com uma caixa de combinação, expor todas as opções para os usuários ao clicar/tocar, caso contrário eles nunca serão vistos,
- Mais importante, não exiba elementos não interativos como botões para evitar confusão — e não exiba elementos interativos como rótulos estáticos.
Concluindo: nem tudo é uma lista suspensa
Os nomes são importantes. UM lista vertical de opções é normalmente descrito como um “menu suspenso” – mas muitas vezes é um pouco genérico demais para ser significativo. “Suspenso” sugere que a lista está oculta por padrão. “Seleção múltipla” implica seleção múltipla (caixa de seleção) dentro de uma lista. “Caixa de combinação” implica entrada de texto. E “Listbox” é simplesmente uma lista de itens selecionáveis, visíveis o tempo todo.
O objetivo não é ser consistente com as definições acima só por fazer. Mas sim para alinhar intenções – fale a mesma língua ao decidir, projetar, construir e usar esses componentes de UI.
Isto deveria funcionar para todos — designers, engenheiros e usuários finais — desde que os rótulos estáticos não se pareçam com botões interativos e os botões de opção não funcionem como caixas de seleção.
Conheça “Padrões de Design para Interfaces de IA”
Encontrar Padrões de design para interfaces de IAo novo de Vitaly curso de vídeo com exemplos práticos de produtos da vida real – com um treinamento UX ao vivo acontecendo em breve. Vá para uma visualização gratuita.
Recursos úteis
- Preenchimento automático: Diretrizes de UX, por Vitaly Friedman
- Combobox, do eBay 👍
- Combobox, da Elastic
- Combobox, de Elisa
- Combobox, do MongoDB 👍
- Combobox, por Visa 👍
- Combobox, por Watson (Docplanner)
- Combobox, da Wikimedia
- Combobox, da Zendesk
- Multiselect (MongoDB Combobox Design Docs), por MongoDB 👍
- Pesquisa multisselecionada, da Wikimedia
- Caixa de combinação de seleção múltipla, por Vaadin
- Seleção múltipla, por Visa
- Transferência (exemplo Listbox), por Ant Design
- Caixa de listagem, de Hopper
- Caixa de listagem, por Vaadin
- Caixa de listagem, por Visa
- Seletor de lista dupla, da Red Hat (PatternFly)
- Caixa de listagem dupla, da Salesforce (Lightning Design System)
- Lista de transferências, por Mantine
- Caixa de listagem dupla, da Dashlite
- Emblemas x comprimidos x chips x etiquetas, por Vitaly Friedman
- Caixas de listagem vs. listas suspensas, por Anna Kaley (NN/g)
