Qualquer coisa, exceto Dropdowns.

Agora que você já sabe sobre as Leis da Localidade, é hora de falarmos sobre os dropdowns.

Ao todo serão 4 dicas. Você está na dica 2.

1. Obedecer as “Leis da Localidade” (ainda não leu? Clique aqui)
2. Qualquer coisa, exceto Dropdowns
3. Faça o “Teste do Estrabismo”
4. Ensine com Exemplos

2. Qualquer coisa, exceto Dropdows.

ABD: “Anything but Dropdowns”

Todas as vezes que você pensar em utilizar o dropdown, certifique-se de que as 12 soluções abaixo não são melhores para o usuário.

O uso do dropdown nem sempre é ruim, mas você estará trabalhando contra os seguintes pontos:

• Dropdown te obriga a muitos cliques e taps. Um para abrir, outro para scrollar e um para selecionar. (Compare a experiência com os casos abaixos que possuem apenas um clique)
• Dropdown não te mostra todas opções visíveis. Você precisa clicar nele para visualizar as opções e, no caso do mobile, verá as opções aos poucos.
• Dropdown com muitas opções são horríveis para navegar. Imagine uma lista com mais de 195 países. Nem preciso complementar, convenhamos.

Problema atacado. Agora é hora de abordar alguns exemplos que substituem o dropdown.

Se você estiver escolhendo entre duas opções…

Que tal ao invés de utilizar o dropdown, dar visibilidade ao usuário das opções de escolha logo de primeira?

Compare os dois exemplos abaixo e veja qual você considera mais intuitivo, o dropdown ou botões segmentados:

No caso de um comportamento default, de verdadeiro ou falso, sim ou não, salvar ou não salvar etc, tente usar um checkbox, que já é muito utilizado para aceite ou não de termos, regulamento e receber ou não notícias:

Outra saída similar ao checkbox é o switch, que também possibilita ao usuário tomar a decisão imediatamente:

Checkbox e Switch só fazem sentido quando você possui duas opções.

Se você precisa escolher entre 2 a 5 opções…

Falamos sobre os botões segmentados acima, e aqui poderemos utilizá-los também.

Contudo, é importante saber que, para mais opções, a verticalização das opções traz melhor fluidez ao uso, principalmente no mobile, e maior flexibilidade ao tamanho da resposta:

Radio buttons também podem ser uma saída, principalmente nos casos onde é necessária a inclusão de um subtítulo, vide exemplo abaixo:

Para opções mais detalhadas, podemos utilizar os cards:

E também opções visuais:

Se você precisa escolher entre muitas opções…

Quando há muitas opções, considere utilizar o autocomplete (ou typeahead control).

É como se fosse um input de busca que mostra os resultados mais parecidos com o que você está digitando:

Se você precisa escolher uma data…

Fala aí, escolher data já é chato, e com dropdown pode ficar pior ainda!

afinal, o que usar sem ser isso? Por mais que hajam recomendações, ainda penso que a comunidade não encontrou a melhor saída para a escolha de datas, contudo, exibirei aspráticas recomendadas.

Primeira questão: qual tipo de data você está escolhendo?

• Datas de um futuro próximo. Datas que estão próximas de um futuro próximo. Como um agendamento para uma viagem ou reserva de hotel, por exemplo.
• Datas muito variadas. Datas que não há como o designer prever uma assertividade. Exemplo data de aniversário, do qual pode variar de maneira intensa de acordo com o usuário.

Para datas de futuro próximo, 80% dos agendamentos são realizados para 2 semanas daquele dia. Desta maneira, uma forma de prever a ação do usuário é deixar por default 2 semanas depois (vide exemplo do Google Flight ao lado).

No caso de datas variáveis, não há como priorizar, pois, geralmente, não há como prever a data de nascimento do usuário, por exemplo.

Por mais que digitar seja chato e algo que pretendo exterminar de alguma maneira (rs), no caso da data, talvez ainda seja a melhor solução atual:

Se você precisa escolher um número…

Precisamos considerar o contexto ao determinar a solução que usaremos para possibilitar que o usuário escolha um número.

Ainda no exemplo de viagem ou agendamento de algo…

• Quantas vezes o user precisa selecionar somente 1 passagem? Muitas.
• Quantas vezes o user precisa selecionar 10 passagens? Poucas.
• Quantas vezes o user precisa selecionar 10.000 passagens? Nunca vi.

Para quando a previsibilidade for pouca quantia, recomenda-se o uso do stepper. Entretanto, quando a quantidade for alta, melhor utilizar um input e pedir para o usuário digitar do que o dropdown.

Afinal, eu posso usar o dropdown?

É CLARO. Hipóteses, teorias e leis foram feitas para ajudar, não para nos limitar.

Contudo, tente utilizá-los somente em casos inevitáveis, quando:

• Usuários raramente precisarem alterar o valor default.
• Quando há até 3 opções e a verticalização das opções não for uma opção.
• Quando o user não estiver no mobile, pois a maioria dos problemas apontados estarão mitigados.

Resumindo, podemos dizer que deve-se utilizar:

• Uma escolha, 2 opções (checkboxes)
• Uma escolha, 3–5 opções (botões segmentados)
• Uma escolha, muitas opções (typeahead/autocomplete)
• Diversas escolhas (checkbox list)

Esta foi a dica 2 de 4!

Ainda não leu a DICA 1, sobre as “Leis da Localidade”? Clique aqui.

A dica 3 ainda não publiquei! Quando publicar atualizo aqui, ok?

Este artigo foi baseado e inspirado no estudo de Erik D. Kennedy, 4 Rules for Intuitive UX.