Caixas de combinação listas suspensas & do Windows 7

Artigo
06/13/2023

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 diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

Com uma lista suspensa ou uma caixa de combinação, os usuários fazem uma escolha entre uma lista de valores mutuamente exclusivos. Os usuários podem escolher uma e apenas uma opção. Com uma lista suspensa padrão, os usuários estão limitados a opções na lista, mas com uma caixa de combinação, eles podem inserir uma opção que não esteja na lista.

captura de tela da caixa de combinação de tempo de lembrete

Uma caixa de combinação típica.

Os termos a seguir são importantes para entender ao ler este artigo:

Uma caixa de listagem padrão é uma caixa que contém uma lista de vários itens, com vários itens visíveis.
Uma lista suspensa é uma lista na qual o item selecionado está sempre visível e os outros ficam visíveis sob demanda clicando em um botão suspenso.
Uma caixa de combinação é uma combinação de uma caixa de listagem padrão ou uma lista suspensa e uma caixa de texto editável, permitindo que os usuários insiram um valor que não esteja na lista.
- Uma lista suspensa editável é uma combinação de uma lista suspensa e uma caixa de texto editável.
- Uma caixa de listagem editável é uma combinação de uma caixa de listagem padrão e uma caixa de texto editável.

Observação

As diretrizes relacionadas ao layout são apresentadas em um artigo separado.

Esse é o controle correto?

Para decidir, considere estas perguntas:

O controle é usado para escolher uma opção em 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, marcar lista de caixas, construtor de listas ou adicionar/remover lista.
As opções são comandos? Nesse caso, use um botão de menu ou um botão de divisão. Use listas suspensas e caixas de combinação para objetos (substantivos) ou atributos (adjetivos), mas não comandos (verbos).
A lista apresenta dados, em vez de opções de programa? De qualquer forma, uma lista suspensa ou uma caixa de combinação é uma opção adequada. Por outro lado, os botões de opção são adequados apenas para um pequeno número de opções de programa.

Listas suspensas

Há uma opção padrão 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? Considere usar uma lista suspensa se você não quiser incentivar os usuários a fazer alterações ocultando as alternativas. Caso contrário, considere botões de opção, uma lista de seleção única ou uma caixa de listagem editável, que dão mais ênfase às opções alternativas.

Neste exemplo, a qualidade de cor mais alta é a melhor opção para a maioria dos usuários, portanto, uma lista suspensa é uma boa opção para minimizar as alternativas.
Deseja chamar a atenção para a opção? Nesse caso, considere botões de opção, uma lista de seleção única ou uma caixa de listagem editável, que tendem a chamar mais atenção tomando mais espaço na tela. Como as listas suspensas são compactas, elas são boas opções para opções que você deseja resumir.
O espaço na tela é premium? Nesse caso, use uma lista suspensa porque o espaço na tela usado é fixo e independente do número de opções.
Há outras listas suspensas na janela? Nesse caso, considere usar uma lista suspensa para consistência.

Listas suspensas editáveis

Além dos princípios fornecidos apenas para listas suspensas, o seguinte também se aplica:

As opções possíveis são restritas? Nesse caso, use uma lista suspensa normal. As caixas de combinação são para entrada irrestrita, na qual os usuários podem precisar inserir um valor que não está atualmente na lista. Como a entrada é irrestrita, se os usuários inserirem um texto que não seja válido, você deverá lidar com o erro com uma mensagem de erro.
Você pode enumerar as opções mais prováveis com antecedência? Caso contrário, use uma caixa de texto.
A lista suspensa está sendo usada para listar a entrada de usuário anterior? A menos que os usuários precisem examinar a lista completa de entradas anteriores, use uma caixa de texto com a opção de preenchimento automático.

Neste exemplo, talvez os usuários precisem examinar suas entradas anteriores, portanto, uma lista suspensa editável é uma boa opção.

Neste exemplo, uma caixa de texto com preenchimento automático é uma boa opção.
Os usuários precisarão de assistência para selecionar valores válidos? Nesse caso, use uma caixa de texto com um botão Procurar .

