Cuadros combinados de listas & desplegables de Windows 7

Nota

Esta guía de diseño se creó para Windows 7 y no se ha actualizado para las versiones más recientes de Windows. Gran parte de las instrucciones todavía se aplican en principio, pero la presentación y los ejemplos no reflejan nuestra guía de diseño actual.

Con una lista desplegable o un cuadro combinado, los usuarios pueden elegir entre una lista de valores mutuamente excluyentes. Los usuarios pueden elegir una y solo una opción. Con una lista desplegable estándar, los usuarios se limitan a las opciones de la lista, pero con un cuadro combinado pueden escribir una opción que no esté en la lista.

Cuadro combinado típico.

Los términos siguientes son importantes para comprender a medida que lea este artículo:

• Un cuadro de lista estándar es un cuadro que contiene una lista de varios elementos, con varios elementos visibles.
• Una lista desplegable es una lista en la que el elemento seleccionado siempre está visible y los demás están visibles a petición haciendo clic en un botón desplegable.
• Un cuadro combinado es una combinación de un cuadro de lista estándar o una lista desplegable y un cuadro de texto editable, lo que permite a los usuarios escribir un valor que no está en la lista.
  • Una lista desplegable editable es una combinación de una lista desplegable y un cuadro de texto editable.
  • Un cuadro de lista editable es una combinación de un cuadro de lista estándar y un cuadro de texto editable.

Nota

Las directrices relacionadas con el diseño se presentan en un artículo independiente.

¿Es este el control adecuado?

Para decidirte, intenta responder a estas preguntas:

• ¿Se usa el control para elegir una opción de una lista de valores mutuamente excluyentes? Si no es así, usa otro control. Para elegir varias opciones, use una lista estándar de selección múltiple, lista de casillas, generador de listas o agregar o quitar lista en su lugar.
• ¿Son los comandos de opciones? Si es así, use un botón de menú o un botón de división en su lugar. Use listas desplegables y cuadros combinados para objetos (sustantivos) o atributos (adjetivos), pero no comandos (verbos).
• ¿La lista presenta datos, en lugar de opciones de programa? En cualquier caso, una lista desplegable o un cuadro combinado es una opción adecuada. Por el contrario, los botones de radio son adecuados solo para un pequeño número de opciones de programa.

Listas desplegables

• ¿Hay una opción predeterminada que se recomienda para la mayoría de los usuarios en la mayoría de las situaciones? ¿Ve la opción seleccionada mucho más importante que ver las alternativas? Considere la posibilidad de usar una lista desplegable si no desea animar a los usuarios a realizar cambios ocultando las alternativas. Si no es así, considere los botones de radio, una lista de selección única o un cuadro de lista editable, lo que da más énfasis a las opciones alternativas.

  

  En este ejemplo, la calidad de color más alta es la mejor opción para la mayoría de los usuarios, por lo que una lista desplegable es una buena opción para minimizar las alternativas.

• ¿Desea llamar la atención sobre la opción? Si es así, considere los botones de radio, una lista de selección única o un cuadro de lista editable, que tienden a atraer más atención tomando más espacio de pantalla. Dado que las listas desplegables son compactas, son buenas opciones para las opciones que desea reducir.

• ¿El espacio de pantalla es premium? Si es así, use una lista desplegable porque el espacio de pantalla usado es fijo e independiente del número de opciones.

• ¿Hay otras listas desplegables en la ventana? Si es así, considere la posibilidad de usar una lista desplegable para la coherencia.

Listas desplegables editables

Además de los principios que se acaban de proporcionar para las listas desplegables, también se aplica lo siguiente:

• ¿Están restringidas las posibles opciones? Si es así, use una lista desplegable normal en su lugar. Los cuadros combinados son para entradas sin restricciones, en las que es posible que los usuarios necesiten escribir un valor que no esté actualmente en la lista. Dado que la entrada no está entrenada, si los usuarios escriben texto que no es válido, debe controlar el error con un mensaje de error.

• ¿Puede enumerar las opciones más probables de antemano? Si no es así, use un cuadro de texto en su lugar.

• ¿Se usa la lista desplegable para enumerar la entrada del usuario anterior? A menos que los usuarios necesiten revisar la lista completa de entradas anteriores, use un cuadro de texto con la opción autocompletar en su lugar.

  

  En este ejemplo, es posible que los usuarios necesiten revisar su entrada anterior, por lo que una lista desplegable editable es una buena opción.

  

  En este ejemplo, un cuadro de texto con autocompletar es una buena opción.

• ¿Los usuarios necesitarán ayuda para seleccionar valores válidos? Si es así, use un cuadro de texto con un botón Examinar en su lugar.

  

  En este ejemplo, los usuarios pueden hacer clic en "To" para ayudarles a seleccionar valores válidos.

