Aplicativos modernos

Noções básicas de navegação nos Aplicativos da Windows Store

Rachel Appel

Garantir que os usuários possam acessar o conteúdo que desejam, quando desejam, de forma rápida e indolor é uma parte essencial de qualquer aplicativo moderno. Isso significa que a navegação deve ficar fora do caminho até ser desejada e não forçar os usuários a fazer escolhas difíceis de reverter. Esta é uma técnica de design de interface de usuário chamada "conteúdo sobre o cromo". A melhor forma de aplicar esse paradigma de design é para implantar grande parte da navegação diretamente no conteúdo. Isso é fácil de fazer em aplicativos da Windows Store, pois seguem este princípio de design de navegação.

Visão geral da navegação em aplicativos da Windows Store

Nos aplicativos da Windows Store, os desenvolvedores implantam a navegação no conteúdo, proporcionando uma experiência simples e fluente para os usuários enquanto eles navegam pelo conteúdo usando um destes padrões de navegação:

• Hierárquica
• Simples
• Aplicativo de página dividida/única (SPA)

O Visual Studio 2012 oferece suporte aos três métodos de navegação por meio de um conjunto de modelos de aplicativos básicos: Grade, Divisão e Navegação (somente HTML). Em aplicativos HTML, cada modelo contém um arquivo navigator.js com o código que executa a navegação entre páginas, bem como o código que gerencia o botão Voltar. Em aplicativos XAML, a navegação é incorporada ao modelo de evento.

O padrão de navegação hierárquica

Dados relacionais são fortes candidatos à navegação hierárquica. Isso é porque a maioria das vezes você deve percorrer o conteúdo relacional em uma ordem específica — por exemplo, em um cenário de mestre/detalhes — ou não fará sentido. Esse nem sempre é o caso, porém, e é onde a navegação simples entra em jogo (mais sobre isso em breve). Ainda que os dados relacionados possam ter vários níveis de profundidade, colocar mais de três níveis diretamente em um sistema de navegação dificulta muito a experiência dos usuários, de acordo com estudos de usabilidade. Após uma criteriosa pesquisa sobre a usabilidade de navegação, a equipe de linguagem de design do Windows criou o sistema de navegação hierárquica constituído por estes três níveis de navegação:

• Hub: esse é o estágio inicial das informações, contendo dados mestre na frente e no centro. Normalmente é uma lista de itens mestres, como artistas musicais. Nessa lista, o usuário pode verificar as especificidades de cada artista. Em seu lançamento, o Visual Studio 2013 (atualmente em fase de visualização) apresentará um novo modelo de Hub para a criação de cenários de navegação robusta.
• Seção: essa é uma exibição de dois níveis que inclui todos os membros de um grupo específico que o usuário selecionou na página do Hub. Um exemplo de navegação em seção seria navegar em todos os álbuns de um determinado artista.
• Detalhes: inclui os detalhes essenciais de um item específico — por exemplo, informações sobre uma determinada música em um álbum ou uma foto individual em uma coleção.

Exemplos desses três estilos são mostrados no contexto de um aplicativo da CNN nas Figuras 1, 2 e 3, respectivamente.

Figura 1 O nível de navegação em hub

Figura 2 O nível de navegação em seção

Figura 3 O nível de navegação em detalhes

Se você ainda acredita que precisa de mais níveis de navegação, considere o uso de auxiliares de navegação, como zoom semântico ou menus suspensos, ou outros componentes de interface do usuário para filtragem e classificação de conteúdo além da navegação comum. Explicarei em mais detalhes esses auxiliares de navegação neste artigo.

O modelo de grade do Visual Studio tem a navegação hierárquica com os três níveis implementados. Tudo que você precisa fazer é recuperar os dados e inseri-los no modelo para isso funcionar. Os dados podem ser tão simples quanto um WinJS.Binding.List ou um antigo objeto CLR simples (POCO) em aplicativos C#, as mesmas estruturas usadas nos modelos de aplicativos de grade, divisão e navegação no Visual Studio.

