Caixas de listagem

Com uma caixa de listagem, os usuários podem selecionar a partir de um conjunto de valores apresentados em uma lista que está sempre visível. Com uma caixa de listagem de seleção única, os usuários selecionam um item de uma lista de valores mutuamente exclusivos. Com uma caixa de listagem de seleção múltipla, os usuários selecionam zero ou mais itens de uma lista de valores.

Uma caixa de listagem típica de seleção única.

Será este o controlo correto?

Para decidir, considere estas questões:

• A lista apresenta dados, em vez de opções de programa? De qualquer forma, uma caixa de listagem é uma escolha adequada, independentemente do número de itens. Por outro lado, botões de opção ou caixas de seleção são adequados apenas para um pequeno número de opções de programa.
• Os usuários precisam alterar modos de exibição, agrupar, classificar por colunas ou alterar a largura e a ordem das colunas? Em caso afirmativo, use um de exibição de lista.
• O controle precisa ser uma fonte de arrasto ou um destino de soltar? Em caso afirmativo, use um modo de exibição de lista.
• Os itens da lista precisam ser copiados ou colados da área de transferência? Em caso afirmativo, use um modo de exibição de lista.

Listas de seleção única

• O controle é usado para escolher uma opção de uma lista de valores mutuamente exclusivos? Se não, use outro controle. Para escolher várias opções, use uma lista de seleção múltipla padrão, uma lista de caixas de seleção, um construtor de listas ou uma lista de adicionar/remover.
• Existe uma opção padrão que é recomendada para a maioria dos usuários na maioria das situações? Ver a opção selecionada é muito mais importante do que ver as alternativas? Em caso afirmativo, considere usar uma lista suspensa se não quiser incentivar os usuários a fazer alterações ocultando as alternativas.

Neste exemplo, a mais alta qualidade de cor é a melhor escolha para a maioria dos usuários, portanto, uma lista suspensa é uma boa opção para minimizar as alternativas.

• A lista requer interação constante? Em caso afirmativo, use uma lista de seleção única para simplificar a interação.

Neste exemplo, os usuários estão constantemente alterando o item selecionado na lista Exibir itens para definir as cores de primeiro plano e plano de fundo. Usar uma lista suspensa neste caso seria muito tedioso.

• O cenário parece uma quantidade relativa? Os usuários se beneficiariam do feedback instantâneo sobre o efeito das alterações de configuração? Em caso afirmativo, considere usar um controle deslizante em vez disso.
• Existe uma relação hierárquica significativa entre os itens da lista? Em caso afirmativo, use uma exibição de árvore controle.
• O espaço no ecrã é um prémio? Em caso afirmativo, use uma lista suspensa porque o espaço na tela usado é fixo e independente do número de itens da lista.

Listas padrão de seleção múltipla e listas de caixas de seleção

• A seleção múltipla é essencial para a tarefa ou comumente usada? Em caso afirmativo, use uma lista de caixas de seleção para tornar a seleção múltipla óbvia, especialmente se os usuários-alvo não forem avançados. Muitos usuários não perceberão que uma lista padrão de seleção múltipla suporta seleção múltipla. Use uma lista de seleção múltipla padrão se as caixas de seleção chamarem muita atenção para a seleção múltipla ou resultarem em muita confusão na tela.
• A estabilidade da seleção múltipla é importante? Em caso afirmativo, use uma lista de caixas de seleção, um construtor de listas ou uma lista de adicionar/remover porque clicar altera apenas um único item de cada vez. Com uma lista de seleção múltipla padrão, é muito fácil limpar todas as seleções, mesmo por acidente.
• O controle é usado para escolher zero ou mais itens de uma lista de valores? Se não, use outro controle. Para escolher um item, use uma lista de seleção única.

Listas de pré-visualização

• As opções são mais fáceis de selecionar apenas com imagens do que apenas com texto? Em caso afirmativo, utilize uma lista de pré-visualização.

Construtores de listas e adicionar/remover listas

