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

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

Uma caixa de combinação típica.

É importante entender os seguintes termos ao ler este artigo:

• Uma caixa de lista padrão é uma caixa que contém uma lista com 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 está 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.

Esse é o controle correto?

Para decidir, considere estas perguntas:

• O controle é usado para escolher uma opção de uma lista de valores mutuamente exclusivos? Caso contrário, use outro controle. Para escolher várias opções, use uma lista padrão de seleção múltipla, uma lista de caixas de seleção, um 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 caixa de combinação é uma escolha 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

• Existe 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 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 escolha para a maioria dos usuários, portanto, uma lista suspensa é uma boa opção para minimizar as alternativas.

• Quer 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 ocupando mais espaço na tela. Como as listas suspensas são compactas, elas são boas opções para opções das quais você deseja reduzir a ênfase.

• O espaço na tela é escasso? Nesse caso, use uma lista suspensa porque o espaço da tela usado é fixo e independente do número de opções.

• Existem 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 para listas suspensas, o seguinte também se aplica:

• As escolhas 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á na lista no momento. 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 escolhas mais prováveis com antecedência? Caso contrário, use uma caixa de texto.

• A lista suspensa está sendo usada para listar a entrada anterior do usuário? A menos que os usuários precisem revisar a lista completa de entradas anteriores, use uma caixa de texto com a opção de preenchimento automático.

  

  Neste exemplo, os usuários podem precisar revisar sua entrada anterior, 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 ajuda para selecionar valores válidos? Nesse caso, use uma caixa de texto com um botão de navegação.

  

  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 uma mudança? 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 com base apenas no último caractere digitado (portanto, digitar "Jun" em uma lista de meses corresponderia a novembro, não a junho). Nesse caso, use uma caixa de combinação mesmo que as opções possíveis sejam restritas.

Caixas de listagem editáveis

• As escolhas 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, na qual os usuários podem precisar inserir um valor que não está na lista no momento. 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 escolhas 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 uma mudança? Caso contrário, considere uma lista suspensa editável.
• Quer 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 das quais você deseja reduzir a ênfase.
• O espaço na tela é escasso? Nesse caso, use uma lista suspensa editável porque o espaço da 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 são dimensionados de milhares de itens até um. As listas suspensas editáveis são dimensionadas de milhares de itens para nenhum porque os usuários podem inserir um valor que não está na lista. Como as 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

As listas suspensas e as 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, apenas 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 suspensa.
Lista suspensa de visualização 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 está na lista suspensa.	Exemplos de uma lista suspensa editável nos modos de edição e suspenso. Use esse controle quando quiser dar a flexibilidade de uma caixa de texto, mas quiser ajudar os usuários fornecendo uma lista conveniente de opções prováveis.
Caixas de listagem editáveis uma caixa de combinação regular, 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 opção melhor do que a lista suspensa editável quando é importante incentivar os usuários a examinar as opções alternativas ou convidar à alteração.

Diretrizes

Geral

• Não use a alteração de uma lista suspensa ou caixa de combinação para:
  • Executar comandos.
  • Exibir 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 os itens da lista em uma ordem lógica, como agrupar opções altamente relacionadas, colocar as opções mais comuns primeiro ou usar a 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 dos itens.

  Correto:

  Neste exemplo, os itens da 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 da lista são classificados em ordem alfabética, exceto pela opção que representa todos os itens.

• Coloque opções que representem 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, "(Nenhum)" é 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 caixa de combinação, desative também todos os rótulos e botões de comando associados.

Listas suspensas

• Quando uma única lista suspensa é usada para alterar o modo de exibição de um controle associado, altere o modo de exibição imediatamente após a 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 ser renderizada. No entanto, cabeçalhos de lista e botões de menu são os controles preferenciais para essa finalidade.

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

  Correto:

  Incorreto:

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

