Como lidar com seleções com muitas opções?
Em um aplicativo Web, digamos que eu tenha uma lista de opções para o usuário selecionar. Normalmente, eu usaria uma lista suspensa neste caso, se houver um número razoavelmente pequeno de opções, mas como devo abordar isso de maneira diferente se houver 50 opções? ou 100? ou 1000?
Talvez combinar uma abordagem de dois painéis com uma pesquisa?
A interface do usuário filtra dinamicamente no lado do cliente enquanto você digita na caixa de pesquisa. Eu gosto mais do que apenas pesquisar, porque você pode descobrir quais são todas as opções.
Para pontos de bônus, você pode construir isso rapidamente a partir de um controle regular de seleção/múltiplo.
Algumas idéias:
- Caixa de combinação (ou algum tipo de pesquisa com preenchimento automático)
- Divida as opções em grupos e deixe o usuário selecionar o grupo primeiro, depois a opção da lista que seria menor nesse caso
Bem, se você tem um aplicativo em que um usuário pode selecionar entre milhares de opções, minha primeira resposta seria que você projetou algo incorretamente. Tente diminuir o zoom e considerar a arquitetura de informações que leva a tantas opções e veja o que você pode fazer sobre isso. O usuário realmente precisa de todas essas opções? Você pode se livrar de alguns para ela ou escolher alguns padrões sensatos? Como você lida com o paradoxo do problema da escolha?
Mas, em termos mais práticos, tente dividir as informações em categorias e apresentá-las dessa maneira. Eu poderia ser mais útil se soubesse para quais informações você estava projetando, pois isso geralmente influencia o tipo de visualização ou controle que você pode usar.
Considere fusos horários. Você pode ser realmente específico e oferecer cada fuso horário individual, levando a uma lista enorme, na qual você precisa fazer algum trabalho pesado para tornar o usuário digerível. Ou você pode escolher apenas os fusos horários mais próximos à maioria dos lugares, o que pode deixar alguns usuários excepcionais de fora, mas cobre 99% deles.
O mesmo acontece com a escolha de um horário para um evento. Ser específico significa que um usuário pode escolher até o minuto. 60 menus suspensos de itens? Ou você pode segmentar o tempo em 5 minutos. De repente, o usuário precisa escolher entre 12 opções e é específico o suficiente para o caso de uso.
para tantas opções, qualquer tipo de seleção múltipla seria irritante. Pense em um clique errado e meia hora depois.
Você deve usar 2 caixas com setas como esta
não é muito difícil fazer com algumas linhas de JS
Use uma lista suspensa com todos os elementos classificados logicamente.
Por exemplo - uma lista de fuso horário é ordenada de acordo com o deslocamento, uma lista de países é alfabetizada.
Além disso, verifique se o usuário pode digitar o valor e ele sugere/pula automaticamente para o valor correto.Agrupe-os logicamente. Se forem apenas nomes, você pode primeiro selecionar a primeira letra e depois ter o subconjunto de itens que se encaixam. Seria melhor se os itens pudessem ser categorizados logicamente, por exemplo, pessoas de uma organização, que se encaixam perfeitamente em departamentos, regiões etc.
Você pode até ter vários níveis de profundidade.