Princípios de design de UX móvel

Um bom design é um bom design, certo? É verdade, mas existem considerações especializadas que entram em jogo dependendo do meio para esse design. Os princípios de design para algo como um aplicativo feito para ser executado em um computador desktop geralmente são um pouco diferentes das convenções de design de UX móvel mais eficazes.

Mesmo dentro de uma categoria abrangente como “design de UX móvel”, existem diferenças entre projetar um aplicativo e projetar um site móvel. Quando os usuários baixam um aplicativo, eles não querem apenas a versão móvel do site. Eles querem uma experiência única que justifique o tempo gasto no download do aplicativo (assim como o espaço que ocupa no telefone). Os usuários não têm escrúpulos em excluir um aplicativo que não consideram útil - 75% dos downloads de aplicativos são abertos apenas uma vez.

O design móvel, em geral, não pode ser negligenciado. Em todo o mundo, mais pessoas acessam a Internet de seus dispositivos móveis e tablets do que de computadores desktop. Ignorar esses usuários não é mais algo que os designers de UX podem justificar. É importante que os designers móveis considerem as práticas recomendadas de UX móvel em todas as etapas do processo de design.

Coloque o usuário em primeiro lugar

Isso deve ser óbvio, mas em qualquer projeto de design, o usuário deve sempre vir em primeiro lugar, e as necessidades do usuário são ainda mais importantes (e mais específicas) em dispositivos móveis. Se os designers não atenderem às necessidades dos usuários móveis, esses usuários passarão rapidamente para outros sites, aplicativos ou distrações.

A seguir estão algumas coisas que os designers podem fazer para atender às necessidades específicas dos usuários móveis.

Torne a navegação intuitiva

A navegação em sites e aplicativos para dispositivos móveis precisa ser mais intuitiva do que em sites para computadores. Os usuários precisam ser capazes de identificar imediatamente como contornar um aplicativo móvel ou site. Isso pode ser alcançado por meio de padrões de design reconhecíveis (como menus de hambúrguer), bem como ícones reconhecíveis (um ícone “home” para a tela inicial, um balão de bate-papo para mensagens etc.).

Se os usuários tiverem que pensar em como navegar, é mais provável que se desliguem do site ou fechem o aplicativo e procurem uma solução mais simples.

Crie uma experiência perfeita em todos os dispositivos

Esteja um usuário acessando o conteúdo em um aplicativo, site para dispositivos móveis ou site para desktop, a transição entre usá-los precisa ser perfeita. Os elementos de design devem se espelhar (os designers não devem usar azul para o aplicativo e vermelho para o site, por exemplo).

Uma experiência perfeita não apenas facilita as coisas para as pessoas que usam um site ou aplicativo, mas também cria confiança com a marca.

Foco nos objetivos do usuário

As metas que uma pessoa tem em um aplicativo móvel ou site provavelmente são diferentes daquelas que ela tem em um site completo para computador. Por exemplo, em um aplicativo de restaurante, um visitante provavelmente desejará fazer apenas algumas coisas: visualizar o cardápio, fazer uma reserva ou obter rotas. Na maioria dos casos, eles não estão procurando o histórico completo da empresa em seus telefones celulares — esse tipo de conteúdo pode estar oculto em menus ou submenus.

Pense no que um usuário realmente quer fazer em um aplicativo móvel. Uma coisa importante que os designers geralmente ignoram é exigir um login para tarefas básicas. Aplicativos bancários, por exemplo, costumam pedir um login para fazer qualquer coisa no aplicativo. Mas tarefas como encontrar a localização do caixa eletrônico mais próximo realmente não precisam que o usuário faça login. Facilitar o acesso a esses recursos é uma ótima maneira de melhorar o UX.

Permitir personalização

Para aplicativos móveis, a personalização é fundamental para melhorar a experiência do usuário. A personalização também pode ajudar a atingir as metas de marketing. É um ganha-ganha para todas as partes interessadas envolvidas.

A personalização deve empurrar os usuários para o conteúdo que eles estão procurando e para longe do conteúdo que é irrelevante para eles. Ele também pode eliminar distrações no site, simplificar componentes como o processo de compra e garantir que as mensagens de marketing estejam sincronizadas com o que o visitante realmente deseja.

No entanto, muita personalização pode ser uma armadilha fácil de cair. O nível de personalização precisa corresponder ao nível de confiança que um usuário tem no aplicativo e na empresa. Com que frequência as pessoas se sentem desconcertadas ou estranhas quando um site exibe anúncios de algo em que estavam pensando (ou falando), mas que nem sequer pesquisaram? Claro, é apenas a natureza preditiva dos algoritmos avançados de publicidade, mas esse nível de personalização ainda pode deixar os visitantes apreensivos.

