Como projetar para um ótimo UX móvel

Como projetar para um ótimo UX móvel precisa estar na vanguarda de tudo o que sua empresa faz na web. A menos que você projete com o mobile em mente em primeiro lugar, seu negócio não será tão bem sucedido quanto poderia e deveria ser. A razão é simples: o celular há muito ultrapassou o desktop como o método número um para as pessoas acessarem a Internet. Em outras palavras, deixar de projetar para dispositivos móveis... não conseguir o maior número possível de visitantes, leads e clientes do site.

Vejamos as estatísticas.

De acordo com o Smart Insights, passamos do ponto em que o número de usuários móveis ultrapassou o número de usuários de desktop. Esse ponto de inflexão aconteceu em 2014. Desde então, o número de usuários móveis globais só continuou a subir agressivamente, enquanto o número de usuários de desktop aumentou menos rapidamente.

Conclusão: mais leads, visitantes e clientes chegarão ao seu site em seus telefones celulares, não em seus desktops.

Se você deseja maximizar suas conversões, seu site deve ser otimizado primeiro para celular. Hoje, um ótimo UX móvel também é um marketing móvel de sucesso.

Vamos dar uma olhada.

Como projetar para um ótimo UX móvel: o que as estatísticas dizem

Sempre que você quiser estabelecer um caso de uso sólido para justificar os gastos em seu negócio, digamos, por exemplo, para o design mobile-first, basta olhar para as estatísticas sobre como e onde as pessoas estão comprando atualmente. Vá para onde a evidência o leva.

A empresa global de tecnologia Criteo, especializada em marketing de comércio, divulgou um comunicado de imprensa que revelou que as vendas móveis nos EUA agora representam 52% de todas as transações de comércio eletrônico. Claramente, se você deseja vender de forma eficaz e bem-sucedida, você precisa de uma presença móvel muito eficiente com um ótimo UX.

Aqui está outra estatística muito interessante que realmente revela mais do que parece, à primeira vista.

De acordo com o Mobile Retail Report da Adobe, as conversões são 2,8 vezes maiores no desktop do que no celular. Se você acha que isso significa que não é importante otimizar para celular, pense novamente. Na verdade, esse é mais um motivo para se comprometer com uma estratégia mobile-first, especialmente porque o celular ainda representa mais tráfego do que o desktop.

O motivo pelo qual as conversões são maiores no computador provavelmente se deve ao fato de que as experiências em dispositivos móveis não são tão otimizadas quanto deveriam ser, não porque as pessoas não prefiram comprar e converter em dispositivos móveis, onde é mais conveniente para elas em primeiro lugar !

Imagine um cenário em que seu site para dispositivos móveis está perfeitamente otimizado, recebendo mais tráfego do que seu site para computador e vendo mais conversões do que para computador, tudo porque você implementou um ótimo UX para dispositivos móveis.

Está ao seu alcance. Aqui está o que fazer.

Design para polegares... mas não principalmente para polegares

A usabilidade móvel deve ser baseada em todas as várias maneiras pelas quais as pessoas interagem com seus smartphones. Como projetar para um ótimo UX móvel é tanto senso comum quanto baseado em evidências.

É tentador supor que, se estou usando meu smartphone para navegar e fazer compras em um site móvel, é mais conveniente para mim fazê-lo apenas segurando o telefone em uma mão e usando o polegar na mesma mão para metas. É igualmente tentador supor que seria menos conveniente para mim usar as duas mãos (telefone em uma mão e usar o dedo indicador da outra mão para atingir meus objetivos de usuário).

No entanto, essa sabedoria convencional está realmente errada porque pressupõe que as pessoas usem apenas ou principalmente uma mão para operar seus telefones.

Pesquisas mostram que na verdade existem seis maneiras distintas pelas quais as pessoas seguram e interagem com seus telefones. Qualquer site móvel que não seja projetado para todas as seis maneiras falhará e terá taxas de conversão mais baixas porque o UX sofrerá.

As seis maneiras são:

• Embalado (uma mão segurando o telefone enquanto o polegar da outra mão bate)
• Segure e toque (uma mão segurando o telefone enquanto o dedo indicador da outra mão toca)
• Duas mãos para orientação de paisagem (pense em como você seguraria um dispositivo de jogo portátil como o Nintendo 2DS XL)
• Uma mão – primeira ordem (uma mão segurando o telefone enquanto o polegar na mesma mão bate)
• Uma mão – segunda ordem (uma mão segurando o telefone enquanto o polegar da mesma mão bate, mas de uma posição inicial mais alta)
• Duas mãos para orientação de retrato (pense em como você seguraria um dispositivo de jogo portátil, desta vez, como o antigo Nintendo Gameboy)

Agora, e é aí que as coisas ficam realmente relevantes, aqui estão os diferentes casos de uso para as várias maneiras de segurar um telefone:

