Diseño de Formularios: Checkbox vs Switch

Imagina esta situación: estás diseñando un formulario para un sitio web y llegas a una parte en donde el usuario tiene que seleccionar entre varias opciones, teniendo la posibilidad de seleccionar más de una.

¿Qué tipo de campo usarías? Veamos nuestras opciones.

¿Campo de texto? Nop

¿Campo de área de texto? Nop

¿Lista desplegable? Nop, porque solo puedes seleccionar una opción.

¿Checkbox? Sip, podría servir.

¿Selectores radiales? Nop, también puedes seleccionar solo uno.

¿Switcher o interruptor? Sip, podría ser.

¿Lista de selección múltiple? Podría funcionar, pero eso está más bien orientado a listas largas y para fines de este ejemplo, no es el caso.

Quedémonos entre checkboxes y switchers.

¿Cómo elegir entre estas dos opciones? Tenemos que conocer su origen.

Partamos con el checkbox.

Checkbox

Aunque a los espectadores más jóvenes les sorprenda, los formularios existen desde mucho antes que la web, y los checkbox ya existían desde entonces.

Habitualmente este tipo de campos se representa como un recuadro acompañado de un texto. En el recuadro, la persona tiene que marcar con un visto bueno o una cruz si la opción asociada a ese recuadro corresponde a la realidad.

Por ejemplo, si me piden que marque las opciones que me definan tendría que marcar diseñador, hombre y hermoso y dejar sin marcar paleontólogo, mujer y terraplanista.

Es importante saber que las opciones que marquemos podemos cambiarlas las veces que queramos (si es que usamos un lápiz que lo permita), porque la información ingresada no surtirá efecto sino hasta que entreguemos el formulario.

Los input de tipo checkbox son una digitalización de este tipo de campos y nos permiten realizar exactamente lo mismo: responder a una pregunta seleccionando una o más opciones.

Hablemos ahora del switcher.

Switch

Este tipo de campos no tiene su origen en las formularios impresos sino en un elemento interactivo de la vida real: un interruptor.

¿Qué es un interruptor? Es un dispositivo físico que sirve para encender o apagar algún aparato o alguna funcionalidad de éste.

Ejemplos podemos encontrar varios, por ejemplo, el interruptor de esta habitación que enciende o apaga la luz, el interruptor de mi iPhone que habilita o deshabita el modo vibrador o en este mouse, que tiene un interruptor curiosamente muy similar al típico diseño que se usa en la web, que sirve para encenderlo o apagarlo.

¿Qué cosas tienen en común los tres ejemplos que te mostré? El resultado esperado surte efecto de inmediato cuando cambiamos el estado del interruptor.

Presionamos el interruptor, se enciende la luz. Movemos el interruptor, se apaga el mouse. Movemos el interruptor, se habilita el modo vibrador de manera inmediata.

Ahora que ya sabemos esto, volvamos a nuestro ejemplo.

¿Qué deberíamos usar en nuestro diseño de formulario, Checkboxes o switchers?

Depende de lo que estemos preguntando y de como se comportará el formulario.

Veamos algunos casos:

Necesitas guardar para que aplique: Checkbox

Si necesitas que el usuario haga click en el botón guardar o enviar para que lo que haya seleccionado surta efecto, es mejor usar checkbox.

Aplica de inmediato: Switch

Si los cambios se aplican instantáneamente, conforme el usuario va marcando las opciones, es mejor usar un switcher.

Multiples respuestas a una sola pregunta: Checkbox

Si las opciones están relacionadas entre sí y forman parte de una misma respuesta a una sola pregunta, es mejor usar checkbox.

Cada item es independiente: Switch

Si cada ítem es independiente del otro y responde a una opción en particular, puede ser una buena idea usar switcher.

Responder a una pregunta con un on/off: Switch

Si la opción responde a la acción de encender o habilitar algo, es buena idea usar switcher.

Confirmación de una decisión: Checkbox

Si es una sola opción y se utiliza como una confirmación, tiene mucho más sentido usar un checkbox.

Selección jerárquica: Checkboxes

Si hay opciones dentro de otras opciones, y tienes la posibilidad de seleccionar todo, es conveniente usar checkboxes.

El caso mixto

Se pueden mezclar ambas opciones cuando usas un switcher para habilitar alguna opción y gracias a eso se presentan algunos checkboxes.

Espero que esto te dé claridad para la próxima vez que te toque diseñar un formulario y tengas que decidir entre un checkbox y un switcher.

Si aún te quedan dudas, te recomiendo usar esto como punto de partida: Si puedes referirte al dato que quieres obtener como enciéndelo o actívalo, lo puedes diseñar como un switcher, para todo lo demás, usa un checkbox.

Para finalizar ¿Te cuento un secreto? En cuanto a diseño y percepción un checkbox y un switcher son controles completamente distintos, pero en la práctica, cuando hablamos de HTML ambos son checkbox, solo que se presentan de una forma diferente para mejorar la experiencia de uso.

Lo dejo en tus manos ¿Cuál quieres que sea el próximo video? Estas son las opciones:

• Cómo aplicar estilos CSS a un checkbox para que se vea como un switcher
• Diferentes formas de diseñar un switcher para ofrecer la mejor experiencia de usuario posible

Déjame un comentario indicando tu respuesta.

Antes de despedirme te recuerdo que si quieres seguir aprendiendo sobre diseño y experiencia de usuario, tienes a tu disposición mi plataforma AMK Pro.

Te mando un abrazo y nos encontramos en un próximo video.
@FranciscoAMK