Vistas de árbol

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 árbol, los usuarios pueden ver e interactuar con una colección de objetos organizada jerárquicamente, mediante una selección única o varias selecciones.

En un árbol, los objetos que contienen datos se denominan nodos hoja y objetos que contienen otros objetos se denominan nodos de contenedor. Un único nodo de contenedor superior se denomina nodo raíz. Los usuarios pueden expandir y contraer nodos de contenedor haciendo clic en los botones de expansión más y menos.

Vista de árbol típica.

Nota

Las directrices relacionadas con el diseño y los menús se presentan en artículos independientes.

¿Es este el control adecuado?

Tener datos jerárquicos no significa que se debe usar una vista de árbol. Muy a menudo, una vista de lista es una opción más sencilla, pero más eficaz. Vistas de lista:

• Admite varias vistas diferentes.
• Compatibilidad con la ordenación de datos por cualquiera de las columnas de la vista Detalles.
• Compatibilidad con la organización de datos en grupos, formando una jerarquía de dos niveles.

Para usar una vista de lista, puede aplanar la información jerárquica mediante las técnicas siguientes:

• Quite el nodo raíz si está presente, ya que a menudo no es necesario.

• Use grupos de vistas de lista, pestañas, listas desplegables o encabezados expandibles para reemplazar los contenedores de nivel superior.

  

  En este ejemplo, los grupos de vistas de lista se usan para los contenedores de nivel superior.

  

  En este ejemplo, se usan pestañas para los contenedores de nivel superior.

  

  En este ejemplo, se usa una lista desplegable para los contenedores de nivel superior.

• Si un control asociado muestra el contenido del contenedor seleccionado, ese control puede mostrar niveles inferiores de la jerarquía.

  

  En este ejemplo, los contenedores de bajo nivel se muestran en la ventana del documento.

Debe usar una vista de árbol si necesita mostrar una jerarquía de más de dos niveles (no incluido el nodo raíz).

Para decidir si una vista de árbol es el control correcto, tenga en cuenta estas preguntas:

• ¿Los datos son jerárquicos? Si no es así, usa otro control.
• ¿La jerarquía tiene al menos tres niveles (sin incluir la raíz)? Si no es así, considere alternativas como grupos de vistas de lista, pestañas, listas desplegables o encabezados expandibles.
• ¿Los elementos tienen datos auxiliares? Si es así, considere la posibilidad de usar una vista de lista en el modo de vista Detalles para aprovechar al máximo los datos auxiliares.
• ¿Los datos de nivel inferior se relacionan con subtareas independientes? Si es así, considere la posibilidad de mostrar la información en un control asociado o en una ventana independiente (se muestra mediante botones de comando o vínculos).
• ¿Los usuarios de destino están avanzados? Los usuarios avanzados son más expertos en el uso de árboles. Si la aplicación está destinada a usuarios principiantes, evite usar vistas de árbol.
• ¿Los elementos tienen una categorización única, natural y jerárquica que es familiar para la mayoría de los usuarios? Si es así, los datos son ideales para una vista de árbol. Si hay necesidad de varias vistas o ordenación, use una vista de lista en su lugar.
• ¿Los usuarios necesitan ver los datos de nivel inferior en algunos, pero no todos los escenarios, o algunos, pero no todos los tiempos? Si es así, los datos son ideales para una vista de árbol.

Nota

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

Conceptos de diseño

Los árboles están diseñados para organizar los datos y facilitar la búsqueda, pero es difícil hacer que los datos dentro de un árbol se puedan detectar fácilmente. Tenga en cuenta los siguientes principios al decidir sobre las vistas de árbol y su organización.

Predictibilidad y detectabilidad

Una vista de árbol se basa en las relaciones entre objetos. Los árboles funcionan mejor cuando los objetos forman una relación clara, conocida y mutuamente excluyente en la que cada objeto se asigna a un único contenedor fácil de determinar.

Un problema importante es que un objeto puede aparecer en nodos diferentes. Por ejemplo, ¿dónde esperarían los usuarios encontrar un dispositivo de hardware que reproduce música, tiene un disco duro grande y usa un puerto USB? Quizás en cualquiera de varios nodos de contenedor diferentes, como Multimedia, Storage, USB y posiblemente en Recursos de hardware. Una solución consiste en colocar cada objeto en el único contenedor más adecuado, independientemente de las circunstancias; otro enfoque consiste en colocar cada objeto en todos los contenedores que se aplican. El primero promueve una jerarquía simple, limpia y esta última promueve la detectabilidad cada uno tiene ventajas y posibles problemas.

