Entre los Componentes UI de input (inserción de datos) y selección de datos destacan los tres que vamos a comentar ahora: checkboxes, radio buttons y switchs. Puede ser que haya ocasiones en las que no sepas cuál de ellos debes utilizar ni saber cuál es la diferencia entre checkbox vs radio button vs switch. Por ello vamos a revisar todo esto también.
Checkbox o casilla de verificación
Los checkboxes son las famosas cajas o cuadros (☐) sobre los que se coloca un tick (✓) para marcarlos como confirmado o se dejan vacíos para representar negación. Estos checkboxes o casillas de verificación ofrecen a los usuarios una forma de seleccionar uno o más elementos de un grupo, o de alternar entre dos opciones mutuamente excluyentes cuando son sí o no, lo que se traduce como marcado o no marcado. Así, por ejemplo se puede utilizar como comprobante de consentimiento por parte del usuario.
Por otra parte si se utilizan para opciones múltiples, cada casilla de verificación funciona independientemente de las demás casillas de la lista, por lo que marcar una casilla adicional no afecta a ninguna otra selección. Es decir, una vez marcada una opción, marcar otra no resta o elimina lo anteriormente marcado.
Estados y usos del checkbox
Es importante señalar que en los checkboxes las opciones a marcar pueden tener hijos que es como se llama en informática a los elementos que son iguales pero están un nivel por debajo. En este caso los hijos serían subopciones. Lo cual aumenta aún más las posibilidades de selección y nos permite 3 estados que vamos a ver ahora:
- No seleccionado para el estado neutro y negativo
- Seleccionado para el estado de confirmación
- Indeterminado para indicar que entre las opciones hijas de esa opción, hay algunas seleccionadas y otras deseleccionadas.
Entre los usos más comunes de las casillas de verificación encontramos la que señalábamos anteriormente de confirmar una afirmación. Sin embargo también es común verlas utilizadas para seleccionar respuestas en un cuestionario o también como parte de un menú para filtrar opciones contenido.
Anatomía y distribución del checkbox
En cuanto al formato, los más básicos se limitan a una caja que actúa como input de entrada y una etiqueta la cual es el nombre de la respuesta. Sin embargo también se puede añadir una etiqueta de grupo al principio del checkbox para ayudar a poner en contexto las siguientes respuestas.
Por lo que se refiere a la colocación del componente, se permite una distribución vertical u horizontal según convenga al diseño, claro que por lo general la distribución vertical se prefiere por su velocidad de lectura sobre la horizontal.
A nivel de alineación, entre las opciones debe ser lo más a la izquierda y superior posible y entre el input de marcado y la etiqueta, las cajas deben estar centradas con respecto a la etiqueta si esta es de una sola línea y se recomienda una alineación a la parte superior cuando la etiqueta es de más de una línea.
Buenas prácticas y usabilidad con el checkbox
2 buenas prácticas bastante importantes a la hora de construir este componente son:
- Que el input de entrada no se limite a ser la caja sino que incluso si pinchamos sobre la etiqueta, la casilla se active o desactive
- Que para los idiomas de lectura de izquierda a derecha, la etiqueta quede al lado derecho de la caja.
Podréis ver estas y otras buenas prácticas en Introducción a la accesibilidad II. Además os dejo esto de la w3c para que podáis profundizar más sobre las buenas prácticas de accesibilidad y esto sobre el emplazamiento del texto.
Radio buttons, choice group o botones de radio
Los Radio buttons son un componente que en sí representan los botones de radio (de ahí el nombre) y por tanto son una de tantas metáforas que se usan en diseño UX. Además es un componente muy similar al check box tanto en su utilidad como en su formato. Sin embargo tiene ciertas diferencias como las que veremos ahora.
Usos y características de los radio buttons
En cuanto a su utilidad, los botones de radio permiten a los usuarios seleccionar una única opción de una sola lista de 2 a 7 opciones mutuamente excluyentes. Veamos qué significa este texto resaltado parte por parte.
1. Que solo se pueda elegir una única opción implica que las opciones son excluyentes entre ellas. Es decir, que si elegimos una, el resto quedan sin seleccionar.
2. Que la lista sea de 2 a 7 opciones significa que aquí el mínimo de opciones son dos. No se puede poner una sola opción y aunque se podrían aceptar más de 7 opciones, por economía del espacio y usabilidad, se recomienda cambiar a un dropdown si las opciones son más de 7.
3. Que la lista sea una sola lista quiere decir que no puede haber opciones dentro de otra. Todas las opciones de la lista tienen que estar al mismo nivel. Esto es así incluso aunque la segunda opción complemente a la primera
Estos tres puntos nos traen unas pequeñas pero grandes diferencias con respecto al checkbox pues allí podemos seleccionar varias opciones pero aquí solo una única opción. En las casillas de verificación las opciones pueden estar anidadas dentro de otra y por tanto ser hijas de esa opción mientras que aquí solo hay una lista y sobre todo, allí se permite que el componente contenga una sola casilla para verificar mientras que aquí el mínimo es de dos opciones.
Por otra parte, en las casillas de verificación teníamos tres estados según la condición: seleccionado, no seleccionado e indeterminado. En los botones de radio no existe el estado indeterminado.
El componente radio button trae implícito la obligatoriedad de responder a la pregunta, por ello siempre habrá una opción marcada que por defecto deberá ser la opción más segura y menos disruptiva para el usuario.
Anatomía y distribución del radio button
Como hemos comentado anteriormente, el botón de radio siempre tiene mínimo dos opciones seleccionables. A partir de ahí las opciones pueden llegar hasta 7 y como en los checkboxes, consisten de un input de entrada (en este caso circular) y una etiqueta (la cual es el nombre de la respuesta). Sin embargo, también se puede añadir una etiqueta de grupo al inicio para dar contexto.
En cuanto a la colocación, tal y como pasaba con las casillas de verificación, se permite una distribución vertical u horizontal según convenga al diseño, siendo la vertical la preferida.
Y por lo que se refiere a la alineación… también igual que en los checkboxes, entre las opciones lo más a la izquierda y superior posible y entre el input de marcado y la etiqueta, centrada con respecto a la etiqueta si esta es de una sola línea y a la parte superior si la etiqueta es de más de una línea.
También aquí rigen los criterios de buenas prácticas y accesibilidad de los checkboxes.
Toggle, switchs, conmutadores o interruptores
Los toggle o switchs se utilizan para cambiar rápidamente entre dos estados posibles. Tan rápido que la acción debe verse reflejada al momento sin necesidad de pulsar ningún otro botón. Por ello, son los reyes de cualquier sección settings con su formato de interruptores «on/off» . Por ejemplo al elegir entre el modo claro o el oscuro, entre permitir notificaciones o no hacerlo, etc. En cualquier caso la lógica que debe operar en los conmutadores es justo esa: encendido / apagado, mostrar / ocultar, activo / inactivo, etc.
Hay que entender que los switchs nos permiten única y exclusivamente 2 opciones – por esto me gusta más la traducción de interruptor sobre conmutador aunque conmutador sea más común –
Anatomía y distribución del toggle switch
La anatomía del toggle switch es un poco complicada ya que da varias posibilidades. Por un lado puede tener (o no) un encabezado. De igual modo, puede tener (o no) una etiqueta que ayude a dar contexto. Luego ya si tendríamos lo que es el input o manejador, y finalmente pueden llevar (o no) el llamado OnText / OffText que como podemos imaginar se corresponden con las dos opciones. El Ontext es el texto de la opción activada y el OffText el de la opción desactivada.
Varias cosas a indicar sobre el componente toggle son que si necesitamos poner instrucciones de primeras deberán ir en el encabezado el cual puede ser medianamente largo. No así las etiquetas, estas serán una segunda opción y con un máximo de 4 palabras. Las etiquetas son solo un soporte a la comprensión.
En cuanto al Ontext / Offtext debe ser una palabra lo más corta y precisa posible la cual se recomienda que no sea un verbo sino un sustantivo. Por ejemplo, no diremos Encender / Apagar sino Encendido / Apagado. Además, si no tenemos una buena combinación de palabras lo que haremos será colocar un encabezado y dar las opciones On / Off las cuales ya son universales.
Por lo que se refiere a la colocación y alineación del componente, la distribución debería ser solo vertical de forma que en la parte superior quede en enunciado y en la inferior quede primero la etiqueta si tiene, luego el propio input y el OnText u OffText a la derecha de este. En cuanto a la alineación, los dos niveles deben ir alineados a la izquierda.
Por otra parte los switchs tienen una variante digna de mención que son los small toggles. Estos son el mismo componente pero de un tamaño reducido para poder aplicarlo en tablas y sitios de “difícil acceso”. Lo que sí hay que tener en cuenta con los small toggles es que para garantizar su mínimo tamaño posible, eliminan la posibilidad de tener encabezados y etiquetas.
¿Cuándo no usar el toggle switch?
Tres ocasiones en las que evitar usar el toggle switch:
- Si no se produce una diferenciación binaria de activo / inactivo, falso / verdadero o encendido / apagado. Usar radio button en ese caso
- Si hay un número de opciones diferente a dos. Usar radio button o checkbox según convenga
- Para elegir un elemento singular dentro de tablas de datos o listas. Usar un botón de radio en ese caso
