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

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 a fazer para a navegação. Você pode:

Exigir que os usuários percorram uma série de páginas em ordem.

Forneça um menu que permita aos usuários pular diretamente para qualquer página.

Coloque tudo em uma única página e forneça mecanismos de filtragem para visualizar o 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 do usuário.
• Simplicidade: Não faça mais do que o necessário.
• Clareza: Forneça caminhos e opções claros.

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.

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.

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

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.

Os destinos são claramente rotulados 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ê for além de dois níveis de navegação, forneça uma barra de navegação que mostre ao usuário onde ele está e permita que ele volte rapidamente. Caso contrário, você corre o risco de encalhar seu usuário em uma hierarquia profunda da qual ele terá dificuldade em sair.
• Evite "pogo-sticking". A degola do pogo ocorre quando há conteúdo relacionado, mas navegar até ele exige que o usuário suba um nível e depois 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.

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 visualizadas em qualquer ordem.
• As páginas são claramente distintas umas das outras e não têm uma relação óbvia entre pais e filhos.
• Existem menos de oito páginas no grupo.
  (Quando há mais páginas, pode ser difícil para os usuários entender como as páginas são exclusivas ou entender sua localização atual dentro do grupo. Se você acha que isso não é um problema para o 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.)

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 secundária, você percorre o 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 7 páginas no grupo.

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 sua estrutura de navegação tiver vários níveis, recomendamos que os 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 devem ser vinculados apenas às outras páginas A2. Eles não devem vincular a páginas de nível 2 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.

Frame

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.

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.

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.

Estrutura

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 navegaçã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

Navegação à esquerda

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

• As páginas existem 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.

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 itens filho com frequência.
• Você deseja 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.

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 seu 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.