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, utilizando selección única o selección múltiple.

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 vista, la agrupación, las columnas múltiples con títulos, la ordenación por columnas, el cambio del ancho y el orden de las columnas, ser un origen de arrastre o un destino de soltar, y copiar datos desde y hacia el portapapeles.

Nota:

Directrices relacionadas con diseño y cuadros de lista se presentan en artículos separados.

¿Es este el control adecuado?

Una vista de lista es algo más que un cuadro de lista más flexible y funcional: su funcionalidad adicional se traduce en un uso diferente. El cuadro siguiente muestra la comparación.

Uso	Cuadros de lista	Vistas de lista
Tipo de datos	Tanto datos como opciones de programa.	Solo datos.
Contents	Solo etiquetas.	Etiquetas y datos auxiliares, posiblemente en varias columnas.
Interacción	Se utiliza para hacer selecciones.	Puede utilizarse para realizar selecciones, pero a menudo se utiliza para visualizar datos e interactuar con ellos. Puede ser un origen de arrastre o un destino.
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 es el control adecuado, plantéate estas preguntas:

• ¿Presenta la lista datos en lugar de opciones de programas? Si no es así, considere la posibilidad de utilizar un cuadro de lista.
• ¿Necesitan los usuarios cambiar las vistas, agrupar, ordenar por columnas o cambiar el ancho y el orden de las columnas? En caso contrario, utilice un cuadro de lista.
• ¿Es necesario que el control sea un origen de arrastre o un destino de suelta? Si es así, utilice una vista de lista.
• ¿Es necesario copiar o pegar los elementos de la lista desde el portapapeles? Si es así, utilice una vista de lista.

Vista de lista de casillas de verificación

• ¿Se utiliza el control para elegir cero o más elementos de una lista de datos? Al elegir un elemento, utilice en su lugar una lista de selección única.
• ¿La selección múltiple es esencial para la tarea o se utiliza habitualmente? Si es así, utilice una vista de lista de casillas de verificación para que la selección múltiple resulte obvia, sobre todo si los usuarios a los que se dirige no son avanzados. Si no, utilice una vista de lista de selección múltiple estándar si las casillas de verificación llamaran demasiado la atención sobre la selección múltiple o provocaran demasiado desorden en la pantalla.
• ¿Es importante la estabilidad de la selección múltiple? Si es así, utilice una lista de casillas de verificación, un generador de listas o una lista de añadir/eliminar, ya que al hacer clic solo cambia un elemento cada 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 que parece una vista de lista se implementa utilizando un cuadro de lista y viceversa. En tales casos, aplique las directrices en función del uso, no en la aplicación.

Patrones de uso

Todas las vistas admiten la selección sola, en la que los usuarios pueden seleccionar solo un elemento a la vez, y la selección múltiple, en la que los usuarios pueden seleccionar cualquier número de elementos, incluido ninguno. Las vistas de listan soportan modo de selección extendida, en la que la selección puede ampliarse arrastrando o con Mayús+clic o Ctrl+clic para seleccionar grupos de valores contiguos o no contiguos, respectivamente. A diferencia de los cuadros de lista, no admiten modo de selección múltiple, donde al hacer clic en cualquier elemento se cambia 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
Mosaico cada elemento aparece como un icono mediano, con una etiqueta y detalles opcionales a la derecha.	La vista en 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.	La vista Icono grande muestra cada elemento como un icono grande con una etiqueta debajo.
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.
List cada elemento aparece como un icono pequeño con una etiqueta a la derecha.	en modo lista, esta vista ordena los elementos en columnas y utiliza una barra de desplazamiento horizontal. Por el contrario, los modos de vista de iconos ordenan los elementos en filas y utilizan una barra de desplazamiento vertical. El modo vista 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 de la izquierda contiene el icono y la etiqueta opcionales del elemento, y las columnas siguientes contienen información adicional, como las propiedades del elemento.	Además, se pueden añadir o eliminar columnas, reordenarlas y cambiar su tamaño. las filas pueden agruparse y ordenarse por columnas. La vista Datos muestra cada elemento como una línea en formato de tabla.

