Deixar claro quais itens de uma lista longa são selecionados
Estou tentando criar uma parte de uma interface da web que permita aos usuários marcar itens e exibir todos os itens com uma tag ou conjunto de tags - pense no gmail, se o gmail permitir que você facilmente selecione várias tags para exibir todas as mensagens com todos dessas tags. Qual é a melhor maneira de mostrar ao usuário qual conjunto de tags ele está visualizando atualmente?
O realce simples funciona para uma tag, mas se a lista de tags for maior que a tela, eles não poderão vê-los todos de uma vez, fazendo com que não fique claro quais tags o usuário selecionou. Além disso, tenho uma pequena quantidade de espaço para trabalhar - toda a interface de tags e itens tem cerca de 300 x 500 pixels, portanto, exibir tags selecionadas em uma longa lista horizontal não é uma opção.
Eu estava pensando em criar uma lista secundária no topo da lista de tags com as tags selecionadas (mais ou menos como essas listas suspensas que enfatizaram os EUA e outros países ), mas estou me perguntando se existe uma alternativa melhor.
Use o padrão de navegação facetada . A Amazon.com faz um ótimo trabalho:
(captura de tela destes resultados de pesquisa para Nintendo DS - observe que você pode manter o seu mais curto se tiver uma restrição vertical)
Algumas coisas de nota:
- Comunicação muito clara sobre qual é o item atualmente selecionado em cada faceta (neste caso, negrito x azul em links)
- Grande legibilidade ao não tornar cada item um hiperlink, mesmo que todos sejam hiperlinks - nesse caso, é mais útil priorizar a legibilidade sobre o padrão de sublinhado do hiperlink
- Cada faceta exibe quantos resultados estão disponíveis se você clicar neles. Às vezes, é complicado de implementar, dependendo do back-end da pesquisa.
- Os controles certos, dependendo do tipo de faceta com que você está lidando, além de ótimos direitos autorais e palavras corretas ("Últimos 30 dias" para datas, pois você não se importa com datas específicas nesse caso, etc.)
- A capacidade de subir um nível com cada faceta, essencialmente "desfazendo" sua seleção nessa faceta. Observe o uso do
<em oposição a uma cruz vermelha(x)como muitos outros sites têm. - Combine isso com o padrão de navegação da trilha de navegação, como a Amazon fez para obter uma dimensão extra de utilidade no caso de as pessoas estarem digitalizando de cima para baixo e sem olhar na coluna esquerda/direita
Não se preocupe muito em não conseguir ver todas as coisas selecionadas, se muitas forem selecionadas - é uma armadilha de navegação facetada comum em que cair. Os usuários perceberão que existem mais opções selecionadas mais abaixo na página, se tiverem feito muitas seleções (imagine selecionar uma de cada faceta no exemplo da Amazon). Para compensar um pouco as coisas, você pode agrupar as facetas selecionadas na parte superior, como o @onnodb sugere, embora eu não as oculte por trás de um clique (como em um controle select).
Eu diria que faz todo sentido criar essa 'lista secundária' de tags selecionadas no topo da lista, da seguinte forma: (ótima idéia, btw)
Selected tag 1 (X)
Selected tag 2 (X)
Selected tag 3 (X)
-------------------
Tag 4
Tag 5
Tag 6
Dê às tags selecionadas uma cor de fundo diferente, adicione um botão "(X)" para removê-las e eu diria que você tem uma interface muito útil para isso.
Como você tem um espaço limitado para trabalhar, você pode implementar o seguinte. Coloque a lista de tags em uma lista suspensa e tenha um botão de adição que adiciona outra linha com uma lista suspensa de tags. Dessa forma, as únicas tags exibidas são as que o usuário selecionou.
Eu sei que é uma pergunta bastante antiga, mas ainda permanece válida para a aplicação atual na minha opinião.
Para obter a resposta, eu me inspirei na barra de rolagem vertical do Visual Studio:
- a altura do controle deslizante corresponde ao tamanho da área da tela em comparação com o comprimento total do conteúdo
- fina linha horizontal azul mostra onde o cursor está colocado
- barras amarelas escuras marcam as linhas onde o termo de pesquisa foi encontrado
Para a pergunta do OP - se você tiver uma lista de itens que exceda a capacidade da tela, use o controle deslizante. Você pode usar o controle deslizante para mostrar onde os itens selecionados estão na lista.
Apenas fora do topo da minha cabeça...
Opção 1: modifique o atributo 'title' para mostrar os itens selecionados ao passar o mouse. Opção 2: use jquery para adicionar um evento de foco à lista que atravessa o elemento e lista os itens selecionados.
Bem, existem algumas maneiras de fazer isso:
1) Como você mencionou, você pode destacar as tags que estão selecionadas, mantendo a ordem delas na lista. Para superar o problema de os usuários não saberem que as tags selecionadas não são exibidas na página, você pode fazer algo para chamar a atenção delas - algo como setas piscando na parte inferior da seção de tags da página para informá-las de que há algo importante se eles rolam para baixo
=Tag1= Tag2 Tag3 vvvv -----------------------Screen End Tag4 =Tag5=
A marca == tags destacadas e vv são as setas piscantes
2) Além disso, você pode fazer essa lista adicional na parte superior, mas remova as tags do original, para ter sempre uma altura consistente na seção de tags
3) Você pode exibir as tags selecionadas como uma lista vertical sob o cabeçalho dos resultados da pesquisa.
Tag Section | Search Results: | xTags1 xTag2 xTag3 | | [Search Results Go Here]
Observe os pequenos xs ao lado de cada nome de tag; isso permitirá que o usuário remova rapidamente as tags e os resultados devem mudar de acordo.
Eu preferiria as opções 2 ou 3. 3 Pode ser melhor, porque os usuários podem ficar um pouco surpresos com o fato de a lista de tags estar mudando de ordem, à medida que continuam selecionando as tags.