Observe que todas as seções dos aplicativos que usam um padrão hierárquico contém um botão Voltar, que é uma parte essencial da navegação em aplicativos da Windows Store, bem como em aplicativos Web. Ter uma forma de voltar atrás e desfazer o comando de navegação anterior aumenta e facilita a experiência do usuário.

O padrão de navegação simples

Ostentando uma barra de navegação na parte superior da tela, os aplicativos de navegação simples mostram várias opções individuais que levam você diretamente a algum conteúdo que possa estar ou não relacionado. A Figura 4 ilustra um ótimo exemplo disso em um aplicativo de previsão do tempo, com guias na parte superior da tela. Quando você toca ou clica nelas, o aplicativo vai diretamente para a página associada. A navegação simples é ótima para conteúdo não relacional. Por exemplo, as guias do aplicativo de previsão do tempo leva você às páginas não relacionadas de sua escolha, em vez de aplicar uma estrutura formal.

Figura 4 Navegação simples em um aplicativo de previsão do tempo

Se você determinar que precisa de níveis profundos de navegação hierárquica, começar pelo sistema de navegação simples poderia ajudar. Use a barra de navegação superior como página de hub. Quando o usuário fizer uma escolha, a aplicativo deverá navegar para o local solicitado. Usar essa técnica acrescenta apenas um nível de navegação. Portanto, convém incorporar auxiliares de navegação também.

O modelo em branco do Visual Studio é o mais propício à navegação simples, embora você possa adicionar uma barra de navegação superior a qualquer tipo de projeto para instituir a navegação simples.

Incorporar a navegação simples em seu aplicativo é tão fácil quanto adicionar um controle NavBar do WinJS (Biblioteca do Windows para JavaScript), um novo controle do Windows 8.1. A Figura 5 mostra um exemplo em HTML.

Figura 5 Usando o controle NavBar do WinJS

    <div id="NavBar" data-win-control="WinJS.UI.NavBar">
      <div id="GlobalNav" 
        data-win-control="WinJS.UI.NavBarContainer">
        <div data-win-control="WinJS.UI.NavBarCommand" 
         data-win-options="{
          label: 'Home',
          icon: 'url(../images/homeIcon.png)',
          location: '/html/home.html',
          split: false
        }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
         data-win-options="{
          label: 'Your apps',
          icon: WinJS.UI.AppBarIcon.favorite,
          location: '/html/yourapps.html',
          split: false
        }">
        </div>
      </div>
    </div>

O controle NavBar está disponível somente no WinJS. Portanto, para criar uma barra de navegação superior em XAML, você deve codificar uma barra de aplicativo e estilizá-la para exibição na parte superior da página, como este exemplo demonstra:

<Page.TopAppBar>
  <AppBar x:Name="topAppBar">
    <Grid>
      <StackPanel Orientation="Horizontal" 
            HorizontalAlignment="Right">
        <Button Style="{StaticResource SaveAppBarButtonStyle}"
          Click="Button_Click"/>
        <Button Style="{StaticResource UploadAppBarButtonStyle}"
          Click="Button_Click"/>
      </StackPanel>
    </Grid>
  </AppBar>
</Page.TopAppBar>

Você pode ter uma barra de navegação superior e uma barra de aplicativo inferior padrão, e também pode adicionar menus, listas suspensas e outros auxiliares de navegação a ambas.

O padrão de navegação de divisão/SPA

Assim como o nome sugere, um aplicativo SPA consiste em uma página para todo o aplicativo. Tecnicamente, SPAs não são realmente apenas uma página gigantesca; eles consistem em uma página principal, onde o aplicativo carrega as seções de conteúdo e comandos no tempo de execução, dinamicamente, orientado pela atividade do usuário. Nos aplicativos da Windows Store criados com JavaScript, você pode implementar aplicativos SPA gerenciando os componentes de aplicativos chamados fragmentos de página.