Sempre facilitar as coisas

Quando uma pessoa visita um site ou aplicativo em um dispositivo móvel, ela deseja concluir a tarefa o mais rápido possível. Cabe ao designer tornar a conclusão das tarefas necessárias o mais fácil possível. Eliminar tudo o que não é absolutamente vital para cada tarefa é um ótimo ponto de partida. Tornar as tarefas necessárias mais simples em uma interface móvel também é fundamental.

Por exemplo, muitos aplicativos e sites de comércio eletrônico agora oferecem uma opção de câmera para inserir informações de cartão de crédito. Em vez de digitar um número de cartão, os compradores podem apontar a câmera para o cartão de crédito e o aplicativo lerá automaticamente o número.

Outras coisas, como especificar o tipo de entrada nos campos de formulário (para que, por exemplo, quando um endereço de e-mail for a entrada esperada, o símbolo @ e “.com” apareçam na tela principal do teclado).

Boas práticas de integração

Uma boa integração é essencial para aplicativos móveis. Mas a definição de “bom” varia muito entre os diferentes tipos de aplicativos. Aplicativos fáceis de usar, como listas de tarefas ou navegadores da Web, precisam de integração mínima. Algumas telas iniciais que apontam recursos exclusivos é tudo o que a maioria dos usuários precisa para começar.

Mas aplicativos mais complexos, como aqueles para serviços financeiros ou gerenciamento de projetos, precisam de uma integração mais abrangente.

Use gestos estabelecidos

Este deve ser óbvio, mas os designers móveis precisam considerar os gestos estabelecidos que as pessoas já estão acostumadas a usar em seus dispositivos. Coisas como beliscar para ampliar ou deslizar tornaram-se intuitivas para a maioria dos usuários e devem ser empregadas sempre que possível.

Nos casos em que um designer decide se desviar de um gesto estabelecido, é importante orientar os usuários sobre esse desvio, seja durante o processo de integração ou quando o caso de uso aparecer pela primeira vez.

Design de Layout Móvel

Projetar layouts para dispositivos móveis não é totalmente diferente de projetar qualquer outro tipo de layout, mas há certas considerações que os designers precisam levar em consideração.

Uma das maiores considerações é o tamanho dos alvos da tela sensível ao toque. Enquanto um mouse ou trackpad pode clicar com precisão, as pontas dos dedos são muito menos precisas. Idealmente, os alvos devem ter de 7 a 10 mm na tela de um dispositivo móvel. Isso permite que a ponta do dedo toque no alvo sem ter que mirar com muito cuidado.

Uma área relacionada a ser considerada são os controles de posição da mão e a “zona do polegar” em dispositivos móveis – a área da tela de um telefone que pode ser facilmente acessada com o polegar quando uma pessoa está segurando o telefone com uma mão. Colocar a maior parte do conteúdo interativo (e principalmente as chamadas para ação) nessa zona é vital para criar uma experiência de usuário positiva.

É importante que os designs para dispositivos móveis eliminem o máximo de confusão possível. O minimalismo é amigo de um designer quando se trata de aplicativos móveis. Tentar colocar tudo em uma interface de usuário de desktop em uma tela que é uma fração do tamanho faz com que o design pareça apertado e pode ser esmagador.

Concentrar-se nos objetivos, minimizar as opções de navegação (menus e submenus podem ajudar com isso) e, geralmente, eliminar qualquer elemento que não seja essencial para os usuários fazerem o que precisam, criará uma interface do usuário mais simplificada e fácil de usar.

Ao cortar a desordem na tela, os designers devem ter certeza de não negligenciar algumas considerações importantes de design. Uma dessas considerações é garantir que vários elementos de design tenham contraste suficiente. As pessoas geralmente olham para seus dispositivos móveis em condições menos que ideais. Coisas como a luz solar intensa podem tornar os elementos em uma tela difíceis de ver, mas o alto contraste ajuda a tornar os elementos mais visíveis.

A tipografia é outra consideração importante. É importante ter uma hierarquia tipográfica clara em um design móvel. Os títulos e cabeçalhos devem ser fáceis de identificar e as fontes, em geral, devem ser maiores. Ninguém gosta de olhar para a tela para tentar ler grandes blocos de texto em seu telefone. Cabeçalhos claros, listas com marcadores ou numeradas e parágrafos curtos tornam o texto móvel mais legível.

Uma consideração final da interface do usuário é o uso de transições e animações. Uma animação pode ser um sinal importante para um usuário de que qualquer ação que ele acabou de realizar fez alguma coisa. Animações e transições claras entre telas ou funções em um aplicativo móvel são os principais feedbacks que criam uma experiência de usuário mais satisfatória.

