Diseño, Video | 20 de marzo de 2019

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

También te podría interesar:

Tips para diseñar una tarjeta de presentación

No solo de la web vive el diseñador, también podemos usar nuestras capacidades para diseñar otras cosas menos digitales y más físicas. Por eso hoy voy a compartir contigo algunos consejos que te pueden ser útiles a la hora de diseñar tarjetas de presentación. Vamos a comenzar con lo que hay que tener en consideración […]

Seguir leyendo...

Cómo crear una cabecera fija con HTML y CSS

En el artículo de hoy quiero mostrarte de qué manera puedes crear una cabecera fija para tu sitio, tal como la que puedes ver en este mismo sitio. Me refiero a una cabecera que se queda pegada e la parte superior de la ventana, incluso aunque hagas scroll hacia abajo. Para comprender este tutorial por completo necesitarás […]

Seguir leyendo...

Cómo crear una navegación animada con CSS y jQuery

En este tutorial vamos a centrarnos en crear una navegación interna dentro de una página, de tal forma que, al clickear en los enlaces del menú, hagamos que ciertos contenidos se muestren y otros se oculten. Para conseguir este objetivo vamos a utilizar principalmente CSS y un poquito de jQuery. El resultado final del ejercicio […]

Seguir leyendo...

Hay 5 opiniones

  1. Hola Francisco, muy buen video y muy buenos ejemplos para clarificar el uso de estos elementos, que a veces se usan indistintamente. Pregunta, ¿Cómo hiciste las interacciones (ejemplos) para el video?

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 7.976 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.