Vistas de lista

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 vista de lista, los usuarios pueden ver e interactuar con una colección de objetos de datos mediante una selección única o una selección múltiple.

Una vista de lista típica.

Las vistas de lista tienen más flexibilidad y funcionalidad que los cuadros de lista. A diferencia de los cuadros de lista, admiten el cambio de vistas, la agrupación, varias columnas con encabezados, la ordenación por columnas, el cambio de anchos de columna y el orden, siendo un origen de arrastre o un destino de colocación, y copiando datos hacia y desde el Portapapeles.

Nota

Las directrices relacionadas con los cuadros de lista y diseño se presentan en artículos independientes.

¿Es este el control adecuado?

Una vista de lista es más que un cuadro de lista más flexible y funcional: su funcionalidad adicional da como resultado un uso diferente. En la tabla siguiente se muestra la comparación.

Uso	Cuadros de lista	Vistas de lista
Tipo de datos	Opciones de datos y programas.	Solo datos.
Contents	Solo etiquetas.	Etiquetas y datos auxiliares, posiblemente en varias columnas.
Interacción	Se usa para realizar selecciones.	Se puede usar para realizar selecciones, pero a menudo se usa para mostrar e interactuar con los datos. Puede ser un origen de arrastre o un destino de colocación.
Presentación	Fijo.	Los usuarios pueden cambiar las vistas, agrupar, ordenar por columnas y cambiar el ancho y el orden de las columnas.

Para decidir si este es el control correcto, tenga en cuenta estas preguntas:

• ¿La lista presenta datos, en lugar de opciones de programa? Si no es así, considere la posibilidad de usar un cuadro de lista en su lugar.
• ¿Los usuarios necesitan cambiar las vistas, agrupar, ordenar por columnas o cambiar el ancho y el orden de las columnas? Si no es así, use un cuadro de lista en su lugar.
• ¿Es necesario que el control sea un origen de arrastre o un destino de colocación? Si es así, use una vista de lista.
• ¿Es necesario copiar o pegar los elementos de lista en el Portapapeles o pegarlos? Si es así, use una vista de lista.

Vistas de lista de casillas

• ¿Se usa el control para elegir cero o más elementos de una lista de datos? Para elegir un elemento, use la selección única en su lugar.
• ¿La selección múltiple es esencial para la tarea o se usa habitualmente? Si es así, use una vista de lista de casillas para hacer que la selección sea obvia, especialmente si los usuarios de destino no están avanzados. Si no es así, use una vista de lista de selección múltiple estándar si las casillas llamarían demasiada atención a la selección múltiple o provocarían demasiado desorden de pantalla.
• ¿Es importante la estabilidad de la selección múltiple? Si es así, use una lista de casillas, generador de listas o agregar o quitar lista porque al hacer clic solo cambia un solo elemento a la vez. Con una lista de selección múltiple estándar, es muy fácil borrar todas las selecciones incluso por accidente.

Nota

A veces, un control similar a una vista de lista se implementa mediante un cuadro de lista y viceversa. En tales casos, aplique las directrices basadas en el uso, no en la implementación.

Patrones de uso

Todas las vistas admiten una selección única, donde los usuarios pueden seleccionar solo un elemento a la vez y varias selecciones, donde los usuarios pueden seleccionar cualquier número de elementos, incluidos ninguno. Las vistas de lista admiten el modo de selección extendida, donde la selección se puede extender arrastrando o con Mayús+clic o Ctrl+clic para seleccionar grupos de valores contiguos o no adyacentes, respectivamente. A diferencia de los cuadros de lista, no admiten el modo de selección múltiple, donde al hacer clic en cualquier elemento se alterna su estado de selección, independientemente de las teclas Mayús y Ctrl.

Vista de lista estándar

El control de vista de lista admite cinco vistas estándar:

