Um interruptor parece simples. Um pequeno botão que alterna entre ligado e desligado. Mas os campos de interruptor confundem os utilizadores mais do que quase qualquer outro elemento de formulário. As pessoas hesitam. Não sabem se mudar o interruptor altera algo de imediato ou se fica à espera de um botão de envio. Não sabem que lado quer dizer sim e que lado quer dizer não. Um interruptor mal colocado num formulário pode afundar as tuas taxas de conclusão. O interruptor certo no sítio certo torna-se invisível.
Pega em qualquer formulário que use interruptores e vê o que as pessoas fazem de facto. Movem-se devagar. Pairam com o rato. Voltam atrás para ver o que o interruptor controla. Procuram botões de envio porque não têm a certeza de que a mudança do interruptor tenha efeito. Isto não são erros dos utilizadores. São problemas de design. Os interruptores têm uma função específica nos formulários. Fazem uma coisa bem. Não fazem tudo. Perceber quando os interruptores fazem sentido e quando não fazem é a diferença entre um formulário que flui e um formulário que confunde.
O problema de chamar interruptor a tudo
A palavra interruptor quer dizer algo específico. Um interruptor alterna entre dois estados opostos. Estás no estado A ou no estado B. Nada pelo meio. Nada mais. Mas muitos formulários chamam interruptores às suas perguntas de sim ou não, quando não são. Uma pergunta como "Queres receber emails promocionais?" não é um interruptor. É uma pergunta de sim ou não que pertence a um formulário. Um interruptor a sério é "Ativar o modo escuro." O interruptor muda a tua experiência agora mesmo. O formulário não precisa de um botão de envio para essa mudança ter efeito.
Esta confusão cria fricção real. Põe um interruptor a sério no meio de um formulário cheio de campos de texto e botões de opção. Os utilizadores não vão saber se a mudança do interruptor foi aplicada de imediato ou se ainda têm de clicar em enviar. Podem mexer no interruptor, achar que não aconteceu nada, voltar a mexer e depois ficar confusos quando o formulário mostra o estado oposto ao que escolheram.
Quando um interruptor faz realmente sentido num formulário
Um interruptor só pertence a um formulário quando duas condições são verdadeiras ao mesmo tempo. Primeiro, a escolha tem de ser binária. Exatamente dois estados. Sim ou não. Ligado ou desligado. Mais nada. Segundo, a escolha tem de ter efeito imediato, sem botão de envio. O utilizador muda o interruptor e o estado muda logo.
Na maioria dos formulários, nenhuma destas condições é verdadeira. A maioria dos formulários exige um botão de envio no fim. Todas as alterações se aplicam de uma vez quando alguém clica em enviar. Pôr um interruptor num formulário que tem botão de envio cria confusão, porque o interruptor parece que devia funcionar de imediato, mas o formulário todo espera pelo envio.
Os interruptores funcionam em definições. Os interruptores funcionam em painéis de conta em que cada alteração é imediata. Os interruptores não funcionam em formulários normais em que se recolhe informação e se pede às pessoas que enviem no fim. Se o teu formulário tem um botão de envio, as tuas perguntas de sim ou não devem usar caixas de seleção ou botões de opção em vez de interruptores.
Interruptor ou caixa de seleção nos campos do formulário
A diferença visual entre um interruptor e uma caixa de seleção é óbvia. Mas o que importa é a diferença funcional. Uma caixa de seleção é um controlo de formulário que espera pelo envio. Podes marcar várias caixas de seleção. Podes desmarcá-las. Nada acontece até enviares o formulário. Um interruptor é um comutador de estado que muitas vezes muda as coisas de imediato. O formulário não precisa de envio para a mudança ter efeito.
É por isso que a investigação de um grupo de referência em usabilidade mostra que os utilizadores ficam confusos quando misturas interruptores e caixas de seleção no mesmo formulário. Os interruptores que agem de imediato sentem-se completamente diferentes das caixas de seleção que esperam. Misturá-los passa sinais contraditórios sobre o que acontece quando alguém interage com o formulário.
Se tens uma pergunta binária de sim ou não num formulário que exige botão de envio, usa uma caixa de seleção ou um par de botões de opção. Ambos são familiares. Ambos fazem sentido no contexto de um formulário. Os utilizadores percebem que estão a selecionar algo que vai ser enviado, e não a provocar uma mudança imediata.
Quando usar botões de opção em vez de um interruptor
Um interruptor só pode mostrar um estado de cada vez. Vês ligado ou desligado. Mas por vezes os utilizadores precisam de ver as duas opções ao mesmo tempo para decidir. É aqui que os botões de opção funcionam melhor do que um interruptor.
Exemplo: um formulário que pergunta "Que plano queres?" com as opções "Básico" ou "Premium". Podias usar um interruptor para alternar entre eles. Mas o utilizador não vê os dois planos lado a lado. Tem de mudar o interruptor para ver qual é a outra opção. Um par de botões de opção mostra as duas opções ao mesmo tempo. O utilizador vê Básico à esquerda e Premium à direita. Pode comparar e escolher sem mudar nada.
Sempre que queiras que os utilizadores comparem duas opções ou vejam as duas escolhas, usa botões de opção. Sempre que o interruptor for a única forma de alternar entre opções e os utilizadores não as puderem comparar, os botões de opção são provavelmente uma escolha melhor.
Como etiquetar um interruptor para as pessoas perceberem o que faz
O maior problema dos interruptores é a etiqueta. Muitos designers usam apenas "Ligado" e "Desligado". Mas ligado e desligado para quê? O utilizador tem de adivinhar. Isto cria hesitação.
Cada interruptor precisa de uma etiqueta clara que descreva o que ele controla. Não "Ligado/Desligado". Algo como "Ativar o modo escuro" ou "Receber notificações" ou "Mostrar opções avançadas". A etiqueta diz ao utilizador o que vai acontecer se mudar o interruptor.
A etiqueta tem de estar imediatamente visível e perto do interruptor. Se a etiqueta estiver longe ou for pequena, os utilizadores não a ligam ao interruptor. Mudam-no sem perceber o que estão a alterar.
Alguns interruptores mostram as etiquetas de ligado e desligado no próprio interruptor. "Sim" de um lado e "Não" do outro. Isto pode funcionar se as etiquetas forem grandes e claras. Mas os testes mostram que as pessoas estão menos familiarizadas com interruptores de sim ou não do que com interruptores de ligado ou desligado. Se usares etiquetas de sim ou não, testa primeiro com os teus utilizadores. Mas, em geral, ligado/desligado é mais claro do que sim/não nos interruptores.
O problema de acessibilidade dos interruptores
Os interruptores criam problemas reais para quem usa leitores de ecrã. Um interruptor visual faz sentido para quem o vê. Vê o botão deslizar para a direita e percebe que agora está ligado. Mas um utilizador de leitor de ecrã não ouve nada. O interruptor não tem etiqueta acessível. O utilizador não consegue dizer em que estado está o interruptor. Não consegue dizer o que o interruptor controla.
Construir um interruptor acessível exige um atributo ARIA chamado aria-pressed. Isto diz aos leitores de ecrã que o elemento é um botão e que está premido ou não premido. O utilizador do leitor de ecrã ouve "Botão de interruptor do modo escuro, atualmente ligado". Sem aria-pressed, o utilizador não ouve nada com significado.
Mesmo com a configuração ARIA correta, os interruptores não são controlos de formulário naturais. Uma caixa de seleção é um controlo de formulário. Toda a gente sabe o que é uma caixa de seleção. Um interruptor é um controlo personalizado que exige JavaScript adicional. É por isso que muitos desenhos de formulários acessíveis dispensam por completo os interruptores e usam caixas de seleção. As caixas de seleção vêm incorporadas em todos os navegadores. Funcionam com leitores de ecrã. Não exigem JavaScript personalizado. Simplesmente funcionam.
O contraste de cor e os indicadores visuais importam nos estados do interruptor
Um interruptor que depende só da cor para mostrar o estado não funciona para pessoas com baixa visão ou daltonismo. Se o interruptor é verde quando ligado e vermelho quando desligado, um utilizador daltónico não consegue dizer em que estado está.
Cada interruptor precisa de vários sinais visuais. Cor mais forma. Cor mais posição. Cor mais texto. A forma do interruptor deve mudar de posição quando é alternado. O círculo lá dentro deve deslizar da esquerda para a direita. O fundo deve mudar de cor. Juntos, estes três sinais criam redundância, para que alguém com qualquer tipo de deficiência visual consiga perceber se o interruptor está ligado ou desligado.
As etiquetas de texto acrescentam mais uma camada. Se o interruptor tem uma etiqueta de ligado/desligado visível no próprio interruptor, a etiqueta reforça o que a cor e a posição já mostram. Isto é redundância visual. Não é um extra. É acessibilidade.
O tamanho importa nas áreas de toque
Um interruptor que fica giro com 24 píxeis de largura torna-se um pesadelo no telemóvel. O utilizador tenta tocar e acerta noutra coisa. Ou toca várias vezes porque não tem a certeza de que o primeiro toque foi registado.
O tamanho mínimo da área de toque de qualquer elemento interativo é 44x44 píxeis. Um interruptor deve ter pelo menos esse tamanho. Maior é melhor, sobretudo no telemóvel. Um interruptor com 60 píxeis de largura é muito mais fácil de tocar com precisão do que um com 30 píxeis.
Isto não é uma preferência de design. É um requisito de acessibilidade. Os utilizadores com destreza limitada, tremores, ou simplesmente dedos grandes em ecrãs pequenos precisam de interruptores grandes o suficiente para acertar com fiabilidade.
Não mistures interruptores com botões de envio de formulário
Este é o maior erro. Um formulário com campos de texto, listas pendentes e outros campos normais tem um botão de envio em baixo. Todas as alterações se aplicam quando o utilizador clica em enviar. Mas é acrescentado ao formulário um interruptor, desenhado para ter efeito imediato, sem envio. O modelo mental do utilizador quebra-se. Espera que o interruptor aguarde pelo envio como as caixas de seleção. Mas o interruptor muda de imediato. Pensa que se enganou. Volta a mudá-lo. Caos.
Se tens um formulário com botão de envio, não uses interruptores. Usa caixas de seleção para as perguntas de sim ou não. Todas as alterações do formulário vão aplicar-se juntas quando o utilizador clicar em enviar. O formulário faz sentido. O utilizador percebe o modelo.
Os interruptores pertencem a painéis, painéis de definições e outros sítios em que cada interação é imediata. Não pertencem a formulários que exigem envio.
Como o WEMASY trata os interruptores nos formulários
O criador de formulários do WEMASY inclui interruptores como opção para os campos do formulário. Se escolheres usar um interruptor, o criador de formulários exige uma etiqueta clara. O interruptor é grande o suficiente para toque. Inclui atributos ARIA adequados para acessibilidade. O criador de formulários também te avisa se acrescentares um interruptor a um formulário que tem outros tipos de campo e um botão de envio. Esse aviso existe por uma razão. Está a apanhar um problema real de usabilidade. Se vires esse aviso, muda para caixas de seleção ou botões de opção. Os teus utilizadores vão agradecer.