Gestos básicos em mobile e a importância — que ainda não damos — a eles

Com o mobile se tornando a plataforma mais escolhida pelos usuários, os gestos estão cada vez mais relevantes do que nunca. Estas pequenas ações que permitem a interação com um dispositivo móvel têm demandado pouca atenção dos usuários, pois eles se concentram mais nos resultados de seus toques do que no toque propriamente dito.

Você deve compreender dois aspectos distintos para entender o conceito de gestos: toques mecânicos e atividades de toque; ou seja, o toque e seus subsequentes resultados. Gestos também estão intimamente ligados à experiência do usuário, essencial em um dispositivo móvel. Erre na interface e na maneira como os usuários usam os gestos, e você irá arruinar toda sua experiência.

Aqui tem tudo que você precisa saber para ter uma compreensão básica das possibilidades com gestos no mobile.

Definindo gestos

Os gestos são a base de como você interage com seus dispositivos móveis. Olhe para eles como sendo duas partes: o toque mecânico e as atividades resultado do toque.

Os toques mecânicos são, literalmente, o que os dedos do usuário fazem na tela. Por exemplo, se você der um tap (um dos mais gestos básicos) em um item de menu, você realizou um toque mecânico.

Atividades de toque são os resultados dos toques mecânicos precedentes. Por exemplo, se você costuma tocar duas vezes em uma seção de conteúdo, a tela irá aumentar o zoom sobre o conteúdo tocado.

Atividades de toque podem resultar de combinações de diferentes toques mecânicos. Por exemplo, antes de você encontrar uma seção de conteúdo que lhe interessa o suficiente para querer fazer o zoom (segundo toque mecânico), você teria primeiro que rolar a tela para baixo utilizando um swipe (primeiro toque mecânico).

Tipos de toques mecânicos e de atividades de toque

Há um grande número de toques mecânicos, apesar do fato de que muitos usuários estão, provavelmente, só familiarizados (pelo menos conscientemente) com tapping e swiping.

Tapping

O mais popular e básico é o tapping, que é quando você toca na tela para executar uma ação como abrir o seu aplicativo de e-mail. Tapping é caracterizado por um simples toque de um dedo e, em seguida, você tira.

Double-tapping

Depois, tem o double-tapping, onde os usuários repetem imediatamente a ação de tapping duas vezes. Isso geralmente está ligado a ação de zoom em uma tela.

Swiping

Agora temos o swiping, já bem familiar. Swiping é quando você pressiona o dedo movendo um elemento na tela de um lado para outro, e então retira o dedo. O exemplo perfeito disso é a tela de desbloqueio do iPhone, que exige um swipe antes de você digitar seu código.

Dragging

Semelhante ao swiping temos o dragging, que envolve a mesma mecânica do toque anterior, mas a uma velocidade diferente. Se você quer arrastar ícones de aplicativos para diferentes partes da sua tela inicial, você está usando dragging ao invés de swiping.

Flinging

Semelhante ao swiping e ao dragging temos o flinging. Mais uma vez, a mecânica de toque é a mesma que em um swipe, mas também há a diferença de velocidade. Da tradução literal “arremesso”, com o flinging você move o dedo de forma muito rápida. Como exemplo, podemos citar o Whatsapp, no momento em que você quer fechar a foto de perfil de um contato, você arrasta rapidamente a foto para cima ou para baixo, “arremessando” ela de volta à miniatura.

Long Pressing

Long pressing é quando seu dedo toca algum elemento da tela, pressiona por um momento, e então você retira. Quando você pressiona uma foto no Facebook, por exemplo, aparecem várias opções para a foto, como Salvar, Enviar no Messenger, Eu não gosto dessa foto, etc.

Long Pressing & Dragging

É quando você pressiona a tela com o dedo, mantém por um momento e então arrasta. Provavelmente você já ordenou o arranjo de ícones de aplicativos na tela do celular, então você já fez esta combinação de gestos muitas vezes!

Double-tapping & Dragging