O modelo de navegação de divisão em Visual Studio 2012 revela um modelo SPA semelhante ao modelo de grade; no entanto, o modelo de divisão contém dois, em vez de três, níveis de navegação. Isso significa que em vez de hub/seção/detalhes, o modelo de divisão começa no nível de seção, mostrando uma listagem de itens e, quando o usuário seleciona um item, seus detalhes são carregados na página juntamente com outros itens.

Navegação SPA em aplicativos HTML é realizada criando primeiramente um elemento <div> ou de contêiner no qual as outras páginas podem ser carregadas. Você pode usar o controle PageControlNavigator do WinJS (definido em navigator.js) para criar este contêiner:

    <div id="contenthost" 
      data-win-control="Application.PageControlNavigator"
      data-win-options="{home: '/pages/home/home.html'}"></div>

Uma vez implementado o PageControlNavigator (por padrão, nos modelos de grade, divisão e navegação), o código de \js\navigator.js faz todo o trabalho de carregamento de páginas no PageControlNavigator sem modificações de sua parte.

O padrão SPA abordado aqui funciona muito bem em sites e em outros tipos de aplicativos — incluindo aplicativos da Windows Store, claro — e o aplicativo SPA está se tornando rapidamente o favorito dos desenvolvedores de aplicativos modernos, inclusive de outras plataformas.

Navegando com zoom semântico

Você já usou um aplicativos com inúmeros dados em que os menus ou links não parecem ajudá-lo com os dados de que você precisa? É aí que o zoom semântico entra em campo. Usar o zoom semântico permite que você adapte e visualizar os dados de forma diferente e mais navegável. Isso poderia ser olhar os dados em uma visão geral de 13.000 pés (é assim que funciona a própria página inicial do Windows) ou mostrar os dados em agrupamentos agregados para que os usuários podem encontrar o que procuram rapidamente. O Netflix, conforme demonstrado na Figura 6, faz bom uso do zoom semântico para indicar categorias de filmes. O zoom semântico é particularmente útil quando você tem um grande volume de dados.

Figura 6 O Netflix faz bom uso do zoom semântico

Você pode implementar o zoom semântico em aplicativos da Windows Store como um controle em aplicativos WinJS e XAML. Este é um exemplo em HTML/JavaScript:

    <div data-win-control="WinJS.UI.SemanticZoom">  
      <!—Original view of the data, for example, the list of all movies -->
      <!-- The zoomed-out version of the data, as shown in Figure 1. -->
    </div>

Este é um exemplo em XAML/C#:

<SemanticZoom>
  <SemanticZoom.ZoomedInView>
    <!—Original view of the data, for example, the list of all movies -->
  </SemanticZoom.ZoomedInView>
  <SemanticZoom.ZoomedOutView>
    <!-- The zoomed-out version of the data, as shown in Figure 1. -->       
  </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Os usuários podem chamar o zoom semântico usando um gesto de pinçagem com dois dedos em dispositivos com tela sensível ao toque ou com o mouse + roda de rolagem. Para obter mais informações sobre o controle SemanticZoom e outros controles de aplicativos da Windows Store, consulte minha coluna “Dominando controles e configurações nos aplicativos da Windows Store criados com JavaScript”, em msdn.microsoft.com/magazine/dn296546.

Navegação por classificação, filtragem e busca

É claro que você poderia argumentar que a filtragem não é uma navegação real, mas poder classificar os dados certamente ajudará os usuários a limitar suas seleções e encontrar os dados desejados rapidamente com menos problemas, que é o objetivo da navegação. No mínimo, a classificação e a filtragem podem fornecer melhorias muito necessárias para a navegação padrão em aplicativos. No caso de aplicativos da Windows Store, a filtragem é um meio de melhorar o esquema de navegação principal do aplicativo. Ajustar a visualização por meio de pequeno controles de interface de usuário realmente torna a experiência do usuário precisa e agradável. 