Uso	Ejemplo
Icono cada elemento aparece como un icono medio, con una etiqueta y detalles opcionales a la derecha.	La vista de mosaico muestra iconos medianos con etiquetas y detalles opcionales a la derecha.
Icono grande cada elemento aparece como un icono extra grande, grande o mediano con una etiqueta debajo de él.	La vista Icono grande muestra cada elemento como un icono grande con una etiqueta debajo de él.
Icono pequeño cada elemento aparece como un icono pequeño con una etiqueta a la derecha.	La vista Icono pequeño muestra cada elemento como un icono pequeño con su etiqueta a la derecha.
Lista cada elemento aparece como un icono pequeño con una etiqueta a la derecha.	en el modo de lista, esta vista ordena los elementos en columnas y usa una barra de desplazamiento horizontal. Por el contrario, los modos de vista de iconos ordenan los elementos de las filas y usan una barra de desplazamiento vertical. El modo de lista muestra cada elemento como un icono pequeño con su etiqueta a la derecha.
Detalles cada elemento aparece como una fila en un formato tabular. la columna situada más a la izquierda contiene el icono y la etiqueta opcionales del elemento, y las columnas posteriores contienen información adicional, como las propiedades del elemento.	además, las columnas se pueden agregar o quitar, y cambiar el orden y cambiar el tamaño. Las filas se pueden agrupar, ordenar por columna. La vista Detalles muestra cada elemento como una línea en formato de tabla.

Variaciones de la vista de lista

Etiqueta	Value
Selector de columnas Las vistas de lista a veces tienen tantas columnas que no son prácticas para mostrarlas todas. En este caso, el mejor enfoque es mostrar las columnas más útiles de forma predeterminada y permitir que los usuarios agreguen o quiten columnas según sea necesario.	Al hacer clic con el botón derecho en el encabezado de columna se muestra un menú contextual que permite a los usuarios agregar o quitar columnas. Al hacer clic en Más en el menú contextual del encabezado de columna, se muestra el cuadro de diálogo Elegir columnas, que permite a los usuarios agregar o quitar columnas, así como reordenarlos.
Vista de lista de casillas Permitir que los usuarios seleccionen varios elementos.	Las vistas de lista de selección múltiple tienen exactamente la misma apariencia que las vistas de lista de selección única, por lo que no hay ninguna pista visual de que admiten varias selecciones. Se puede usar una vista de lista de casillas para indicar claramente que es posible realizar varias selecciones. Por lo tanto, este patrón debe usarse para las tareas en las que la selección múltiple es esencial o se usa con frecuencia. En este ejemplo, una vista Icono pequeño usa casillas porque la selección múltiple es esencial para la tarea.
Enumerar vistas con grupos Organice los datos en grupos.	Aunque las vistas detalles suelen admitir la ordenación de los datos por cualquiera de las columnas, las vistas de lista permiten a los usuarios organizar los elementos en grupos. Algunas ventajas de la agrupación son: Los grupos funcionan en todas las vistas (excepto la lista), por lo que, por ejemplo, los usuarios podrían agrupar una vista de iconos extra grande de álbumes por artista. Los grupos pueden ser colecciones de alto nivel, que a menudo son más significativas que agrupar directamente de los datos. Por ejemplo, el Explorador de Windows agrupa fechas en Hoy, Ayer, Última semana, Principios de este año y Hace mucho tiempo. En este ejemplo, el Centro de bienvenida de Windows muestra elementos agrupados en una vista de lista.

Instrucciones

Presentación

• Ordene los elementos de lista en un orden lógico. Ordene los nombres en orden alfabético, números en orden numérico y fechas en orden cronológico.

• Si procede, permita a los usuarios cambiar el criterio de ordenación. La ordenación de usuarios es importante si la lista tiene muchos elementos o si hay escenarios en los que los elementos se encuentran de forma más eficaz mediante un criterio de ordenación distinto del predeterminado.

• Use el atributo Always Show Selection para que los usuarios puedan determinar fácilmente el elemento seleccionado, incluso cuando el control no tenga el foco.

• Evite presentar vistas de lista vacías. Si los usuarios crean una lista, inicialice la lista con instrucciones o elementos de ejemplo que puedan necesitar los usuarios.

  

  En este ejemplo, la vista de lista de búsqueda presenta inicialmente instrucciones.