Neste exemplo, os usuários podem clicar em "Para" para ajudá-los a selecionar valores válidos.
É importante incentivar os usuários a revisar as opções alternativas ou convidar a alteração? Nesse caso, considere usar uma caixa de listagem editável. Com uma lista suspensa editável, os usuários não estarão cientes das alternativas até que a lista seja descartada.
Os usuários precisam localizar um item rapidamente em uma lista grande? (Somente Win32) Nesse caso, use uma caixa de combinação porque os usuários podem selecionar um item digitando seu nome completo. Por outro lado, a lista suspensa Win32 seleciona itens baseados apenas no último caractere digitado (portanto, digitar "Jun" em uma lista de meses corresponderia a novembro, não junho). Nesse caso, use uma caixa de combinação mesmo se as opções possíveis forem restritas.

Caixas de listagem editáveis

As opções possíveis são restritas? Nesse caso, use uma lista de seleção única ou uma lista suspensa normal. As caixas de combinação são para entrada irrestrita, em que os usuários podem precisar inserir um valor que não está atualmente na lista. Como a entrada é irrestrita, se os usuários inserirem texto que não é válido, você deverá lidar com o erro com uma mensagem de erro.
Você pode enumerar as opções mais prováveis com antecedência? Caso contrário, use uma caixa de texto.
É importante incentivar os usuários a revisar as opções alternativas ou convidar a alteração? Caso contrário, considere uma lista suspensa editável.
Deseja chamar a atenção para a opção? Caso contrário, considere uma lista suspensa editável. Como as listas suspensas são compactas, elas são boas opções para opções que você deseja resumir.
O espaço na tela é premium? Nesse caso, use uma lista suspensa editável porque o espaço na tela usado é fixo e independente do número de opções.

Para listas suspensas, o número de itens na lista não é um fator na escolha do controle porque eles escalam de milhares de itens até um. As listas suspensas editáveis são dimensionadas de milhares de itens para nenhum, pois os usuários podem inserir um valor que não está na lista. Como listas suspensas podem ser usadas para dados, o número de itens pode não ser conhecido com antecedência e talvez não possa ser garantido. Sempre inclua pelo menos três itens em caixas de listagem editáveis para justificar o espaço adicional na tela.

Padrões de uso

Listas suspensas e caixas de combinação têm vários padrões de uso:

Uso	Exemplo
Lista suspensa uma lista suspensa padrão, com um conjunto fixo de valores predeterminados.	Quando fechado, somente o item selecionado fica visível. Quando os usuários clicam no botão suspenso, todas as opções ficam visíveis. Para alterar o valor, os usuários podem abrir a lista e clicar em outro valor. Neste exemplo, a lista está em seu estado normal. Neste exemplo, a lista foi descartada.
Visualizar lista suspensa uma lista suspensa que visualiza os resultados da seleção para ajudar os usuários a escolher.	Nesses exemplos, as listas suspensas visualizam os resultados da seleção.
Lista suspensa editável uma caixa de combinação suspensa, que permite que os usuários insiram um valor que não esteja na lista suspensa.	Exemplos de uma lista suspensa editável em modos de edição e lista suspensa. Use esse controle quando quiser dar a flexibilidade de uma caixa de texto, mas deseja ajudar os usuários fornecendo uma lista conveniente de opções prováveis.
A lista editável caixas de combinação regulares, que permite que os usuários insiram um valor que não está na lista sempre visível.	Nesses exemplos, as caixas de listagem editáveis são sempre exibidas. Esse controle é uma escolha melhor do que a lista suspensa editável quando é importante incentivar os usuários a revisar as opções alternativas ou convidar a alteração.

Diretrizes

Geral

Não use a alteração de uma lista suspensa ou caixa de combinação para:
- Executar comandos.
- Exiba outras janelas, como uma caixa de diálogo para coletar mais entradas.
- Exibir dinamicamente outros controles relacionados ao controle selecionado (os leitores de tela não podem detectar esses eventos).

Apresentação

