Diretrizes de Zoom Semântico

Artigo
10/03/2013

Este tópico descreve a nova IU do Windows para zoom semântico. Também fornece diretrizes para a experiência do usuário que devem ser consideradas ao usar esse novo mecanismo de interação em seus aplicativos da Windows Store.

Veja este recurso em ação como parte da nossa série sobre recursos para aplicativos, do início ao fim: Interação do usuário: entrada por toque e muito mais

Visão geral do Zoom Semântico

O Zoom Semântico é uma técnica otimizada para o toque usada por aplicativos da Windows Store no Windows 8 para apresentar e navegar em conjuntos de dados extensos ou conteúdo relacionado em um único modo de exibição (como um álbum de fotos, uma lista de aplicativos ou um catálogo de endereços).

Observação

Essa funcionalidade é idêntica ao movimento panorâmico e à rolagem (que podem ser usados juntamente com o Zoom Semântico) em um único modo de exibição.

O Zoom Semântico usa dos modos distintos de classificação (ou níveis de zoom) para organizar e apresentar o conteúdo: um modo em nível baixo (ou zoom aumentado) que é normalmente usado para exibir itens em uma estrutura plana e completa e, o outro, é um modo em nível alto (ou zoom reduzido) que exibe itens em grupos e permite que um usuário navegue e procure rapidamente pelo conteúdo.

A interação do Zoom Semântico é realizada com os gestos de pinça e de ampliar (afastando os dedos aumenta o zoom e aproximando os dedos reduz o zoom), ou mantendo a tecla Ctrl pressionada enquanto gira a roda de rolagem do mouse, ou mantendo a tecla Ctrl pressionada (com a tecla Shift caso o teclado numérico esteja disponível) e pressionando a tecla mais (+) ou menos (-).

Assista a este vídeo rápido para ter uma visão geral do Zoom Semântico.

Exemplos de aplicativos que podem usar o Zoom Semântico incluem:

Um catálogo de endereços que organiza os contatos em ordem alfabética (ou por alguma outra categoria) e apresenta os dados usando letras do alfabeto. O usuário pode ampliar uma letra para ver os contatos associados a ela.
Um álbum de fotos que organiza as imagens por metadados (como a data em que uma foto foi tirada). O usuário pode ampliar uma data específica para exibir a coleção de imagens associadas a essa data.
Um catálogo de produtos que organiza os itens por categoria.
Outros exemplos de layouts de Zoom Semântico:

Ampliado Reduzido

Navegando com o Zoom Semântico

Enquanto que navegar no conteúdo é possível somente com o movimento panorâmico e a rolagem (veja Diretrizes de movimento panorâmico), uma navegação dinâmica e capacidades organizacionais são possíveis quando combinadas com o Zoom Semântico.

O movimento panorâmico e a rolagem são úteis para pequenos conjuntos de conteúdos e distâncias curtas. Contudo, a navegação logo se torna incomoda para conjuntos grandes de conteúdos. O Zoom Semântico reduz significativamente a percepção de grandes distâncias ao navegar por grandes quantidades de conteúdos e fornece um acesso fácil e rápido aos locais no conteúdo.

Observação

O Zoom Semântico não deve ser confundido com o zoom óptico (veja Diretrizes de zoom óptico e redimensionamento). Mesmo compartilhando a mesma interação e o comportamento básico (exibindo mais ou menos detalhes com base em um fator de zoom), o zoom óptico refere-se ao ajuste da ampliação de uma área de conteúdo ou um objeto como uma fotografia.

Pulo de rolagem

Tocar no conteúdo no modo de exibição reduzido aproxima a exibição e faz o movimento panorâmico no ponto tocado, como mostrado nestes três diagramas.

Captura de tela mostrando a exibição semântica original.

Zoom reduzido, todo o conteúdo pode ser um alvo tocável.

Captura de tela mostrando um gesto de tocar em uma seção da exibição semântica original.

Um toque em uma seção do conteúdo.

Captura de tela mostrando a nova exibição semântica no alvo do toque.

Zoom aumentado e movimento panorâmico na área tocada.

Transições

Uma animação com dimensionamento e fading cruzado suave é usado para a transição de um nível de zoom semântico para outro. Esse é o comportamento padrão do Windows Touch e não pode ser personalizado.

Considerações e recomendações

Você é responsável por definir os dois níveis semânticos em seus aplicativos.

Leve em conta estas perguntas ao criar o modo reduzido:

Como a estrutura e a apresentação das informações mudam com base no nível de zoom?
Dicas ou "postes de aviso" são úteis para navegar pelos dados?
Que quantidade de conteúdo proporciona um modo de exibição semântico útil ao minimizar o movimento panorâmico e a rolagem?

Essas considerações estão frequentemente em conflito uma com a outra. Você pode desejar um conteúdo rico com muitas informações para que os usuários saibam para onde estarão pulando, mas é necessário equilibrar essas informações pelo comprimento total do nível semântico. Se os usuários precisarem fazer o movimento panorâmico várias vezes no modo de zoom reduzido, você estará perdendo o principal benefício do Zoom Semântico—, a navegação rápida.

O que fazer e o que não fazer

Os tópicos seguintes sobre o que fazer e o que não fazer garantem uma experiência bem sucedida do Zoom Semântico para os seus consumidores.

O que fazer

Use o tamanho correto de alvo do toque para elementos que são usáveis e interativos.
Para saber mais, veja Diretrizes de direcionamento.
Forneça uma região de Zoom Semântico adequada e intuitiva.
Usuários que comumente iniciam o Zoom Semântico dentro da área que cerca os itens exibidos. Torne a região do Zoom Semântico grande o suficiente para abranger essa área. Por exemplo, a Windows Store oferece uma grande quantidade de espaço em branco ao redor da lista de aplicativos onde o usuário pode colocar os dedos e aumentar ou reduzir o zoom.
Use a estrutura e a semântica que são intrínsecas à exibição.
Use os nomes dos grupos para itens em uma coleção agrupada.

Use ordens de classificação (como ordem cronológica para datas e ordem alfabética para uma lista de nomes) para uma coleção desagrupada, porém classificada.

Use páginas para representar uma coleção de documentos.
Certifique-se de que o layout de itens e a direção do movimento panorâmico não mudem com base no nível de zoom.
Layouts e interações de movimento panorâmico devem ser consistentes e previsíveis em todos os níveis de zoom.
Limite o número de páginas (ou telas) no modo de zoom reduzido para três.
O Zoom Semântico permite a um usuário pular rapidamente para um conteúdo. Inserir movimentos panorâmicos em excesso elimina esse benefício.

O que não fazer

Não use o Zoom Semântico para alterar o escopo do conteúdo.
Por exemplo, um álbum de fotografias não deve nunca alternar para uma exibição de pasta no Gerenciador de Arquivos.
Não defina uma borda nos controles filhos do controle do Zoom Semântico.
Se você definir bordas nos controles SemanticZoom e em seus filhos, a borda do SemanticZoom e a borda do controle filho que está na exibição se tornarão ambas visíveis. Ao ampliar ou reduzir, as bordas do controle filho são dimensionadas juntamente com o conteúdo e não ficam com uma boa aparência. Defina uma borda somente no controle SemanticZoom.

Laboratórios práticos do Windows 8

Se você quiser tentar trabalhar com o Zoom Semântico e outros recursos importantes do Windows 8, baixe os laboratórios práticos do Windows 8. Esses laboratórios fornecem uma apresentação modular e passo a passo para a criação de um exemplo de aplicativo da Windows Store na linguagem de programação de sua escolha (JavaScript e HTML ou C# e XAML).