A forma como projetamos clientes de aplicativos mudou radicalmente nos últimos dois anos com a proliferação de smartphones e tablets com telas sensíveis ao toque. Touch é a mais nova metodologia comum de entrada de usuário. Infelizmente, parece ser amplamente ignorado pela maioria dos desenvolvedores. Com isso, quero chamar a atenção para a maneira como projetamos aplicativos móveis nativos e da web modernos, que tendem a reter aspectos comuns a sites legados.
Em particular, o uso de tags âncora e outros pequenos pontos de ação que não são difíceis de alcançar com o mouse. Agora que tenho tablets e smartphones na minha vida, passo mais tempo consumindo conteúdo (ou seja, lendo) no meu iPad do que no meu laptop. Em vez de mover o cursor do mouse pela tela, estou tocando diretamente o destino de navegação ou o conteúdo com o qual desejo interagir. À medida que smartphones e tablets ganham uma participação cada vez maior no mercado, isso está se tornando mais comum em todos os aspectos do uso do computador. Mas parece que os desenvolvedores ainda estão presos a técnicas legadas que tornam as interações por toque frustrantes em muitos casos.
Um dos cenários mais comuns que encontrei é a exibição de um site de desktop tradicional, compatível com o mouse. Por que isso é uma coisa ruim? A navegação tradicional usa hiperlinks, que normalmente são limitados apenas ao texto. Outra coisa que geralmente não se traduz tão bem para um dispositivo de toque são os menus suspensos.
Eu estava perto de um Fry na semana passada (obrigado Desert Code Camp!) E queria ver se eles tinham uma bateria nova para meu laptop. Abrir o site frys.com em um telefone carrega o site para desktop, o que é ruim por si só. Mas o site para desktop, mesmo que fosse um tablet, é difícil de navegar porque os destinos de navegação são muito pequenos e muito próximos.
Página inicial da Frys.com no iPhone’Pense como é difícil tocar Navegar
Por que os hiperlinks são uma coisa ruim, de que outra forma você vai atravessar um site? Bem, por natureza, eles não são amigáveis ao toque. A menos que você faça esforços explícitos para controlar as dimensões, preenchimento e margens de um hiperlink, o tamanho de um alvo de toque de hiperlink é limitado ao texto delimitado por .
Se você ler Apple Human Experience Guidelines você vê uma recomendação de pelo menos um Quadrado de 44 x 44 pixels para um alvo de toque.
Dê aos elementos tocáveis em seu aplicativo uma área alvo de cerca de 44 x 44 pontos.
-Apple Diretrizes de experiência do usuário
A recomendação do ponto de contato da Microsoft é para um quadrado de 9 mm . A razão pela qual eles recomendam 9 mm é após a realização de um grande conjunto de testes com usuários. Eles descobriram que os usuários cometem menos erros quando os alvos são maiores e o alvo de 9 mm oferece o melhor conjunto de equilíbrio entre o sucesso da taxa de acerto e a flexibilidade do layout.
Como observação, acho interessante que a Apple tenha optado por recomendar um tamanho em pixels , onde a Microsoft escolheu milímetros. Embora 44 pixels sejam muito mais fáceis de entender para o desenvolvedor da Web médio, milímetros é provavelmente mais útil. Os tamanhos da tela e as densidades de pixel variam entre os dispositivos (e monitores, nesse caso). Portanto, fixar um alvo de toque com pixels pode não significar necessariamente que é um bom alvo de toque quando as densidades de pixel aumentam. Monitores de desktop, telefones e tablets estão aumentando as densidades de pixel para nos dar uma experiência visual cada vez mais rica. Portanto, escolher pixels como sua unidade de medida pode não se sustentar a longo prazo.
Nos últimos meses, tenho usado uma demonstração simples para ilustrar os problemas com alvos de toque tradicionais em comparação com alvos de toque modernos primeiros alvos. Construí este exemplo depois de passar o verão cometendo uma alta porcentagem de erros ao navegar em sites da web em meus tablets Nook Color, iPad e Motorol Xoom. O Nook ofereceu as piores experiências, já que a maioria dos sites não o detecta como um tablet ou dispositivo de toque, e tem o menor espaço na tela. Como foi o primeiro dispositivo de toque, os níveis de frustração com a navegação tradicional eram altos.
Neste exemplo, há dois menus que representam a aparência de um site típico. No topo, você vê uma navegação horizontal tradicional usando hiperlinks, envolvendo texto. Quando o usuário clica no hiperlink com o mouse, ele é levado para a página de destino. Observe como os alvos de clique são relativamente pequenos com espaçamento mínimo entre eles. Embora isso funcione com um mouse, dedos humanos vão gerar muitos alvos perdidos.
Abaixo do menu amigável do mouse, há uma versão mais amigável ao toque. Em vez de usar hiperlinks como o item de ação, todo o elemento
Compare a experiência móvel da Best Buy com a experiência de Fry. Embora não haja tantas opções de navegação, ele é eficaz, especialmente para um usuário de telefone. Tudo na página é’tocável’.
O problema de não seguir uma abordagem de design que prioriza o toque não se limita a sites e aplicativos da web, mas também parece proliferar por meio de aplicativos móveis nativos. Eu faço download e tento muitos aplicativos nativos e vejo pequenos alvos de toque o tempo todo. Isso inclui controles como botões de rádio e caixas de seleção. As tradicionais interfaces indiretas amigáveis ao mouse que usamos nas últimas 2 décadas estão se degradando rapidamente à medida que entramos no mundo dos dispositivos de primeiro cliente de toque direto. Como desenvolvedores e designers de front-end, devemos ter isso em mente. Não fazer isso provavelmente significa o fracasso de sua empresa.
