Entendendo os gestos para o design da interface do usuário

Tocar, deslizar, arrastar, pressionar por muito tempo – esses são apenas alguns dos gestos que passaram a dominar nossas experiências digitais. Os iPhones com tela sensível ao toque incorporaram os gestos móveis anos atrás, e não olhamos para trás desde então.

Os gestos afetam a forma como interagimos com as interfaces, incluindo telefones, laptops e iPads. Mas não precisamos ir muito longe para encontrar uma interface gestual além de nossos dispositivos de trabalho e entretenimento. Não é mais incomum usar gestos ao interagir com telas de carros ou pias de banheiro.

Interfaces de usuário naturais (NUIs) são tão naturais para os usuários que a interface parece, e às vezes é, invisível, como uma interface de tela sensível ao toque. Alguns NUIs usam até controle por gestos, permitindo que os usuários interajam com a interface sem contato físico direto. A BMW lançou recentemente um recurso de controle por gestos que oferece aos usuários controle sem toque sobre o volume do carro, chamadas e muito mais.

Os gestos estão se tornando mais comuns no design da interface do usuário e desempenham papéis cada vez mais complexos em nossas vidas cotidianas.

À medida que a tecnologia avança, designers e empresas de UX e UI precisarão se adaptar. Você não precisa conhecer todos os meandros tecnológicos ou ter um conhecimento profundo de inteligência computacional. Ainda assim, você deve ter uma compreensão básica dos recursos, funções e práticas recomendadas de design para a tecnologia de gestos.

O que faz um bom gesto

Então, o que são gestos?

Os gestos são uma forma de comunicação. Há muito usamos gestos de mão e acenos de cabeça para ajudar a transmitir significado e, agora, os gestos desempenham um papel na comunicação com as interfaces do usuário.

Os bons gestos proporcionam uma comunicação eficaz e eficiente que se alinha com a nossa forma de pensar. Nossos pensamentos e conhecimento influenciam a forma como falamos e influenciam nosso uso de gestos, especialmente no design de interface do usuário. Considere o quanto é mais fácil para as gerações mais jovens que crescem em torno da tecnologia moderna entender os gestos – ou como o ato de deslizar imita o ato de empurrar ou limpar algo. É por isso que entender seus usuários é essencial, mesmo no design de gestos.

Os gestos cruzam a barreira entre os domínios físico e digital, permitindo-nos interagir com a mídia digital com nossos corpos. De certa forma, torna o uso de aplicativos digitais mais divertido, mas isso não é suficiente para tornar um gesto bom.

Um bom gesto de movimento melhora a usabilidade tornando os aplicativos mais fáceis de usar em todos os contextos. Gestos bem projetados têm uma curva de aprendizado mais curta porque parecem naturais e fáceis de entender. Para citar Bill Gates:

“Até agora, sempre tivemos que nos adaptar aos limites da tecnologia e adequar a maneira como trabalhamos com computadores a um conjunto de convenções e procedimentos arbitrários. Com o NUI, os dispositivos de computação se adaptarão às nossas necessidades e preferências pela primeira vez e os humanos começarão a usar a tecnologia da maneira que for mais confortável e natural para nós.”

Benefícios da tecnologia de gestos

O amplo uso de interfaces gestuais se deve aos muitos benefícios que as acompanham. Três dos benefícios mais significativos dos gestos são interfaces mais limpas, facilidade de uso e conclusão de tarefas aprimorada.

1. Interfaces mais limpas

Os humanos consomem mais conteúdo do que nunca, as empresas usam mais dados e a tecnologia continua a fornecer mais serviços. Com esse aumento no conteúdo, é fácil para interfaces e exibições parecerem confusas. Os designers podem usar gestos para reduzir o número de elementos visuais, como botões, que ocupam espaço.

2. Facilidade de uso

Conforme discutido acima, as interações se tornam mais naturais com uma interface baseada em gestos. A facilidade de gestos simples com as mãos nos permite usar a tecnologia com o mínimo de esforço na velocidade máxima.

3. Conclusão de Tarefa Aprimorada

As taxas de conclusão de tarefas e as taxas de conversão aumentam quando há menos necessidade de um usuário para concluir uma tarefa. É mais provável que você termine uma tarefa quando ela exige menos esforço. Uma interface de usuário baseada em gestos capitaliza isso, tornando as tarefas simples e rápidas. Eles podem até reduzir o número de etapas necessárias para concluir uma tarefa.

Tipos de gestos no design de interface do usuário

O design para toque levou ao desenvolvimento de muitos tipos de gestos, sendo os mais comuns tocar e deslizar. Existem três categorias de gestos:

1. Gestos de navegação (para navegar)
2. Gestos de ação (para agir)
3. Gestos de transformação (para manipular conteúdo)

A seguir estão alguns dos gestos mais comuns em interfaces com os quais todos (ou quase todos) os usuários estão familiarizados – mesmo que não conscientemente. Mencionamos telas, mas você pode substituir a tela por um touchpad ou qualquer outra interface de gestos.

