Zona polegar: Desenhando para usuários de smartphones

Published in

UX Everywhere

9 min readSep 19, 2016

Se tem uma coisa que ainda vai existir por muito tempo é o movimento do nosso dedo polegar em dispositivos móveis. Isso faz com que consideremos a “zona polegar”, um termo cunhado na pesquisa de Steven Hoober, um fator importante na concepção e desenvolvimento de interfaces móveis.

Alguma vez você já interagiu com um site responsivo ou aplicativo que simplesmente não funciona bem com o movimento dos seus polegares? Talvez, você teve que esticar seu dedão ao máximo para chegar a um menu principal ou já se viu em uma batalha com vários elementos swipes (de deslizar) pela tela. Contratempos como estes revelam pobres considerações da zona polegar. Este artigo fala um pouco sobre o conhecimento adquirido pela Samantha Ingram (Front-End Development Lead na Planetary.io), através do relatório da pesquisa do Steven, sobre a zona polegar e como aplicar suas regras para navegação, cards e gestos swipes.

Polegares Vs. Touchscreens

Polegares ou dedões, como são chamados popularmente, são muito importantes para nós, não são? Além de nos fazer bem mais legais do que uma água-viva (hahaha), polegares são também fundamentais para a forma como interagimos com nossos dispositivos móveis. A pesquisa de Hoober mostra que 49% das pessoas usam seus smartphones com uma mão, contando com os polegares para fazer o trabalho pesado. Clark levou ainda mais longe e determinou que 75% das interações são feitas pelo polegar.

Com esse entendimento nas mãos, podemos concluir que determinadas zonas para o movimento do polegar se aplicam à maioria dos smartphones. Vamos defini-los como: fácil de alcançar, difícil de alcançar e zona neutra.

A imagem acima exibe o mapa da “zona polegar” para usuários destros e canhotos. A zona neutra (natural) mostra as melhores áreas possíveis para a maioria dos usuários.

Créditos da imagem: Designing for touch, do Josh Clark.

O truque é projetar pensando no fluxo da zona polegar, pensando em fornecer uma estrutura amigável, melhores elementos de design, criação de experiências fluídas e tendo menos dores de cabeça no decorrer da navegação do usuário. Através de testes com usuários e experimentação, foi descoberto algumas maneiras de usar esse conhecimento no desenvolvimento dos projetos de interface.

Problemas com a navegação

Todos nós lembramos daquela época em que a navegação no celular era simplesmente uma lista de links. Não era bonito mas mostrava o que era preciso. Hoje, vemos inúmeros exemplos de padrões de navegação. Qual é o melhor caminho para a “zona polegar”?

O uso natural do usuário é a primeira coisa que aprendemos a ter em mente. Faça perguntas: “Será que meu aplicativo tem uma longa lista de links?”, “Eu preciso ter mais de um menu?”, “Que forma de navegar é melhor para o meu site/app?” As respostas a estas perguntas irão ajudá-lo a determinar onde colocar as principais áreas de navegação e links de apoio.

Se seu aplicativo tem uma longa lista de links, então você provavelmente vai querer usar um menu de sobreposição de tela cheia. Este tipo de menu oferece espaço para você organizar a lista, ícones de redes sociais e outros conteúdos úteis. O modelo de cards tanto em desktop quanto em dispositivos móveis, oferece oportunidade para alinhar os elementos clicáveis dentro da zona polegar.

A HUGE sempre fez grande uso de menus de sobreposição de tela cheia em dispositivos móveis:

Por outro lado, se o seu produto não tem uma longa lista de links, um menu fixo pode ser melhor. Este tipo de menu fica na parte superior ou inferior da tela e fornece espaço para até 5 elementos para diferentes áreas do site, dependendo do volume de conteúdo do produto.

O App da Airbnb tem um menu fixo, localizado na parte inferior da tela, proporcionando fácil acesso a importantes áreas como reserva, mensagens e wishlist.

Se você tem um site com muito conteúdo, a inclusão de mais de um menu pode funcionar. Como mais de um menu pode ficar complexo, é recomendado priorizar os links do menu com base em sua importância no produto. Menus fixos são usados para links e áreas mais visitadas, enquanto menus de tela cheia ou dentro do menu hambúrguer podem ser importantes, também, mas não com alta prioridade.

Vejamos o App do Facebook:

O Facebook mistura menus com base no tamanho das informações do site. Na imagem acima vemos dois menus fixos, cada um contendo áreas/links valiosos para o usuário. O menu fixo superior está quase na zona de esforço máximo do polegar, mas apenas suficientemente baixo, quase chegando na zona neutra. Os itens do menu fixo inferior são organizados para fornecer um toque confortável para as áreas mais populares do produto.

Lembre-se que, além de manter importantes itens de navegação dentro da zona de polegar, colocar links ou menu fora da zona confortável para o polegar é aceitável, às vezes. A regra geral é a de manter links/áreas usados com mais frequencia na zona de fácil alcance e manter outros links e áreas pouco usados na zona de difícil alcance.

Agora, vamos rever como um modelo de card (ou painel/modal, como queira) bem projetado pode trabalhar para o seu produto. O modelo de card tem sido amplamente utilizado há algum tempo. Os cards são rápidos, fáceis e previsíveis; eles fornecem informações curtas e em pequenas doses, tornando mais fácil entregar o conteúdo/informação certa e no momento certo.