Vista de lista variaciones

Etiqueta	Valor
Selector de columnas Las vistas de lista a veces tienen tantas columnas que no resulta práctico mostrarlas todas. En este caso, lo mejor es mostrar por defecto las columnas más útiles y permitir a los usuarios añadir o eliminar columnas según sus necesidades.	Al hacer clic con el botón derecho del ratón en el título de la columna, aparece un menú contextual que permite añadir o eliminar columnas. Al hacer clic en Más en el menú contextual de la cabecera de columna, aparece el cuadro de diálogo Elegir columnas, que permite a los usuarios añadir o eliminar columnas, así como reordenarlas.
vista de lista de casillas de verificación Permitir a los usuarios seleccionar varios elementos.	Las vistas de lista de selección múltiple tienen exactamente el mismo aspecto que las vistas de lista de selección única, por lo que no hay ninguna pista visual de que admiten la selección múltiple. Se puede utilizar una vista de lista de casillas de verificación para indicar claramente que es posible la selección múltiple. En consecuencia, este patrón debe utilizarse para tareas en las que la selección múltiple sea esencial o de uso común.. En este ejemplo, una vista de Icono pequeño utiliza casillas de verificación porque la selección múltiple es esencial para la tarea.
Vista de lista con grupos Organiza los datos en grupos.	Mientras que las vistas de detalles suelen permitir ordenar los datos por cualquiera de las columnas, las vistas de listas permiten además organizar los elementos en grupos. Algunas ventajas de la agrupación son: Los grupos funcionan en todas las vistas (excepto en la de lista), así que, por ejemplo, los usuarios podrían agrupar una vista de iconos muy grandes de álbumes por artista. Los grupos pueden ser colecciones de alto nivel, que a menudo son más significativas que agrupar directamente los datos. Por ejemplo, Windows Explorer agrupa las fechas en Hoy, Ayer, La semana pasada, A 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

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

• Si procede, permita a los usuarios cambiar el orden de clasificación. La ordenación por el usuario es importante si la lista tiene muchos elementos o si hay situaciones en las que los elementos se encuentran mejor utilizando un orden distinto al predeterminado.

• utilizar el atributo Mostrar siempre la selección 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, iníciala con instrucciones o ejemplos de artículos que los usuarios puedan necesitar.

  

  En este ejemplo, la vista de lista Buscar presenta inicialmente instrucciones.

• Si los usuarios pueden cambiar las vistas, agrupar, ordenar por columnas o cambiar las columnas y su anchura y orden, haz que esos ajustes persistan para que surtan efecto la próxima vez que se muestre la vista de lista. Haz que persistan en una vista por lista, por usuario.

Interacción

• Utilice un solo clic para seleccionar el elemento de la lista que el usuario está señalando.Excepción: Para el patrón de lista de enlaces de comandos, con un solo clic se selecciona el elemento y se cierra la ventana o se navega a la página siguiente.

• Considere la posibilidad de proporcionar un comportamiento de doble clic. hacer doble clic debería tener el mismo efecto que seleccionar un elemento y ejecutar su comando por defecto.

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

• Si un elemento de la lista requiere más explicaciones, proporcionar la explicación en un infotip. Use oraciones completas y puntuación final.

  

  En este ejemplo, se utiliza un infotip para proporcionar más información.

• Proporcionar menús contextuales de comandos relevantes. Estos comandos incluyen Cortar, Copiar, Pegar, Eliminar o Suprimir, Renombrar y Propiedades.

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

  

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

• Hacer que la cabecera de columna de la vista de lista sea accesible mediante el teclado.

  • Desarrolladores: Para ello, sitúe el foco en el control de cabecera de la columna. Esta función es nueva en Windows Vista.

• Al desactivar un lista de vista, desactive también las etiquetas y los botones de comando asociados.

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

  Aceptable:

  

  En este ejemplo, el modo lista se utiliza porque hay muchos elementos y mucho espacio disponible en la pantalla 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 artículos. Esta información no solo proporciona información útil, sino que también indica claramente que la lista de vista admite la selección múltiple.

  

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

