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:

Proceso creativo de un landing page (Parte 3: lo técnico)

Este es el tercer y último artículo de una serie en la cual estamos conociendo el tras bambalinas del proceso creativo de un landing page, donde ya cubrimos el proceso de redacción del texto y el diseño de la página. En este artículo, pretendía hablar inicialmente de la maquetación HTML y los estilos CSS que apliqué, […]

Seguir leyendo...

Volver a un trabajo fijo después de ser freelance no es un fracaso

Un amigo y seguidor de mi blog, hace unos días me comentó la noticia de que, por motivos económicos, deberá dejar de trabajar de manera freelance como diseñador web y tendrá que conseguir un empleo de tiempo completo para poder contar con un sueldo fijo. Es una noticia algo triste, considerando todo el esfuerzo que él […]

Seguir leyendo...

Detalles del curso “Creación de temas WordPress profesionales”

Si aún tienes alguna duda sobre cómo es el curso”Creación de temas WordPress Profesionales“, o qué tan detalladamente se tratan los temas, quiero mostrarte 2 de las 49 clases que componen la versión básica del curso para que puedas hacerte una idea. Para mí, lo más importante es tratar de explicar cada paso que damos a […]

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.862 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.