• ¿Es importante animar a los usuarios a revisar las opciones alternativas o invitar a cambios? Si es así, considere la posibilidad de usar un cuadro de lista editable en su lugar. Con una lista desplegable editable, los usuarios no conocerán las alternativas hasta que se quite la lista.

• ¿Los usuarios necesitan encontrar un elemento rápidamente en una lista grande? (Solo Win32) Si es así, use un cuadro combinado porque los usuarios pueden seleccionar un elemento escribiendo su nombre completo. Por el contrario, la lista desplegable Win32 selecciona los elementos basados solo en el último carácter escrito (por lo que escribir "Jun" en una lista de meses coincidiría con noviembre, no junio). En este caso, use un cuadro combinado incluso si las opciones posibles están restringidas.

Cuadros de lista editables

• ¿Están restringidas las posibles opciones? Si es así, use una lista de selección única o una lista desplegable normal en su lugar. Los cuadros combinados son para la entrada sin restricciones, donde es posible que los usuarios necesiten escribir un valor que no esté actualmente en la lista. Dado que la entrada no está entrenada, si los usuarios escriben texto que no es válido, debe controlar el error con un mensaje de error.
• ¿Puede enumerar las opciones más probables de antemano? Si no es así, use un cuadro de texto en su lugar.
• ¿Es importante animar a los usuarios a revisar las opciones alternativas o invitar a cambios? Si no es así, considere una lista desplegable editable en su lugar.
• ¿Desea llamar la atención sobre la opción? Si no es así, considere una lista desplegable editable en su lugar. Dado que las listas desplegables son compactas, son buenas opciones para las opciones que desea reducir.
• ¿El espacio de pantalla es premium? Si es así, use una lista desplegable editable porque el espacio de pantalla usado es fijo e independiente del número de opciones.

En las listas desplegables, el número de elementos de la lista no es un factor para elegir el control porque se escalan de miles de elementos hasta uno. Las listas desplegables editables se escalan de miles de elementos a ninguno, ya que los usuarios pueden escribir un valor que no está en la lista. Dado que las listas desplegables se pueden usar para los datos, es posible que el número de elementos no se conozca de antemano y quizás no se pueda garantizar. Incluya siempre al menos tres elementos en cuadros de lista editables para justificar el espacio de pantalla adicional.

Patrones de uso

Las listas desplegables y los cuadros combinados tienen varios patrones de uso:

Uso	Ejemplo
Lista desplegable una lista desplegable estándar, con un conjunto fijo de valores predeterminados.	Cuando se cierra, solo está visible el elemento seleccionado. Cuando los usuarios hacen clic en el botón desplegable, todas las opciones se vuelven visibles. Para cambiar el valor, los usuarios pueden abrir la lista y hacer clic en otro valor. En este ejemplo, la lista está en su estado normal. En este ejemplo, se ha quitado la lista.
Vista previa de la lista desplegable una lista desplegable que obtiene una vista previa de los resultados de la selección para ayudar a los usuarios a elegir.	En estos ejemplos, las listas desplegables muestran una vista previa de los resultados de la selección.
Lista desplegable editable un cuadro combinado desplegable, que permite a los usuarios escribir un valor que no está en la lista desplegable.	Ejemplos de una lista desplegable editable en modos de edición y desplegable. Use este control cuando desee proporcionar la flexibilidad de un cuadro de texto, pero desea ayudar a los usuarios proporcionando una lista cómoda de opciones probables.
Cuadros de lista editables un cuadro combinado normal, que permite a los usuarios escribir un valor que no está en la lista siempre visible.	En estos ejemplos, siempre se muestran los cuadros de lista editables. Este control es una mejor opción que la lista desplegable editable cuando es importante animar a los usuarios a revisar las opciones alternativas o invitar a cambiar.

Instrucciones

General

• No use el cambio de una lista desplegable o un cuadro combinado a:
  • Realizar comandos.
  • Muestra otras ventanas, como un cuadro de diálogo para recopilar más entradas.
  • Muestra dinámicamente otros controles relacionados con el control seleccionado (los lectores de pantalla no pueden detectar estos eventos).

Presentación

• Ordene los elementos de lista en un orden lógico, como agrupar opciones muy relacionadas, colocar primero las opciones más comunes o usar el orden alfabético. Ordene los nombres en orden alfabético, números en orden numérico y fechas en orden cronológico. Las listas con 12 o más elementos deben ordenarse alfabéticamente para facilitar la búsqueda de elementos.

  Correcto:

  En este ejemplo, los elementos de lista se ordenan por su relación espacial.

  Incorrecto:

  En este ejemplo, hay tantos elementos de lista que deben ordenarse en orden alfabético.

  Correcto:

  En este ejemplo, los elementos de lista se ordenan en orden alfabético, excepto la opción que representa todos los elementos.