Es posible que los usuarios no comprendan completamente el diseño del árbol, pero formarán un modelo mental de las relaciones después de interactuar con el árbol durante un tiempo. Si ese modelo mental es incorrecto, conduce a confusión. Por ejemplo, supongamos que se puede encontrar un reproductor de música en los contenedores Multimedia, Storage y USB. Esta disposición mejora la detectabilidad. Si un usuario encuentra primero el dispositivo en Multimedia, el usuario puede concluir que todos los dispositivos como reproductores de música aparecen en el contenedor Multimedia. A continuación, el usuario esperará que los dispositivos similares, como las cámaras digitales, aparezcan en el contenedor Multimedia y se confundirán si ese no es el caso.

El desafío al diseñar un árbol es equilibrar la detectabilidad con un modelo de usuario predecible que minimiza la confusión.

Amplitud frente a profundidad

Los estudios de facilidad de uso han demostrado que los usuarios tienen más éxito al encontrar objetos en un árbol que es amplio que en un árbol profundo, por lo que al diseñar un árbol debe preferir la amplitud sobre la profundidad. Idealmente, un árbol no debe tener más de cuatro niveles (sin contar el nodo raíz) y los objetos a los que se accede con más frecuencia deben aparecer en los dos primeros niveles.

Otros principios

• Cuando los usuarios encuentran lo que buscan, dejan de buscar. No buscan ver dónde se puede encontrar un objeto porque no es necesario. Esos usuarios pueden suponer que la primera ruta de acceso que encuentran es la única ruta de acceso.
• Los usuarios tienen problemas para encontrar objetos en árboles grandes y complejos. Los usuarios no realizarán una búsqueda manual exhaustiva para encontrar objetos en dichos árboles; se detienen una vez que creen que han gastado un esfuerzo razonable. Por lo tanto, los árboles grandes y complejos deben complementarse con otros métodos de acceso, como la búsqueda de palabras, un índice o el filtrado.
• Algunos programas permiten a los usuarios crear sus propios árboles. Aunque estos árboles auto-diseñados pueden estar alineados con el modelo mental de un usuario, a menudo se crean de forma desordenada y deficiente. Por ejemplo, mientras que un sistema de archivos, el programa de correo electrónico y la lista Favoritos suelen almacenar tipos similares de información, los usuarios rara vez se molestan en organizarlos de la misma manera.

Si sólo haces una cosa...

Sopesa cuidadosamente las ventajas y desventajas de usar vistas de árbol. Tener datos organizados jerárquicamente no significa que necesite usar una vista de árbol.

Patrones de uso

Las vistas de árbol tienen varios patrones de uso:

Uso	Ejemplo
Vistas de árbol con solo nodos de contenedor los usuarios pueden ver e interactuar con un contenedor cada vez.	Normalmente, estas vistas de árbol tienen un control asociado que muestra el contenido del contenedor seleccionado, por lo que los usuarios solo pueden interactuar con un contenedor cada vez. En este ejemplo, la vista de árbol solo tiene nodos de contenedor. El contenido del nodo seleccionado se muestra en el control de vista de lista asociado.
Vistas de árbol con nodos de contenedor y hoja los usuarios pueden ver e interactuar con contenedores y hojas.	Normalmente, estas vistas de árbol tienen un control asociado que muestra el contenido del contenedor o hoja seleccionado. permitir que los usuarios interactúen con hojas a menudo hace necesario admitir varias selecciones. en este ejemplo, la vista de árbol tiene nodos de contenedor y hoja. dado que se admite la selección múltiple, el contenido de los elementos abiertos se muestra mediante pestañas en el control asociado. Como alternativa, la vista de árbol puede tener una lista organizada, donde los contenedores son encabezados y las hojas son opciones. En este ejemplo, las hojas de árbol son opciones y los contenedores son categorías de opciones.
Vistas de árbol de casillas los usuarios pueden seleccionar cualquier número de elementos, incluidos ninguno.	Las casillas indican claramente que es posible realizar varias selecciones. use este patrón de árbol cuando la selección múltiple sea esencial o se use habitualmente. En este ejemplo, una vista de árbol de casillas permite activar o desactivar la selección de características.
Generadores de vistas de árbol los usuarios pueden crear un árbol agregando un contenedor o hoja a la vez y, opcionalmente, estableciendo el orden.	Muchos árboles se pueden crear o modificar por parte de los usuarios. Algunos árboles se crean en su lugar mediante menús contextuales y arrastrar y colocar (como las carpetas en el Explorador de Windows), mientras que otros árboles se compilan mediante un cuadro de diálogo especializado (como la lista de favoritos en Windows Internet Explorer). En este ejemplo de Internet Explorer, los usuarios pueden crear su propia lista de favoritos mediante un cuadro de diálogo.
Vistas de árbol con métodos de acceso alternativos los usuarios pueden encontrar objetos de maneras distintas de usar un árbol jerárquico.	Como se mencionó anteriormente, los usuarios tienen problemas para encontrar objetos en árboles grandes y complejos, por lo que estos árboles deben complementarse con otros métodos de acceso, como una búsqueda de palabras, un índice o un filtrado. en este ejemplo, los usuarios también pueden acceder a la información mediante una tabla de contenido, un índice y favoritos. para algunos usuarios, las pestañas de índice y búsqueda pueden ser más útiles que la pestaña de contenido. En este ejemplo, el menú Inicio de Windows también permite a los usuarios acceder a programas, archivos y páginas web escribiendo parte del nombre en el cuadro Buscar.