Práticas recomendadas de UX para dispositivos móveis

Todos os itens acima são considerações importantes ao projetar aplicativos e sites para dispositivos móveis. Mas existem práticas recomendadas adicionais de UX móvel a serem seguidas para garantir a melhor experiência possível do usuário.

Foco na velocidade

Apesar da ampla disponibilidade de dados 4G, as redes móveis ainda são geralmente mais lentas que os serviços de Wi-Fi ou banda larga. E em muitas partes do mundo, o 4G não existe, e os usuários móveis ficam presos ao 3G ou a velocidades de dados mais lentas.

Isso significa que sites para dispositivos móveis e, especialmente, aplicativos para dispositivos móveis precisam ser rápidos. Incluir conteúdo em um aplicativo que não precisa ser baixado toda vez que o aplicativo é carregado o tornará mais rápido. Assim como o carregamento de conteúdo apenas quando necessário (embora antecipar o conteúdo que será necessário e pré-carregá-lo possa fazer com que um aplicativo apareça mais rápido para o usuário).

É um ato de equilíbrio entre não carregar conteúdo que não será usado (e usar dados) e criar a percepção de velocidade ao pré-carregar o conteúdo que os usuários provavelmente precisarão em seguida.

Uma maneira de criar a ilusão de velocidade e acalmar os usuários impacientes é usar espaços reservados até que o conteúdo seja carregado. O aplicativo móvel do Facebook faz isso, com o que efetivamente parece ser um carregamento de wireframe polido assim que o aplicativo é aberto, mantendo espaço para as postagens que são carregadas à medida que são baixadas. Essa tela de transição sinaliza aos usuários que algo está acontecendo com o conteúdo antes que ele seja carregado.

Fornecer feedback aos usuários

Dar feedback aos usuários enquanto eles realizam ações em um aplicativo móvel é um aspecto importante de uma experiência positiva do usuário. Como mencionado anteriormente, animações e transições são uma forma de dar feedback.

O feedback tátil e de áudio também é possível com dispositivos móveis. Fornecer feedback de toque quando certas ações são executadas é particularmente popular em jogos para celular e também com mensagens de erro. O feedback de áudio é popular com funções em todos os tipos de aplicativos. No entanto, os designers não devem confiar no feedback de áudio, pois muitas pessoas mantêm o telefone silenciado o tempo todo.

Minimizar a entrada de dados

Outra prática recomendada de UX móvel importante é minimizar a quantidade de entrada de dados necessária. Isso foi abordado anteriormente, mas quanto mais dados uma pessoa precisa inserir em um aplicativo móvel, maior a probabilidade de abandonar a tarefa.

Preencher um formulário com quatro ou cinco campos pode não ser um grande problema em um computador desktop ou laptop, mas em um dispositivo móvel, esses quatro ou cinco campos podem ser suficientes para afastar um usuário, especialmente se ele não puder ver seus objetivo. Certifique-se de que todos os campos de um formulário preenchido em um dispositivo móvel sejam necessários. Elimine qualquer um que não seja.

Essa é uma área em que dar às pessoas a opção de usar uma de suas contas existentes (como uma conta do Facebook, Google ou Twitter) em vez de se inscrever do zero pode melhorar muito as conversões. Quando um usuário só precisa clicar para autorizar o acesso em vez de preencher um formulário para um novo registro, é mais provável que o faça. Apenas não confie apenas nesses aplicativos secundários - alguns usuários ainda desconfiam de vincular suas contas e terão tempo para preencher um formulário.

Conclusão

Seguir esses princípios estabelecidos de design de UX móvel criará uma melhor experiência geral do usuário para as pessoas que visitam um site móvel ou usam um aplicativo móvel. Os designers têm apenas alguns segundos para chamar a atenção das pessoas antes de abandonar um aplicativo ou site em favor de um que seja mais fácil de usar, intuitivo ou simplificado.

Ótimos designs para dispositivos móveis estão se tornando mais comuns, e a fasquia aumentou ainda mais em termos do que os usuários esperam de seus aplicativos móveis. Os designers não podem mais ver o design móvel como uma reflexão tardia e, em vez disso, precisam dedicar tanto tempo, consideração e recursos a eles quanto aos designs em outros formatos.

Leia mais no Blog Toptal Design:

• Mobile UX Design - Práticas recomendadas, restrições e trabalho com desenvolvedores
• Retenha usuários com essas inspirações de integração de aplicativos móveis
• O guia fundamental para usabilidade em dispositivos móveis
• Princípios heurísticos para interfaces móveis
• UX de comércio eletrônico para a experiência móvel