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, a que propósito servem e 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 oferecem suporte às interações dos usuários com listas. No entanto, eles fazem isso de maneira um pouco diferente. Vamos dar uma olhada em cada um, um por um:
Menu suspenso → a lista fica oculta até ser acionada. Combobox → digite para filtrar + selecione 1 opção. Seleção múltipla → digite para filtrar + selecione muitas opções. Caixa de listagem → todas as opções da lista visíveis por padrão (+ rolagem). Caixa de listagem dupla → move itens entre 2 caixas de listagem.
Em outras palavras, o Combobox combina um campo de entrada de texto com uma lista suspensa, para que os usuários possam digitar para filtrar e selecionar uma única opção. Com o Multiselect, os usuários podem selecionar muitas opções (geralmente exibidas como comprimidos ou chips). As caixas de listagem exibem todas as opções de 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 chamada de 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. Poderíamos torná-lo pré-selecionado ou (se houver apenas 2 a 3 opções usadas com frequência) mostrá-los como chips ou botões e, em seguida, mostrar o resto 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 itens, simples botões de opção ou caixas de seleção geralmente funcionam melhor. Mas se os usuários precisarem selecionar em uma grande lista de opções (por exemplo, mais de 200 itens), a caixa de combinação + seleção múltipla será útil devido à filtragem mais rápida (por exemplo, seleção de país).
As caixas de listagem são úteis quando as pessoas precisam acessar muitas opções ao mesmo tempo, especialmente se também precisarem escolher muitas opções dessa lista. Eles podem ser úteis para filtros usados com frequência.
A caixa de listagem dupla costuma ser esquecida e ignorada. 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 chamada de “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 oferecer suporte à 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ções, considere 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, exponha todas as opções aos usuários ao clicar/tocar, caso contrário elas nunca serão vistas, Mais importante ainda, 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. Uma lista vertical de opções é normalmente descrita como uma “lista suspensa” – mas muitas vezes é um pouco genérica para ser significativa. “Dropdown” indica que a lista está oculta por padrão. “Multiselect” implica seleção múltipla (caixa de seleção) dentro de uma lista. “Combobox” 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 ser. Mas sim para alinhar intenções - fale a mesma língua ao decidir, projetar, construir e usar esses componentes de UI. Deve funcionar paratodos — designers, engenheiros e usuários finais — desde que os rótulos estáticos não pareçam 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” Conheça Design Patterns For AI Interfaces, o novo curso em vídeo da Vitaly com exemplos práticos de produtos da vida real – com um treinamento UX ao vivo acontecendo em breve. Acesse uma prévia gratuita. Conheça Design Patterns For AI Interfaces, o curso em vídeo de Vitaly sobre design de interface e UX.
Vídeo + Treinamento UXSomente vídeoVídeo + Treinamento UX$ 450,00 $ 799,00
Obtenha vídeo + treinamento UX30 videoaulas (10h) + treinamento UX ao vivo.Garantia de devolução do dinheiro em 100 dias.Somente vídeo$ 275,00$ 395,00
Adquira o videocurso30 videoaulas (10h). Atualizado anualmente. Também disponível como um pacote UX com 3 cursos em vídeo.
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 versus listas suspensas, por Anna Kaley (NN/g)