Toque

Um gesto de toque é quando você toca na tela com um dedo para abrir ou selecionar algo, como um aplicativo ou página. Aqui vai uma dica: Projete elementos de interface clicáveis ​​para que toda a caixa ou linha seja clicável – não apenas o texto. Dar aos usuários mais espaço aumenta a usabilidade.

Toque duplo

O toque duplo é quando você toca na tela duas vezes seguidas em sucessão. Muitos aplicativos usam esse gesto para aumentar o zoom, mas no Instagram, os usuários podem tocar duas vezes em uma foto para curtir.

Deslizar

Deslizar envolve mover o dedo pela tela em uma direção, tocando em um lado e levantando o dedo do outro. Os gestos de deslizar são frequentemente usados ​​para rolar ou alternar entre as páginas. O Tinder usa deslizar para a direita para corresponder a um perfil e deslizar para a esquerda para passar por cima de um.

Deslizar com vários dedos

Você também pode realizar um gesto de furto com dois ou três dedos. Esse é um recurso comum em touchpads de laptops que usam movimentos de dois e três dedos para diferentes ações.

Arrastar

Arrastar usa o mesmo movimento geral de um furto, só que você move o dedo mais devagar e não o levanta até que tenha puxado o objeto para onde deseja que ele esteja. Você pode arrastar para mover um item para um novo local, como ao reorganizar seus aplicativos de telefone.

arremesso

Como deslizar, um gesto de arremesso é quando você move o dedo pela tela em alta velocidade. Ao contrário de um arrasto, seu dedo não permanece em contato com um elemento. Flings são frequentemente usados ​​para remover algo da vista.

Pressão longa

Uma pressão longa é quando você toca na tela, mas mantém o dedo pressionado por mais tempo do que o normal. Pressões longas abrem opções de menu, como quando você segura o texto para copiá-lo ou pressiona um aplicativo para excluí-lo.

Pitada

Um dos muitos gestos de dois dedos, um beliscão é quando você mantém dois dedos separados na tela e depois os arrasta um para o outro em um movimento de pinça. Gestos de pinça são frequentemente usados ​​para diminuir o zoom após aumentar o zoom. Às vezes, eles apresentam uma visualização de todas as telas abertas para fins de navegação.

Abrir ou espalhar

Um gesto de pinçar ou espalhar é o oposto de uma pinça. Você segura os dois dedos juntos e depois os separa. A propagação, como o toque duplo, geralmente é usada para aumentar o zoom.

Rotação

Para fazer uma rotação, pressione na tela com dois dedos e gire-os em um movimento circular. O melhor exemplo de rotação é quando você vira o mapa no Google Maps para ver o que está ao seu redor.

Criando Gestos 101

Use o que as pessoas sabem

Os gestos existem há algum tempo, portanto, para a maioria dos gestos, existem diretrizes gerais.

E, na maioria dos casos, existem regras que você deve seguir ao projetar gestos para uma interface. Ao criar um aplicativo, por exemplo, você precisará considerar em quais interfaces os usuários usarão seu aplicativo. Existe a chance de que os usuários baixem seu aplicativo em telefones Android e Apple, que já usam gestos específicos do produto. Você precisará avaliar os gestos das interfaces do seu produto e decidir como aproveitá-los ou se vale a pena adicionar gestos com os quais os usuários não estão familiarizados.

Aqui estão algumas diretrizes úteis de gestos e movimentos para interfaces de produtos populares.

• Diretrizes de gestos do Google
• Diretrizes de gestos da Microsoft
• Diretrizes de gestos da Apple
• Diretrizes de gestos do Android

Ao projetar interfaces de usuário baseadas em gestos, é uma boa prática manter o que os usuários sabem. Você pode ser criativo se for necessário, mas um nível de consistência entre gestos e interfaces ajuda a mantê-los intuitivos para os usuários, aumentando a usabilidade do seu produto.

Se você acha que um novo gesto está reservado, você precisa testá-lo extensivamente antes de implementá-lo. Você conduzirá uma série de métodos de pesquisa de usuários para testar a usabilidade, eficácia, curvas de aprendizado e satisfação do usuário com um gesto antes de liberá-lo ao público.

Você tem a opção de reutilizar um gesto conhecido para uma finalidade diferente, mas, novamente, deve testar a eficácia dessa estratégia com antecedência. O benefício aqui é que os usuários estão pelo menos familiarizados com o movimento.

Veja, por exemplo, o uso do toque duplo no Instagram para curtir ou “corar” uma postagem. Um toque duplo geralmente é usado para aumentar o zoom, mas funciona bem para o propósito do Instagram. É também um ótimo estudo de eficiência: tocar no coração abaixo de um poste requer menos um toque, mas mais mira. O método alternativo de toque duplo permite que os usuários rolem mais rapidamente, pois têm a imagem inteira para mirar, e é intuitivo tocar no objeto que você gosta.