Instrucciones

Presentación

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

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

• Si el árbol actúa como una tabla de contenido, use el atributo Single Expand para simplificar la administración del árbol. De este modo, solo se expande la parte pertinente del árbol.

• Evite presentar árboles vacíos. Si un usuario crea un árbol, inicialice el árbol con instrucciones o elementos de ejemplo que puedan necesitar los usuarios.

  

  En este ejemplo, la lista se presenta inicialmente con ejemplos.

• No haga que los nodos de contenedor sean contraíbles si los usuarios no tienen ninguna razón para contraerlos. Si lo hace, se agrega complejidad innecesaria.

• Si el rendimiento de la carga es un problema, muestre solo los contenedores de primer y segundo nivel del árbol de forma predeterminada. A continuación, puede cargar datos adicionales a petición cuando un usuario expande las ramas en el árbol.

• Si los usuarios expanden o contraen un contenedor, haga que ese estado persista para que surta efecto la próxima vez que se muestre la vista de árbol, a menos que los usuarios prefieran comenzar en el estado predeterminado. La persistencia debe estar en una vista por árbol, por usuario.

• Si los contenedores de alto nivel tienen un contenido similar, considere la posibilidad de usar pistas visuales para diferenciarlos.

  Incorrecto:

  

  En este ejemplo, las carpetas Mailbox y Archive tienen un contenido similar. Una vez que los árboles se expanden aún más, es muy difícil que los usuarios sepan dónde están en el árbol, lo que provoca confusión. El uso de iconos ligeramente diferentes en las distintas secciones solucionaría este problema.

• Reconsidere las líneas de conexión. Aunque estas líneas muestran claramente las relaciones entre los nodos contenedor y hoja, agregan desorden visual sin ayudar a comprender significativamente. En concreto, no ayudan cuando los nodos están cerca, ni ayudan cuando los nodos están tan separados que el desplazamiento es necesario.

  Correcto:

  

  Mejor:

  

  Las líneas de conexión hacen poco para ayudar a la comprensión.

Interacción

• Considere la posibilidad de proporcionar un comportamiento de doble clic. Hacer 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 requiere una explicación adicional, proporcione la explicación en una información sobre información.

  

  En este ejemplo, una información sobre información proporciona 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.

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

Organización de árboles

• Use una estructura jerárquica natural que sea familiar para la mayoría de los usuarios.
• Si no puede usar este tipo de estructura, intente equilibrar la detectabilidad con un modelo de usuario predecible que minimice la confusión.
• Para mejorar la detectabilidad de forma segura, coloque un elemento en varios contenedores cuando:
  • El elemento no está relacionado con ningún otro elemento similar (por lo que los usuarios no se confunden con asociaciones incorrectas).
  • Solo hay algunos de estos elementos ubicados con redundancia (por lo que el árbol no se vuelve sobredimensionado).
• Use la estructura jerárquica más sencilla que funciona bien. Para ello:
  • Coloque los objetos a los que se tiene acceso con más frecuencia en los dos primeros niveles del árbol (sin contar el nodo raíz) y coloque los objetos a los que se accede con menos frecuencia más abajo en la jerarquía.
  • Elimine contenedores de nivel intermedio innecesarios o combinelos redundantes.
• Prefiere la amplitud con respecto a la profundidad. Idealmente, un árbol no debe tener más de cuatro niveles y los objetos a los que se accede con más frecuencia deben aparecer en los dos primeros niveles.
• Determine si realmente necesita un nodo raíz. Proporcione un nodo raíz si los usuarios necesitan la capacidad de realizar comandos en todo el árbol (posiblemente mediante un menú contextual en el nodo raíz). De lo contrario, el árbol es más sencillo y fácil de usar sin él.
• Si el árbol tiene métodos de acceso alternativos, como una búsqueda de palabras o un índice, optimice el árbol para examinar centrándose en el contenido más útil. Con métodos de acceso alternativos, el contenido del árbol no tiene que ser completo. Simplificar el árbol facilita a los usuarios encontrar el contenido más útil.