• Alternativamente, en lugar del número de elementos seleccionados, puede dar 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.

• Para las vistas de lista de casillas de verificación, Si hay potencialmente muchos elementos de lista y es probable seleccionarlos o borrarlos todos, añada los botones de comando Seleccionar todo y Borrar todo.

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

Cambiar vistas

Si los usuarios pueden cambiar vistas:

• Elija por defecto la vista más cómoda. Los cambios que realicen los usuarios deben hacerse persistentes por vista de lista y por usuario.

• Cambie la vista mediante un botón de división, un botón de menú o una lista desplegable. Siempre que sea posible, utilice un botón de dividir en la barra de herramientas y cambiar la etiqueta del botón para reflejar la vista actual.

  

  En este ejemplo, se utiliza un botón de división de la barra de herramientas para cambiar de vista.

• Proporcionar un menú contextual Ver.

  

En este ejemplo, se utiliza un menú contextual de vista para cambiar de vista.

Ver detalles

• Considere la posibilidad de utilizar la vista en mosaico 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 la lista.

  Mejor:

  

  En este ejemplo, la vista Mosaico muestra los datos sin truncar.

• Elija anchos de columna por defecto apropiados para los datos más largos. Las vistas de lista truncan automáticamente los datos largos con elipses, por lo que los anchos de columna son adecuados si se muestran pocas elipses por defecto. Aunque los usuarios pueden cambiar el tamaño de las columnas, prefieren otras soluciones:

  • Dimensiona el ancho de cada columna para que se ajuste a sus datos.
  • Dimensiona el ancho del control para que se ajuste a sus columnas más las posibles barras de desplazamiento.
  • Si es necesario, utilice el desplazamiento horizontal.
  • Solo se truncan los datos de los artículos de tamaño irregular o como último recurso.

  Si los datos de tamaño normal deben truncarse por defecto, haga que la ventana y la vista de lista sean redimensionables. Incluir un 3 por ciento adicional (hasta un 200% para textos más cortos) para cualquier texto (pero no números) que vaya a ser localizado.

  Incorrecto:

  

  En este ejemplo, la mayoría de los datos están truncados. Las numerosas elipses indican claramente que las anchuras de los controles y las columnas son demasiado pequeñas para los datos.

  Incorrecto:

  

  En este ejemplo, los datos están truncados sin razón.

• Elija un orden de columnas por defecto adecuado. En general, ordene las columnas del siguiente modo:

  • En primer lugar, el nombre del artículo o los datos identificativos.
  • A continuación, otros datos útiles para diferenciar los elementos de la lista.
  • A continuación, los datos más útiles (preferiblemente cortos o de longitud fija).
  • A continuación, datos menos útiles (preferiblemente cortos o de longitud fija).
  • Últimos datos, largos y de longitud variable.

  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 proceda, permita a los usuarios añadir y eliminar columnas, así como cambiar el orden. Mostrar por defecto las columnas más útiles. Esto se consigue con el Atributo de arrastrar y soltar de la cabecera.

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

  • Alinee a la derecha números, monedas y horas.
  • Alinee a la izquierda el texto, los ID (aunque sean numéricos) y las fechas.

• Para títulos de columna ordenables, el primer clic en un título ordena la lista en orden ascendente para la columna, el segundo clic ordena en orden descendente. Utilice la ordenación anterior (de otra columna) como clave de ordenación secundaria.

  

  En este ejemplo, se hizo clic primero en la columna Nombre y después en la columna Tipo. Como resultado, Tipo en orden ascendente es la clave de ordenación primaria, y Nombre en orden ascendente es la secundaria.

• utilizar el atributo Selección de fila completa para que los usuarios puedan determinar fácilmente los elementos en todas las columnas.

• No utilice un encabezado de columna ordenable a menos que los datos puedan ordenarse.

• No utilice una cabecera de columna si solo hay una columna y no es necesario invertir la ordenación. En su lugar, utilice una etiqueta para identificar los datos.

  Incorrecto:

  

  Correcto:

  

  En el ejemplo correcto, se utiliza una etiqueta en lugar de una cabecera de columna.

