Los radio botones son elementos esenciales en un formulario. Se utilizan cuando hay una lista de dos o más opciones que se excluyen mutuamente, y el usuario debe seleccionar exactamente una opción. En otras palabras, al hacer clic en un botón de radio no seleccionada se anulará cualquier otro botón que fue seleccionado previamente en la lista.
Los radio botones son geniales cuando se usan correctamente - impide que los usuarios introduzcan datos erróneos, ya que sólo se muestran las opciones legales y cuentan con una gran cantidad de características interesantes, tales como la navegación por teclado y la representación fiable en todas las plataformas. En este artículo de hoy, vamos a la vista general de directrices prácticas para los radio botones (radio buttons) que se han elaborado a partir de las pruebas de usabilidad.
De donde surgió el nombre de radio botones?
Los radio botones fueron nombrados después de los botones físicos utilizados en las radios de coches viejos para cambiar las estaciones - cuando uno de los botones se ha pulsado, otros botones se soltarían, dejando un único botón en estado"empujado". El radio boton orientado al software fue modelado después de estos botones de radio físicos.
Utiliza radio botones solamente para configuraciones
Utiliza los radio botones para cambiar una configuración, no como botones de acción para ejecutar comandos. Además, los ajustes modificados no deben entrar en vigor hasta que el usuario hace clic en el botón de acción (etiquetado como "Continuar" o "Guardar", por ejemplo). Si el usuario hace clic en el botón Atrás o Cancelar, los cambios realizados en los radio botones en la página deben ser descartados y los ajustes originales restaurados.
Si se utilizan los botones de radio sólo para afectar la manera en que se realiza una acción , a menudo es mejor presentar variaciones de acciones en su lugar. Si lo haces, permites a los usuarios elegir la acción adecuada con una sola interacción.
Orden lógico para opciones
Se deben colocar las opciones en un orden lógico, de la mayor probabilidad de ser seleccionada para menos, de la operación más simple a la más compleja, o de menor a mayor riesgo. el orden alfabético no es recomendable, ya que depende del idioma y por lo tanto no es localizable.
Las opciones debe ser comprensivas y claramente distintivas
Los mayores problemas de usabilidad para los radio botones provienen de etiquetas que son vagas, engañosas, o describen opciones que son imposibles para los usuarios promedio de entender. La ayuda contextual puede aliviar este último problema, pero es mejor que el usuario pruebe cualquier conjunto importante de los controles para interacción.
Siempre ofrecen una selección por defecto
Uno de las 10 heurística de diseño de IU dice que los usuarios deben ser capaces de deshacer (y rehacer) sus acciones. Esto significa que las personas puedan establecer un control de interfaz de usuario de nuevo a su estado original. En el caso de los radio botones esto significa que los radio botones siempre deben tener exactamente una opción pre-seleccionada. Selecciona la manera más segura (para evitar la pérdida de datos o el acceso al sistema) y la opción más segura y privada. Si la la seguridad no es un factor, selecciona la opción más probable o conveniente.
Si los usuarios podrían tener que abstenerse de hacer una selección, debes proporcionar un radio botón para esta opción, tal como una etiqueta "Ninguna." Ofreciendo a los usuarios una opción explícita, neutral para hacer clic es mucho mejor que la que requiere el acto implícito de no seleccionar a partir una lista.
Prueba diseñar tus listas verticalmente
Los radio botones horizontales son a veces difíciles de escanear y localizar. La disposición horizontal de los botones de radio también puede hacer que sea difícil de saber con qué label del botón de opción corresponde: ya sea la que esta antes o después del radio botón. El posicionamiento vertical de los radio botones es más seguro.
Trata de diseñar tus listas verticalmente, con una opción por línea. Si aún necesita una disposición horizontal con múltiples opciones por línea, asegúrate de que el espacio de los radio botones y labels sea absolutamente claro que la opción va con cada label. Por ejemplo, se debe evitar una situación como ésta, en que es muy difícil ver el botón de opción correcta para hacer clic para la opción cuatro.
Utiliza labels tags como areas clickables
Los radio botones son muy pequeñas de naturaleza, y, por lo tanto, de acuerdo con la ley de Fitts, puede ser difícil de hacer clic o tap. Para ampliar el área de destino, permite a tus usuarios seleccionar una opción pulsando o tocando no sólo ese radio botón, sino también el label o palabras asociadas. Permite a tus usuarios seleccionar una opción, es decir que haga clic en el propio radio botón de sí o en su label correspondiente.
Los buenos radio botones horizontales se pueden encontrar en la aplicación de Duolingo: que han utilizado un clásico de los radio botones horizontales, pero hicieron los objetivos visualmente distinguibles y lo suficientemente grande para dispositivos táctiles.
Utiliza radio botones en lugar de dropdown
Si es posible, utiliza los radio botones en lugar de los dropdown. Los botones de radio tienen una menor carga cognitiva porque hacen visibles todas las opciones para que los usuarios puedan comparar fácilmente.
En caso de que tenga menos de 7 opciones que usted debe considerar el uso de radio botones. Tus usuarios podrán escanear inmediatamente la cantidad de opciones que tienen y lo que cada una de esas opciones son, sin hacer clic (o escribiendo) nada para revelar esta información.
Evita controles anidados
Evita los radio botones anidados con otros radio botones o casillas de verificación. Siempre debes mantener todas las opciones en el mismo nivel para evitar confusiones.
Utiliza animación y retroalimentacion visual
Las animaciones bien diseñadas hacen que la experiencia se sienta manipulado. Elementos de la interfaz de usuario como radio botones deben aparecer tangible, a pesar de que están detrás de una capa de vidrio. Las indicaciones visuales y de movimiento de entrada se reconocen inmediatamente y añaden claridad a través de reacciones visuales a la entrada del usuario.
Una casilla de verificación seria una mejor opción?
Si sólo hay dos opciones, se puede utilizar una sola casilla en su lugar. Sin embargo, las casillas de verificación son adecuados sólo para convertir una sola opción de encendido o apagado, mientras que los botones de radio se pueden utilizar completamente para diferentes alternativas.
Debes recordar siguientes momentos si ambas soluciones son posibles:
Alternativas. Utilice los radio botones si el significado de la casilla de verificación no está aclarado o no es completamente obvio. En el siguiente ejemplo, las opciones son tan opuestas que los radio botones son la mejor opción.
Asistentes
Debe utilizar los radio botones en las páginas del asistente para realizar las alternativas claras, incluso si una casilla de verificación sea aceptable. Diseños con un radio botón seleccionado por defecto hacen una fuerte sugerencia para el usuario. La opción por defecto puede llevar a los usuarios a tomar la mejor decisión, y puede aumentar su confianza a medida que avanzan.
Sí o No es respuesta sencilla. El uso de una casilla de verificación es correcta cuando se tiene una sola pregunta sencilla y el usuario va a responder "sí" o "no".
Conclusión
En el diseño de los radio botones lo más importante a seguir son las normas de diseño, ya que esto aumenta la capacidad de los usuarios para predecir lo que un control va a hacer y cómo se va a operar. Por el contrario, en violación de las normas hace que la interfaz de usuario se sientan frágiles - como si cualquier cosa puede ocurrir sin previo aviso.
Diseña con cuidado. Los radio botones son fáciles de probar usando prototipos en papel, por lo que no es necesario poner en práctica cualquier cosa para ver si los usuarios entienden el control y pueden usarlo correctamente.