Modos de exibição de árvore

Artigo
06/12/2023

Observação

Este guia de design foi criado para o Windows 7 e não foi atualizado para versões mais recentes do Windows. Grande parte das diretrizes ainda se aplica em princípio, mas a apresentação e os exemplos não refletem nossas diretrizes de design atuais.

Com um modo de exibição de árvore, os usuários podem exibir e interagir com uma coleção hierarquicamente organizada de objetos, usando seleção única ou seleção múltipla.

Em uma árvore, os objetos que contêm dados são chamados de nós folha e objetos que contêm outros objetos são chamados de nós de contêiner. Um único nó de contêiner superior é chamado de nó raiz. Os usuários podem expandir e recolher nós de contêiner clicando nos botões mais e menos expansor.

captura de tela do modo de exibição de árvore do Windows Explorer

Um modo de exibição de árvore típico.

Observação

As diretrizes relacionadas ao layout e aos menus são apresentadas em artigos separados.

Esse é o controle correto?

Ter dados hierárquicos não significa que você deve usar uma exibição de árvore. Muitas vezes, uma exibição de lista é uma escolha mais simples, mas mais poderosa. Modos de exibição de lista:

Suporte a várias exibições diferentes.
Suporte à classificação de dados por qualquer uma das colunas na exibição Detalhes.
Suporte à organização de dados em grupos, formando uma hierarquia de dois níveis.

Para usar uma exibição de lista, você pode nivelar informações hierárquicas usando as seguintes técnicas:

Remova o nó raiz, se presente, porque geralmente não é necessário.
Use grupos de exibição de lista, guias, listas suspensas ou títulos expansíveis para substituir os contêineres de nível superior.

Neste exemplo, os grupos de exibição de lista são usados para os contêineres de nível superior.

Neste exemplo, as guias são usadas para os contêineres de nível superior

Neste exemplo, uma lista suspensa é usada para os contêineres de nível superior.
Se um controle associado exibir o conteúdo do contêiner selecionado, esse controle poderá exibir níveis inferiores da hierarquia.

Neste exemplo, contêineres de baixo nível são exibidos na janela do documento.

Você deve usar um modo de exibição de árvore se precisar exibir uma hierarquia de mais de dois níveis (sem incluir o nó raiz).

Para decidir se uma exibição de árvore é o controle certo, considere estas perguntas:

Os dados são hierárquicos? Se não, use outro controle.
A hierarquia tem pelo menos três níveis (sem incluir a raiz)? Caso contrário, considere alternativas como grupos de exibição de lista, guias, listas suspensas ou títulos expansíveis.
Os itens têm dados auxiliares? Nesse caso, considere usar uma exibição de lista no modo de exibição Detalhes para aproveitar ao máximo os dados auxiliares.
Os dados de nível inferior estão relacionados a subtarefas independentes? Nesse caso, considere exibir as informações em um controle associado ou em uma janela separada (exibida usando botões de comando ou links).
Os usuários de destino estão avançados? Os usuários avançados são mais proficientes no uso de árvores. Se o aplicativo for voltado para usuários iniciantes, evite usar exibições de árvore.
Os itens têm uma categorização única, natural e hierárquica que é familiar para a maioria dos usuários? Nesse caso, os dados são ideais para uma exibição de árvore. Se houver a necessidade de vários modos de exibição ou classificação, use um modo de exibição de lista.
Os usuários precisam ver os dados de nível inferior em alguns, mas não em todos os cenários, ou alguns, mas não o tempo todo? Nesse caso, os dados são ideais para uma exibição de árvore.

Observação

Às vezes, um controle que se parece com um modo de exibição de árvore é implementado usando uma exibição de lista. Nesses casos, aplique as diretrizes com base no uso, não na implementação.

Conceitos de design

As árvores destinam-se a organizar dados e facilitar a localização, mas é difícil tornar os dados em uma árvore facilmente detectáveis. Tenha os princípios a seguir em mente ao decidir sobre as exibições de árvore e sua organização.

Previsibilidade e descoberta

Um modo de exibição de árvore é baseado nas relações entre objetos. As árvores funcionam melhor quando os objetos formam uma relação clara, conhecida e mutuamente exclusiva na qual cada objeto é mapeado para um único contêiner fácil de determinar.

Um problema significativo é que um objeto pode aparecer em nós diferentes. Por exemplo, onde os usuários esperariam encontrar um dispositivo de hardware que reproduza música, tem um disco rígido grande e usa uma porta USB? Talvez em qualquer um dos vários nós de contêiner diferentes, como Multimídia, Armazenamento, USB e possivelmente em Recursos de Hardware. Uma solução é colocar cada objeto sob o contêiner mais apropriado, independentemente das circunstâncias; outra abordagem é colocar cada objeto em todos os contêineres que se aplicam. O primeiro promove uma hierarquia simples limpo e este último promove a descoberta, cada um tem vantagens e possíveis problemas.