Classificar itens de lista em uma ordem lógica, como agrupar opções altamente relacionadas, colocar as opções mais comuns em primeiro lugar ou usar ordem alfabética. Classificar nomes em ordem alfabética, números em ordem numérica e datas em ordem cronológica. Listas com 12 ou mais itens devem ser classificadas em ordem alfabética para facilitar a localização de itens.

Correto:

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

Incorreto:

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

Correto:

Neste exemplo, os itens de lista são classificados em ordem alfabética, exceto pela opção que representa todos os itens.
Coloque as opções que representam Todos ou Nenhum no início da lista, independentemente da ordem de classificação dos itens restantes.
Coloque meta-opções entre parênteses.

Neste exemplo, "(None)" é uma meta-opção porque não é um valor válido para a escolha, mas descreve que a opção em si não está sendo usada.
Ao desabilitar uma lista suspensa ou uma caixa de combinação, desabilite também quaisquer rótulos e botões de comando associados.

Listas suspensas

Quando uma única lista suspensa é usada para alterar a exibição de um controle associado, altere o modo de exibição imediatamente na seleção em vez de exigir um botão de comando separado. Use um botão de comando separado somente se a lista levar um tempo significativo para renderizar. No entanto, cabeçalhos de lista e botões de menu são os controles preferenciais para essa finalidade.
Em vez disso, não tenha itens de lista em branco que usem meta opções. Os usuários não sabem como interpretar itens em branco, enquanto o significado das meta opções é explícito.

Correct:

Incorreto:

No exemplo incorreto, o significado da opção em branco não está claro.

Listas suspensas de visualização

Use visualizações nos itens de lista quando for melhor mostrar com imagens do que descrever usando apenas texto.

Neste exemplo, a versão prévia explica as opções muito melhor do que apenas o texto.
Não use ícones desnecessários e inúteis em visualizações.

Incorreto:

Neste exemplo, os ícones de visualização são desnecessários porque não comunicam nenhuma informação.

Caixas de combinação

Limite o comprimento do texto de entrada quando possível. Por exemplo, se a entrada válida for um número entre 0 e 999, use uma caixa de combinação limitada a três caracteres.
Se houver muitas opções possíveis, concentre o conteúdo da lista nas opções mais prováveis. Como os usuários podem inserir valores que não estão na lista, as caixas de combinação não precisam listar todas as opções, apenas as opções prováveis ou um exemplo representativo.

Neste exemplo, muitas opções válidas não estão listadas, como fontes de 15 ou meio tamanho, como 9,5.

Valores padrão

Selecione a opção mais segura (para evitar perda de dados ou acesso do sistema) e a opção mais segura por padrão. Se a segurança e a segurança não forem fatores, selecione a opção mais provável ou conveniente.
- Exceção: Exiba um valor padrão em branco 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.

Solicitações

Um prompt é um rótulo ou uma instrução curta colocada dentro de uma lista suspensa editável como seu valor padrão. Ao contrário do texto estático, os prompts desaparecem da tela depois que os usuários digitam algo na caixa de combinação ou ele obtém o foco de entrada.

captura de tela de uma caixa de pesquisa

Um prompt típico.

Use um prompt quando:

O espaço na tela é tão premium que usar um rótulo ou instrução é indesejável, como em uma barra de ferramentas.
O prompt é principalmente para identificar a finalidade da lista de forma compacta. Não devem ser informações cruciais que os usuários precisam ver ao usar a caixa de combinação.

Não use prompts apenas para direcionar os usuários para selecionar algo na lista ou para clicar em botões. Por exemplo, prompts como Selecionar uma opção ou Inserir um nome de arquivo e clique em Enviar são desnecessários.

Ao usar prompts:

Desenhe o texto do prompt em cinza itálico e texto real em preto normal. O texto do prompt não deve ser confundido com texto real.
Mantenha o texto do prompt conciso. Você pode usar fragmentos em vez de frases completas.
Use maiúsculas no estilo de frase.
Não use pontuação final ou reticências.
O texto do prompt não deve ser editável e deve desaparecer quando os usuários clicarem ou tabem na caixa de texto.
- Exceção: O prompt será exibido se a caixa de texto tiver o foco de entrada padrão e desaparecer somente quando o usuário começar a digitar.
O texto do prompt será restaurado se a caixa de texto ainda estiver vazia quando perder o foco de entrada.