• O controle é usado para escolher zero ou mais itens de uma lista de valores? Se não, use outro controle. Para escolher um item, use uma lista de seleção única.
• A ordem dos itens selecionados é importante? Em caso afirmativo, o construtor de listas e adicionar/remover padrões de lista suportam a ordem, enquanto os outros padrões de seleção múltipla não.
• É importante que os usuários vejam um resumo de todos os itens selecionados? Em caso afirmativo, o construtor de listas e os padrões de adicionar/remover lista exibem apenas os itens selecionados, enquanto os outros padrões de seleção múltipla não.
• As escolhas possíveis são irrestritas? Em caso afirmativo, use uma lista de adicionar/remover para que os usuários possam escolher valores que não estão atualmente na lista.
• Adicionar um valor à lista requer uma caixa de diálogo especializada para escolher objetos? Em caso afirmativo, use uma lista de adicionar/remover e exibir a caixa de diálogo quando os usuários clicarem em Adicionar.
• O espaço no ecrã é um prémio? Em caso afirmativo, use uma lista de adicionar/remover em vez disso, porque ela usa menos espaço na tela, nem sempre mostrando o conjunto de opções.

Para caixas de listagem, o número de itens na lista não é um fator na escolha do de controle porque eles podem ser dimensionados de milhares de itens até um para listas de seleção única (e nenhum para listas de seleção múltipla). Como as caixas de listagem podem ser usadas para dados, o número de itens pode não ser conhecido antecipadamente.

Nota: Às vezes, um controle que se parece com uma caixa de listagem é implementado usando um modo de exibição de lista e vice-versa. Nesses casos, aplique as diretrizes com base no uso, não na implementação.

Padrões de utilização

As caixas de listagem têm vários padrões de uso:

