Personalização da interação do usuário, do início ao fim (HTML)

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Dispositivos de entrada compatíveis com aplicativos da Windows Store

Você pode criar interações de usuário personalizadas que sejam intuitivas e envolventes e, ao mesmo tempo, eficientes e consistentes em todos os dispositivos de entrada. Siga as orientações, as práticas recomendadas e os exemplos descritos aqui para definir essas experiências de usuário para seu aplicativo da Windows Store.

Observação Recomendamos que você use as bibliotecas de controle de plataforma (HTML e XAML) sempre que possível. Os controles nessas bibliotecas fornecem a experiência de interação completa para o usuário do Windows 8.1, incluindo interações padrão, efeitos físicos animados, comentários visuais e acessibilidade. Se não precisar de suporte para interação personalizado, use esses controles internos.

Os aplicativos da Windows Store podem processar a entrada de várias fontes, incluindo toque, touchpad, mouse, caneta/stylus e teclado. Eles também podem processar a entrada de uma variedade de modos do dispositivo, como teclado virtual, roda do mouse e borracha da caneta. Apesar de outras plataformas se concentrarem principalmente na entrada por toque, você pode criar o tipo de aplicativo da Windows Store que quiser, sem restrições: aplicativos de consumo, aplicativos de produtividade, aplicativos híbridos inovadores em computadores, laptops, tablets e muito mais tipos de formas (e ainda não paramos por aí).

Se você estiver procurando mais informações sobre controles de plataforma e seus comportamentos de interação, consulte Interação do usuário, do início ao fim (HTML).

Pré-requisitos

As diretrizes, tarefas e código de exemplo aqui são específicos para desenvolver aplicativos da Windows Store em JavaScript. Para aplicativos da Windows Store em C++, C# ou Visual Basic, consulte Personalização da interação do usuário (XAML).

Se você for iniciante no desenvolvimento de aplicativos da Windows Store em JavaScript, consulte esses tópicos para ficar familiarizado com as tecnologias discutidas aqui.

Desenvolvendo aplicativos da Windows Store em JavaScript

Familiarize-se com tudo da tela Inicial para o layout da interface do usuário e controle, nos aplicativos da Windows Store em JavaScript.
Criar seu primeiro aplicativo da Windows Store em JavaScript

Use JavaScript com HTML5 e CSS (Folha de Estilos em Cascata) para compilar aplicativos da Windows Store.

Exemplo de interação do usuário

Além dos exemplos e trechos de código incluídos nos tópicos referidos abaixo, trabalharemos com o Exemplo de interação do usuário personalizada. Este exemplo mostra como você pode usar ou adaptar vários conceitos e recursos de interação em seu aplicativo da Windows Store. O exemplo inclui princípios, recomendações e detalhes de implementação para controles personalizados, acessibilidade da interface do usuário e interações personalizadas. Veja como colocar em prática nossas diretrizes!

Aqui está uma breve descrição do exemplo

No exemplo, fazemos uma mixagem de cores. Ela está na forma de um objeto quadrado que tem entrada direta de uma tela sensível ao toque, um touchpad, um mouse, uma caneta/stylus ou um teclado. Ela usa esses dados para especificar uma cor RGB e um ângulo de rotação, que se traduz em um nível correspondente de vermelho, verde ou azul.

O exemplo demonstra os seguintes recursos:

Controle personalizado
Suporte de personalização básica (HTML e XAML) dos comportamentos de interação do usuário
Detecção, reconhecimento e processamento de gestos personalizados

Veja aqui um diagrama de estrutura delineada que dá uma ideia de como funciona este exemplo e da funcionalidade da interação do usuário que o exemplo implementa.

Estrutura delineada do aplicativo de exemplo

O exemplo contém três páginas (da esquerda para a direita): uma página inicial, uma segunda página que contém um controle personalizado com suporte para rotação com base em DOM e uma terceira página com um controle personalizado que implementa a funcionalidade adicional através de APIs GestureRecognizer do Windows.UI.Input.

Por enquanto, este é um esboço livre das tarefas que ajudam você a compilar um aplicativo que segue as práticas recomendadas para interação do usuário nos aplicativos da Windows Store. Cada tarefa vincula informações correspondentes no Centro de desenvolvimento de aplicativos da Windows Store.