• Si los usuarios pueden cambiar las vistas, agrupar, ordenar por columnas o cambiar las columnas y sus anchos y orden, haga que esa configuración persista para que surta efecto la próxima vez que se muestre la vista de lista. Haga que se conserven en una vista por lista, por usuario.

Interacción

• Use un solo clic para seleccionar el elemento de lista al que apunta el usuario. Excepción: para el patrón de lista de vínculos de comandos, un solo clic selecciona el elemento y cierra la ventana o navega a la página siguiente.

• Considere la posibilidad de proporcionar un comportamiento de doble clic. El doble clic debe tener el mismo efecto que seleccionar un elemento y realizar su comando predeterminado.

• Hacer que el comportamiento de doble clic sea redundante. Siempre debe haber un botón de comando o un comando de menú contextual que tenga el mismo efecto.

• Si un elemento de lista requiere una explicación adicional, proporcione la explicación en unainformación sobre información. Use frases completas y puntuación final.

  

  En este ejemplo, se usa una información sobre información para proporcionar más información.

• Proporcione menús contextuales de los comandos pertinentes. Estos comandos incluyen Cortar, Copiar, Pegar, Quitar o Eliminar, Cambiar nombre y Propiedades.

• Si los usuarios pueden cambiar el criterio de ordenación y la agrupación, proporcione menús contextuales Ordenar por y Agrupar por. El primer clic en un nombre de columna ordena o agrupa la lista en orden ascendente para esa columna, el segundo clic ordena o grupos en orden descendente. Use el orden anterior (de otra columna) como clave secundaria.

  

  En este ejemplo, el menú contextual Ordenar por cambia el criterio de ordenación. Al hacer clic en Nombre una vez se ordena por nombre en orden ascendente. Al hacer clic en Nombre, se ordena de nuevo por nombre en orden descendente.

• Haga que el encabezado de columna de vista de lista sea accesible mediante el teclado.

  • Desarrolladores: Para ello, establezca el foco en el control de encabezado de columna. Esta funcionalidad es nueva en Windows Vista.

• Al deshabilitar una vista de lista, deshabilite también las etiquetas asociadas y los botones de comando.

• Evite el desplazamiento horizontal. El modo List usa el desplazamiento horizontal. Este modo suele ser el más compacto, pero el desplazamiento horizontal suele ser más difícil de usar que el desplazamiento vertical. Considere la posibilidad de usar la vista Icono pequeño en su lugar si la compactación no es importante. Sin embargo, el modo de lista es una buena opción cuando hay muchos elementos ordenados alfabéticamente y espacio de pantalla suficiente para un control amplio.

  Aceptable:

  

  En este ejemplo, se usa el modo List porque hay muchos elementos y un montón de espacio de pantalla disponible para un control amplio.

Listas de selección múltiple

• Considere la posibilidad de mostrar el número de elementos seleccionados debajo de la lista, especialmente si es probable que los usuarios seleccionen varios elementos. Esta información no solo proporciona comentarios útiles, sino que también indica claramente que la vista de lista admite varias selecciones.

  

  En este ejemplo, el número de elementos seleccionados se muestra debajo de la lista.

• Como alternativa, en lugar del número de elementos seleccionados, puede proporcionar otras métricas de selección que podrían ser más significativas, como los recursos necesarios para las selecciones.

  

  En este ejemplo, el espacio en disco necesario para instalar los componentes es más significativo que el número de componentes seleccionados.

• En el caso de las vistas de lista de casillas, si hay potencialmente muchos elementos y es probable que seleccione o desactive todos ellos, agregue seleccionar todos y borrar todos los botones de comando.

• Use casillas de verificación de estado mixto para indicar la selección parcial de los elementos de un contenedor. El estado mixto no se usa como tercer estado para un elemento individual.

Cambiar vistas

Si los usuarios pueden cambiar las vistas:

• Elija la vista más cómoda de forma predeterminada. Los cambios que realicen los usuarios deben ser persistentes en una vista por lista, por usuario.

