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

Use os comportamentos de interação interna dos controles da plataforma de aplicativos da Windows Store para proporcionar experiências de usuário intuitivas e comprometidas que também são eficientes e consistentes em todos os dispositivos de entrada. Siga as orientações, práticas recomendadas e exemplos descritos aqui para definir essas experiências do usuário de seus aplicativos da Windows Store.

Os controles da plataforma podem tratar e responder à entrada de uma variedade de fontes, incluindo toque, touchpad, mouse, caneta/stylus, e teclado. Eles também podem processar entrada de uma variedade de modos do dispositivo, como teclado virtual, roda do mouse e apagador na caneta.

Enquanto outros sistemas operacionais estão concentrados em entrada por toque principalmente, o Windows permite que você crie o tipo de aplicativo que deseja, independentemente do dispositivo de entrada: 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í).

Com os controles da plataforma, você pode ter suporte para uma maior variedade de recursos e preferências, tornando seu aplicativo o mais útil, portátil e acessível possível, e atrair uma maior audiência potencial na Windows Store.

Se estiver procurando mais informações sobre os comportamentos de interação personalizados, consulte Personalização de 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 que usam a versão de C++, C#, ou Visual Basic, consulte Interação do usuário, do início ao fim (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. Esse exemplo mostra como você pode usar ou adaptar os diversos recursos de interação e conceitos em seu aplicativo da Windows Store. O exemplo inclui princípios, recomendações e detalhes de implementação para panorâmico e rolagem, layouts de formulários, comportamentos do teclado virtual, 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, criamos um misturador de cores. Ele está na forma de um objeto quadrado que recebe entrada indireta via formulário, e utiliza esses dados para especificar uma cor RGB e um ângulo de rotação, que é convertido em um nível correspondente de vermelho, verde ou azul.

O exemplo demonstra os seguintes recursos:

Percurso de formulário
Comportamentos panorâmico/rolagem integrados
Comportamentos do teclado virtual
Controles da plataforma e suporte interação de usuário integrado

Este é um diagrama delineado que apresenta a ideia de como esse exemplo funciona e a funcionalidade de interação do usuário que o exemplo implementa.

O exemplo contém duas páginas (de cima para baixo): uma página inicial e uma segunda página que contém um formulário com vários controles de plataforma e a mixagem de cores.

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.

Recomendamos que revise cada etapa se você for iniciante no desenvolvimento de aplicativos da Windows Store ou se não estiver familiarizado com interação, usabilidade e acessibilidade do usuário. 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.

Recomendamos que você projete a interface do usuário de seus aplicativos do Windows 8.1 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ções de plataforma, para processamento de evento com base em ponteiro, fornecem funcionalidade equivalente nos dispositivos com código adicional mínimo.

	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 Navegação simples básica. Baixe o modelo e tente fazer algo enquanto segue as etapas aqui ou vá direto e use o modelo para iniciar o projeto e o desenvolvimento de seu 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 compatíveis com aplicativos da Windows Store e Windows 8.
	Como os usuários interagem com os dispositivos de entrada. Compare as interações comuns e como elas mapeiam para gestos nos toques, touchpad, mouse e teclado.

Dispositivos de entrada

Embora otimizado para entrada por toque, a plataforma oferece suporte completo para outros dispositivos de entrada relacionados aqui.

	Respondendo a interações por mouse. As interações via mouse são mais adequadas aos aplicativos que exigem precisão do usuário para 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 é 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

Aqui, revisamos alguns detalhes para a interface do usuário e a funcionalidade incluída no exemplo de interação do usuário.

Alguns desses detalhes podem não se aplicar a seu aplicativo. Selecione e escolha, conforme necessário.

	Diretrizes de layouts de formulário. Projete formulários que oferecem uma grande experiência de interação e minimizem a rolagem. Considere como o usuário preencherá o formulário, quando a rolagem pode ser necessária, e como manipular a aparência do teclado virtual e notificações de erro embutidas.
	Diretrizes de entrada de texto Escolha os controles certos: quando usar um controle de entrada de texto de uma única linha ou de várias linhas (com todos os pode e não pode que sua mãe nunca ensinou a você).
	Diretrizes de teclado virtual e painel de manuscrito. Oferece suporte para entrada de texto para fatores forma que não têm um teclado físico ou outros dispositivos de teclado periféricos. O teclado virtual é invocado quando um usuário toca em um campo de entrada editável e é dispensado quando o campo de entrada perde o foco.
	Diretrizes de movimento panorâmico Considere os recursos panorâmico e rolagem ajudam os usuários a navegar com uma única exibição, como a estrutura de pastas de um computador, uma biblioteca de documentos ou um álbum de fatos. Também, veja como os usuários podem explorar o conteúdo que não se encaixa, nem horizontalmente ou verticalmente, no visor.
	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 and 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 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.

Manipular interações de usuário

Aqui, você explora as opções que possui para processar e responder às interações do usuário com seu aplicativo, e este tópico abrange alguns detalhes da interface do usuário e da funcionalidade incluídas no exemplo de interação do usuário.

	Guia de início rápido: adicionando controles HTML e manipulando eventos A maioria dos aplicativo precisa de controles, como botões, caixas de seleção e listas suspensas. Este exemplo inclui um formulário que contém vários controles que definem propriedades no misturador de cor estática.
	Exibindo e editando texto Adicione controles de entrada de texto ao seu aplicativo da Windows Store.
	O teclado virtual Invocando e dispensando o teclado virtual.
	Implementando a acessibilidade pelo teclado. Muitos usuários que são cegos ou têm problemas de mobilidade usam o teclado como o único meio de navegar no seu aplicativo de interface do usuário e acessar a sua funcionalidade. 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.

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.

Pronto! Sua implementação deve ser semelhante ao Exemplo de interação do usuário.

Agora, relaxe e aproveite seu sucesso.

Deseja mais?

Planejando aplicativos da Windows Store

Saiba mais sobre o tipo de experiência que você deseja fornecer a seus usuários.

Design para acessibilidade

Saiba mais sobre a ampla variedade de habilidades, deficiências e preferências de seus usuários.

Design para diferentes fatores forma

Saiba mais sobre como lidar com diferentes dispositivos, métodos de entrada e orientações de tela.

Diretrizes de experiência do usuário do índice

Navegue em uma lista completa de diretrizes de experiência do usuário.