Orientações para a criação de sites fáceis de usar com o toque
No Windows 8 Consumer Preview, o IE10 permite experiências de multitoque rápidas e fluidas na Web. A maioria dos sites funciona bem com o toque no IE10 sem alterações no site. Esta postagem fornece quatro simples orientações para assegurar que os clientes usem o toque em seu site da maneira mais eficiente.
Escrevemos anteriormente sobre como dispositivos de entrada telas sensíveis ao toque torna as Web mais divertida, interativa e imersiva. Também falamos sobre a importância de garantir uma experiência de navegação no IE10 sem abrir mão de nada para que a verdadeira Web funcione muito bem com o toque.
Das quatro orientações abaixo, as duas primeiras garantem que os usuários do recurso de toque sejam capazes de acessar todas as funcionalidades do seu site. As últimas duas apresentarão dicas para você tornar o seu site mais fácil de usar com o toque.
NÃO oculte conteúdo com o recurso focalizar
Um mouse pode focalizar um conteúdo (apontar para ele) sem ativá-lo (clicá-lo). No entanto, com o recurso de toque, um toque focaliza e ativa em uma única ação. Portanto, a funcionalidade que requer focalização sem ativação não irá funcionar para os usuários de toque. Em vez disso, procure usar como base para todos os comportamentos o clique (toque).
CONFIGURE o navegador para os comportamentos de toque padrão que funcionam bem para o seu site
Os usuários esperam ser capazes de fazer o movimento panorâmico e aplicar zoom nos sites usando o toque. Portanto, o navegador consome movimentos de toque, pinça e toques duplos por padrão e não envia eventos para essas interações. Se, em vez disso, o seu site precisar fornecer funcionalidades especiais para essas interações, você deve configurar o IE10 para fornecer somente o comportamento padrão que você deseja, caso necessário.
Quando um usuário toca em um elemento, a propriedade CSS -ms-touch-action determina o comportamento padrão que o IE10 fornece.
-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;
A tabela abaixo descreve os cinco valores possíveis.
| Valor | Descrição |
|---|---|
auto |
O navegador determina o comportamento para o elemento. Esse é o valor padrão para a -ms-touch-action. |
none |
Nenhum comportamento padrão é permitido. |
manipulation |
Apenas movimento panorâmico, zoom de pinça e deslizar o dedo para avançar ou voltar durante a navegação são permitidos. |
double-tap-zoom |
Apenas zoom de toque duplo é permitido. |
inherit |
O elemento herda o valor da -ms-touch-action de seu pai. |
Por exemplo, um aplicativo de pintura pode usar:
canvas {
-ms-touch-action: double-tap-zoom;
}
Com essa configuração, o usuário pode realizar um toque duplo para ampliar os elementos da tela de pintura, mas deslizando um dedo enviará eventos para a tela de pintura, em vez de proporcionar um movimento panorâmico da tela.
IDENTIFIQUE tipos de entradas usando formulários em HTML5
O IE10 introduz o suporte para os controles de entrada de HTML5, todos sendo otimizados para toque. Para entradas de texto, você pode melhorar ainda mais as experiências de toque dos usuários identificando o tipo específico de entrada quando aplicável. O Internet Explorer mostrará um layout de teclado virtual personalizado para o tipo de entrada no Windows 8:
<input type="email">
O teclado virtual mostra os botões @ e “.com” para endereços de email.
<input type="tel">
O teclado virtual mostra um teclado numérico para números de telefone.
<input type="url">
O teclado virtual mostra a barra " /" e “.com” para URLs.
FORNEÇA espaço amplo para os dedos dos usuários
Para criar uma experiência do Windows 8 que priorize o toque, fizemos uma série de pesquisas par formular algumas orientações úteis para desenvolvedores. A largura média de um dedo é de 11 mm. À medida que os alvos para o toque aumentam, a porcentagem de toque errados cai rapidamente.
Idealmente, um alvo tem no mínimo 11mm (cerca de 40px) quadrados com ao menos 2mm (cerca de 10px) de área extra ao redor.
| Alvo de 40px ou mais | |||
| 10px ou mais entre alvos | |||
Se você quiser ajustar o espaço apenas para usuários com dispositivos de toque, use a detecção de recurso.
Para detectar que o usuário tem um dispositivo de toque:
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}
Indo além desses fundamentos
É possível fazer muito mais para criar uma ótima experiência que priorize o toque. Por exemplo, você pode escolher otimizar para o toque ao customizar suporte para interações de multitoque ou gestos. Seguem alguns links para você começar:
- IE 10 Developer Guide
- Touch Zooming & Panning
- Pointer & Gesture Events
- Touch Input for IE10 and Metro style Apps (Entradas de toque para o IE10 e aplicativos estilo Metro, em inglês)
- Handling Multi-touch and Mouse Input in All Browsers (Manipulando entrada de mouse e multitoque em todos os navegadores, em inglês)
Planejamos escrever mais sobre esses métodos em postagem futuras deste blog. Aplicar essas orientações hoje garantirá que os seus sites funcionem bem com o toque do IE10.
— Jacob Rossi, gerente de programas, Internet Explorer