Se você for iniciante no desenvolvimento de aplicativos da Windows Store ou não estiver familiarizado com interação do usuário, usabilidade e acessibilidade, é melhor ver todas as etapas. Você encontrará aspectos relacionados de desenvolvimento de interação do usuário agrupados.

Planejar seu aplicativo

Antes de iniciar o projeto e desenvolvimento do aplicativo, planeje seu aplicativo. Reserve um tempo para pensar sobre qual será o público e para quais recursos e atividades seu aplicativo oferece suporte.

Projete a interface do usuário do seu aplicativo da Windows Store principalmente para interações de toque. A entrada por toque é por natureza imprecisa (requer uma área de entrada) comparado a outros tipos de entradas que normalmente são de pixel preciso. Controles otimizados para toque, juntamente com um conjunto de APIs de interação de plataforma para processamento de eventos baseados em ponteiro, fornecem funcionalidade equivalente nos dispositivos sem muito código adicional.

	Escolha o padrão de navegação mais apropriado para seu aplicativo e seu conteúdo. Para saber mais, veja padrões de navegação. No exemplo de interação do usuário que oferece suporte a este tutorial, começamos com o modelo de modelo de Navegação simples. Faça o download do modelo e faça experiências enquanto segue estas etapas, ou pule essa parte e use o modelo para iniciar o projeto e o desenvolvimento do seu próprio aplicativo.
	Interface do usuário de aplicativo da Windows Store, do início ao fim (HTML). Projete e elabore os elementos da interface do usuário e o conteúdo, como uma janela do aplicativo, submenus, diálogos e barras do aplicativo. Usamos diretrizes, práticas recomendadas e exemplos para ajudá-lo a tirar proveiro dos recursos da interface do usuário Windows 8.1 e criar uma interface do usuário intuitiva e consistente com outros aplicativos da Windows Store.
	Respondendo à interação do usuário. Saiba mais sobre a plataforma de interação do usuário, as fontes de entrada (incluindo toque, touchpad, mouse, caneta e teclado), modos (teclado virtual, roda do mouse, borracha da caneta etc.) e as interações do usuário compatíveis com aplicativos da Windows Store.
	Como os usuários interagem com os dispositivos de entrada. Compare interações comuns e como elas são associadas aos gestos de toque, touchpad, mouse e teclado.

Dispositivos de entrada

Apesar de otimizada para entrada por toque, a plataforma é totalmente compatível com os outros dispositivos de entrada listados aqui.

	Respondendo a interações por mouse. Use as interações do mouse para aplicativos que exigem precisão nas ações de apontar e clicar.
	Respondendo a interações por teclado. O teclado é indispensável para pessoas portadoras de determinadas deficiências ou usuários que simplesmente o consideram um método mais eficiente de interagir com um aplicativo.
	Respondendo a interações com caneta. Uma caneta ou stylus pode ser usada como dispositivo para apontar e um dispositivo para desenhar. Ela normalmente está associada à funcionalidade de tinta digital.
	Reagindo a interações com touchpad. Um touchpad combina a entrada multitoque indireta com a entrada de precisão de um dispositivo apontador, como, por exemplo, um mouse. Essa combinação torna o touchpad adequado à interface do usuário otimizada para toque do Windows 8.1 e aos destinos menores de aplicativos de produtividade e do ambiente de área de trabalho.

Projetando suas interações

Seja criativo ao seguir as diretrizes da experiência do usuário do Windows para interações do usuário. Escolha quais dispositivos de entrada são compatíveis com seu aplicativo e como ele responde. Melhore a experiência do usuário entre dispositivos, dê suporte para uma variedade mais ampla de recursos e preferências e atraia a maior audiência potencial na Windows Store. Isso torna seu aplicativo o mais utilizável, portátil e acessível possível.

Essas diretrizes para interação do usuário podem ajudá-lo a proporcionar uma experiência de interação envolvente e imersiva, consistente entre os modos de entrada:

Diretrizes para interações comuns do usuário

Crie experiências de interação do usuário com uma funcionalidade consistente para todos os dispositivos.
Diretrizes de deslizamento transversal

Dê suporte à seleção com o gesto de deslizar e a interações de arrastar (mover) com o gesto de deslizar.
Diretrizes para zoom óptico e redimensionamento

