it-swarm-pt.com

Melhor maneira de selecionar um subconjunto de itens em uma lista longa

Um de nossos clientes deseja que construamos um aplicativo da web para compartilhar informações sobre as revistas que ele publica. Cada edição de uma revista contém uma quantidade variável de anunciantes. Esses anunciantes vêm de um pool central de anunciantes. Esse pool contém (no momento) cerca de 150 anunciantes. Cada edição de uma revista contém um subconjunto (cerca de 70 a 80) desses anunciantes.

Nosso cliente deseja que apresentemos uma maneira de adicionar de 70 a 80 anunciantes desta lista de 150 a uma edição de uma revista. Ele precisa ser o mais rápido possível, o mais fácil possível e o mais intuitivo possível.

Qual seria a solução ideal aqui? Eu estava pensando em algo nas linhas da imagem abaixo.

  1. Lista de anunciantes disponíveis.
  2. Lista de anunciantes selecionados. Os anunciantes têm um botão de exclusão.
  3. Caixa de texto com sugestão automática para anunciantes na lista à esquerda. <Enter> remove o anunciante da lista da esquerda e o adiciona à direita. A caixa de texto é limpa e permanece em foco.

Meus colegas sugeriram arrastar e soltar ou apenas uma lista com uma caixa de seleção para cada anunciante, mas essas abordagens forçam o usuário a pesquisar e clicar bastante. Com a minha abordagem, o usuário pode apenas continuar digitando.

Alguma outra sugestão para esta situação?

My idea to transfer items between lists

36
Kristof Claes

Seu design Kristof já é muito bom. Você acertou em coisas muito importantes, como interromper essa ação de repetição e quarta do mouse e do teclado - isso vai arruinar a experiência. E eu estou com você no arrastar e soltar - yuk!

Acabei de refinar sua ideia um pouco:

alt text

  • Obviamente, cliques do mouse nos itens da esquerda os adicionarão à direita.
  • Você deseja que o filtro de texto seja do Google Style - ou seja. multi-Word, correspondência parcial. Como na entrada de pesquisa, "rce bm" corresponderia ao terceiro item mostrado no diagrama. Isso é fácil de fazer e oferece ao usuário uma maneira poderosa e intuitiva de procurar nomes. A filtragem de segunda classe (como o início da cadeia de caracteres) frustrará apenas os usuários e os impedirá de usá-los novamente. Como a filtragem é muito crítica para a interface, é melhor que funcione bem.
  • Outra maneira de economizar tempo para o usuário (como alguém sugeriu) seria ter uma lista parcialmente concluída no lado "anunciantes selecionados". Se você achava que havia uma boa chance de os anunciantes "top 10 mais usados" terem um sucesso de 70% ou mais, é melhor colocá-los na lista à direita no carregamento, certo? Na pior das hipóteses, o usuário precisa excluir um ou dois (um clique no mouse cada) dos 10 principais e os 7 itens restantes desejados os salvaram procurando por eles. Ajuste os números nesta idéia para aliviar o usuário de mais trabalho.

Lembre-se: quanto mais trabalho você pode fazer pelo usuário; Para reduzir os cliques, a aparência e a pesquisa, mais rápida, fácil e agradável será a sua interface.

34
cottsak

Eu trabalho para uma empresa que publica revistas, por isso estou um pouco familiar com o seu domínio.

Imagino que a lista de anunciantes não mude muito de um problema para outro. Por isso, os anunciantes do problema anterior são selecionados por padrão.

Como você tem apenas 150 anunciantes e cerca de metade deles será selecionada, eu não me incomodaria com uma pesquisa. Eu começaria com uma lista simples de caixas de seleção e veria como isso funciona. Verifique se os itens selecionados são visualmente distintos (por exemplo, em negrito) para facilitar a digitalização.

7
Patrick McElhaney

Meu primeiro post, por favor, seja gentil e eu farei o mesmo :-)

Embora haja algumas boas idéias aqui, acho que nenhuma delas atende aos requisitos do pôster original:

"Nosso cliente deseja que possamos criar uma maneira de adicionar 70-80 anunciantes desta lista de 150" - Kristof Claes .

Eu certamente concordo com muitas das idéias bacanas em que os usuários poderiam filtrar os resultados e adicioná-los à lista Anunciantes selecionados , ainda precisamos de uma maneira para adicionar em massa aproximadamente 70 anunciantes à seleção. Embora as idéias de filtragem sejam muito boas, isso levaria a um aplicativo como qualquer aplicativo de email em que o usuário especifique os destinatários no campo "para". Imagine ter que adicionar 70 destinatários manualmente!

