Noções básicas de design de navegação para aplicativos do Windows

  • Artigo

Cabeçalho de noções básicas de navegação

Se você considera um aplicativo uma coleção de páginas, a navegação descreve a movimentação entre páginas e dentro de uma página. É o ponto de partida da experiência do usuário, e é como os usuários encontram o conteúdo e os recursos em que estão interessados. É muito importante, e pode ser difícil acertar.

Você tem um grande número de opções para fazer para navegação. Você pode:

exemplo de navegação 1 Exigir que os usuários passem por uma série de páginas na ordem.

exemplo de navegação 2 Forneça um menu que permita que os usuários pulem diretamente para qualquer página.

exemplo de navegação 3 Coloque tudo em uma única página e forneça mecanismos de filtragem para exibir conteúdo.

Embora não haja nenhum design de navegação simples que funcione para todos os aplicativos, há princípios e diretrizes para ajudá-lo a decidir o design ideal para seu aplicativo.

Princípios de boa navegação

Vamos começar com os princípios básicos do bom design de navegação:

  • Consistência: atenda às expectativas dos usuários.
  • Simplicidade: não faça mais que o necessário.
  • Clareza: forneça caminhos e opções evidentes.

Consistência

A navegação deve ser consistente com as expectativas dos usuários. Usar controles padrão com os quais os usuários estão familiarizados e seguir convenções padrão para ícones, localização e estilo tornarão a navegação previsível e intuitiva para os usuários.

imagem dos componentes da página

Os usuários esperam encontrar determinados elementos da interface do usuário em locais padrão.

Simplicidade

Menos itens de navegação simplificam a tomada de decisão para os usuários. Fornecer acesso fácil a destinos importantes e ocultar itens menos importantes ajuda os usuários a chegarem onde desejam mais rapidamente.

Primeira captura de tela de uma barra verde que tem uma marca de seleção verde e a palavra O que fazer nela.

modo de exibição de navegação adequado

Apresente os itens de navegação em um menu de navegação familiar.

exemplo do que não fazer

modo de exibição de navegação inadequado

Não sobrecarregue os usuários com muitas opções de navegação.

Clareza

Caminhos claros permitem navegação lógica para os usuários. Tornar as opções de navegação óbvias e esclarecer as relações entre as páginas deve impedir que os usuários se percam.

Captura de tela de uma simulação de um aplicativo mostrando caminhos claros de navegação para um usuário.

Os destinos têm rótulos claros para que os usuários saibam onde estão.

Recomendações gerais

Agora, vamos usar nossos princípios de design, ou seja, consistência, simplicidade e clareza, para criar algumas recomendações gerais.

  • Pense em seus usuários. Trace os caminhos típicos que eles podem tomar em seu aplicativo e, para cada página, pense no motivo do usuário estar lá e onde ele pode querer ir.
  • Evite aprofundar as hierarquias de navegação. Se você ultrapassar dois níveis de navegação, forneça uma barra de trilha que mostra o usuário onde ele está e vamos deixá-lo sair rapidamente. Caso contrário, você corre o risco de colocar o usuário em uma hierarquia profunda que ele terá dificuldade para sair.
  • Evite "pogo-sticking". Pogo-sticking ocorre quando há conteúdo relacionado, mas navegar até ele exige que o usuário suba um nível e, em seguida, desça novamente.

Use a estrutura correta

Agora que você está familiarizado com os princípios gerais de navegação, como deve estruturar seu aplicativo? Há duas estruturas gerais: simples e hierárquica.

Páginas dispostas em uma estrutura simples

Simples/lateral

Em uma estrutura simples/lateral, as páginas são dispostas lado a lado. Você pode ir de uma página para outra em qualquer ordem.

Recomendamos usar uma estrutura simples quando:

  • As páginas podem ser vistas em qualquer ordem.
  • As páginas são claramente distintas umas das outros e não têm uma relação pai/filho óbvia.
  • Existem menos de oito páginas no grupo.
    (Quando há mais páginas, pode ser difícil para os usuários entenderem como as páginas são exclusivas ou entenderem sua localização atual dentro do grupo. Se você não acha que esse é um problema para seu aplicativo, vá em frente e torne as páginas pares. Caso contrário, considere usar uma estrutura hierárquica para dividir as páginas em dois ou mais grupos menores.)

Páginas dispostas em uma hierarquia

Hierárquico

Em uma estrutura hierárquica, as páginas são organizadas em uma estrutura de árvore. Cada página filho tem um pai, mas um pai pode ter uma ou mais páginas filho. Para acessar uma página filho, você passa pela página pai.