Nos aplicativos da Windows Store criados com JavaScript, você pode implementar listas suspensas para classificação e filtragem usando o elemento HTML <select> padrão, desta forma:

    <select>
      <option>Appels</option>
      <option>Bananas</option>
      <option>Grapes</option>
      <option>Oranges</option>
      <option>Pears</option>
    </select>

Em aplicativos XAML, você chama o mesmo controle de ComboBox, que é semelhante a esse código:

<ComboBox x:Name="Fruits" 
    SelectionChanged="Fruits_SelectionChanged" >
  <x:String>Appels</x:String>
  <x:String>Bananas</x:String>
  <x:String>Oranges</x:String>
  <x:String>Grapes</x:String>
  <x:String>Pears</x:String>
</ComboBox>

O próprio aplicativo da Windows Store faz muito uso de listas suspensas para filtrar aplicativos. Navegue para qualquer categoria e você encontrará filtros de preço e relevância, conforme ilustrado na Figura 7. Durante as buscas na loja, aparecem ainda mais filtros.

Figura 7 Os filtros de aplicativos da Windows Store

Por fim, não vamos nos esquecer de como a busca é uma parte importante da navegação. Todo mundo faz buscas — e não só por meio os mecanismos de busca populares da Web. Todo mundo adora ter acesso fácil a conteúdo específico. Portanto, seus aplicativos devem fornecer esse serviço prático para os usuários. Com a busca, assim como o botão de configurações, faz parte do sistema operacional, em aplicativos da Windows Store, você pode implementar a busca por meio de um contrato.

Outros auxiliares de navegação

A rolagem horizontal pode não parecer como parte integrante da navegação, mas pode ser. Em aplicativos da Windows Store, a exibição panorâmica permite adicionar seções completamente separadas de dados a uma única exibição organizada. Isso permite que os usuários rolem para diferentes seções sem navegar de fato, e é geralmente um conjunto de aplicativos de notícias em que uma parte do conteúdo é texto e a outra é vídeo. Combine o panorama com o zoom semântico e os usuários poderão ir diretamente para as seções de dados de que precisam. Considere os aplicativos como CNN e ABC (de notícias), Bing Finanças, Netflix e outros que usam extensivamente a rolagem horizontal longa.

Além desses auxiliares de navegação, usar recursos internos do Windows 8 para algumas atividades irá reduzir a quantidade necessária de elementos de navegação no aplicativo. Por exemplo, em vez de incorporar no aplicativo uma página Sobre, Configurações ou outra página informativa (tradicionalmente localizada no menu Ajuda do Windows em programas de versões anteriores do Windows), você pode usar o botão de configurações para exibir informações da ajuda e do aplicativo. Isso significa que você não precisa fornecer mais outro menu e opção de navegação, e os usuários beneficiam-se por ter um tema consistente em todos os aplicativos da Windows Store para acessar configurações e afins.

Sem mais usuários perdidos e confusos

Um esquema de navegação de sólido é um aspecto importante do desenvolvimento de aplicativos modernos, e particularmente de aplicativos da Windows Store. Sem a navegação fácil de usar, os usuários ficam perdidos e confusos. Felizmente, os modelos internos de aplicativos da Windows Store em HTML e XAML ajudam a criar aplicativos fáceis de usar para os usuários.

Rachel Appel é consultora, autora, mentora e antiga funcionária da Microsoft com mais de 20 anos de experiência no setor de TI. Ela dá palestras em importantes congressos do setor, como o Visual Studio Live!, o DevConnections, o MIX e muitos outros. Sua experiência está ligada a soluções de desenvolvimento que alinham negócios e tecnologia com foco na pilha de desenvolvimento da Microsoft e em Web aberta. Para obter mais informações sobre a Appel, visite seu site em rachelappel.com.

Agradecemos aos seguintes especialistas técnicos da Microsoft pela revisão deste artigo: Megan Bates, Ross Heise, Maria Kang e Eric Schmidt