Vistas da árvore

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 orientações ainda se aplica em princípio, mas a apresentação e os exemplos não refletem as nossas orientações de conceção atuais .

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

Em uma árvore, os objetos que contêm dados são chamados nós folha e os objetos que contêm outros objetos são chamados 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 de expansão para mais e para menos.

Uma vista de árvore típica.

Observação

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

Será este o controlo correto?

Ter dados hierárquicos não significa que você deva usar uma exibição em árvore. Muitas vezes, uma de exibição de lista é uma escolha mais simples, mas mais poderosa. Visualizações da lista:

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

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

• Remova o nó raiz se estiver presente, porque muitas vezes não é necessário.

• Use grupos de exibição de lista, guias listas suspensasou 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, os contêineres de baixo nível são exibidos na janela do documento.

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

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

• Os dados são hierárquicos? Se não, use outro controle.
• A hierarquia tem pelo menos três níveis (não incluindo 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? Em caso afirmativo, considere usar um modo de 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? Em caso afirmativo, considere exibir as informações em um controle associado ou em uma janela separada (exibida usando botões de comando ou links ).
• Os utilizadores-alvo são avançados? Os usuários avançados são mais proficientes no uso de árvores. Se o seu aplicativo é destinado a usuários iniciantes, evite usar visualizações em á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 visualização em árvore. Se houver 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 cenários, mas não em todos, ou em alguns, mas não o tempo todo? Nesse caso, os dados são ideais para uma visualização em árvore.

Observação

Às vezes, um controle que se parece com um modo de exibição de árvore é implementado usando um modo de 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 torná-los fáceis de encontrar, mas é difícil tornar os dados dentro de uma árvore facilmente detetáveis. Tenha em mente os seguintes princípios ao decidir sobre exibições em árvore e sua organização.

Previsibilidade e capacidade de descoberta

Uma visualização em árvore é baseada nas relações entre objetos. As árvores funcionam melhor quando os objetos formam uma relação clara, bem conhecida e mutuamente exclusiva, na qual cada objeto é mapeado para um único recipiente 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 reproduz música, tenha um disco rígido grande e use 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 único recipiente mais apropriado, independentemente das circunstâncias; Outra abordagem é colocar cada objeto sob todos os contêineres que se aplicam. O primeiro promove uma hierarquia simples e limpa e o segundo promove a descoberta, cada um tem vantagens e problemas potenciais.

Os usuários podem não entender completamente o layout da árvore, mas eles formarão um modelo mental das relações depois de interagir com a árvore por um tempo. Se esse modelo mental está incorreto, leva à confusão. Por exemplo, suponha que um leitor de música pode ser encontrado nos contentores Multimédia, Armazenamento e USB. Esse arranjo melhora a capacidade de descoberta. Se um utilizador encontrar primeiro o dispositivo em Multimédia, poderá concluir que todos os dispositivos, como leitores de música, aparecem no contentor Multimédia. O usuário esperará que dispositivos semelhantes, como câmeras digitais, apareçam no contêiner Multimídia e ficará confuso 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 minimize a confusão.

Amplitude vs. profundidade

Estudos de usabilidade mostraram que usuários são mais bem-sucedidos em encontrar objetos em uma árvore que é larga do que em uma árvore que é profunda, por isso, ao projetar uma árvore, você deve preferir a largura em vez da 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 olham para ver onde mais um objeto pode ser encontrado porque não precisam. Esses usuários podem assumir que o primeiro caminho que encontram é o único.
• Os usuários têm dificuldade em encontrar objetos em árvores grandes e complexas. Os usuários não realizarão uma pesquisa manual exaustiva para encontrar objetos em tais árvores; eles param quando acham que gastaram um esforço razoável. Consequentemente, árvores grandes e complexas precisam ser complementadas com outros métodos de acesso, como pesquisa por palavras, um índice ou filtragem.
• Alguns programas permitem que os usuários criem suas próprias árvores. Embora essas árvores autoprojetadas possam estar alinhadas com o modelo mental de um usuário, elas geralmente são criadas ao 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...

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

Padrões de utilização

As vistas em árvore têm vários padrões de utilização:

Utilização	Exemplo
Vistas em árvore apenas com nós de contentor Os usuários podem visualizar e interagir com um contêiner de cada vez.	Normalmente, essas exibições em á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 de cada vez. Neste exemplo, a exibição em árvore tem apenas nós de contêiner. O conteúdo do nó selecionado é exibido no controle de exibição de lista associado.
Vistas da árvore com nós de recipiente e folha Os usuários podem visualizar 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 selecionados. Permitir que os usuários interajam com as folhas muitas vezes torna necessário suportar a seleção múltipla. Neste exemplo, a visualização em árvore tem nós de contêiner e folha. Como a seleção múltipla é suportada, o conteúdo dos itens abertos é exibido usando guias no controle associado. Alternativamente, a visualização em árvore pode ter uma lista organizada, onde os contêineres são cabeçalhos e as folhas são opções. Neste exemplo, as folhas da árvore são opções e os contêineres são categorias de opções.
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 de seleção indicam claramente que a seleção múltipla é possível. Use este padrão de árvore quando a seleção múltipla for essencial ou comumente usada. Neste exemplo, um modo de exibição de árvore de caixa de seleção permite a seleção de recursos para ativar ou desativar.
Construtores de vista em á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 criadas 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 do Internet Explorer, os usuários podem criar sua própria lista de favoritos usando uma caixa de diálogo.
Vistas em árvore com métodos de acesso alternativos Os usuários podem encontrar objetos de outras maneiras além de usar uma árvore hierárquica.	Como mencionado anteriormente, os usuários têm dificuldade em encontrar objetos em árvores grandes e complexas, portanto, essas árvores devem ser complementadas com outros métodos de acesso, como uma pesquisa por palavras, um índice ou filtragem. Neste exemplo, os usuários também podem acessar informações usando um índice, um índice e Favoritos. Para alguns utilizadores, os separadores Índice e Pesquisa podem ser mais úteis do que o separador 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.

Orientações

Apresentação

• Dentro de um contêiner, classifique os itens em uma ordem lógica. Classifique 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 foco de entrada.

• Se a árvore estiver agindo como um índice, use o atributo Expandir Único para simplificar o gerenciamento da árvore. Desta forma, apenas a porção 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 é inicialmente apresentada com exemplos.

• Não torne os nós de contêiner dobráveis se os usuários não tiverem motivos para colapsá-los. Fazê-lo acrescenta complexidade desnecessária.

• Se o desempenho de 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 ramificações 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 a exibição em árvore for exibida, a menos que os usuários prefiram começar no estado padrão. A persistência deve ser feita por árvore, por usuário.

• Se os contêineres de alto nível tiverem conteúdo semelhante, considere usar pistas visuais para diferenciá-los.

  Incorreto:

  

  Neste exemplo, as pastas Caixa de Correio e Arquivo Morto têm conteúdo semelhante. Uma vez que as árvores são expandidas ainda mais, é muito difícil para os usuários saber onde eles 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 recipiente e folha, elas adicionam confusão 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 ligação pouco contribuem para a compreensão.

Interação

• Considere fornecer o comportamento de clique duplo. Clicar duas vezes deve ter o mesmo efeito que selecionar um item e executar seu comando padrão.

• Torne redundante o comportamento de clique duplo. Deve haver sempre um botão de comando ou um 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 infodica.

  

  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 desativar uma vista em árvore, desative também quaisquer etiquetas e botões de comando associados.

Organização da árvore

• 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 capacidade de descoberta 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 nenhum outro item semelhante (para que os usuários não fiquem confusos com associações incorretas).
  • Existem apenas alguns desses itens localizados de forma redundante (para que a árvore não fique inchada).
• Use a estrutura hierárquica mais simples que funciona bem. Para tal:
  • Coloque os objetos mais acessados nos dois primeiros níveis da árvore (sem contar o nó raiz) e coloque os objetos menos acessados mais abaixo na hierarquia.
  • Elimine contêineres desnecessários ou combinem redundantes de nível intermediário.
• Prefira a amplitude à profundidade. Idealmente, uma árvore não deve ter mais do que 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 é mais simples e fácil de usar sem ela.
• Se a árvore tiver métodos de acesso alternativos, como uma pesquisa por 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.

Vistas em árvore da caixa de verificação

• Exiba o número de itens selecionados abaixo da lista, especialmente se os usuários provavelmente selecionarem vários itens. Esse feedback ajuda os usuários a confirmar que sua seleção está correta.

  

  Neste exemplo, o número de itens selecionados é exibido abaixo da árvore. É evidente que dois itens não são selecionados.

• Se houver potencialmente muitos itens e selecionar ou limpar todos eles for provável, adicione Selecionar todos e Limpar todos os botões de comando.

• Use caixas de seleção de estado misto para indicar a seleção parcial dos itens em um contêiner.

  Correto:

  

  Neste exemplo, as caixas de seleção de estado misto são usadas para indicar a seleção parcial.

Dimensionamento e espaçamento recomendados

Dimensionamento e espaçamento recomendados para controles de exibição em árvore.

• Escolha uma largura de exibição de árvore que evite a necessidade de de rolagem horizontal para a maioria dos itens quando a árvore estiver totalmente expandida.

• Inclua 30% adicionais para acomodar a localização.

• Escolha uma altura de visualização em árvore que elimine a rolagem vertical desnecessária. Considere tornar uma visualização em árvore um pouco mais longa (ou ainda mais se houver espaço disponível) se isso reduzir a necessidade de uma barra de rolagem vertical.

  Incorreto:

  

  Neste exemplo, tornar a visualização em árvore um pouco mais larga e longa eliminaria as barras de rolagem na maioria dos casos. Nesta árvore em particular, apenas um recipiente pode ser aberto de cada vez.

• Se os usuários se beneficiarem de tornar a exibição em árvore maior, torne a exibição em árvore e sua janela pai redimensionáveis. Isso permite que os usuários ajustem o tamanho da exibição em árvore conforme necessário.

Rótulos

Etiquetas de controlo

• Todas as vistas em árvore precisam de rótulos. Escreva o rótulo como uma palavra ou frase, não como uma frase, terminando com dois pontos e usando texto estático.

• Atribua uma chave de acesso exclusiva. Para obter diretrizes de atribuição, consulte Teclado.

• Use maiúsculas no estilo de frase.

• Posicione o rótulo acima do controle e alinhe-o com a borda esquerda do controle.

• Para exibições de árvore de seleção múltipla, escreva o rótulo para que fique claro que a seleção múltipla é possível. Os rótulos de exibição em árvore da caixa de seleção podem ser menos explícitos.

  Incorreto:

  

  Neste exemplo, o rótulo não fornece informações sobre seleção múltipla.

  Melhor:

  

  Neste exemplo, o rótulo indica claramente que a seleção múltipla é possível.

  Melhor:

  

  Neste exemplo, as caixas de seleção indicam claramente que a seleção múltipla é possível, portanto, o rótulo não precisa ser explícito.

Texto dos dados

• Use maiúsculas no estilo de frase.

Texto instrucional

• Se você precisar adicionar texto instrutivo sobre uma exibição em árvore, adicione-o acima do rótulo. Use frases completas com pontuação final.

• Use maiúsculas no estilo de frase.

• As explicações suplementares que são úteis, mas não necessárias, devem ser breves. Coloque esta informação entre parênteses entre o rótulo e os dois pontos, após a instrução principal, se usada em vez de um rótulo, ou abaixo do controle.

  

  Neste exemplo, a explicação suplementar está abaixo do controle.

Documentação

Quando se refere a vistas em árvore:

• Use o texto exato do rótulo, incluindo sua maiúscula, mas não inclua o sublinhado da chave de acesso ou dois pontos. Inclua a lista de palavras ou a lista hierárquica se o contexto exigir uma distinção das listas regulares.
• Para itens de árvore, use o texto exato do item, incluindo sua maiúscula.
• Consulte as vistas em árvore como vistas em árvore apenas na programação e noutra documentação técnica. Em qualquer outro lugar, use lista ou lista hierárquica porque o termo árvore é confuso para a maioria dos usuários.
• Para descrever a interação do usuário, use selecionar para os dados e expandir e recolher para os botões de mais e menos.
• Sempre que possível, formate o rótulo e os itens de árvore usando texto em negrito. Caso contrário, coloque o rótulo e os itens entre aspas apenas se necessário para evitar confusão.

Exemplo: Na lista Conteúdo, selecione Design da Interface do Usuário.

Ao fazer referência a caixas de seleção em um modo de exibição em árvore:

• Use o texto exato do rótulo, incluindo sua maiúscula, e inclua a caixa de seleção de palavras. Não inclua o sublinhado da chave de acesso.
• Para descrever a interação do usuário, use selecionar e limpar.
• Sempre que possível, formate o rótulo usando texto em negrito. Caso contrário, coloque o rótulo entre aspas apenas se necessário para evitar confusão.

Exemplo: Na lista Itens para fazer backup, marque a caixa de seleção Meus Documentos Documentos.