Caixas de listagem
Observação
Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das orientações ainda se aplica em princípio, mas a apresentação e os exemplos não refletem as nossas orientações de conceção atuais .
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.
Observação
As diretrizes relacionadas à de layout de e exibições de lista são apresentadas em artigos separados.
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:
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.