Incorreto: captura de tela de seis listas suspensas editáveis

Neste exemplo, o espaço na tela não é premium; depois que uma lista suspensa editável é preenchida, é difícil para os usuários lembrarem para que serve; e o texto do prompt é editável e desenhado da mesma maneira que o texto real.

Dimensionamento e espaçamento recomendados

captura de tela da lista suspensa e das especificações

Dimensionamento e espaçamento recomendados para listas suspensas e caixas de combinação.

Escolha uma largura apropriada para os dados válidos mais longos. As listas suspensas não podem ser roladas horizontalmente, portanto, os usuários podem ver apenas o que está visível no controle. (Observe, no entanto, que as caixas de combinação podem ter a funcionalidade de Registro Automático habilitada.)
Inclua 30% adicional (até 200% para texto mais curto) para qualquer texto (mas não números) que será localizado.
Escolha um comprimento de lista que elimine a rolagem vertical desnecessária. Como as listas suspensas são exibidas sob demanda, suas listas devem aparecer até 30 itens. As caixas de listagem editáveis (aquelas que não têm um botão suspenso) devem mostrar entre 3 e 12 itens.

Rótulos

Rótulos de controle

Escreva o rótulo como uma palavra ou frase, não como uma frase, e termine-o com dois-pontos. Exceções:
- Listas suspensas editáveis com prompts localizados onde o espaço está em um premium.
- Se uma lista suspensa ou caixa de combinação for subordinada a um botão de opção ou marcar caixa e for introduzida pelo rótulo que termina com dois-pontos, não coloque um rótulo adicional no controle.
Atribua uma chave de acesso exclusiva para cada rótulo. Para obter diretrizes, consulte Teclado.
Use maiúsculas no estilo de frase.
Posicione o rótulo à esquerda ou acima do controle e alinhe o rótulo com a borda esquerda do controle. Se o rótulo estiver à esquerda, alinhe verticalmente o texto do rótulo com o texto de controle.

Correct:

Neste exemplo, o rótulo está alinhado corretamente com o texto do controle.

Incorreto:

Neste exemplo, o rótulo está alinhado incorretamente com o texto de controle.
Você pode especificar unidades (segundos, conexões e assim por diante) entre parênteses após o rótulo.
Não torne o conteúdo da lista suspensa ou da caixa de combinação (ou seu rótulo de unidades) parte de uma frase, pois isso não é localizável.

Texto da opção

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

Texto instrucional

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

Este exemplo mostra informações adicionais colocadas abaixo do controle .

Documentação

Ao se referir a listas suspensas:

Use o texto exato do rótulo, incluindo sua capitalização, mas não inclua o sublinhado ou dois-pontos da chave de acesso; inclua a lista ou a caixa, o que for mais claro.
Para opções de lista, use o texto de opção exato, incluindo sua capitalização.
Na programação e em outras documentações técnicas, consulte listas suspensas como listas suspensas. Em qualquer outro lugar, use a lista ou a caixa, o que for mais claro.
Para descrever a interação do usuário, use clique.
Quando possível, formate as opções de rótulo e lista usando texto em negrito. Caso contrário, coloque o rótulo e as opções entre aspas somente se necessário para evitar confusão.

Exemplo: na lista Tamanho da fonte , clique em Fontes grandes.

Ao fazer referência a caixas de combinação:

Use o texto exato do rótulo, incluindo sua capitalização, mas não inclua o sublinhado ou dois-pontos da chave de acesso; inclua a caixa de palavras.
Para opções de lista, use o texto de opção exato, incluindo sua capitalização.
Na programação e em outras documentações técnicas, consulte caixas de combinação como caixas de combinação. Em qualquer outro lugar, use a caixa .
Para descrever a interação do usuário, use enter.
Quando possível, formate as opções de rótulo e lista usando texto em negrito. Caso contrário, coloque o rótulo e as opções entre aspas somente se necessário para evitar confusão.

Exemplo: na caixa Fonte , insira a fonte que você deseja usar.