É quando você toca duas vezes na tela, e então, no segundo toque, move o dedo. Este toque mecânico pode ocorrer quando você aumenta o zoom no conteúdo em uma área da tela e, em seguida, reduz o zoom em outra área.

Pinch-Open

Outro toque mecânico que é bom para o zoom em sua tela do celular, pinch-open exige que você pressione a tela com dois dedos em simultâneo e os afaste, relativo ao zoom-in. O nome vem do ato de “pinçar”, referente à semelhança da posição de seus dedos com uma pinça.

Pinch-Closed

É o toque mecânico oposto ao anterior, onde você pressiona a tela com os dois dedos e os aproxima, tendo o zoom-out como atividade resultado do toque.

Tapping e Double-Tapping com dois dedos

Aqui você pressiona a tela uma ou duas vezes, com dois dedos simultaneamente. Isto geralmente é uma outra maneira de zoom-in ou out em um conteúdo.

Swiping, Dragging ou Flinging com dois ou mais dedos

Este movimento requere que você arraste elementos na tela com dois (ou mais) dedos juntos. É útil para a escolha de múltiplos elementos, ou para inclinar um elemento. Um exemplo disto é o Gerenciador de Tarefas do iPhone, que permite que você feche até três aplicativos por vez, caso utilize três dedos.

Long Pressing e Dragging com dois dedos

Este gesto consiste em pressionar, segurar e mover um elemento com dois dedos. Este toque mecânico é útil quando você está rearranjando itens em uma lista ou reordenando cards em uma coleção.

Rotation

Eventualmente você vai encontrar conteúdo em movimento ou animações em que a rotação é útil. Acontece quando você pressiona a tela com dois dedos ao redor de um objeto central, e então rotaciona seus dedos em volta dele. É muito útil em aplicativos de geolocalização, e um bom exemplo é o Google Maps, em que você constantemente rotaciona o mapa para ter um senso melhor de orientação.

A importância dos gestos

Todo o conceito de user interface em dispositivos móveis é construído baseado em gestos. É por isso que eles são centrais para a experiência do usuário. Com tão pouco espaço na tela para trabalhar, designers e desenvolvedores devem continuamente assegurar que os usuários utilizem estas ações mínimas da maneira mais eficiente e inteligente possível.

Se nós, designers e devs, conseguirmos com que usuários possam facilmente fazer o que querem em seus dispositivos e aplicativos através de gestos, em tempo mínimo e de forma simples, chegaremos no que se resume (de forma simples) em uma experiência ideal.

Se um gesto falhar em ser intuitivo, ele deixa de ser conveniente. Como resultado, o design de interface perde pontos, e os gestos que você projetou não serão utilizados. O usuário deve, naturalmente, ser compelido a executar uma determinada interação, a fim de atingir um certo objetivo em seu aparelho. Lembrando-se destes gestos básicos, designers poderão criar interfaces e experiências mobile mais completas, prazerosas e intuitivas.

Atualmente podemos dizer que, apesar de termos um grande número de gestos a disposição, esta diversidade não vem sendo aproveitada de forma criativa. Convencionou-se a usar vários gestos diferentes para as mesmas funções (só aqui citamos quatro utilizados para zoom), quando poderíamos atribuir funções próprias para cada um deles. Além disso, podemos aproveitar os acelerômetros, que já estão dentro do seu smartphone ou tablet, para criar gestos mais divertidos como girar ou agitar o aparelho, agregando valor à user experience.

Ensinar novos gestos aos usuários pode levar tempo, mas pense nas possibilidades para aplicativos que irão além do tap, swipe e double-tap. E se começarmos a falar de jogos? Há ainda um mundo inexplorado de ações possíveis no seu dispositivo, que já está pronto para ser usado, é só querer!

Traduzido e adaptado por Diego Motta e Rodrigo Roncaglio. Texto de Marc Schenker.

Um adendo: com certeza você já ouviu a máxima “no mobile não tem hover state”. Bem , ainda não. Mas olha essa tecnologia em que a Microsoft vem trabalhando, chamada Pre-Touch Sensing. Imagine as possibilidades que isso pode trazer!