• Coloque las opciones que representan Todos o Ninguno al principio de la lista, independientemente del criterio de ordenación de los elementos restantes.

• Incluya las metaconfiguraciones entre paréntesis.

  

  En este ejemplo, "(None)" es una meta-opción porque no es un valor válido para la elección, sino que describe que la propia opción no se está usando.

• Al deshabilitar una lista desplegable o un cuadro combinado, deshabilite también las etiquetas asociadas y los botones de comando.

Listas desplegables

• Cuando se usa una sola lista desplegable para cambiar la vista de un control asociado, cambie la vista inmediatamente en la selección en lugar de requerir un botón de comando independiente. Use un botón de comando independiente solo si la lista tarda mucho tiempo en representarse. Sin embargo, los encabezados de lista y los botones de menú son los controles preferidos para este fin.

• En su lugar, no tenga elementos de lista en blanco. Los usuarios no saben cómo interpretar los elementos en blanco, mientras que el significado de las meta opciones es explícito.

  Correcto:

  Incorrecto:

  En el ejemplo incorrecto, el significado de la opción en blanco no está claro.

Vista previa de listas desplegables

• Use vistas previas en los elementos de lista cuando sea mejor mostrar con imágenes que describir solo con texto.

  

  En este ejemplo, la versión preliminar explica las opciones mucho mejor que el texto por sí solo.

• No use iconos innecesarios y no útiles en las versiones preliminares.

  Incorrecto:

  En este ejemplo, los iconos de vista previa no son necesarios porque no comunican ninguna información.

Cuadros combinados

• Limite la longitud del texto de entrada cuando pueda. Por ejemplo, si la entrada válida es un número entre 0 y 999, use un cuadro combinado limitado a tres caracteres.

• Si hay muchas opciones posibles, centre el contenido de la lista en las opciones más probables. Dado que los usuarios pueden especificar valores que no están en la lista, los cuadros combinados no tienen que enumerar todas las opciones, solo las opciones probables o un ejemplo representativo.

  

  En este ejemplo, no se muestran muchas opciones válidas, como 15 o fuentes de tamaño medio, como 9,5.

Valores predeterminados

• Seleccione la opción más segura (para evitar la pérdida de datos o acceso al sistema) y la opción más segura de forma predeterminada. Si la seguridad y la seguridad no son factores, seleccione la opción más probable o conveniente.
  • Excepción: Muestra un valor predeterminado en blanco si el control representa una propiedad en un estado mixto, lo que ocurre cuando se muestra una propiedad para varios objetos que no tienen la misma configuración.

Mensajes

Un mensaje es una etiqueta o instrucción corta colocada dentro de una lista desplegable editable como su valor predeterminado. A diferencia del texto estático, las indicaciones desaparecen de la pantalla una vez que los usuarios escriben algo en el cuadro combinado o obtienen el foco de entrada.

Un aviso típico.

Use un mensaje cuando:

• El espacio de pantalla está en un nivel tan premium que el uso de una etiqueta o instrucción no es deseable, como en una barra de herramientas.
• La solicitud es principalmente para identificar el propósito de la lista de forma compacta. No debe ser información fundamental que los usuarios necesiten ver al usar el cuadro combinado.

No use avisos solo para dirigir a los usuarios a seleccionar algo de la lista o hacer clic en botones. Por ejemplo, mensajes como Seleccionar una opción o Escribir un nombre de archivo y, a continuación, hacer clic en Enviar son innecesarios.

Al usar avisos:

• Dibuje el texto del mensaje en gris cursiva y texto real en negro normal. El texto del mensaje no debe confundirse con el texto real.
• Mantenga el texto del mensaje conciso. Puede usar fragmentos en lugar de oraciones completas.
• Use mayúsculas de estilo de oración.
• No use puntos suspensivos ni puntuación finales.
• El texto del mensaje no debe ser editable y debe desaparecer una vez que los usuarios hagan clic en o en la pestaña en el cuadro de texto.
  • Excepción: El mensaje se muestra si el cuadro de texto tiene el foco de entrada predeterminado y solo desaparece una vez que el usuario empieza a escribir.
• El texto del mensaje se restaura si el cuadro de texto sigue vacío cuando pierde el foco de entrada.

Incorrecto:

En este ejemplo, el espacio de pantalla no es premium; una vez que se rellena una lista desplegable editable, es difícil que los usuarios recuerden lo que es para; y el texto del mensaje se puede editar y dibujar de la misma manera que el texto real.

