Pega em qualquer formulário que peça aos visitantes para escolherem numa lista de opções e vais reparar numa coisa. O formulário não falha por fazer demasiadas perguntas. Falha porque alguém escolheu o tipo de campo errado para aquela pergunta. Uma lista pendente onde os botões de opção seriam mais rápidos. Caixas de seleção onde só faz sentido uma resposta. Botões de opção onde uma lista pendente pouparia metade do espaço do ecrã.
Não são pormenores pequenos. A investigação mostra que a escolha do tipo de campo é uma das principais razões pelas quais os visitantes abandonam formulários. Uma única escolha errada entre lista pendente, botão de opção ou caixa de seleção pode fazer disparar a taxa de abandono do teu formulário em 15% ou mais. O visitante não fica confuso por não conseguir decidir. Fica confuso porque o tipo de campo que escolheste está a dar o sinal errado sobre o que o formulário espera.
Este artigo explica as regras práticas para escolher entre listas pendentes, botões de opção e caixas de seleção. Vais aprender que tipo de campo funciona melhor em cada cenário, o que cada um comunica ao teu visitante e como evitar os erros que fazem os visitantes abandonar formulários. Domina estas decisões e vais perceber porque é que algumas marcas têm taxas de conclusão muito mais altas no mesmo formulário só por mudarem um tipo de campo.
Porque é que o tipo de campo que escolhes afeta a conclusão do formulário mais do que a maioria imagina
Uma lista pendente, um botão de opção e uma caixa de seleção recolhem todos uma escolha numa lista. À superfície, parecem intermutáveis. As diferenças são subtis. O impacto não é.
Quando um visitante vê uma lista pendente, sabe que tem de clicar para ver as opções. As opções ficam escondidas até clicar. Isto exige um passo extra. Quando vê botões de opção, as opções estão logo visíveis. Pode percorrê-las todas de uma vez e escolher sem clicar primeiro. Quando vê uma caixa de seleção, percebe que pode escolher vários itens, e não apenas um.
Estas diferenças mudam a forma como os visitantes interagem com o teu formulário. Mudam a carga mental. Mudam a rapidez com que alguém decide. Mudam se o formulário parece simples ou esmagador. Acertar nisto significa que menos pessoas abandonam o teu formulário. Errar significa que os visitantes saem porque o formulário não parece intuitivo, mesmo que tecnicamente funcione.
O pior erro é usar o tipo de campo errado para a situação. Uma lista pendente para duas escolhas parece exagero. Botões de opção para 15 opções parecem confusos e esmagadores. Caixas de seleção quando só se devia escolher uma opção criam confusão sobre o que se pode selecionar. Cada escolha errada custa-te conversões.
As listas pendentes funcionam melhor em listas longas em que o valor predefinido não importa
Uma lista pendente é um campo que esconde as opções até alguém clicar para o expandir. A escolha fica escondida atrás de um clique. Isto torna as listas pendentes perfeitas para uma situação específica. Tens muitas opções e poupar espaço no ecrã é importante.
Usa uma lista pendente quando tens mais de sete opções. A partir daqui, mostrar todas as opções como botões de opção ou caixas de seleção faz o formulário parecer confuso. Uma lista pendente recolhe todas essas opções num único campo que ocupa quase nenhum espaço vertical. É por isso que as listas pendentes são comuns nos formulários para telemóvel. O ecrã de um telemóvel é estreito. As listas pendentes poupam espaço.
As listas pendentes também funcionam bem quando a escolha é óbvia e o visitante tem uma resposta clara em mente. Pensa em escolher um país ou um distrito. A maioria das pessoas sabe logo qual quer. Pode escrever a primeira letra para saltar para a opção, ou clicar e deslizar para a encontrar. A interação é rápida porque a pergunta é fácil.
Mas é aqui que as listas pendentes falham. Falham quando os visitantes precisam de comparar opções antes de decidir. Falham quando a lista está ordenada de uma forma que os visitantes não esperam. Falham quando não há valor predefinido e o visitante tem de clicar só para ver que opções existem.
Um exemplo: um formulário que pede aos visitantes que escolham uma preferência de refeição com uma lista pendente. As opções estão baralhadas (marisco, vegetariano, frango, vaca, vegan, sem glúten). O visitante não sabe que opções existem sem clicar. Quando clica e vê a lista, tem de processar todas para decidir. Não as consegue ver todas de uma vez para comparar. Demora mais do que se as opções estivessem visíveis como botões de opção. A investigação de um grupo de referência em usabilidade mostra que as listas pendentes abrandam a tomada de decisão quando os utilizadores precisam de avaliar várias opções.
Usa listas pendentes quando os visitantes sabem o que procuram e as opções são muitas. Evita-as quando os visitantes precisam de comparar opções ou quando há menos de sete escolhas.
Os botões de opção fazem sentido quando tens entre duas e cinco opções
Um botão de opção mostra uma caixa circular junto a cada opção. Quando alguém clica numa, as outras são desmarcadas automaticamente. Só se pode selecionar uma opção de cada vez. É por isso que se chamam botões "de rádio" em inglês, como os rádios antigos dos carros em que carregar no botão de uma nova estação soltava a anterior.
Os botões de opção funcionam lindamente quando os visitantes têm um conjunto pequeno e claro de escolhas. Se o teu formulário pede aos visitantes que escolham um plano de subscrição e ofereces três níveis, os botões de opção são a escolha perfeita. O visitante vê os três de uma vez. Pode comparar preços, funcionalidades e vantagens de cabeça, logo. Clica numa. Feito. Sem opções escondidas. Sem confusão.
Os botões de opção também funcionam bem quando uma opção é claramente a predefinida ou a mais popular. Imagina um formulário que pergunta aos visitantes como conheceram a tua marca. Ofereces cinco opções e a maioria escolhe "Pesquisa Google". Ao deixar os botões de opção visíveis, quem chegou por uma pesquisa Google vê logo a sua resposta e clica nela. Não precisa de abrir uma lista pendente a perguntar-se se a resposta está lá.
A investigação de usabilidade é clara. Quando as opções estão visíveis, as pessoas decidem mais depressa. Quando as pessoas veem todas as escolhas sem um clique extra, as taxas de conclusão sobem. É por isso que os botões de opção superam as listas pendentes em listas pequenas.
Os botões de opção começam a parecer confusos por volta das cinco ou seis opções. Com mais de sete, o formulário parece esmagador. Cada botão de opção ocupa espaço vertical. Um formulário com oito botões de opção para "Qual é o teu principal interesse?" parece muito mais comprido do que o necessário. Nesta altura, uma lista pendente faz mais sentido.
Usa botões de opção quando tens entre duas e cinco opções e os visitantes ganham em compará-las. Evita-os com mais de sete opções.
As caixas de seleção são para escolhas em que várias respostas estão certas
Uma caixa de seleção parece um quadrado pequeno. Quando se clica, mostra uma marca de verificação. Ao contrário dos botões de opção, várias caixas de seleção do mesmo grupo podem estar marcadas ao mesmo tempo. Esta é a diferença essencial. As caixas de seleção não são alternativas entre si. São escolhas independentes.
As caixas de seleção funcionam quando a pergunta permite mais de uma resposta. Um formulário que pergunta "Quais destas funcionalidades te interessam?" usa caixas de seleção porque um visitante pode escolher análise de produto, feedback de clientes e integração de automação, tudo ao mesmo tempo. Cada caixa de seleção é uma escolha independente, e não uma alternativa às outras.
As caixas de seleção também servem para declarações de aceitação. "Aceito os termos e condições" é uma caixa de seleção porque é uma afirmação de sim ou não. O visitante aceita ou não aceita. Da mesma forma, "Enviem-me novidades por email" é uma única caixa de seleção porque representa uma única escolha.
A confusão acontece quando se usam caixas de seleção em vez de botões de opção, ou vice-versa. Um formulário que pergunta "Que plano queres?" não deve usar caixas de seleção. Ninguém pode querer os três planos. As escolhas excluem-se mutuamente. Aqui, os botões de opção são os certos.
As caixas de seleção também sofrem do mesmo problema de aglomeração que os botões de opção. Mais de sete ou oito caixas de seleção num só grupo fazem o formulário parecer esmagador. Visualmente, muitas caixas de seleção parecem muito trabalho, mesmo que o visitante só precise de escolher um ou dois itens.
Usa caixas de seleção só quando os visitantes podem mesmo escolher várias opções ao mesmo tempo. Evita-as em perguntas de escolha única e agrupa os grandes números de caixas de seleção em categorias mais pequenas e relacionadas.
Como decidir quando não tens a certeza de que campo usar
A decisão é muitas vezes clara. Mas por vezes uma pergunta fica numa zona cinzenta. Tens cinco opções e não sabes se botões de opção ou uma lista pendente parecem melhor. Aqui tens a árvore de decisão que funciona.
Passo 1. O visitante pode escolher mais de uma resposta? Se sim, usa caixas de seleção. Se não, passa ao passo dois.
Passo 2. Quantas opções há? Menos de seis opções, passa ao passo três. Mais de sete opções, usa uma lista pendente.
Passo 3. Os visitantes precisam de comparar as opções para decidir? Se sim, usa botões de opção para que todas as opções estejam visíveis de uma vez. Se não e a resposta for óbvia, tanto os botões de opção como uma lista pendente servem, mas os botões de opção serão ligeiramente mais rápidos.
Esta árvore de decisão simples resolve 90% das questões de tipo de campo que surgem ao desenhar formulários. Nos casos em que ainda tiveres dúvidas, testa as duas opções com visitantes reais. Corre o teu formulário com botões de opção durante uma semana e mede a taxa de conclusão. Muda para uma lista pendente, corre mais uma semana e compara. Os dados reais dos teus visitantes valem mais do que qualquer regra de design, porque são os teus visitantes que preenchem os teus formulários.
Erros comuns que afundam a conclusão do formulário sem ninguém perceber porquê
O primeiro erro é usar uma lista pendente para duas ou três opções. Acontece mais vezes do que pensas. Um formulário pergunta "Como nos encontraste?" e as opções são "Motor de pesquisa", "Redes sociais" e "Recomendação". Uma lista pendente esconde estas opções. O visitante tem de clicar na lista para as ver. Não sabe que opções existem sem clicar. Isto acrescenta fricção sem razão. Aqui, os botões de opção são mais rápidos e parecem mais intuitivos.
O segundo erro é mostrar oito ou nove botões de opção quando uma lista pendente ocuparia um décimo do espaço do ecrã. Um formulário pede aos visitantes que escolham o país numa lista de 195 países. Os botões de opção deslizariam sem fim. Uma lista pendente com pesquisa por autocompletar resolve isto de imediato. Alguns designers teimam nos botões de opção porque parecem mais intuitivos, sem perceber que a intuição desaparece quando se tem de deslizar por 50 opções.
O terceiro erro é usar caixas de seleção numa pergunta de escolha única. Um formulário pergunta "Qual é o teu nível de subscrição?" e mostra três caixas de seleção, uma para cada plano. Os visitantes ficam confusos. Podem escolher as três? A caixa de seleção está a dar o sinal errado. Os botões de opção são mais claros porque comunicam visualmente que só se pode escolher uma.
O quarto erro é não dar instruções claras sobre o que um campo significa. Aparece um grupo de caixas de seleção com a etiqueta "Interesses" e sem explicação. O visitante não sabe se deve escolher só uma ou quantas se aplicarem. Quando há ambiguidade, as taxas de conclusão descem. Etiquetas claras resolvem isto. "Seleciona todas as que se aplicam" ou "Escolhe uma" diz ao visitante exatamente o que o campo espera.
O quinto erro é usar mal os valores predefinidos. Uma lista pendente que começa com "Seleciona uma opção" como predefinição parece avariada. Uma lista pendente que começa com "Estados Unidos" como predefinição parece útil se for de lá que vem a maioria dos visitantes. Botões de opção que começam sem nada selecionado obrigam o visitante a clicar em um. Botões de opção que começam com a resposta mais comum pré-selecionada poupam um clique ao visitante. Estas pequenas predefinições acumulam-se ao longo de um formulário.
Considerações para telemóvel que mudam a decisão do tipo de campo
Os telemóveis são mais pequenos. Isto muda a decisão do tipo de campo de formas importantes.
No computador, três botões de opção para uma escolha simples parecem naturais e rápidos. No telemóvel, esses mesmos três botões de opção ficam empilhados na vertical e ocupam mais espaço do que uma lista pendente ocuparia. A decisão pode inverter-se.
Os visitantes em telemóvel também interagem de forma diferente. Usam os polegares para tocar, e não cliques precisos de rato. Uma caixa de seleção de 44 por 44 píxeis é o tamanho mínimo confortável. Qualquer coisa mais pequena fica difícil de tocar com precisão. Os botões de opção e as caixas de seleção precisam de espaço suficiente à volta para que tocar num não toque sem querer na opção ao lado.
As listas pendentes no telemóvel costumam ser tratadas pelo menu de seleção nativo do dispositivo. Quando um visitante toca numa lista pendente num telemóvel, vê um seletor otimizado para dispositivos móveis. Isto é muitas vezes mais rápido e confortável do que deslizar por uma lista longa na própria página.
Nos formulários para telemóvel, as listas pendentes tornam-se mais atrativas à medida que o espaço do ecrã fica precioso. Os botões de opção continuam bons para duas a quatro escolhas porque são rápidos de tocar. Mas seis opções como botões de opção parecem uma deslizagem sem fim. As mesmas seis opções numa lista pendente parecem mais limpas e rápidas num telemóvel.
Testa os teus formulários no telemóvel. A decisão que parecia certa no computador pode parecer diferente quando alguém preenche o teu formulário num ecrã de telemóvel de dez centímetros.
Requisitos de acessibilidade que todos os tipos de campo têm de cumprir
As listas pendentes, os botões de opção e as caixas de seleção têm todos de cumprir as normas de acessibilidade, para que quem usa leitores de ecrã ou navegação por teclado consiga preencher o teu formulário com sucesso.
Cada grupo de botões de opção ou de caixas de seleção precisa de uma etiqueta de fieldset que explique para que serve o grupo. Quando um utilizador de leitor de ecrã chega ao grupo com a tecla tab, ouve a etiqueta e percebe de que está a escolher. Sem ela, só ouve "Botão de opção um, botão de opção dois", sem contexto.
Cada opção individual precisa de uma etiqueta visível e clicável, e não apenas de um pequeno botão de opção ou caixa de seleção. Quando um visitante tem de clicar exatamente no quadrado de uma caixa de seleção para a marcar, quem tem menos precisão motora tem dificuldades. Quando pode clicar na etiqueta junto da caixa de seleção, a escolha fica mais fácil para todos. Isto não é uma funcionalidade de acessibilidade só para pessoas com deficiência. Torna os formulários mais fáceis para toda a gente.
As listas pendentes também precisam de etiquetas claras. A etiqueta deve ficar por cima ou à esquerda do campo da lista pendente. A opção atualmente selecionada deve estar sempre visível na lista fechada. Quando uma lista pendente fecha depois da escolha e mostra o valor escolhido, o visitante sabe que a sua escolha foi registada.
Os utilizadores de teclado precisam de navegar pelos formulários com as teclas tab e as setas. Os botões de opção devem permitir a navegação entre opções com as setas. As caixas de seleção devem poder ser marcadas com a barra de espaço. As listas pendentes devem abrir e fechar com comandos de teclado. Se o teu formulário exigir um clique de rato para alguma destas coisas, os utilizadores de teclado ficam bloqueados.
A cor, sozinha, não pode indicar o estado selecionado. Uma lista pendente com uma opção realçada usa a cor para mostrar o que está selecionado. Isto ajuda. Mas os utilizadores que não veem cores também devem conseguir perceber o que está selecionado, através de uma marca de verificação, de um ícone ou de um indicador visual que não dependa só da cor.
Como os tipos de campo afetam a perceção da tua marca
O tipo de campo que escolhes comunica ao teu visitante quanto o compreendes.
Uma lista pendente para duas ou três opções sugere que quem desenhou o formulário não pensou muito na experiência do utilizador. Acrescenta um clique desnecessário. O visitante repara. Parece fricção.
Um botão de opção onde uma lista pendente pouparia metade do comprimento do formulário passa a mesma mensagem. O formulário parece mal desenhado.
Mas um formulário que pensou claramente na experiência do utilizador, que faz as escolhas rápidas parecerem óbvias e as seleções múltiplas parecerem claras, passa outra mensagem. Mostra que esta marca se preocupa com o tempo do visitante. Mostra que alguém pensou bem no formulário. Isto não é só melhor usabilidade. É melhor perceção da marca.
Pequenas decisões como estas somam-se. Um visitante preenche o teu formulário e cada campo parece intuitivo. Acaba mais depressa do que esperava. Sente-se bem com a interação. Esse sentimento acompanha-o na forma como vê a tua marca.