O zoom óptico permite que os usuários ampliem o modo de exibição do conteúdo em uma área de conteúdo (você o usa na área de conteúdo em si), enquanto o redimensionamento permite que alterem o tamanho relativo de um ou mais objetos sem alterar o modo de exibição na área de conteúdo (você o usa em objetos na área de conteúdo).
Diretrizes de movimento panorâmico

Considere como o movimento panorâmico e a rolagem ajudam os usuários a navegarem em um único modo de exibição, como a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fotos. Veja também como os usuários podem explorar o conteúdo que não se encaixa, horizontal ou verticalmente, dentro do visor.
Diretrizes de rotação

Gire objetos rodando em uma direção circular (sentido horário ou anti-horário) usando o toque ou através de outros controles de interface do usuário para mouse, caneta/stylus ou teclado.
Diretrizes de zoom semântico

Apresente e navegue por grandes conjuntos de conteúdo ou dados relacionados em um único modo de exibição (como um álbum de fotos, uma lista de aplicativos ou um catálogo de endereços).
Diretrizes para seleção de texto e imagens

Ofereça funcionalidade e interface do usuário para seleção de conteúdo.
Diretrizes de direcionamento

Aumente a satisfação do usuário com o seu aplicativo, melhorando a confiança e a precisão do toque.
Diretrizes de resposta visual

Ajude os usuários a compreenderem, aprenderem e se adaptarem ao seu aplicativo, ao sistema e ao dispositivo de entrada. Você pode fazer isso por meio da indicação do sucesso de uma interação, da melhoria da sensação do usuário em relação ao controle, do incentivo à interação, da retransmissão do status do sistema e da redução de erros. O feedback visual (também chamado de interface do usuário de feedback ou visualizações de contatos) mostra se uma interação foi detectada, interpretada e manipulada conforme pretendido.

Manipular interações de usuário

Aqui, exploramos as suas opções para processar e responder às interações do usuário com seu aplicativo. Abordaremos também alguns detalhes da interface do usuário e da funcionalidade incluída no exemplo de interação do usuário.

	Guia de início rápido: ponteiros Personalize as interações do usuário através de eventos de ponteiro.
	Guia de início rápido: gestos e manipulações DOM Personalize interações do usuário através de eventos DOM (Document Object Model).
	Guia de início rápido: gestos estáticos Guia de início rápido: gestos de manipulação Personalize as interações do usuário através de GestureRecognizer.
	Animando sua interface do usuário Integre a aparência do Windows 8 ao seu aplicativo da Windows Store usando o pacote de animações da Biblioteca de Animação da plataforma (para eventos de ponteiro ou gestos de passar o dedo) ou personalizar animações usando Transições, Animações e Transformações CSS3 (Folhas de Estilos em Cascata, Nível 3).
	Implementando a acessibilidade pelo teclado. Muitos usuários que têm problemas de mobilidade ou deficiências de visão confiam no teclado como a única forma de navegar pela interface do usuário do seu aplicativo e acessar as funcionalidades. Se seu aplicativo não oferecer um bom acesso ao teclado, esses usuários terão dificuldade em usar o aplicativo, ou podem não conseguir usá-lo.
	Tornando os eventos de toque acessíveis. Deixe a entrada por toque acessível conectando eventos de ponteiro a eventos de clique de mouse.
	Testando a acessibilidade do seu aplicativo. Use as ferramentas de teste de acessibilidade incluídas no Software Development Kit do Windows (SDK) para Windows 8, Inspect e UI Accessibility Checker (AccChecker), para ajudar a verificar a acessibilidade de seu aplicativo. Se você pretende declarar seu aplicativo como acessível na Windows Store, solucione todos os erros de prioridade 1 relatados pelo AccChecker com as verificações de ARIA (Aplicativos Avançados para Internet para Acessibilidade) via Web habilitadas. Lembre-se: O Narrator oferece suporte para um conjunto de gestos de toque personalizados (descritos neste tópico) para navegar e ler o conteúdo de seu aplicativo.

Concluir o processo

Certifique seu aplicativo com o Kit de Certificação de Aplicativos Windows.

Execute o Kit de Certificação de Aplicativos Windows para ajudar a garantir que o aplicativo atenda aos requisitos da Windows Store. Faça isso sempre que adicionar funcionalidade importante em seu aplicativo.