Você está vendo uma alta taxa de abandono nos formulários do seu site? Eles contêm uma ou mais listas suspensas? Eles são muito práticos, mas afetam a experiência do usuário…
O design de formulários é um tópico delicado em um projeto de criação ou redesenho de um site . Os formulários, se otimizados, promovem a conversão e permitem que você recupere informações valiosas sobre leads/prospects.
A lista suspensa (ou lista suspensa ) é um tipo de campo incluído por padrão na maioria das ferramentas de criação de formulários. Esse padrão de design muito popular é frequentemente usado em demasia e seu objetivo principal é mal utilizado …
Designers de UX odeiam dropdowns porque eles não são muito bonitos e não muito personalizáveis. Os desenvolvedores os adoram porque são fáceis de integrar…
Quando uma lista suspensa deve ser usada ? Em que contexto não é adequado? Qual o impacto na experiência do usuário ? Quais soluções para substituir as listas suspensas ?
A lista suspensa, o inimigo da experiência do usuário ?
Quando se trata de web design , é impossível ignorar a noção de experiência do usuário . UX ( ou experiência do usuário ) refere-se à qualidade da experiência geral vivenciada pelos usuários da Internet em uma interface web. Obviamente, não se limita ao design, estética ou mesmo animações… UX inclui as noções de ergonomia e usabilidade .
Atenção especial deve ser dada à ergonomia dos formulários . O formulário é uma importante alavanca de conversão (formulários de contato, formulários de download, etc.).
O uso de listas suspensas deve ser cuidadosamente considerado. Por quê ? Porque diminui a velocidade dos visitantes e pode prejudicar a experiência do usuário .
De fato, completar uma lista suspensa requer mais esforço e tempo do usuário :
- Cliques adicionais , _ _ _
- Interrupção do fluxo de teclas ,
- Leitura difícil de itens de lista com espaçamento entre linhas muitas vezes reduzido ao mínimo,
- Opções de rolagem (ação adicional) quando a lista de opções é longa,
- Dificuldade de seleção com o mouse e risco de erro,
- Exibição incompleta de opções além de um certo número de caracteres (especialmente no celular),
- …
Então, lista suspensa ou não?
Lista suspensa, de quantas opções?
Sua versatilidade e facilidade de uso fazem da lista suspensa uma ferramenta muito popular, tanto que muitas vezes é mal utilizada, em detrimento de outros tipos de campos.
A lista suspensa permite que você escolha entre um número ilimitado de opções (no mínimo duas opções a priori).
O desenvolvedor da web certamente optou por integrar uma lista suspensa por conveniência. Alternativas, mais estéticas e sobretudo mais fáceis de usar , são possíveis no caso de uma lista reduzida de opções.
Este é o caso dos botões de opção, a serem preferidos às listas suspensas abaixo de 5 opções de resposta. O usuário precisa apenas de um clique para selecionar sua resposta. A digitação é mais rápida e o design mais atraente .
Esse tipo de botão pode ser usado para perguntas de escolha única ou múltipla (com caixas de seleção).
Se for oferecido ao usuário escolher entre mais de 5 respostas, a lista suspensa é a solução mais adequada. No caso de uma lista de opções muito longa (uma lista de cidades ou países, por exemplo), é possível integrar um campo de filtro/pesquisa para evitar rolagem infinita. O campo de filtro também pode ser associado a uma função de preenchimento automático para facilitar a busca.
A lista suspensa também pode permitir a seleção de várias opções de resposta para atender a necessidades muito específicas:
Lista suspensa de seleção múltipla com função de preenchimento automático
Lista suspensa ou alternar / alternar?
Não há necessidade de fornecer uma lista suspensa para responder a uma pergunta simples com uma resposta “sim” ou “não”! E ainda é um grande clássico…
Um botão switch/ toggle é uma opção muito melhor :
lista suspensa e entrada de data : boa ideia?
Um dos piores exemplos é usar um menu suspenso para preencher uma data.
O usuário começa a preencher um formulário. Ele preenche seu sobrenome, nome, endereço de e-mail , número de telefone. A priori, ele nem precisava usar o mouse para fazer tudo isso … Ele agora precisa inserir sua data de nascimento , na forma de listas suspensas …
Ele então multiplica os cliques e rola para chegar à sua resposta. O usuário gastou 2 a 3 vezes mais tempo preenchendo este campo do que qualquer outro campo do formulário. Desde que o formulário contenha outras listas suspensas , o usuário provavelmente sai da página antes mesmo de validar suas respostas .
Uma boa alternativa é oferecer uma entrada simples em formato numérico :
O usuário primeiro insere o dia. Ele é retornado automaticamente para os seguintes campos ( mês e ano) sem manipulação adicional . O usuário realiza apenas um clique para preencher o campo de data e só precisa digitar números. A entrada de dados é, portanto, mais rápida e menos restritiva.
Preencher um formulário é muitas vezes uma tarefa tediosa. É aconselhável variar os componentes e tipos de campos para ritmar a entrada do formulário e não aborrecer o usuário.
Interagir com listas suspensas no celular é ainda mais difícil. O tamanho reduzido da tela às vezes impede a exibição de todas as opções e força o usuário a rolar. E mesmo na tela grande, as listas suspensas exigem mais esforço dos visitantes, correndo o risco de desencorajá-los .