Os designers começaram a desenvolver uma linguagem de design com mãos, círculos e setas para comunicar a intenção do gesto aos desenvolvedores de produtos e estrategistas. Esta linguagem é quase universal com desvio mínimo.

Pense fora da tela

Os gestos existem em cenários cotidianos fora do uso de telefones e laptops. Um número crescente de banheiros públicos instalou pias sensíveis ao movimento, secadores de ar e dispensadores de papel toalha. Esses dispositivos também evitam a propagação de germes – uma característica bacana durante a temporada de gripe. Enquanto isso, os carros autônomos estão sendo reforçados com tecnologia de reconhecimento de gestos para melhorar sua eficácia e segurança.

Mas você ainda pode ser criativo com gestos de telefone enquanto pensa fora da tela. Os dispositivos usam rotação e agitação como métodos de interação há anos. Por exemplo, o 'Shake to Undo' da Apple oferece aos usuários a opção de desfazer uma ação agitando o telefone. E até agora, você provavelmente está familiarizado com a rotação de telas horizontalmente para assistir a um vídeo em tela cheia.

Desde que sejam testadas primeiro, as tecnologias de gestos criativos podem levar os produtos adiante e aumentar a usabilidade.

Gestos e acessibilidade

Os gestos, como todas as coisas, devem ser acessíveis. Acessibilidade refere-se a tornar um produto acessível e utilizável para todas as pessoas em todos os contextos, incluindo pessoas com deficiência. Os gestos devem aderir às práticas recomendadas de design acessível para contribuir com um ambiente igualitário, cumprir a Lei dos Americanos com Deficiência (ADA) e permitir que todos que possam se beneficiar do seu produto o usem.

Além de garantir que os gestos da interface sejam acessíveis, vale a pena considerar como você pode usar gestos para melhorar a acessibilidade. A Apple percebeu que as telas planas e sem textura do iPhone representavam um obstáculo para usuários cegos. Então, eles usaram sua interface baseada em gestos para criar gestos adicionais baseados em acessibilidade que ajudam os deficientes visuais a usar seus produtos.

Não se esqueça do UX

É comum usar os termos UX e UI de forma intercambiável, mas essa é uma prática imprecisa. UX significa experiência do usuário e lida com as percepções e emoções do usuário enquanto se envolve com um produto. UI significa interface do usuário e envolve os elementos de um produto com o qual um usuário interage. A interface do usuário é um elemento importante do design UX. Se você estiver interessado em aprender mais sobre cada um e suas diferenças, confira nosso guia sobre UX vs UI Design.

O ponto aqui é que UX e UI são diferentes, mas é fundamental considerar a experiência do usuário ao projetar interfaces. Gestos de interface do usuário que são divertidos, mas inúteis ou interessantes, mas com usabilidade ruim, são resultado de designers e desenvolvedores que esqueceram o UX.

Não importa quantos testes você tenha feito, dê aos usuários a opção de remover certos recursos de gestos. Tocar é um gesto vital da tela de toque com o qual todos estão familiarizados, mas alguns gestos não são cruciais para o funcionamento de um produto e existem apenas para torná-lo mais utilizável. Às vezes, gestos como esses incomodam os usuários que não estão familiarizados com eles ou acionam o gesto sem querer.

Por exemplo, em um Mac, deslizar dois dedos para a esquerda ou direita no touchpad envia um navegador da Web para trás ou para frente de uma página. Muitos usuários fazem esse gesto por acidente e ficam frustrados quando a página fica mudando. Assim, a Apple oferece aos usuários a opção de desativar esse recurso e muitos outros.

Refinar a integração do usuário

A integração do usuário melhora o uso bem-sucedido de um produto, ensinando os usuários a usá-lo. Pense em um novo programa que, ao abrir pela primeira vez, guie você por todas as funções ou etapas para usá-lo.

A integração do usuário é importante para gestos de toque porque eles geralmente ficam ocultos e fáceis de perder, especialmente se um usuário não estiver familiarizado com um gesto ou não tiver experiência com ele nesse contexto. Se eles não sabem que podem usá-lo ou como usá-lo, eles não o farão.

Ao integrar um usuário, você quer ser breve, ensinar uma coisa de cada vez e seguir a curva de aprendizado que comprovadamente funciona melhor em testes. Tutoriais longos e listas passo a passo são chatos, menos interativos e muitas vezes são ignorados.

Abrace o futuro das interfaces de gestos

Os gestos já estão aqui. Eles existem no presente, tornando-se úteis em nossa vida cotidiana. Para os usuários, esses gestos podem viver em seu subconsciente enquanto eles deslizam e tocam duas vezes sem pensar. Designers de produtos, desenvolvedores e estrategistas precisam entender os gestos em um nível mais íntimo.

O design para toque é uma parte crescente do campo. Gestos existem em banheiros e carros – quem sabe o que vem a seguir? Abrace-o. Um produto mais utilizável é um produto eficaz.

Tem dúvidas ou deseja atualizar o UX e UI de seus produtos? Estamos felizes em conversar. Basta chegar.