Los botones de radio son como selecciones; Las casillas de verificación son como selecciones múltiples | Programar Plus

Estaba leyendo la publicación de Anna Kaley “Listboxes vs. Dropdown Lists” el otro día. Es una comparación bastante sencilla entre diferentes implementaciones de UI de opciones de selección. Hay un montón de buenos consejos allí. Clásicos como ese, debe usar botones de radio (selección única) o casillas de verificación (selección múltiple) si está mostrando cinco opciones o menos, y las diferentes opciones cuando la cantidad de opciones crece a partir de ahí.

Una cosa de la que no se habla es cómo implementas estas cosas. Me imagino que es un poco a propósito, ya que el punto es hablar de UX, no de tecnología. Pero cómo los implementas juega un papel muy importante en UX. En los círculos de diseño y desarrollo web, la conversación sobre estas cosas generalmente involucra si puede lograr estas cosas con controles nativos o si necesita reconstruirlas desde cero. Si puede usar controles nativos, a menudo debería, porque hay toneladas de UX que obtiene de forma gratuita que, de lo contrario, podrían perderse u olvidarse cuando reconstruya, como cómo funciona todo a través del teclado.

La razón por la que la gente elige “reconstruir” suele ser por razones de estilo, pero eso está cambiando lentamente con el tiempo. Ahora tenemos mucho control sobre radios y casillas de verificación. Podemos diseñar el exterior de selecciones bastante bien 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 datos y resultados finales, eso es lo mismo que un <select>. Si necesita seleccionar varias opciones, tenemos <input type="checkbox">, pero esos son los datos y el resultado final igual que <select multiple>.

Usted elige en función de la sala que tiene disponible y la UX de lo que sea que esté construyendo.

(Visited 5 times, 1 visits today)