Estruturas hierárquicas são adequadas para organizar conteúdo complexo que abrange várias páginas. A desvantagem é um pouco de sobrecarga na navegação: quanto mais profunda for a estrutura, mais cliques são necessários para os usuários passarem de uma página para outra.

Recomendamos uma estrutura hierárquica quando:

  • As páginas devem ser percorridas em uma ordem específica.
  • Há uma relação de pai-filho clara entre as páginas.
  • Existem mais de sete páginas no grupo.

um aplicativo com uma estrutura híbrida

Como combinar estruturas

Você não precisa escolher uma estrutura ou outra; muitos aplicativos bem projetados usam ambos. Um aplicativo pode usar estruturas simples em páginas de nível superior que podem ser exibidas em qualquer ordem, e estruturas hierárquicas em páginas que têm relações mais complexas.

Se a sua estrutura de navegação tiver vários níveis, recomendamos que elementos de navegação ponto a ponto sejam vinculados apenas aos pares em sua subárvore atual. Considere a ilustração ao lado, que mostra uma estrutura de navegação que tem dois níveis:

  • No nível 1, o elemento de navegação ponto a ponto deve fornecer acesso às páginas A, B e C.
  • No nível 2, os elementos de navegação ponto a ponto para as páginas A2 só devem vincular a outras páginas A2. Eles não devem vincular a páginas do nível 2 páginas na subárvore C.

Use os controles corretos

Após decidir-se por uma estrutura de página, precisará decidir como os usuários navegarão por essas páginas. O XAML fornece uma variedade de controles de navegação para ajudar a garantir uma experiência de navegação consistente e confiável em seu aplicativo.

Imagem do quadro

Quadro

Com algumas exceções, qualquer aplicativo com várias páginas usa um quadro. Geralmente, um aplicativo tem uma página principal que contém o quadro e um elemento de navegação principal, como um controle de modo de exibição de navegação. Quando o usuário seleciona uma página, o quadro carrega e exibe essa página.

imagem das guias e do pivô

Navegação superior

Exibe uma lista horizontal de links para páginas no mesmo nível. O controle NavigationView implementa o padrão de navegação superior.

Use o painel de navegação superior quando:

  • Quiser mostrar todas as opções de navegação na tela.
  • Quiser mais espaço para o conteúdo do aplicativo.
  • Os ícones não descrevem claramente as categorias de navegação do seu aplicativo.

imagem das guias e do pivô

Guias

Exibe um conjunto horizontal de guias e o respectivo conteúdo. O controle TabView é útil para exibir várias páginas (ou documentos), oferecendo ao usuário a capacidade de reorganizar, abrir ou fechar guias.

Use guias quando:

  • Desejar que os usuários possam abrir, fechar ou reorganizar guias dinamicamente.
  • Esperar que possa haver um grande número de guias abertas ao mesmo tempo.
  • Esperar que os usuários possam mover as guias com facilidade entre janelas no aplicativo que usam guias, de modo semelhante aos navegadores da Web, como o Microsoft Edge.

imagem das guias e do pivô

Trilha

Exibe uma lista horizontal de links para páginas em cada um dos níveis mais altos. O controle BreadcrumbBar implementa o padrão de navegação superior.

Use uma trilha de pão quando:

  • Você deseja mostrar o caminho para o local atual
  • Você tem muitos níveis de navegação
  • Você espera que os usuários possam retornar a qualquer nível anterior

imagem do modo de exibição de navegação

Navegação à esquerda

Exibe uma lista vertical de links para páginas de nível superior. Use quando:

  • As páginas existirem no nível superior.
  • Houver muitos itens de navegação (mais de 5)
  • Você não espera que os usuários alternem entre as páginas com frequência.

Imagem de detalhes da lista

Lista/detalhes

Exibe uma lista de itens. Selecionar um item exibe a página correspondente na seção de detalhes. Use quando:

  • Você espera que os usuários alternem entre os itens filho com frequência.
  • Você quer permitir que o usuário execute operações de alto nível, como excluir ou classificar, em itens individuais ou grupos de itens, e também deseja permitir que o usuário exiba ou atualize os detalhes de cada item.

A lista/detalhes é adequada para caixas de entrada de email, listas de contatos e entrada de dados.

Imagem de hiperlinks e botões

Hiperlinks

Elementos de navegação inseridos podem aparecer no conteúdo de uma página. Diferente de outros elementos de navegação, que devem ser consistentes em todas as páginas, os elementos de navegação de conteúdo inserido são exclusivos de uma página para outra.

Próximo: adicionar código de navegação ao aplicativo

O próximo artigo, Implementar navegação básica, mostra o código necessário para usar um Frame controle para habilitar a navegação básica entre duas páginas em seu aplicativo.