Rótulo	Valor
Listas de seleção única Permitir que os usuários selecionem um item de cada vez.	Neste exemplo, os usuários podem selecionar apenas um item de exibição.
Listas padrão de seleção múltipla Permitir que os usuários selecionem qualquer número de itens, incluindo nenhum.	As listas de seleção múltipla padrão têm exatamente a mesma aparência que as listas de seleção única, portanto, não há nenhuma pista visual de que uma caixa de listagem suporta seleção múltipla. Como os usuários precisam descobrir essa capacidade, esse padrão de lista é melhor usado para tarefas em que a seleção múltipla não é essencial e raramente é usada. Existem dois modos diferentes de seleção múltipla: múltipla e estendida. modo de seleção estendido é de longe o mais comum, onde a seleção pode ser estendida arrastando ou com Shift+clique e Ctrl+clique para selecionar grupos de valores contíguos e não adjacentes, respectivamente. No modo seleção múltipla, clicar em qualquer item alterna seu estado de seleção, independentemente das teclas Shift e Ctrl. Dado esse comportamento incomum, o modo de seleção múltipla foi preterido e você deve usar listas de caixas de seleção. Neste exemplo, os usuários podem selecionar qualquer número de itens usando o modo de seleção múltipla.
Listas de caixas de seleção Como caixas de listagem padrão de seleção múltipla, as listas de caixas de seleção permitem que os usuários selecionem qualquer número de itens, incluindo nenhum.	Ao contrário das listas de seleção múltipla padrão, as caixas de seleção indicam claramente que a seleção múltipla é possível. Use este padrão de lista para tarefas em que a seleção múltipla é essencial ou comumente usada. Neste exemplo, os usuários normalmente selecionam mais de um item para que uma lista de caixas de seleção seja usada. Dada essa indicação clara de seleção múltipla, você pode supor que as listas de caixas de seleção são preferíveis às listas de seleção múltipla padrão. Na prática, poucas tarefas exigem seleção múltipla ou utilizam-na pesadamente; Usar uma lista de caixas de seleção nesses casos chama muita atenção para a seleção. Consequentemente, listas padrão de seleção múltipla são muito mais comuns.
Listas de visualização Pode ser uma ou várias seleções, mas elas mostram uma visualização do efeito da seleção em vez de apenas texto.	Neste exemplo, uma visualização de cada opção mostra claramente o efeito da escolha, que é mais eficaz do que usar apenas texto.
Construtores de listas Permitir que os usuários criem uma lista de opções adicionando um item de cada vez e, opcionalmente, definindo a ordem da lista.	Um construtor de listas consiste em duas listas de seleção única: a lista à esquerda é um conjunto fixo de opções e a lista à direita é a lista que está sendo construída. Existem dois botões de comando entre as listas: Um botão Adicionar que move a opção atualmente selecionada para a lista que está sendo criada, inserida antes do item selecionado. (Clicar duas vezes em um item de opção tem o mesmo efeito.) Um botão Remover que remove o item selecionado da lista criada e o retorna à lista de opções. (Clicar duas vezes em um item na lista construída tem o mesmo efeito.) Opcionalmente, a lista construída pode ter comandos Mover para cima e Mover para baixo para ordenar os itens da lista. Neste exemplo, um construtor de listas é usado para criar uma barra de ferramentas selecionando itens de um conjunto de opções disponíveis e definindo sua ordem.
Adicionar/remover listas Permitir que os usuários criem uma lista de opções adicionando um ou mais itens de cada vez e, opcionalmente, definindo a ordem da lista (como construtores de listas).	Ao contrário de um construtor de listas, clicar em Adicionar exibe uma caixa de diálogo para selecionar os itens a serem adicionados à lista. O uso de uma caixa de diálogo separada permite uma flexibilidade significativa na escolha de itens, você pode usar um seletor de objetos especializado ou até mesmo uma caixa de diálogo comum. Em comparação com o construtor de listas, esta variação é mais compacta, mas requer um pouco mais de esforço para adicionar itens. Neste exemplo, os usuários podem adicionar ou remover ferramentas de um menu, bem como definir a ordem. Embora o construtor de listas e os padrões de adicionar/remover listas sejam significativamente mais pesados do que as outras listas de seleção múltipla, eles oferecem duas vantagens exclusivas: Os usuários têm controle sobre a ordem da lista, tanto durante a construção da lista quanto depois. Os usuários podem revisar um resumo dos itens selecionados, o que pode ser um benefício significativo se o número de opções for grande. Suas desvantagens são que eles exigem muito mais espaço na tela e podem ser difíceis de usar ao criar uma grande lista de itens do zero. Consequentemente, eles são melhor usados para criar listas curtas ou modificar listas que já existem.

Orientações

Apresentação

• Classifique os itens da lista em uma ordem lógica, como agrupar opções relacionadas, colocar os itens usados com mais freqüência primeiro ou usar ordem alfabética. Classifique nomes em ordem alfabética, números em ordem numérica e datas em ordem cronológica. As listas com 12 ou mais itens devem ser ordenadas alfabeticamente para facilitar a localização dos itens.

Correto:

Neste exemplo, os itens da caixa de listagem são classificados por sua relação espacial.

Incorreto:

Neste exemplo, há tantos itens de lista que eles devem ser classificados em ordem alfabética.

Correto:

Neste exemplo, os itens da lista são mais fáceis de encontrar porque são classificados em ordem alfabética. No entanto, o item "Todos os produtos Windows" está no início da lista, independentemente de sua ordem de classificação.

• Coloque as opções que representam Tudo ou Nenhum no início da lista, independentemente da ordem de classificação dos itens restantes.
• Coloque meta-opções entre parênteses.

selecionada

Neste exemplo, "(nenhum)" é uma meta-opção porque não é um valor válido para a escolha, mas indica que a opção em si não está sendo usada.

• Não tenha itens de lista em branco, use metaopções. Os usuários não sabem como interpretar itens em branco, enquanto o significado de meta-opções é explícito.

Incorreto: selecionado em branco

Neste exemplo, o significado do item em branco não é claro.

Correto: selecionada

Neste exemplo, a meta-opção "(nenhuma)" é usada em vez disso.

Interação

