Los botones de opción son como selecciones; Las casillas de verificación son como selecciones múltiples

El otro día estaba leyendo la publicación de Anna Kaley “Cuadros de lista frente a listas desplegables” . Es una comparación bastante sencilla entre diferentes implementaciones de UI para seleccionar opciones. Hay muchos buenos consejos allí. En clásicos como ese, debes usar botones de opción (selección única) o casillas de verificación (selección múltiple) si estás mostrando cinco o menos opciones, y las diferentes opciones cuando el número de opciones crece a partir de ahí.

Una cosa de la que no se habla es cómo implementar estas cosas. Me imagino que es algo intencionado, ya que el punto es hablar de UX, no de tecnología. Pero la forma en que los implementas juega un papel muy importante en la UX. En los círculos de diseño y desarrollo web, la conversación sobre estas cosas generalmente gira en torno a si se pueden lograr con controles nativos o si es necesario reconstruirlos desde cero. Si puedes usar controles nativos, a menudo deberías hacerlo, porque hay toneladas de UX que obtienes de forma gratuita que, de otro modo, podrían perderse u olvidarse al reconstruir, como funciona todo a través del teclado.

La razón por la que la gente elige “reconstruir” suele ser por motivos de estilo, pero eso está cambiando lentamente con el tiempo. Ahora tenemos mucho control sobre las radios y las casillas de verificación. Podemos diseñar bastante bien el exterior de las selecciones e incluso el interior con trucos.

Pero incluso sin un estilo personalizado, todavía tenemos algunas opciones de interfaz de usuario. Si necesita seleccionar una opción entre muchas, tenemos input type="radio"botones, pero en cuanto a datos y resultados finales, es lo mismo que un archivo select. Si necesita seleccionar varias opciones, tenemos input type="checkbox", pero los datos y el resultado final son iguales que select multiple.

Elige según la habitación que tengas disponible y la UX de lo que estés construyendo.