Idealmente, não queremos o seguinte fluxo de trabalho:

  1. Tipo de frase para pesquisar
  2. (Os resultados aparecem)
  3. Use as teclas Enter para o item preenchido automaticamente ou selecione um ou mais itens da lista exibida
  4. Repita as etapas de 1 a 3 até que aproximadamente 70 anunciantes tenham sido adicionados

Vejo aqui algumas boas postagens de muitas pessoas que realmente conhecem o que fazem, mas acho que algumas foram um assunto fora de foco e estão um pouco focadas nas tecnologias de implementação, e não na psicologia do bom "design de interface do usuário".

Meu pensamento final para este segmento é - talvez algum tipo de mecanismo para adicionar "grupos" à seleção, pois isso certamente reduziria a repetição do mesmo fluxo de trabalho 70 vezes. Alguns softwares que eu vi selecionaram os anunciantes em uma abordagem "round robin". Certamente isso poderia ajudar algumas das seleções; além disso, você pode ter grupos predefinidos que você sempre desejará adicionar, talvez uma lista dos principais anunciantes pagadores ou anúncios de produtos "novos".

E agora, para algo ligeiramente fora de tópico ...

Matty, vejo que você mencionou Apple e, em particular, o iPhone -

... podemos aprender com o iPhone ... a chave é fazer suposições razoáveis ​​que resultam em decisões tomadas pelo usuário ...

Não tenho certeza do que você quer dizer com isso depois da nossa conversa no outro dia. Não são apenas os dispositivos de toque, talvez menos utilizáveis, mas Apple geralmente tem um histórico de criação de software que faz você se perguntar o que eles realmente pensam de sua base de usuários. Um excelente exemplo - se você deseja renomear seu dispositivo iPad, primeiro será necessário conectá-lo a um computador que possui, além disso, o software iTunes. Por que diabos eu não posso simplesmente entrar nas configurações Gerais do iPad é uma incógnita.

As melhores interfaces de usuário são do estilo - "design de interface de usuário indutivo", em oposição a - "design de interface de usuário dedutivo" ou, em outras palavras - "tentativa e erro". Os dispositivos de toque se enquadram na última categoria. Deixe-me explicar:

Se alguma coisa tocar em dispositivos popularizados por Apple como no iTouch, iPhone, e agora o iPad terá se algo jogou a usabilidade do software de volta ao Idade da Pedra das "interfaces dedutivas do usuário". Como um glifo muito mal projetado em um botão, deixando o usuário pensar - " meu Deus, o que isso significa?", olhando para a tela de um dispositivo de toque, não é imediatamente aparente que usar dois dedos permite ao usuário aumentar ou diminuir o zoom; ou o meu favorito - manter o dedo pressionado e um ícone por mais ou menos dois segundos coloca o dispositivo no "modo de exclusão".

Da mesma forma que um ícone mal projetado cai na categoria de - " Não sei o que isso significa, mas depois de usá-lo pela primeira vez, geralmente lembrarei o que ele faz ", muitos dispositivos sensíveis ao toque se enquadram na categoria de interfaces dedutivas do usuário, porque o usuário deve deduzir o que o programa pode realmente fazer" brincando com ele "reduzindo assim sua usabilidade imediata.

Mantenha o bom trabalho!

pensamentos aleatórios de MickyD

6
MickyD

A lista inteira de anunciantes deve ter uma filtragem em cima dela ( basicamente colocando o "3" em cima do "1" e o "3" afeta dinamicamente o conteúdo do "1" ):

  • Pesquisa (em tempo real restringe a lista)
  • Grupos ("Última utilização", "Moda", "Eletrônica" etc.)

Nota: se sua pesquisa for suficientemente poderosa, você poderá usar apenas um controle, portanto, procurar "moda" retornará todos os anunciantes que tenham "moda" em seu nome ou que tenham sido marcados como pertencentes à categoria "moda".
A "Última utilização" pode ser uma caixa de seleção.

Principal benefício:
Reduzir a lista rapidamente permite selecionar todos os itens relevantes juntos e movê-los.

Exemplo: você digita "eletrônicos", obtém uma lista de todos os anunciantes relacionados a eletrônicos, seleciona todos (com o mouse, ctrl + A ou qualquer outro método) e os move imediatamente para a lista correta.

4
Dan Barak

Eu tenho essa interface do usuário que pode ser relevante.
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
Poderia ser útil se os anunciantes estivessem organizados de alguma forma em categorias e o usuário soubesse em qual categoria é cada um.
É uma interface do usuário apenas com mouse, exigindo um único clique por anunciante.
Pode ser operado com o teclado, mas o menu é fechado e precisa ser expandido novamente para cada seleção. Isso pode ser corrigido não fechando o menu ao entrar.

3
Juan Lanus

Eu tenho que concordar com Micky Duncan : Eu acho que a pesquisa/agrupamento/filtragem não é de todo adequada para esta tarefa.