• Considere fornecer o comportamento de clique duplo. Clicar duas vezes deve ter o mesmo efeito que selecionar um item e executar seu comando padrão.
• Torne redundante o comportamento de clique duplo. Deve haver sempre um botão de comando ou um comando de menu de contexto que tenha o mesmo efeito.
• Se os usuários não puderem fazer nada com os itens selecionados, não permita a seleção.

Correto:

Esta caixa de listagem exibe uma lista somente leitura de alterações; não há necessidade de seleção.

• Ao desativar uma caixa de listagem, desative também todos os rótulos e botões de comando associados.
• Não use a alteração do item selecionado em uma caixa de listagem para:
  • Execute comandos.
  • Exiba outras janelas, como uma caixa de diálogo para coletar mais entradas.
  • Exiba dinamicamente outros controles relacionados ao controle selecionado (os leitores de tela não podem detetar tais eventos). Exceção: Você pode alterar dinamicamente o texto estático usado para descrever o item selecionado.

Aceitável:

Neste exemplo, alterar o item selecionado altera a descrição.

• Evite a rolagem horizontal. As listas de várias colunas dependem da rolagem horizontal, que geralmente é mais difícil de usar do que a rolagem vertical. Listas de várias colunas que exigem rolagem horizontal podem ser usadas quando você tem muitos itens classificados alfabeticamente e espaço de tela suficiente para um controle amplo.

Aceitável:

Neste exemplo, várias colunas que exigem rolagem horizontal são usadas porque há muitos itens e muito espaço disponível na tela para um controle amplo.

Listas de seleção múltipla

• Considere exibir o número de itens selecionados abaixo da lista, especialmente se os usuários provavelmente selecionarem vários itens. Esta informação não só fornece feedback útil, mas também indica claramente que a caixa de listagem suporta seleção múltipla.

Neste exemplo, o número de itens selecionados é exibido abaixo da lista.

• Você pode fornecer outras métricas de seleção que podem ser mais significativas, como os recursos necessários para as seleções.

Neste exemplo, o espaço em disco necessário para instalar os componentes é mais significativo do que o número de itens selecionados.

• Se houver potencialmente muitos itens de lista e selecionar ou limpar todos eles for provável, adicione Selecionar todos e Limpar todos os botões de comando.
• Para listas de seleção múltipla padrão, não use o modo de seleção múltipla porque esse modo de seleção foi preterido. Para comportamento equivalente, use uma lista de caixas de seleção.

Valores padrão

• Selecione a opção mais segura (para evitar a perda de dados ou acesso ao sistema) e mais segura por padrão. Se a segurança não for um fator, selecione a opção mais provável ou conveniente.

Exceção: Não selecione nenhum item se o controle representar uma propriedade em um estado misto , o que acontece ao exibir uma propriedade para vários objetos que não têm a mesma configuração.

Dimensionamento e espaçamento recomendados

Dimensionamento e espaçamento recomendados para caixas de listagem.

• Escolha uma largura de caixa de listagem apropriada para os dados válidos mais longos. As caixas de listagem padrão não podem ser roladas horizontalmente, para que os usuários possam ver apenas o que é visível no controle.
• Inclua um adicional de 30% (até 200% para texto mais curto) para qualquer texto (mas não números) que será localizado.
• Escolha uma altura de caixa de listagem que exiba um número integral de itens. Evite truncar itens verticalmente.
• Escolha uma altura de caixa de listagem que elimine a rolagem vertical desnecessária. As caixas de listagem devem exibir entre 3 e 20 itens sem a necessidade de rolagem. Considere tornar uma caixa de listagem um pouco mais longa se isso eliminar a barra de rolagem vertical. Listas com potencialmente muitos itens devem exibir pelo menos cinco itens para facilitar a rolagem, mostrando mais itens de cada vez e tornando a barra de rolagem mais fácil de posicionar.
• Se os usuários se beneficiarem de aumentar a caixa de listagem, torne a caixa de listagem e sua janela pai redimensionáveis. Isso permite que os usuários ajustem o tamanho da caixa de listagem conforme necessário. No entanto, as caixas de listagem redimensionáveis devem exibir pelo menos três itens.

Rótulos

