Listas suspensas & Windows 7 Caixas de combinação

Observação

Este guia de design foi criado para 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 está na lista.

screen shot of reminder time combo box

Uma caixa de combinação típica.

Os seguintes termos 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 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.

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 padrão de várias seleções, uma lista de caixas de seleção, um construtor de listas ou uma lista de adição/remoção.
  • As opções são comandos? Nesse caso, use um botão de menu ou botão dividir. 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 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 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.

    screen shot of highest quality as default button

    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? 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 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 de 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á 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 opções mais prováveis com antecedência? Caso contrário, use uma caixa de texto.

  • A lista suspensa está sendo usada para listar entradas anteriores do usuário? 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.

    screen shot of run dialog box with drop-down list

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

    screen shot of outlook to line and auto-complete

    Neste exemplo, uma caixa de texto com preenchimento automático é uma boa opção.

  • Os usuários precisarão de assistência na seleção de valores válidos? Nesse caso, use uma caixa de texto com um botão Procurar .

    screen shot of outlook to line and browse button

    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 do Win32 seleciona itens baseados apenas pelo ú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 entradas não restritas, 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 de 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, 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 de tela adicional.

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.
screen shot of drop-down list, options hidden
Neste exemplo, a lista está em seu estado normal.
screen shot of drop-down list, options displayed
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.
screen shot of color and text options
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.
aa511458.dropdownlists27(en-us,msdn.10).pngscreen shot of editable font-size combo box
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 quiser ajudar os usuários fornecendo uma lista conveniente de opções prováveis.
As caixas de listagem editáveis são uma caixa de combinação regular, que permite que os usuários insiram um valor que não esteja na lista sempre visível.
screen shot of drop-down list of font options
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

  • Classifique 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 dos itens.

    Correto:screen shot of logical drop-down list

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

    Incorreto:screen shot of disorganized drop-down list

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

    Correto:screen shot of alphabetized drop-down list

    Neste exemplo, os itens de lista são classificados em ordem alfabética, exceto pela opção que representa todos os itens.

  • Coloque opções que representam Todos ou Nenhum no início da lista, independentemente da ordem de classificação dos itens restantes.

  • Incluir meta-opções em parênteses.

    Screenshot that shows a drop-down list with '(None)' selected.

    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, também desabilite os rótulos e botões de comando associados.

  • Quando uma lista suspensa única é 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 período significativo de tempo para ser renderizada. No entanto, cabeçalhos de lista e botões de menu são os controles preferenciais para essa finalidade.

  • Em vez disso, não tenhameta-opções de uso de itens de lista em branco. Os usuários não sabem como interpretar itens em branco, enquanto o significado das meta opções é explícito.

    Correto:screen shot of drop-down list with none selected

    Incorreto:screen shot of drop-down list with blank selected

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

Visualizar listas suspensas

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

    screen shot of drop-down list of fonts previewed

    Neste exemplo, a versão prévia explica as opções muito melhores do que o texto sozinho.

  • Não use ícones desnecessários e inúteis em visualizações.

    Incorreto:screen shot of drop-down list of labels with icons

    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 um exemplo representativo.

    screen shot of drop-down list of font sizes

    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 ao sistema) e a opção mais segura por padrão. Se segurança e 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 quando os usuários digitam algo na caixa de combinação ou ele recebe o foco de entrada.

screen shot of a search box

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 a capitalização 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 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:screen shot of six editable drop-down lists

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

screen shot of drop-down list and specifications

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% adicionais (até 200% para texto mais curto) para qualquer texto (mas não números) que serão localizados.
  • 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

Controlar rótulos

  • 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 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 a capitalização 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.

    Correto:screen shot of drop-down list label alignment

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

    Incorreto:screen shot of drop-down list incorrectly aligned

    Neste exemplo, o rótulo está alinhado incorretamente com o texto de controle.

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

  • Não faça do conteúdo da lista suspensa ou da caixa de combinação (ou do 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 a capitalização 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 instrutivo

  • Se você precisar adicionar um texto instrutivo sobre uma lista suspensa ou uma 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 úteis, mas não necessárias, devem ser mantidas em breve. Coloque essas informações entre parênteses entre o rótulo e dois-pontos ou sem parênteses abaixo do controle.

    screen shot of drop-down list with added data

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

Documentação

Ao fazer referência 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 da opção exata, 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 o 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 de tamanhos de 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 da opção exata, 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.