• Cambie la vista mediante un botón de división, un botón de menú o una lista desplegable. Siempre que sea práctico, use un botón de división en la barra de herramientas y cambie la etiqueta del botón para reflejar la vista actual.

  

  En este ejemplo, se usa un botón de división en la barra de herramientas para cambiar las vistas.

• Proporcione un menú contextual Ver.

  

En este ejemplo, se usa un menú contextual Ver para cambiar las vistas.

Vistas de detalles

• Considere la posibilidad de usar la vista de iconos para mejorar la legibilidad.

  Aceptable:

  

  En este ejemplo, hay demasiados datos y la ventana, la lista y las columnas son demasiado pequeñas, lo que dificulta la lectura de los elementos de lista.

  Mejor:

  

  En este ejemplo, la vista Icono muestra los datos sin truncamiento.

• Elija los anchos de columna predeterminados adecuados para los datos más largos. Las vistas de lista truncan automáticamente los datos largos con puntos suspensivos, por lo que los anchos de columna son adecuados si se muestran pocos puntos suspensivos de forma predeterminada. Aunque los usuarios pueden cambiar el tamaño de las columnas, prefiere otras soluciones:

  • Ajuste el tamaño de cada ancho de columna para ajustarse a sus datos.
  • Ajuste el tamaño del ancho del control para ajustarse a sus columnas más las barras de desplazamiento probables.
  • Si es necesario, use el desplazamiento horizontal.
  • Tener datos truncados solo para elementos de tamaño impar o como último recurso.

  Si los datos de tamaño normal deben truncarse de forma predeterminada, haga que la ventana y la vista de lista se puedan cambiar de tamaño. Incluya un 30 % adicional (hasta un 200 % para texto más corto) para cualquier texto (pero no números) que se localizará.

  Incorrecto:

  

  En este ejemplo, la mayoría de los datos se truncan. Los muchos puntos suspensivos indican claramente que el control y los anchos de columna son demasiado pequeños para los datos.

  Incorrecto:

  

  En este ejemplo, los datos se truncan sin motivo.

• Elija un orden de columna predeterminado adecuado. Por lo general, ordene las columnas de la siguiente manera:

  • En primer lugar, el nombre del elemento o los datos de identificación.
  • A continuación, otros datos útiles para diferenciar los elementos de lista.
  • A continuación, los datos más útiles (preferiblemente de longitud corta o fija).
  • A continuación, datos menos útiles (preferiblemente de longitud corta o fija).
  • Últimos datos de longitud variable, largos.

  Los datos largos y de longitud variable se colocan en las últimas columnas para reducir la necesidad de desplazamiento horizontal. Dentro de estas categorías, coloque la información relacionada en una secuencia lógica.

• Cuando corresponda, permita a los usuarios agregar y quitar columnas, así como cambiar el orden. Muestra las columnas más útiles de forma predeterminada. Esto se logra con el atributo Header Drag Drop.

• Elija una alineación adecuada para los datos. Use las reglas siguientes:

  • Alinear a la derecha números, monedas y horas.
  • Alinear texto a la izquierda, identificadores (incluso si son numéricos) y fechas.

• Para los encabezados de columna ordenables, el primer clic en un encabezado ordena la lista en orden ascendente para la columna, el segundo clic ordena en orden descendente. Use el criterio de ordenación anterior (de otra columna) como clave de ordenación secundaria.

  

  En este ejemplo, primero se hizo clic en la columna Nombre y, a continuación, en la columna Tipo. Como resultado, Type en orden ascendente es la clave de ordenación principal y Name en orden ascendente es la secundaria.

• Use el atributo Full Row Select para que los usuarios puedan determinar fácilmente los elementos seleccionados en todas las columnas.

• No use un encabezado de columna ordenable a menos que se puedan ordenar los datos.

• No use un encabezado de columna si solo hay una columna y no es necesario invertir la ordenación. Use una etiqueta en su lugar para identificar los datos.

  Incorrecto:

  

  Correcto:

  

  En el ejemplo correcto, se usa una etiqueta en lugar de un encabezado de columna.