Listas suspensas de visualização

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

  

  Neste exemplo, a visualização explica as opções muito melhor do que apenas o texto.

• Não use ícones desnecessários e inúteis nas 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 puder. 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 uma amostra representativa.

  

  Neste exemplo, muitas opções válidas não estão listadas, como 15, ou fontes de tamanho médio, como 9.5.

Valores padrão

• Selecione a opção mais segura (para evitar perda de dados ou acesso ao sistema) e a opção mais segura por padrão. Se a segurança e a proteção 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.

Prompts

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

Um prompt típico.

Use um prompt quando:

• O espaço na tela é tão escasso que o uso de um rótulo ou instrução torna-se indesejável, como em uma barra de ferramentas.
• O objetivo do prompt é principalmente identificar o propósito da lista de forma compacta. Não deve ser uma informação crucial que os usuários precisam ver ao usar a caixa de combinação.

Não use prompts apenas para direcionar os usuários a selecionar algo da lista ou clicar em botões. Por exemplo, prompts como Selecione uma opção ou Insira 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 o texto real em preto normal. O texto do prompt não deve ser confundido com o texto real.
• Mantenha o texto do prompt conciso. Você pode usar fragmentos em vez de frases completas.
• Use capitalizaçãono 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 entrarem na caixa de texto.
  • Exceção: o prompt será exibido se a caixa de texto tiver o foco de entrada padrão e só desaparece quando o usuário começa a digitar.
• O texto do prompt será restaurado se a caixa de texto ainda estiver vazia quando perder o foco de entrada.

Incorreto:

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

Dimensionamento e espaçamento recomendados

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 rolagem automática habilitada.)
• Inclua um adicional de 30% (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 mostrar 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 na forma de palavra ou frase, não como uma sentença, e termine-o com dois pontos. Exceções:

  • Listas suspensas editáveis com prompts localizados onde o espaço é escasso.
  • Se uma lista suspensa ou caixa de combinação estiver subordinada a um botão de opção ou caixa de seleção e for introduzida por seu 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 capitalizaçãono estilo de frase.

• Posicione o rótulo à esquerda ou acima do controle e alinhe o rótulo à borda esquerda do controle. Se o rótulo estiver à esquerda, alinhe verticalmente o texto do rótulo ao texto do controle.

  Correto:

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

  Incorreto:

  Neste exemplo, o rótulo está alinhado incorretamente ao texto do controle.

• Você pode especificar unidades (segundos, conexões e assim por diante) em 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 letras maiúsculas no estilo de frase, a menos que um item seja um nome próprio.
• Escreva o rótulo como uma palavra ou frase, não como uma sentença, e não use pontuação final.
• Use frases paralelas e tente manter o comprimento aproximadamente o mesmo para todas as opções.

Texto de instrução

• Se você precisar adicionar texto de instruções sobre uma lista suspensa ou caixa de combinação, adicione-o acima do rótulo. Use frases completas com pontuação final.

• Use capitalizaçãono estilo de frase.

• Informações adicionais ú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 suas letras maiúsculas, mas não inclua o sublinhado ou dois pontos da chave de acesso. Inclua lista ou caixa, o que for mais claro.
• Para opções de lista, use o texto exato da opção, incluindo suas letras maiúsculas.
• Na programação e em outras documentações técnicas, refira-se às listas suspensas como listas suspensas. Em todos os outros lugares, use lista ou caixa, o que for mais claro.
• Para descrever a interação do usuário, use Clicar.
• 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 se referir a caixas de combinação:

• Use o texto exato do rótulo, incluindo suas letras maiúsculas, mas não inclua o sublinhado ou os dois pontos da chave de acesso. Inclua a caixa de palavras.
• Para opções de lista, use o texto exato da opção, incluindo suas letras maiúsculas.
• Na programação e em outras documentações técnicas, refira-se às caixas de combinação como caixas de combinação. Em todos os outros lugares, use 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 deseja usar.