Muitas vezes, os cards apresentam ações: enviar, salvar, share, fechar, saiba mais, etc.

Neste exemplo acima, vemos o App Poncho — Wake up weather. Este é um grande exemplo de como colocar links de ação dentro de um card: O boletim meteorológico não requer uma ação do polegar, o item de ação é colocado diretamente na zona neutra.

Por outro lado, Poncho coloca a sua “busca local” e “usar atual localização” muito dentro da zona de difícil alcance do polegar. Isto é aceitável: O usuário poderia usar esses recursos com pouca frequência, porque o aplicativo lembra a sua localização a partir da última vez que foi aberto.

Por outro lado, há momentos em que os modelos de cards não utilizam a zona polegar e sim a zona neutra toda. Um bom exemplo disso é App Etsy. Durante check-out, Etsy fornece um formulário em um card de pop-up para que o usuário digite suas informações de envio:

À primeira vista, este uso de card parece apropriado. Indo mais afundo, vemos falhas. O primeiro problema é o link “Cancelar” no canto superior esquerdo. Será que esse link fecha o card ou cancela o processo todo de check-out? Se eu fiquei confusa, outros certamente, também. Além disso, o “X “ está na borda da zona polegar, forçando o usuário esticar o dedo para a alcançar.

Aqui está um dilema: Adicionando um botão próximo a um canto superior de um cartão é um padrão comum, mas isso vai contra o estudo da zona polegar. Se você está saindo da zona de polegar para atender às expectativas de um usuário, procure uma solução alternativa. Poderíamos adicionar um botão para fechar na parte inferior do card. Como a criação de cards tomou conta do processo de criação de fluxos, é uma boa ideia elaborar projetos através do mapa da zona do polegar para assegurar que a maioria dos elementos são facilmente acessíveis. Evite seguir tendências; em vez disso, tome decisões orientadas pelas limitações humanas em todo o projeto e desenvolvimento do seu aplicativo ou site responsivo.

Gestos e movimentos

Toque rápido e leve, toque duplo, pressionar por 3 segundos, deslizar, arrastar, pinar. Estes são a cereja no bolo no uso fluído dos smartphones. Gestos e movimentos nos permitem interagir com a tecnologia através do tato.

Você pode ser capaz de adivinhar onde quero chegar… Mantenha os principais gestos do usuário dentro da zona do polegar e da zona neutra. Mais importante ainda, permita que o usuário realize esses gestos naturalmente. Isso parece óbvio, mas para termos uma experiência realmente confortável, é importante calcular onde o gesto ou o movimento deverá ocorrer.

Agora, vamos nos concentrar na interação do ‘swipe’, o deslizar. Através de scripts de rastreamento do swipe, encontrei alguns dados desse movimento que são muito interessantes.

No mapa acima, círculos representam os toques e as setas representam o movimento swipe. Os dados que foram recolhidos a partir de testes mostram que os usuários normalmente tocam em algum lugar da borda do dispositivo para o meio dele, na diagonal para baixo. Foi constatado, também, que os usuários geralmente deslizam na área neutra da zona polegar.

Originalmente, tinha-se a idéia errada de que os usuários deslizavam horizontalmente ao longo da tela (principalmente pelo movimento dos usuários dos produtos Apple que bloqueiam a tela na horizontal), criando alguns problemas ao medir as áreas do polegar para gestos swipes. Há projetos que não fornecem espaço suficiente para tocar ou deslizar sem disparar uma outra área de toque, simultaneamente. Tal como acontece com a maioria dos elementos de uma tela de celular, avalie sempre a zona do polegar necessária para o swipe. Considere-se um tamanho apropriado de área de toque pelo menos 45 pixels de altura e largura.

Com todas essas informações, podemos concluir que é melhor colocar swipes em áreas de fácil alcance, além de permitir espaço suficiente para evitar toques acidentais.

Um bom exemplo de movimentos swipe é o App do Google, Inbox by Gmail:

As decisões inteligentes aqui são:

Manter gestos de deslize (swipe) fora de áreas de difícil alcance;
Proporcionar espaço suficiente de toque e deslize do elemento;
Permitir o swipe começar em qualquer lugar em cada bloco de elemento do e-mail;

Com tudo isso, os movimentos tornam-se cada vez mais naturais e confortáveis, tornando o gerenciamento de e-mail mais rápido e menos complicado.

Resumindo…

O que aprendemos com essa pesquisa do Steven Hoober?

Dispositivos móveis e suas formas de interagir mudam de tempos em tempos, mas enquanto tivermos telas sensíveis ao toque, a zona polegar continuará a ser uma parte crítica de Design;
Um projeto de interface é fluído e amigável quando áreas e links importantes estão na zona de fácil alcance e links sem a mesma importância estão em zonas de mais difícil acesso;
Os cards são poderosos quando o conteúdo e as ações dele estão na zona polegar;
Determinar as áreas de swipe torna-se mais simples quando é considerado como uma pessoa desliza seu dedo contra uma tela pequena. Faça testes com diferentes pessoas (com diferentes tamanhos de dedos) para conseguir a área de toque ideal para o seu App ou responsivo!