Você não deseja pesquisar e selecionar alguns itens de uma grande lista. Você deseja selecionar cerca de metade de todos os itens da lista. Se o usuário precisar selecionar metade dos itens, ele desejará ter certeza de que selecionou todos os candidatos e não perdeu ninguém. Portanto, o fluxo de trabalho é mais parecido com o seguinte:

Imagine que você tem a lista dos 150 anunciantes no papel. Você examinaria a lista de cima para baixo e decidiria para cada um "quero este anunciante?" e, no final, você tem certeza de ter avaliado todos eles.

Portanto, o Design deve ser assim:

Selector mockup

O foco está no item superior da lista do meio e o usuário pode usar as teclas de seta esquerda e direita para descartar o item ou colocá-lo na lista selecionada. Para que ele possa trabalhar rapidamente em toda a lista pressionando esquerda ou direita, dependendo do anunciante, ele tem certeza de que pensou em cada um deles e não perdeu nenhum.

2
Falco

Parece que sua solução é muito boa. Eu removeria a lista da esquerda, pois ela realmente não adiciona nenhuma informação (é apenas uma lista longa e será difícil dizer que algo evaporou depois de pressionar Enter) e ofereceria um campo de pesquisa com preenchimento automático ( embora deva haver uma lista suspensa nesse campo para que os usuários ainda possam ver quais opções estão disponíveis) e adicionar um grande botão "Adicionar anunciante à lista", caso seus usuários não saibam pressionar Enter.

Leve isso para o estágio de protótipo de trabalho o mais rápido possível (usando dados simulados) e, em seguida, faça uma demonstração com seu cliente e faça com que eles sejam executados. Obter o feedback o mais rápido possível é fundamental, pois eles serão os que o usam com frequência e, portanto, precisam se sentir confortáveis ​​com ele.

1
Rahul

Eu concordo com os pontos levantados por MickyD e Patrick . Tudo depende de como é feita a seleção dos anunciantes. O cliente usará a interface do usuário para selecionar os anunciantes que devem estar em um problema específico ou o cliente já possui uma lista com os anunciantes no problema específico. Não acho que a filtragem seja a melhor solução nos dois casos.

Se o cliente usa a interface do usuário para selecionar os anunciantes, deve funcionar muito melhor apresentar apenas uma lista com um estado marcado/desmarcado. Como Patrick escreveu, é uma boa idéia destacar o estado selecionado. Também é possível fazer o estado não selecionado parecer mais claro, em vez de apenas colocar o estado selecionado em negrito. O cliente move-se na lista usando a tecla para cima/tecla para baixo e marcando/desmarcando usando espaço (ou uma tecla semelhante).

Se o cliente tiver uma lista com os anunciantes aparecendo no problema específico, a primeira abordagem deve ser verificar se essa lista pode ser recebida em formato digital e importada automaticamente. Se isso não for possível, talvez a lista seja classificada de alguma forma e a interface do usuário deve classificar os anunciantes da mesma maneira.

A terceira opção é que o cliente verifique o problema pesquisando anunciantes ou tenha uma lista não classificada. Nesse caso, faz sentido ter uma função de filtro.

O ponto é que, sem conhecer o objetivo e as circunstâncias que cercam a tarefa, pode ser realmente difícil fornecer uma boa solução.

0
Robert Höglund

Eu usaria duas listas e dois botões. O usuário pode marcar elementos únicos na lista da esquerda com um clique do mouse; o clique duplo moverá o elemento para a lista da direita.

Ele pode clicar com a tecla Shift pressionada, clicar em marcar um intervalo e, com o botão [>], transferir todos os elementos marcados para a direita. Com Ctrl, um único elemento pode ser alternado do estado marcado para o não marcado e vice-versa.

Ctrl-a marcaria todos os elementos. Tudo é conhecido de outras interfaces de programa.

Os elementos alfabéticos classificados facilitariam a localização de uma entrada; o primeiro caractere poderia ser usado como uma tecla de atalho para navegar até essa entrada, se a rolagem for necessária.

> afoo                    ifoo
bfoo                      jfoo
cfoo                      kfoo
> dfoo                    lfoo
> efoo                    mfoo
> ffoo                    
gfoo
hfoo
          [ < ]    [ > ]  

{a, d, e, f} foo agora está marcado à esquerda. Com [>] o usuário os move para a direita.

Essas interfaces são bem rápidas, fáceis de usar e fáceis de entender. Talvez você possa adicionar um texto de dica de ferramenta ou nomear os botões 'mover para Lista de itens selecionados' e 'remover da Lista de itens selecionados'.

Depois de passar para outra lista, essa lista deve ser utilizada.

0
user unknown