Controles de Selección (RadioButton, CheckBox)

Diseño Centrado en el Usuario

Ing. Carlos Caraballo
Controles de Selección
⚫ Representa una lista de alternativas posibles para una
determinada acción.
⚫ Los controles de selección incluyen los siguientes:
◦ CheckBox
◦ Radio Button
◦ ComboBox
◦ Paletas

Diseño centrado en el usuario ( Ing. Carlos Caraballo )

Controles de Selección –Radio Button/Option Button

⚫ Permite elegir un solo elemento de una lista de

posibilidades mutuamente excluyentes. Su contenido por lo
regular es fijo.
⚫ Desventajas:
◦ Mucho espacio en pantalla
◦ Utilizado en lista de opciones no muy grandes

⚫ Ventajas:
◦ Fácil de usar
◦ Explícito

Diseño centrado en el usuario ( Ing. Carlos Caraballo )

Controles de Selección –Radio Button/Option Button

⚫ Recomendaciones
◦ Las opciones deben ser bastante descriptivas
◦ Desplegarse en una sola línea
◦ Utiliza la capitalización
◦ Incluir una opción “None” si esto agrega claridad y las posibilidades lo permiten.
◦ Proveer una opción predeterminada siempre y cuando sea posible. Hay casos donde
realmente no es posible o es complicado con por elemento el caso de “Sexo:
Femenino, Masculino).

⚫ Estructura
◦ El texto siempre alineado a la izquierda
◦ El control en una disposición de columna ( Preferible) u horizontal dependiendo del
espacio.
◦ Incluir un recuadro para una crear una distinción visual

Diseño centrado en el usuario ( Ing. Carlos Caraballo )

Controles de Selección –Radio Button/Option Button

Diseño centrado en el usuario ( Ing. Carlos Caraballo )

Controles de Selección –Radio Button/Option Button

Diseño centrado en el usuario ( Ing. Carlos Caraballo )

Controles de Selección –Radio Button/Option Button

⚫ Control Relacionado
◦ Cualquier control relacionado a una opción se debe colocar inmediatamente a la
derecha.

Diseño centrado en el usuario ( Ing. Carlos Caraballo )

Controles de Selección –Radio Button/Option Button

⚫ Captions
◦ Un texto descriptivo para cada opción
◦ Capitalización
◦ En grupos, incluir un Caption para el recuadro que los contenga.

Diseño centrado en el usuario ( Ing. Carlos Caraballo )

Controles de Selección –Radio Button/Option Button

⚫ Accesos con teclado

◦ Incluir un “mnemonic” para cada descripción siempre que sea posible.

Diseño centrado en el usuario ( Ing. Carlos Caraballo )

Controles de Selección –Check Boxes

⚫ Además de su aspecto gráfico su diferencia fundamental

con el Radio Button radia en su aplicación en listas donde
las posibilidades de selección son más de una (No
Excluyentes).
⚫ La mayoría de las consideraciones, como organización,
estructura y disposición aplicadas al Radio Button pueden
ser aplicadas al Check Box.

Diseño centrado en el usuario ( Ing. Carlos Caraballo )

Controles de Selección –Radio Button/Option Button

⚫ Ejercicio
◦ Crear una aplicación que permita registrar la configuración de mostrado normal o
“Top Most”, también las opciones de: confirmar el cierre de la ventana, utilizar color
de fondo, conectarse a una base de datos, tipos de posibilidades de bases de datos
(Informix, SQL Server, Oracle).

Diseño centrado en el usuario ( Ing. Carlos Caraballo )