Ajuste de tamaño y espaciado recomendados

Ajuste de tamaño y espaciado recomendados para las vistas de lista.

• Elija un alto de vista de lista que muestre un número entero de elementos. Evite truncar los elementos verticalmente.
• Elija un tamaño de vista de lista que elimine el desplazamiento vertical y horizontal innecesario en todas las vistas admitidas. Las vistas de lista deben mostrarse entre 3 y 20 elementos. Considere la posibilidad de hacer que una vista de lista sea ligeramente más grande si lo hace, elimina una barra de desplazamiento. Las listas con potencialmente muchos elementos deben mostrar al menos cinco elementos para facilitar el desplazamiento mostrando más elementos a la vez y haciendo que la barra de desplazamiento sea más fácil de colocar.
• Si los usuarios se benefician de hacer que la vista de lista sea mayor, haga que la vista de lista y su ventana primaria se puedan cambiar de tamaño. Esto permite a los usuarios ajustar el tamaño de la vista de lista según sea necesario. Sin embargo, las vistas de lista redimensionables no deben mostrar menos de tres elementos.

Etiquetas

Etiquetas de control

• Todas las vistas de lista necesitan etiquetas. Escriba la etiqueta como una palabra o frase, no como una frase, que termine con dos puntos mediante texto estático.

• 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 encima del control y alinee la etiqueta con el borde izquierdo del control.

• Para las vistas de lista de selección múltiple, escriba la etiqueta que indica claramente que es posible seleccionar varias. Las etiquetas de la vista de lista de casillas pueden ser menos explícitas.

  Correcto:

  

  En este ejemplo, la etiqueta indica claramente que es posible seleccionar varias opciones.

  Incorrecto:

  

  En este ejemplo, la etiqueta no proporciona información sobre varias selecciones.

  Aceptable:

  

  En este ejemplo, las casillas indican claramente que es posible seleccionar varias selecciones, por lo que la etiqueta no tiene que ser explícita.

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

Etiquetas de título

• Mantenga las etiquetas de encabezado breves (tres palabras o menos).
• Use una sola frase de nombre o nombre sin signo de puntuación final.
• Use mayúsculas de estilo de oración.
• Alinee el encabezado de la misma manera que los datos.

Etiquetas de grupo

• Use las siguientes etiquetas de grupo para colecciones de alto nivel:
  • Nombres: use la primera letra de los intervalos de nombres o letras.
  • Tamaños: Sin especificar, 0 KB, 0-10 KB, 10-100 KB, 100 KB - 1 MB, 1-16 MB, 16-128 MB
  • Fechas: Hoy, Ayer, Última semana, Principios de este año y Hace mucho tiempo.
• De lo contrario, las etiquetas de grupo usan el texto exacto de los datos que se agrupan, incluida la mayúsculas y la puntuación.

Texto de datos

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

Texto informativo

• Si necesita agregar texto informativo sobre una vista de lista, 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.

Documentación

Al hacer referencia a vistas de lista:

• 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 e incluya la lista de palabras. No haga referencia a un cuadro de lista como un cuadro de lista, una vista de lista o un campo.
• Para los datos de lista, use el texto exacto de los datos, incluida su mayúscula.
• Consulte las vistas de lista como vistas de lista solo en programación y otra documentación técnica. En cualquier otro lugar, use la lista.
• Para describir la interacción del usuario, use select para los datos y haga clic en para los encabezados.
• 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 Programas y servicios , seleccione Compartir archivos e impresoras.

Al hacer referencia a casillas en una vista de lista:

• Use el texto exacto de la etiqueta, incluida su mayúscula, e incluya la casilla de verificación de palabra. No incluya el carácter de subrayado de la tecla de acceso.
• Para describir la interacción del usuario, use select y clear.
• Cuando sea posible, dé formato a la etiqueta con texto en negrita. De lo contrario, coloque la etiqueta entre comillas solo si es necesario para evitar confusiones.

Ejemplo: active la casilla Subrayado .