Tamaño y espaciado recomendados

Dimensionamiento y espaciado recomendados para la lista de vista.

• Elija una altura 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 compatibles. Las vistas de lista deben mostrar entre 3 y 20 elementos. Considere la posibilidad de hacer una vista de lista ligeramente más grande si al hacerlo se elimina la barra de desplazamiento. Las listas con muchos elementos potenciales 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 posicionar.
• Si a los usuarios les conviene ampliar la vista de lista, haga que la vista de lista y su ventana principal sean redimensionables. De este modo, los usuarios pueden ajustar el tamaño de lista según sus necesidades. Sin embargo, las vistas de lista redimensionables no deben mostrar menos de tres elementos.

Etiquetas

Etiquetas de control

• Todos las vistas de lista necesitan etiquetas. Escriba la etiqueta como una palabra o frase, no como una oración, terminando con dos puntos utilizando texto estático.

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

• Utilice mayúsculas en las frases.

• Coloque la etiqueta encima del control y alinéela con el borde izquierdo del control.

• Para las vistas de lista de selección múltiple, escriba una etiqueta que indique claramente que es posible la selección múltiple. Las etiquetas de vistas de listas de casillas de verificación pueden ser menos explícitas.

  Correcto:

  

  En este ejemplo, la etiqueta indica claramente que es posible la selección múltiple.

  Incorrecto:

  

  En este ejemplo, la etiqueta no proporciona información sobre la selección múltiple.

  Aceptable:

  

  En este ejemplo, las casillas de verificación indican claramente que es posible la selección múltiple, 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

• Los títulos deben ser breves (tres palabras o menos).
• Utilice un solo sustantivo o frase nominal sin puntuación final.
• Utilice mayúsculas en las frases.
• Alinee el título del mismo modo que los datos.

Etiquetas de grupo

• Utilice las siguientes etiquetas de grupo para las colecciones de alto nivel:
  • Nombres: Utilice la primera letra del nombre o rangos de 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, La semana pasada, A principios de este año y Hace mucho tiempo.
• De lo contrario, las etiquetas de grupo utilizan el texto exacto de los datos que se agrupan, incluidas las mayúsculas y la puntuación.

Texto de datos

• Utilice mayúsculas en las frases.

Instrucciones de texto

• Si necesita añadir texto explicativo sobre una vista de lista, añádalo encima de la etiqueta. Utilizar oraciones completas con puntuación final.
• Utilice mayúsculas en las frases.
• La información adicional que sea útil pero no necesaria debe ser breve. Coloque esta información entre paréntesis entre la etiqueta y los dos puntos o sin paréntesis debajo del control.

Documentación

Al referirse a las vistas de lista:

• Utilice el texto exacto de la etiqueta, incluidas las mayúsculas, pero no incluya el guion bajo de la clave de acceso ni los dos puntos, e incluya la lista de palabras. No se refiera a un cuadro de lista como cuadro de lista, vista de lista o campo.
• Para los datos de la lista, utilice el texto exacto de los datos, incluidas las mayúsculas.
• Refiérase a las vistas de lista como vistas de lista solo en la programación y otra documentación técnica. En todos los demás casos, utilice la lista.
• Para describir la interacción del usuario, utilice select para los datos y click para los títulos.
• Cuando sea posible, formatee la etiqueta y las opciones de la lista utilizando texto en negrita. En caso contrario, ponga la etiqueta y opciones entre comillas solo si es necesario para evitar confusiones.

Ejemplo: En el Programas y servicios lista, seleccionar Compartir archivos e impresoras.

Cuando se hace referencia a casillas de verificación en una vista de lista:

• Utilice el texto exacto de la etiqueta, incluidas las mayúsculas, e incluya la palabra casilla de verificación. No incluya el guion bajo de la clave de acceso.
• Para describir la interacción del usuario, use seleccionar y limpiar.
• Cuando sea posible, formatee la etiqueta del título utilizando negrita. En caso contrario, ponga la etiqueta entre comillas solo si es necesario para evitar confusiones.

Ejemplo: seleccione el Subrayar casilla de verificación.