Quando devo usar Switch ou Checkbox?

Muitas das vezes há dúvidas sobre quando e como usar Switches ou Checkboxes.

E também muitas vezes faz-se uso de uma destas opções considerando apenas o sentido estético da UI, omitindo assim a verdadeira importância do propósito e da funcionalidade de cada uma destas derivações.

A internet está repleta de maus usos destas duas fórmulas com bastantes anos. E como em tudo, há o lugar certo para o Switch e para as Checkboxes. Elementos distintos, funcionalidades e propósitos divergentes.

switch_and_checkbox_material
Checkbox e Toogle Switch do Material Design by Google

Traduzindo para português obtemos as denominações:
 Switches > Interruptores;
 Checkboxes > Caixas de Seleção.

Ambos com o propósito de “afirmar”, “negar” e/ou “ativar” algo, seja isto configurações, notificações ou outras, mas…. Usar o elemento de UI no contexto correto vai facultar uma interface mais simples, sem dúvidas e com um User Experience muito mais apurado e particularizado.

Switches (interruptores)
 Destacam-se por ser uma solução indicada essencialmente para ações instantâneas, imediatas. Tal como um interruptor na vida real, quando é premido esperasse que a reação da ação seja instantânea! Como exemplo temos o comuns interruptores da eletricidade.

Assim se espera que funcione o Switch: clicar > ativar.
 Implica o “ON” de alguma coisa, por exemplo as notificações de alguma aplicação que se ativam instantaneamente. Os switches são botões de alternância entre um “ON” e um “OFF” não devem por isso ser complementados com um “Guardar”. As ações em cada um destes botões deve determinar uma ação independente sem necessidade de uma confirmação final.

Checkboxes (Caixas de Seleção)
 Este tipo de solução, ao contrário dos Switches, exige um botão de confirmação. Este botão final, deve ser premido assim que o utilizador exercer todas as suas preferências através das caixas de seleção. Isto optimiza o fluxo e compromete o utilizador a uma revisão antes de clicar no botão “Enviar” ou “Guardar”.
 Esta solução é indicada para para as definições ou configurações do utilizador, após todas as checkboxes o utilizador ordena a ação e esta aplica-a de forma múltipla.

Visualmente são elementos distintos, o Switch exige um “ON” e “OFF” explícitos (através de cor ou texto), enquanto que uma Checkbox apenas exige a sua própria marca de seleção ou não.

Uso de Toggle Switch para ativação imediata de notificações by Apple.
Uso de Toggle Switch para ativação imediata de notificações by Apple.
nao_perturbar
Uso de Toggle Switch para ativação imediata do “Não Perturbe” by Apple.
Uso de Checkboxes para configuração da caixa de Gmail. Após selecionar há necessidade de um "Guardar Alterações" anteriormente efetuadas. by Google.
Uso de Checkboxes para configuração da caixa de Gmail. Após selecionar há necessidade de um “Guardar Alterações” anteriormente efetuadas. by Google.

Quando temos de decidir entre ambos os elementos devemos usar a coerência do conceito funcional e nunca do sentido estético. Há duas perguntas-chave que ajudam a decidir, e são tão simples como:
 1. Esta configuração vai ter efeito imediato ou não?
 2.O utilizador precisa de verificar as suas configurações antes de as aplicar?

Se sabes as respostas corretas para cada uma das perguntas… É porque percebeste bem o conceito!
 Se ainda tens dúvidas… Deixa a tua opinião, o teu caso, ou a tua questão!

JL

Show your support

Clapping shows how much you appreciated João Lima’s story.