Diretrizes para caixas de listagem (ou de seleção)

Artigo
07/22/2015

Uma caixa de listagem (também conhecida como seleção) oferece ao usuário uma forma de escolher geralmente um item, mas às vezes vários, de uma lista de itens. Pode-se fazer a rolagem pelos itens em uma caixa de listagem se não houver espaço para mostrar todos eles.

Aplicativo Windows Phone: caixa de listagem

Exemplo

Uma captura de tela que ilustra o controle de seleção embutida padrão

Este é o controle correto?

Use uma caixa de listagem quando os itens forem importantes o suficiente para serem mostrados com destaque. Uma caixa de listagem deve chamar a atenção do usuário para todo o conjunto de alternativas em uma escolha importante. Se puder, defina o tamanho de uma caixa de listagem de modo que a lista de itens presente nela não precise de rolagem nem de aplicação de movimento panorâmico. O melhor número de itens para uma caixa de listagem é entre três e nove. Além disso, uma caixa de listagem funciona bem quando seus itens podem variar dinamicamente.

Fatores que vão contra a utilização de uma caixa de listagem incluem:

Há um número muito pequeno de itens. Uma caixa de listagem que tem sempre as mesmas duas opções pode ser melhor apresentada como botões radiais. Considere a possibilidade de utilizar botões radiais até quando há três ou mesmo quatro itens estáticos.
A caixa de listagem é de seleção única e apresenta sempre as mesmas 2 opções, onde uma pode ser imposta como o contrário da outra, como “ligado” e “desligado”. Use uma única caixa de seleção ou um botão de alternância.
Há um número muito grande de itens. Exibição de grade e exibição de lista são escolhas melhores para listas longas. Para listas muito longas de dados agrupados, prefere-se a aplicação de zoom semântico.
Os itens são valores numéricos contíguos. Considere a possibilidade de utilizar um controle deslizante.
Os itens de seleção são de importância secundária no fluxo de seu aplicativo, ou a opção padrão é recomendada para a maioria dos usuários na maioria das situações. Utilize uma lista suspensa em vez disso.

Recomendações

Verifique se está claro o propósito da caixa de listagem e quais itens estão selecionados atualmente.
Reserve efeitos visuais e animações para feedback referente a toque e para o estado selecionado dos itens.
Limite o conteúdo de texto do item da caixa de listagem a uma única linha. Se os itens forem elementos visuais, você poderá personalizar o tamanho. Se um item contém diversas linhas de texto ou imagens, utilize uma exibição de grade ou exibição de lista em vez disso.
Se a caixa de listagem é dimensionada automaticamente e os itens nela presentes são dinâmicos, pense em como a caixa de listagem se redimensionará e o que acontecerá aos itens gráficos ao redor dela. Uma caixa de listagem de tamanho fixo com itens dinâmicos não poderá ser redimensionada, mas permitirá rolagem.
Use fonte padrão, a menos que as diretrizes da marca o orientem de outra forma.
Classifique os itens de uma caixa de listagem 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.
Não utilize uma caixa de listagem para executar comandos ou exibir ou ocultar dinamicamente outros controles.

Diretriz de uso adicional

Aparência e interação

Uma caixa de listagem está sempre aberta (ao contrário de uma lista suspensa). Seus itens podem ser cadeias de texto ou valores numéricos, ou podem ser personalizados para ser qualquer outro elemento visual. Você deve ser criativo. Os usuários se sentem confortáveis ao interagir diretamente com o conteúdo de um aplicativo. Portanto, você pode optar por exibir o conteúdo real de uma oferta, talvez desenhos ou fotos ou produtos. Lembre-se de que um item deve sempre fornecer feedback visual quando é tocado, e deve ficar claro quando um item está selecionado.

Um controle de caixa de listagem apresenta sua lista de itens verticalmente por padrão. Se você deseja apresentar os itens horizontalmente - especialmente se os itens são gráficos ou fotos - então é possível personalizar o layout dos itens da caixa de listagem. Se você deseja itens dispostos em uma grade de encapsulamento horizontal ou vertical, você pode fazer isso também. Ou então simplesmente utilize uma exibição de grade que disponha os itens desse modo por padrão.

Conforme o usuário interage com eles, os itens fornecem feedback ao mudar de estado e também de aparência. Normal, pressionado, não selecionado, selecionado e desabilitado são exemplos de estados de item de caixa de listagem.

Tocar em um item resulta em sua seleção e, em modo multisseleção, tocar em um item selecionado desseleciona esse item. Em modo de seleção única, tocar em outro item transfere a seleção a esse item. Passar o dedo verticalmente faz com que a lista de itens role para cima ou para baixo com a inércia. Uma caixa de listagem tem uma barra de rolagem cuja posição indica a localização relativa do usuário dentro da lista de itens, e cujo tamanho indica a proporção dos itens na exibição. A barra de rolagem só fica visível durante a rolagem.