Etiquetas de controlo

• Todas as caixas de listagem precisam de rótulos. Escreva o rótulo como uma palavra ou frase, não como uma frase; Utilize dois pontos no final do rótulo.

Exceção: Omita o rótulo se ele for apenas uma reafirmação da instrução principal de uma caixa de diálogo . Neste caso, a instrução principal leva os dois pontos (a menos que seja uma pergunta) e a chave de acesso.

Aceitável:

Neste exemplo, o rótulo da caixa de listagem apenas reafirma a instrução principal.

Melhor:

Neste exemplo, o rótulo redundante é removido, portanto, a instrução principal usa os dois pontos e a chave de acesso.

• Se uma caixa de listagem estiver subordinada a um botão de opção ou caixa de seleção e for introduzida pelo rótulo desse controle terminando com dois pontos, não coloque um rótulo adicional no controle de caixa de listagem.

Neste exemplo, a caixa de listagem está subordinada a um botão de opção e compartilha seu rótulo.

• Atribua uma chave de acesso exclusiva. Para obter diretrizes, consulte Keyboard.
• Use de maiúsculas no estilo de frase.
• Posicione o rótulo à esquerda ou acima do controle e alinhe-o com a borda esquerda do controle.
  • Se o rótulo estiver à esquerda, alinhe verticalmente o texto do rótulo com a primeira linha de texto no controle.

Correto:

Nesses exemplos, o rótulo na parte superior se alinha com a borda esquerda da caixa de listagem e o rótulo à esquerda se alinha com o texto na caixa de listagem.

Incorreto:

Nesses exemplos incorretos, o rótulo na parte superior se alinha com o texto na caixa de listagem e o rótulo à esquerda se alinha com a parte superior da caixa de listagem.

• Para caixas de listagem de seleção múltipla, use um rótulo que indique claramente que a seleção múltipla é possível. Os rótulos da lista de caixas de seleção podem ser menos explícitos.

Correto:

Neste exemplo, o rótulo indica claramente que a seleção múltipla é possível.

Incorreto:

Neste exemplo, o rótulo não fornece informações óbvias sobre seleção múltipla.

Melhor:

Neste exemplo, as caixas de seleção indicam claramente que a seleção múltipla é possível, portanto, o rótulo não precisa ser explícito.

• Você pode especificar unidades (segundos, conexões e assim por diante) entre parênteses após o rótulo.

Texto da opção

• Atribua um nome exclusivo a cada opção.
• Use de maiúsculas no estilo de frase, a menos que um item seja um substantivo próprio.
• Escreva o rótulo como uma palavra ou frase, não como uma frase, e não use pontuação final.
• Use frases paralelas e tente manter o comprimento aproximadamente o mesmo para todas as opções.

Texto instrucional e suplementar

• Se você precisar adicionar texto instrutivo sobre uma caixa de listagem, adicione-o acima do rótulo. Use frases completas com pontuação final.
• Use de maiúsculas no estilo de frase.
• As informações adicionais que são úteis, mas não necessárias, devem ser mantidas curtas. Coloque este texto entre parênteses entre o rótulo e os dois pontos ou sem parênteses abaixo do controle.

Neste exemplo, o texto suplementar é colocado abaixo da lista.

Documentação

Ao referir-se a caixas de listagem:

• Use o texto exato do rótulo, incluindo sua maiúscula, mas não inclua o sublinhado da chave de acesso ou dois pontos. Inclua a lista de palavras. Não se refira a uma caixa de listagem como uma caixa de listagem ou um campo.
• Para itens de lista, use o texto exato do item, incluindo sua maiúscula.
• Em programação e outra documentação técnica, consulte as caixas de listagem como caixas de listagem. Em qualquer outro lugar, use a lista.
• Para descrever a interação do usuário, use select.
• Sempre que possível, formate o rótulo e os itens da lista usando texto em negrito. Caso contrário, coloque o rótulo e os itens entre aspas apenas se necessário para evitar confusão.

Exemplo: Na lista Ir para o que, selecione Marcador.