Listas suspensas & caixas de combinação do Windows 7

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 lista suspensa ou 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 são limitados a 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.

Os seguintes termos são importantes para entender enquanto você lê 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 são 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.

Observação

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

Será este o controlo correto?

Para decidir, considere estas questões:

• 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 , lista de caixas de seleção, construtor de listas ou adicionar/remover lista.
• As opções são comandos? Em caso afirmativo, use um botão de menu ou 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, 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 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? 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 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.

• Quer chamar a atenção para a opção? Em caso afirmativo, 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 que você deseja enfatizar.

• 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 opções.

• Existem outras listas suspensas na janela? Em caso afirmativo, considere usar uma lista suspensa para obter consistência.

Listas suspensas editáveis

Para além dos princípios que acabam de ser fornecidos para as listas pendentes, aplicam-se também os seguintes princípios:

• As escolhas possíveis são limitadas? Em caso afirmativo, use uma lista suspensa normal. As caixas de combinação são para entrada sem restrições, nas quais os usuários podem precisar inserir um valor que não está atualmente na lista. Como a entrada não tem restrições, se os usuários inserirem texto que não é válido, você deverá manipular 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 suas entradas anteriores, portanto, uma lista suspensa editável é uma boa escolha.

  

  Neste exemplo, uma caixa de texto com preenchimento automático é uma boa escolha.

• Os usuários precisarão de ajuda para selecionar valores válidos? Em caso afirmativo, use uma caixa de texto com um botão Procurar em vez disso.

  

  Neste exemplo, os usuários podem clicar em "Para" para ajudá-los a selecionar valores válidos.

• É importante incentivar os utilizadores a rever as opções alternativas ou a convidar à mudança? Em caso afirmativo, 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? (Apenas Win32) Em caso afirmativo, use uma caixa de combinação porque os usuários podem selecionar um item digitando seu nome completo. Por outro lado, a lista suspensa do 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). Neste caso, use uma caixa de combinação mesmo que as escolhas possíveis sejam restritas.

Caixas de listagem editáveis

• As escolhas possíveis são limitadas? Em caso afirmativo, use uma lista de seleção única ou uma lista suspensa normal. As caixas de combinação são para entrada sem restrições, onde os usuários podem precisar inserir um valor que não está atualmente na lista. Como a entrada não é restrita, se os usuários inserirem texto que não é válido, você deve manipular 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 utilizadores a rever as opções alternativas ou a convidar à 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 que você deseja enfatizar.
• O espaço no ecrã é um prémio? Em caso afirmativo, 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 de controle porque eles podem ser dimensionados de milhares de itens até um. As listas suspensas editáveis podem ser 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 de tela adicional.

Padrões de utilização

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

Utilização	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 Visualizar 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 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 aos usuários inserir 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 alterações.

Orientações

Geral

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

Apresentação

• Classifique os itens da lista em uma ordem lógica, como agrupar opções altamente relacionadas, colocar as opções mais comuns em primeiro lugar ou usar a 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 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 para a opção que representa todos os itens.

• 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.

  

  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 desativar uma lista suspensa ou uma 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 a exibição de um controle associado, alterar a 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 ser renderizada. No entanto, cabeçalhos de lista e botões de menu são os controles preferidos para essa finalidade.

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

  Correto: selecionada

  Incorreto: selecionado em branco

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

Pré-visualizar listas pendentes

• 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 são listadas, como 15, ou fontes de tamanho médio, como 9.5.

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: Exibir 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.

Avisos

Um prompt é um rótulo ou 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 quando os usuários digitam algo na caixa de combinação ou recebe o foco de entrada.

Um prompt típico.

Use um prompt quando:

• O espaço na tela é tão grande 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 deve ser uma informação crucial que os utilizadores precisam de ver enquanto utilizam 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 Digite um nome de arquivo e clique em Enviar são desnecessários.

Ao usar prompts:

• Desenhe o texto do prompt em itálico, cinza e texto real em preto normal. O texto imediato 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 de 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 assim que os usuários clicarem ou entrarem na caixa de texto.
  • Exceção: O prompt é exibido se a caixa de texto tiver 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 é um prêmio; Uma vez que uma lista suspensa editável é preenchida, é difícil para os usuários se lembrarem para que ela serve; e o texto 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, para que os usuários possam ver apenas o que está visível no controle. (Observe, no entanto, que as caixas de combinação podem ter a funcionalidade AutoScroll ativada.)
• 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

Etiquetas de controlo

• 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 é 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 terminando com dois pontos, não coloque um rótulo adicional no controle.

• Atribua um de chave de acesso exclusivo para cada rótulo. 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 o texto do controle.

  Correto:

  Neste exemplo, o rótulo está alinhado corretamente com o texto de 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, porque isso não é localizável.

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

• Se você precisar adicionar texto instrutivo sobre uma lista suspensa ou caixa de combinação, 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 esta informação entre parênteses entre o rótulo e os dois pontos ou sem parênteses abaixo do controlo.

  

  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 maiúscula, mas não inclua o sublinhado da chave de acesso ou dois pontos; incluir uma lista ou uma caixa, consoante o que for mais claro.
• Para opções de lista, use o texto exato da opção, incluindo sua maiúscula.
• Em programação e outra documentação técnica, consulte listas suspensas como listas suspensas. Em qualquer outro lugar, use uma lista ou caixa, o que for mais claro.
• Para descrever a interação do usuário, use click.
• Sempre que 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 apenas se necessário para evitar confusões.

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

Quando se refere a caixas de combinação:

• 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 caixa de palavras.
• Para opções de lista, use o texto exato da opção, incluindo sua maiúscula.
• Em programação e outra documentação técnica, consulte as caixas de combinação como caixas de combinação. Em todos os outros lugares, use a caixa.
• Para descrever a interação do usuário, use enter.
• Sempre que 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 apenas se necessário para evitar confusões.

Exemplo: Na caixa Tipo de Letra, introduza o tipo de letra que pretende utilizar.