Ajuste de tamaño y espaciado recomendados

Ajuste de tamaño y espaciado recomendados para listas desplegables y cuadros combinados.

• Elija un ancho adecuado para los datos válidos más largos. Las listas desplegables no se pueden desplazar horizontalmente, por lo que los usuarios solo pueden ver lo que está visible en el control. (Sin embargo, tenga en cuenta que los cuadros combinados pueden tener habilitada la funcionalidad De inscripción automática).
• Incluya un 30 % adicional (hasta un 200 % para texto más corto) para cualquier texto (pero no números) que se localizará.
• Elija una longitud de lista que elimine el desplazamiento vertical innecesario. Dado que las listas desplegables se muestran a petición, sus listas deben mostrarse hasta 30 elementos. Los cuadros de lista editables (aquellos que no tienen un botón desplegable) deben mostrarse entre 3 y 12 elementos.

Etiquetas

Etiquetas de control

• Escriba la etiqueta como una palabra o frase, no como una oración y termine con dos puntos. Excepciones:

  • Listas desplegables editables con avisos ubicados donde el espacio es premium.
  • Si una lista desplegable o un cuadro combinado está subordinada a un botón de radio o casilla y se introduce por su etiqueta que termina con dos puntos, no coloque una etiqueta adicional en el control.

• Asigne una clave de acceso única para cada etiqueta. Para obtener instrucciones, consulte Teclado.

• Use mayúsculas de estilo de oración.

• Coloque la etiqueta a la izquierda o por encima del control y alinee la etiqueta con el borde izquierdo del control. Si la etiqueta está a la izquierda, alinee verticalmente el texto de la etiqueta con el texto del control.

  Correcto:

  En este ejemplo, la etiqueta se alinea correctamente con el texto del control.

  Incorrecto:

  En este ejemplo, la etiqueta está alineada incorrectamente con el texto del control.

• Puede especificar unidades (segundos, conexiones, etc.) entre paréntesis después de la etiqueta.

• No hagas que el contenido de la lista desplegable o el cuadro combinado (o su etiqueta de unidades) formen parte de una frase, ya que esto no es localizable.

Texto de opción

• Asigne un nombre único a cada opción.
• Use mayúsculas de estilo de frase, a menos que un elemento sea un sustantivo adecuado.
• Escriba la etiqueta como una palabra o frase, no como frase, y use ningún signo de puntuación final.
• Use expresiones paralelas e intente mantener la longitud aproximadamente igual para todas las opciones.

Texto informativo

• Si necesita agregar texto informativo sobre una lista desplegable o un cuadro combinado, agréguelo encima de la etiqueta. Use oraciones completas con puntuación final.

• Use mayúsculas de estilo de oración.

• La información adicional que resulta útil, pero no necesaria, debe mantenerse corta. Coloque esta información entre paréntesis entre la etiqueta y los dos puntos, o sin paréntesis por debajo del control.

  

  En este ejemplo se muestra información adicional colocada debajo del control .

Documentación

Al hacer referencia a listas desplegables:

• Use el texto exacto de la etiqueta, incluida su mayúscula, pero no incluya el carácter de subrayado o dos puntos de la tecla de acceso; incluya la lista o el cuadro, lo que sea más claro.
• Para las opciones de lista, use el texto exacto de la opción, incluida su mayúscula.
• En programación y otra documentación técnica, consulte listas desplegables como listas desplegables. En cualquier otro lugar, use la lista o el cuadro, lo que sea más claro.
• Para describir la interacción del usuario, use click.
• Cuando sea posible, dé formato a las opciones de etiqueta y lista con texto en negrita. De lo contrario, coloque la etiqueta y las opciones entre comillas solo si es necesario para evitar confusiones.

Ejemplo: en la lista Tamaño de fuente, haga clic en Fuentes grandes.

Al hacer referencia a cuadros combinados:

• Use el texto exacto de la etiqueta, incluida su mayúscula, pero no incluya el carácter de subrayado o dos puntos de la tecla de acceso; incluya el cuadro de palabras.
• Para las opciones de lista, use el texto exacto de la opción, incluida su mayúscula.
• En programación y otra documentación técnica, consulte cuadros combinados como cuadros combinados. En cualquier otro lugar, use box.
• Para describir la interacción del usuario, use entrar.
• Cuando sea posible, dé formato a las opciones de etiqueta y lista con texto en negrita. De lo contrario, coloque la etiqueta y las opciones entre comillas solo si es necesario para evitar confusiones.

Ejemplo: En el cuadro Fuente , escriba la fuente que desea usar.