Os usuários podem não entender completamente o layout da árvore, mas formarão um modelo mental das relações depois de interagir com a árvore por um tempo. Se esse modelo mental estiver incorreto, isso leva a confusão. Por exemplo, suponha que um player de música possa ser encontrado nos contêineres Multimídia, Armazenamento e USB. Essa organização melhora a capacidade de descoberta. Se um usuário encontrar o dispositivo pela primeira vez em Multimídia, o usuário poderá concluir que todos os dispositivos, como reprodutores de música, aparecem no contêiner Multimídia. Em seguida, o usuário espera que dispositivos semelhantes, como câmeras digitais, apareçam no contêiner Multimídia e ficarão confusos se esse não for o caso.

O desafio ao projetar uma árvore é equilibrar a capacidade de descoberta com um modelo de usuário previsível que minimiza a confusão.

Amplitude versus profundidade

Estudos de usabilidade mostraram que os usuários são mais bem-sucedidos em encontrar objetos em uma árvore ampla do que em uma árvore profunda, portanto, ao projetar uma árvore, você deve preferir amplitude em vez de profundidade. Idealmente, uma árvore não deve ter mais do que quatro níveis (sem contar o nó raiz) e os objetos mais acessados devem aparecer nos dois primeiros níveis.

Outros princípios

Quando os usuários encontram o que estão procurando, eles param de procurar. Eles não procuram ver onde mais um objeto pode ser encontrado porque eles não precisam. Esses usuários podem assumir que o primeiro caminho encontrado é o único caminho.
Os usuários têm problemas para encontrar objetos em árvores grandes e complexas. Os usuários não executarão uma pesquisa completa e manual para localizar objetos nessas árvores; eles param uma vez que eles pensam que gastaram um esforço razoável. Consequentemente, árvores grandes e complexas precisam ser complementadas com outros métodos de acesso, como pesquisa de palavras, um índice ou filtragem.
Alguns programas permitem que os usuários criem suas próprias árvores. Embora essas árvores auto-projetadas possam estar alinhadas com o modelo mental de um usuário, elas geralmente são criadas por acaso e mal mantidas. Por exemplo, enquanto um sistema de arquivos, um programa de email e uma lista de Favoritos normalmente armazenam tipos semelhantes de informações, os usuários raramente se preocupam em organizá-los da mesma maneira.

Se você fizer apenas uma coisa...

Avalie cuidadosamente os benefícios e desvantagens do uso de modos de exibição de árvore. Ter dados organizados hierarquicamente não significa que você precisa usar uma exibição de árvore.

Padrões de uso

Os modos de exibição de árvore têm vários padrões de uso:

Uso	Exemplo
Exibições de árvore com apenas nós de contêiner os usuários podem exibir e interagir com um contêiner por vez.	Normalmente, essas exibições de árvore têm um controle associado que exibe o conteúdo do contêiner selecionado, para que os usuários possam interagir com apenas um contêiner por vez. Neste exemplo, o modo de exibição de árvore tem apenas nós de contêiner. O conteúdo do nó selecionado é exibido no controle de exibição de lista associado.
Exibições de árvore com nós de contêiner e folha os usuários podem exibir e interagir com contêineres e folhas.	Normalmente, essas exibições de árvore têm um controle associado que exibe o conteúdo do contêiner ou folha selecionado. permitir que os usuários interajam com folhas geralmente torna necessário dar suporte a várias seleções. neste exemplo, o modo de exibição de árvore tem nós de contêiner e folha. Como há suporte para várias seleções, o conteúdo dos itens abertos é exibido usando guias no controle associado. como alternativa, o modo de exibição de árvore pode ter uma lista organizada, em que os contêineres são títulos e as folhas são opções. Neste exemplo, as folhas de árvore são opções e os contêineres são categorias de opção.
Modos de exibição de árvore de caixa de seleção os usuários podem selecionar qualquer número de itens, incluindo nenhum.	As caixas marcar indicam claramente que várias seleções são possíveis. use esse padrão de árvore quando várias seleções forem essenciais ou comumente usadas. Neste exemplo, um modo de exibição de árvore de caixa de marcar permite que a seleção de recursos seja ativada ou desativada.
Construtores de modo de exibição de árvore os usuários podem criar uma árvore adicionando um contêiner ou folha de cada vez e, opcionalmente, definindo a ordem.	Muitas árvores podem ser criadas ou modificadas pelos usuários. algumas árvores são internas usando menus de contexto e arrastar e soltar (como as pastas no Windows Explorer), enquanto outras árvores são criadas usando uma caixa de diálogo especializada (como a lista de favoritos no Windows Internet Explorer). Neste exemplo da Internet Explorer, os usuários podem criar sua própria lista de favoritos usando uma caixa de diálogo.
Modos de exibição de árvore com métodos de acesso alternativos os usuários podem encontrar objetos de maneiras diferentes de usar uma árvore hierárquica.	Conforme mencionado anteriormente, os usuários têm problemas para localizar objetos em árvores grandes e complexas, portanto, essas árvores devem ser complementadas com outros métodos de acesso, como uma pesquisa de palavras, um índice ou filtragem. neste exemplo, os usuários também podem acessar informações usando um sumário, um índice e favoritos. para alguns usuários, as guias de índice e pesquisa podem ser mais úteis do que a guia conteúdo. Neste exemplo, o menu Iniciar do Windows também permite que os usuários acessem programas, arquivos e páginas da Web digitando parte do nome na caixa Pesquisar.

