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:

No lo tengo todo resuelto

En el video Estilo Libre, sin cortes ni ediciones de esta semana hablamos acerca de las cosas que pensé después de hablar por teléfono con un amigo. Quizás pienso mucho después de hablar por teléfono, por eso no hablo casi con nadie. Cuéntame en los comentarios tu opinión sobre el tema de hoy. Hasta la […]

Seguir leyendo...

El proceso de diseño web que sigo en mis proyectos con clientes

Cuando alguien nuevo entra al mundo del diseño web, habitualmente lo hace a ciegas o siguiendo tutoriales, pero rara vez ocurre que lo haga con una completa claridad con respecto al proceso de diseño web en su totalidad. Es por eso que en este artículo quiero compartir contigo el detalle del procedimiento que yo sigo […]

Seguir leyendo...

Cómo diseñar un landing page en Sketch 3

Actualización: Las siguientes partes de esta serie ya están listas: Parte 2 y Parte 3. Próximamente realizaré un evento en vivo orientado a diseñadores gráficos que quieran aprender de diseño web. Aún no está definida la fecha ni los contenidos específicos a tratar en este evento, pero es un buen momento para diseñar el landing page […]

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