• Tocando nos links – A maioria segura e toca ou cradle
• Caixas de seleção – A maioria suporta ou segure e toque
• Digitação – A maioria usa dois dedos ou polegares simultaneamente ou segure e toque
• Rolagem curta - A maioria segure e toque ou suporte
• Rolagem mais longa - A maioria suporta ou segure e toque

Conclusão: projete seu site para celular para acomodar a variedade dessas diferentes maneiras pelas quais as pessoas seguram seus telefones.

Botões maiores são melhores

Se você está pensando em como projetar para um ótimo UX móvel, um dos aspectos mais vitais para se concentrar é o tamanho do botão. Tal como acontece com todas as coisas móveis, o tamanho da sua tela é muito menor do que o tablet ou desktop, comprometendo assim a usabilidade do seu site móvel se os botões forem muito pequenos. Botões de tamanho inadequado levam a erros de UX como:

• Dificuldade para tocar corretamente nos botões
• Problemas ao ver os botões em primeiro lugar
• Ter dificuldade em entender que um botão pode ser tocado ou interagir de outra forma

Err do lado de maior é melhor.

Botões maiores garantem um UX mais suave para seus compradores, clientes, visitantes etc.

Isso levanta a questão, quão grande, exatamente?

De acordo com as diretrizes do Material Design Touch Target Size do próprio Google, os botões móveis devem atingir um tamanho de tela sensível ao toque entre 7 e 10 milímetros. Em outras palavras, os botões devem possuir um tamanho físico de aproximadamente 1 centímetro, independente da tela em que apareçam. Isso garante um ótimo equilíbrio entre:

• Densidade de informação
• “Segmentação” dos elementos da interface do usuário

Quando seus usuários podem ver botões com mais facilidade, entender sua relação espacial com outros elementos na tela e tocá-los para concluir com êxito as metas da página, você oferece a eles uma experiência de usuário incrível.

Priorize o conteúdo mais importante

A resposta para a pergunta: Como projetar para um ótimo UX móvel? às vezes está no que você subtrai em vez de adicionar. No caso de conteúdo na tela, essa regra se aplica 100%.

A benção dos smartphones é seu tamanho pequeno e portátil, apesar da recente tendência de aumentar o tamanho da tela móvel. Essa conveniência tem uma desvantagem, que é que os usuários estão sujeitos a um custo de interação maior. Esse é o esforço físico e mental que eles precisam fazer para atingir suas metas de sites para dispositivos móveis.

Por exemplo, se você navegar em um site de notícias em sua área de trabalho, provavelmente poderá ver na página inicial os placares esportivos e a previsão do tempo nas barras laterais acima da dobra, para que não precise se preocupar em rolar para baixo. No celular, no entanto, esse mesmo conteúdo provavelmente exigiria uma rolagem séria para alcançar, porque o espaço é um prêmio no celular.

Portanto, a única solução é priorizar o conteúdo mais vital acima da dobra no celular. Em outras palavras, pense muito sobre qual conteúdo mostrar a seus usuários e visitantes acima da dobra em suas páginas para dispositivos móveis. Afinal, para cada elemento de conteúdo que você inclui acima da dobra, outro elemento deve ser empurrado para baixo e até sacrificado abaixo da dobra.

Uma abordagem para ajudá-lo a maximizar o conteúdo móvel acima da dobra é minimizar o chamado chrome. Não estamos falando do navegador do Google neste caso. O Chrome é a coleção de elementos de design visual que ajudam os usuários a interagir ou fornecer informações extras sobre o conteúdo de uma interface, mas não fazem parte do conteúdo. O Chrome vem do sistema operacional do celular.

Um exemplo de cromo seria todas as fotos associadas às contas das pessoas quando você visualiza e-mails na caixa de entrada do seu aplicativo Gmail. Neste exemplo, essas imagens também ajudam a identificar seus remetentes, mas não são absolutamente essenciais para identificá-los (a linha De no próprio e-mail seria suficiente).

Ao reduzir esses elementos cromados, você economiza bastante espaço na tela do celular e, portanto, tem mais chances de colocar as informações mais vitais acima da pequena área de dobra.

Foco no usuário final

O segredo de como criar um ótimo UX móvel sempre se resume ao usuário final. Tenha isso em mente ao projetar seus sites para celular e você criará um site fácil de usar. É tão simples.

Para chegar lá, certifique-se de estar projetando com base em dados reais e não em suposições. Um ótimo lugar para começar é como seus usuários seguram seus telefones em primeiro lugar. Se você está projetando de uma maneira que muitas pessoas nem estão segurando seus telefones, então todas as apostas estão canceladas.

É importante lembrar também que, devido às pequenas telas dos dispositivos móveis, o conteúdo deve ser visto de maneira fácil e rápida, portanto, aumente os elementos e certifique-se de que o conteúdo mais importante esteja acima da dobra.