Diretrizes

Apresentação

Em um contêiner, classifique os itens em uma ordem lógica. Classificar nomes em ordem alfabética, números em ordem numérica e datas em ordem cronológica.
Use o atributo Sempre Mostrar Seleção para que os usuários possam determinar prontamente o item selecionado, mesmo quando o controle não tiver o foco de entrada.
Se a árvore estiver atuando como um sumário, use o atributo Expansão Única para simplificar o gerenciamento da árvore. Dessa forma, somente a parte relevante da árvore é expandida.
Evite apresentar árvores vazias. Se um usuário criar uma árvore, inicialize a árvore com instruções ou itens de exemplo que os usuários possam precisar.

Neste exemplo, a lista é apresentada inicialmente com exemplos.
Não torne os nós de contêiner recolhíveis se os usuários não tiverem motivos para recolhê-los. Isso adiciona complexidade desnecessária.
Se o desempenho da carga for um problema, exiba apenas os contêineres de primeiro e segundo nível da árvore por padrão. Em seguida, você pode carregar dados adicionais sob demanda quando um usuário expande branches na árvore.
Se os usuários expandirem ou recolherem um contêiner, faça com que esse estado persista para que ele entre em vigor na próxima vez que o modo de exibição de árvore for exibido, a menos que os usuários provavelmente prefiram iniciar no estado padrão. A persistência deve ser por árvore, por usuário.
Se contêineres de alto nível tiverem conteúdo semelhante, considere usar pistas visuais para diferenciá-los.

Incorreto:

Neste exemplo, as Pastas de Caixa de Correio e Arquivo Morto têm conteúdo semelhante. Depois que as árvores são expandidas ainda mais, é muito difícil para os usuários saber onde elas estão na árvore, levando à confusão. Usar ícones ligeiramente diferentes nas diferentes seções resolveria esse problema.
Reconsidere as linhas de conexão. Embora essas linhas mostrem claramente relações entre nós de contêiner e folha, elas adicionam desordem visual sem ajudar significativamente a compreensão. Especificamente, eles não ajudam quando os nós estão próximos, nem ajudam quando os nós estão tão distantes que a rolagem é necessária.

Correto:

Melhor:

As linhas de conexão pouco ajudam na compreensão.

Interação

Considere fornecer um comportamento de clique duplo. Clicar duas vezes deve ter o mesmo efeito que selecionar um item e executar seu comando padrão.
Tornar o comportamento de clique duplo redundante. Sempre deve haver um botão de comando ou comando de menu de contexto que tenha o mesmo efeito.
Se um item exigir mais explicações, forneça a explicação em uma dica de informação.

Neste exemplo, uma dica de informação fornece mais informações.
Forneça menus de contexto de comandos relevantes. Esses comandos incluem Recortar, Copiar, Colar, Remover ou Excluir, Renomear e Propriedades.
Ao desabilitar um modo de exibição de árvore, desabilite também quaisquer rótulos e botões de comando associados.

Organização de árvores

Use uma estrutura hierárquica natural que seja familiar para a maioria dos usuários.
Se você não puder usar essa estrutura, tente equilibrar a detectabilidade com um modelo de usuário previsível que minimize a confusão.
Para melhorar a capacidade de descoberta com segurança, coloque um item em vários contêineres quando:
- O item não está relacionado a outros itens semelhantes (portanto, os usuários não ficam confusos com associações incorretas).
- Há apenas alguns desses itens localizados com redundância (portanto, a árvore não fica inchada).
Use a estrutura hierárquica mais simples que funciona bem. Para fazer isso:
- Coloque os objetos mais acessados nos dois primeiros níveis da árvore (sem contar o nó raiz) e coloque objetos menos acessados mais abaixo na hierarquia.
- Elimine contêineres de nível intermediário desnecessários ou combine redundantes.
Prefira amplitude em vez de profundidade. Idealmente, uma árvore não deve ter mais de quatro níveis e os objetos mais acessados devem aparecer nos dois primeiros níveis.
Determine se você realmente precisa de um nó raiz. Forneça um nó raiz se os usuários precisarem da capacidade de executar comandos em toda a árvore (possivelmente usando um menu de contexto no nó raiz). Caso contrário, a árvore será mais simples e fácil de usar sem ela.
Se a árvore tiver métodos de acesso alternativos, como uma pesquisa de palavras ou um índice, otimize a árvore para navegação, concentrando-se no conteúdo mais útil. Com métodos de acesso alternativos, o conteúdo da árvore não precisa ser abrangente. Simplificar a árvore torna mais fácil para os usuários encontrar o conteúdo mais útil.