Vistas de árbol de casillas

• Muestra el número de elementos seleccionados debajo de la lista, especialmente si es probable que los usuarios seleccionen varios elementos. Estos comentarios ayudan a los usuarios a confirmar que su selección es correcta.

  

  En este ejemplo, el número de elementos seleccionados se muestra debajo del árbol. Está claro que no se seleccionan dos elementos.

• Si hay potencialmente muchos elementos y es probable que seleccione o borre todos ellos, agregue los botones Seleccionar todo y Borrar todos.

• Use casillas de verificación de estado mixto para indicar la selección parcial de los elementos de un contenedor.

  Correcto:

  

  En este ejemplo, las casillas de verificación de estado mixto se usan para indicar la selección parcial.

Ajuste de tamaño y espaciado recomendados

Ajuste de tamaño y espaciado recomendados para los controles de vista de árbol.

• Elija un ancho de vista de árbol que evite la necesidad de desplazarse horizontalmente para la mayoría de los elementos cuando el árbol esté totalmente expandido.

• Incluya un 30 % adicional para dar cabida a la localización.

• Elija un alto de vista de árbol que elimine el desplazamiento vertical innecesario. Considere la posibilidad de hacer que una vista de árbol sea ligeramente más larga (o incluso más, si hay espacio disponible) si lo hace, reduce la necesidad de una barra de desplazamiento vertical.

  Incorrecto:

  

  En este ejemplo, hacer que la vista de árbol sea ligeramente más ancha y larga eliminaría las barras de desplazamiento en la mayoría de los casos. En este árbol concreto, solo se puede abrir un contenedor a la vez.

• Si los usuarios se benefician de aumentar la vista de árbol, haga que la vista de árbol y su ventana primaria se puedan cambiar de tamaño. Al hacerlo, los usuarios pueden ajustar el tamaño de la vista de árbol según sea necesario.

Etiquetas

Etiquetas de control

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

• Asigne una clave de acceso única. Para obtener instrucciones de asignación, consulte Teclado.

• Use mayúsculas de estilo de frase.

• Coloque la etiqueta encima del control y alinee la etiqueta con el borde izquierdo del control.

• En el caso de las vistas de árbol de selección múltiple, escriba la etiqueta para que quede claro que es posible realizar varias selecciones. Las etiquetas de la vista de árbol de casillas pueden ser menos explícitas.

  Incorrecto:

  

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

  Mejor:

  

  En este ejemplo, la etiqueta indica claramente que es posible realizar varias selecciones.

  Mejor:

  

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

Texto de datos

• Use mayúsculas de estilo de frase.

Texto informativo

• Si necesita agregar texto informativo sobre una vista de árbol, agréguelo encima de la etiqueta. Use oraciones completas con puntuación final.

• Use mayúsculas de estilo de frase.

• Las explicaciones complementarias que son útiles, pero no necesarias, deben mantenerse cortas. Coloque esta información entre paréntesis entre la etiqueta y los dos puntos, después de la instrucción principal si se usa en lugar de una etiqueta, o debajo del control.

  

  En este ejemplo, la explicación complementaria está debajo del control .

Documentación

Al hacer referencia a las vistas de árbol:

• 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 de palabras o la lista jerárquica si el contexto requiere una distinción entre listas regulares.
• Para los elementos de árbol, use el texto exacto del elemento, incluida su mayúscula.
• Consulte las vistas de árbol como vistas de árbol solo en programación y otra documentación técnica. En cualquier otro lugar, use la lista o la lista jerárquica porque el árbol de términos resulta confuso para la mayoría de los usuarios.
• Para describir la interacción del usuario, use select para los datos y expanda y contraiga para los botones más y menos.
• Cuando sea posible, dé formato a los elementos de etiqueta y árbol mediante texto en negrita. De lo contrario, coloque la etiqueta y los elementos entre comillas solo si es necesario para evitar confusiones.

Ejemplo: en la lista Contenido , seleccione Diseño de interfaz de usuario.

Al hacer referencia a casillas en una vista de árbol:

• Use el texto exacto de la etiqueta, incluida su mayúscula, e incluya la casilla de verificación palabras. 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: en la lista Elementos de los que se va a realizar una copia de seguridad , active la casilla Mis documentos .