Diretrizes para listas suspensas

Artigo
07/22/2015

Uma lista suspensa permite que os usuários façam uma escolha entre uma lista de valores. Uma lista suspensa é uma lista na qual o item selecionado está sempre visível, e os outros ficam visíveis por demanda, clicando em um botão suspenso. Em HTML, uma lista suspensa é conhecida como um controle selecionado em modo de submenu. Em XAML, uma lista suspensa é conhecida como uma caixa de combinação. Com uma lista suspensa, os usuários podem escolher somente uma opção.

Você também pode criar uma lista que exibe todos os itens sem nenhuma interação adicional. Ele é compatível com a seleção única e múltipla. Em HTML, esse tipo de lista suspensa é conhecido como um controle selecionado em modo embutido. Em XAML, essa lista é conhecida como uma caixa de listagem. Para obter mais informações, consulte Diretrizes para caixas de listagem (ou de seleção).

Uma amostra da aparência do controle de lista suspensa padrão

Exemplos

Eis aqui um exemplo de uma lista suspensa. Os itens presentes na lista só estão visíveis quando o usuário seleciona o botão suspenso.

Uma screenshot do aplicativo Receitas e Bebidas do Bing, que ilustra o controle de lista suspensa padrão

Eis aqui um exemplo de uma caixa de listagem em que todos os itens da lista estão sempre visíveis.

Este é o controle correto?

Use um controle de lista suspensa para permitir aos usuários selecionar um ou mais valores de um conjunto de itens que podem ser representados adequadamente usando linhas de texto únicas.

Não use esses controles para mostrar itens com várias linhas de texto ou imagens. Utilize em vez disso uma exibição de lista ou exibição de grade.

Quando houver menos de oito itens, considere a possibilidade de usar, em vez disso, botões de opção (se somente um item puder ser selecionado) ou caixas de seleção (se vários itens puderem ser selecionados).

Use uma lista suspensa quando os itens de seleção forem de importância secundária no fluxo do seu aplicativo. Se a opção padrão for recomendada para a maioria dos usuários em grande parte das situações, mostrar todos os itens usando uma caixa de listagem pode chamar mais atenção para as opções do que o necessário. Você pode economizar espaço e minimizar a distração usando uma lista suspensa.

Recomendações

Limite o conteúdo de texto do item de lista suspensa a uma única linha.
Classifique os itens de uma lista suspensa em ordem lógica, como agrupar opções relacionadas, colocar as opções mais comuns primeiro ou utilizar ordem alfabética. Classifique os nomes em ordem alfabética, os números em ordem numérica e as datas em ordem cronológica.
Adicione preenchimento de 27 pixels no lado direito de seu conteúdo para impedir que as barras de rolagem sobreponham o conteúdo. (O controle inclui esse preenchimento por padrão.)