Nos primeiros dias de criação de websites para dispositivos móveis, a maioria dos desenvolvedores bifurcava sua oferta de produtos. Eles lançaram uma versão de desktop totalmente funcional e, em seguida, uma versão "otimizada para dispositivos móveis" que removeu muito da marca e das imagens para acomodar os recursos limitados e a velocidade de rede dos telefones e redes sem fio 3G.
Os smartphones contemporâneos, no entanto, podem processar páginas da Web com a mesma eficiência que os desktops, por meio de redes tão boas ou melhores que as linhas de DSL de ontem.
O design, então, converge de volta para uma interface de usuário único. Mas o risco para os designers não é que um smartphone ou um tablet não consiga criar um site moderno e responsivo. Em vez disso, é que o método de entrada do usuário em um dispositivo touchscreen requer mudanças significativas no design do site subjacente. Os dias de construção de um site assumindo que os visitantes tenham um teclado e um mouse acabaram.
Regras básicas de design com tela sensível ao toque
Projetar para uma interface da Web sensível ao touchscreen requer uma evolução da abordagem tradicional de monitor-mouse-teclado do passado. Em particular, você deve acomodar interações como gestos, toques e entrada multitoque.
- O toque não é preciso.A menos que o cliente tenha os dedos de uma criança pequena, mesmo com os controles de software muito precisos, pode ser difícil tocar e ser preciso.
- Gestos são diferentes dos toques.Para percorrer uma página longa em uma tela sensível ao toque, o usuário desliza um dedo acima a janela do navegador. Isso pode não parecer significativo até você perceber que navegando com um mouse, você move o mouse baixa .
- Dois (e mais) toques de dedo.Um usuário pode usar vários toques no dispositivo ao mesmo tempo para controlá-lo. Esses toques adicionais podem significar algo específico, dependendo do sistema operacional do dispositivo do usuário.
- Dispositivos de alto brilho.As telas da maioria dos tablets touchscreen são feitas de um vidro resistente. Este material pode ser muito difícil de ler, com muito brilho, em situações de luz intensa. Além disso, com todo o toque, eles ficam com impressões digitais e manchas na tela que podem afetar a aparência de suas páginas.
- Teclado na tela.Enquanto alguns usuários têm um teclado sem fio, eles se conectam a seus tablets, a maioria dos usuários de tablet usa o teclado na tela para entrada de dados. A entrada do OSK pode resultar em alguns erros de digitação hilariantes, além de ser desconfortável de usar por longos períodos de tempo.
Devido a esses recursos do dispositivo, os Web designers devem enfatizar várias regras básicas de design para usuários com tela sensível ao toque:
- Não coloque itens clicáveis muito próximos.Não existe uma regra rígida que defina como o fechamento está muito próximo, mas listas de links, especialmente em um pequeno tamanho de fonte, podem ser difíceis de navegar clicando-se (tocando) com um dedo gordo. Pode ser chato ter que ampliar apenas para tentar clicar em um link. Este princípio é válido tanto para botões quanto para links.
- Hierarquias podem ser difíceis de manter abertas.Uma forma popular de menu dinâmico usa JavaScript para abrir um submenu quando o usuário clica e passa o mouse sobre o submenu. Esses estados podem ser muito difíceis ou impossíveis de usar em telas sensíveis ao toque, porque eles não permanecem abertos ou não são fechados.
- Mova links e áreas clicáveis longe da borda direita da janela.A maioria das pessoas é destra e tende a rolar naquele lado da tela. Como a rolagem é feita com um gesto, às vezes é possível iniciar o furto em um link por engano. Os usuários podem ficar irritados se quiserem rolar na página e acabarem acidentalmente tocando em um link. Ao mover seus links para longe do lado direito, você pode ajudá-los a evitar esse inconveniente.
- Não há mouse.E isso significa que não há mouse ponteiro . Você não deve depender do ponteiro do mouse para ajudar a indicar que algo está clicável.
- Os estados de foco não existem.Como corolário do acima exposto, já que não há mouse, não há nada com o qual se mexer. Um link é clicado ou não em um dispositivo touchscreen, portanto, os usuários não podem deduzir informações úteis de tais estados de foco, como alterações de cor, dicas de ferramentas ou alterações na barra de status.
- Planos de fundo pretos aumentam o brilho.Um site com um fundo preto pode ser muito difícil de ler em um dispositivo touchscreen por causa do brilho. O preto faz com que as impressões digitais nos dispositivos apareçam mais claramente, borrando a tela. E o preto pode transformar a tela em um espelho refletindo de volta os usuários enfrentam muitas vezes mais do que o texto na tela.
- Blocos longos de texto em formulários são difíceis de escrever.Embora seja possível escrever romances inteiros em um iPad ou em um tablet Android ou Windows, a maioria das pessoas não gosta de usar o teclado na tela para longos trechos de texto. Quanto mais o seu design puder tornar a entrada de dados tão curta e fácil quanto possível, melhor.
O aspecto mais importante do design com telas sensíveis ao toque é testar suas páginas em um dispositivo touchscreen. Enquanto muitos emuladores para iPad e Android estão disponíveis, e muitos tablets com Windows, eles ainda não fornecem a sensação de uma tela sensível ao toque. Não é possível dizer que os links estão muito próximos ou que os botões são muito pequenos ou que o brilho dificulta a leitura da página, a menos que você use um tablet e experimente-os antes você lança seu novo design de site.
