Um guia abrangente para o design de aplicativos móveis

( Este é um artigo patrocinado .) Mais do que nunca, as pessoas estão interagindo com seus telefones em momentos cruciais. O usuário médio dos EUA gasta 5 horas por dia no celular. A grande maioria desse tempo é gasto em aplicativos e sites.

A diferença entre um aplicativo bom e um aplicativo ruim geralmente é a qualidade da experiência do usuário (UX). Um bom UX é o que separa os aplicativos bem-sucedidos dos malsucedidos. Hoje, os usuários móveis esperam muito de um aplicativo: tempo de carregamento rápido, facilidade de uso e prazer durante a interação. Se você deseja que seu aplicativo seja bem-sucedido, deve considerar o UX não apenas um aspecto menor do design, mas um componente essencial da estratégia do produto.

Há muitas coisas a considerar ao projetar para dispositivos móveis. Neste artigo, resumi muitas recomendações práticas que você pode aplicar ao seu design.

Minimizar a carga cognitiva

A carga cognitiva refere-se aqui à quantidade de energia cerebral necessária para usar o aplicativo. O cérebro humano tem uma quantidade limitada de poder de processamento e, quando um aplicativo fornece muitas informações de uma só vez, pode sobrecarregar o usuário e fazê-lo abandonar a tarefa.

Desorganização

Cortar a desordem é uma das principais recomendações em “10 o que fazer e o que não fazer no Mobile UX Design”. A desordem é um dos piores inimigos do bom design. Ao sobrecarregar sua interface, você sobrecarrega os usuários com muitas informações: cada botão, imagem e ícone adicionados tornam a tela mais complicada.

A desordem é terrível no desktop, mas é muito pior no celular (simplesmente porque não temos tanto espaço em dispositivos móveis quanto em desktops e laptops). É essencial se livrar de qualquer coisa em um design móvel que não seja absolutamente necessário, porque reduzir a desordem melhorará a compreensão. A técnica do minimalismo funcional pode ajudá-lo a lidar com o problema de uma interface do usuário desordenada:

• Mantenha o conteúdo no mínimo (apresente ao usuário apenas o que ele precisa saber).

• Mantenha os elementos de interface no mínimo. Um design simples manterá o usuário à vontade com o produto.

• Use a técnica de divulgação progressiva para mostrar mais opções.

Descarregar Tarefas

Procure qualquer coisa no design que exija esforço do usuário (isso pode ser inserir dados, tomar uma decisão etc.) e procurar alternativas. Por exemplo, em alguns casos, você pode reutilizar dados inseridos anteriormente em vez de solicitar que o usuário digite mais ou usar informações já disponíveis para definir um padrão inteligente.

Divida as tarefas em pedaços pequenos

Se uma tarefa contiver muitas etapas e ações necessárias do lado do usuário, é melhor dividir essas tarefas em várias subtarefas. Esse princípio é extremamente importante no design móvel porque você não deseja criar muita complexidade para o usuário de uma só vez. Um bom exemplo é um fluxo de checkout passo a passo em um aplicativo de e-commerce, onde o designer divide uma tarefa complexa de checkout em pedaços pequenos, cada um exigindo ação do usuário.

Chunking também pode ajudar a conectar duas atividades diferentes (como navegar e comprar). Quando um fluxo é apresentado como um número de etapas logicamente conectadas umas às outras, o usuário pode prosseguir com mais facilidade.

Use telas conhecidas

Telas familiares são telas que os usuários veem em muitos aplicativos. Telas como "Introdução", "O que há de novo" e "Resultados da pesquisa" tornaram-se padrões de fato para aplicativos móveis. Eles não requerem explicação adicional porque os usuários já estão familiarizados com eles. Isso permite que os usuários usem a experiência anterior para interagir com o aplicativo, sem curva de aprendizado.

Considere ler “As 11 telas que você encontrará em muitos dos aplicativos móveis mais bem-sucedidos” para obter mais informações sobre telas conhecidas.

Minimizar a entrada do usuário

Digitar em uma tela pequena do celular não é a experiência mais confortável. Na verdade, muitas vezes é propenso a erros. E o caso mais comum de entrada do usuário é o preenchimento de um formulário. Aqui estão algumas recomendações práticas para facilitar esse processo:

• Mantenha os formulários o mais curtos possível removendo todos os campos desnecessários. O aplicativo deve solicitar apenas o mínimo de informações do usuário.

• Forneça máscaras de entrada. O mascaramento de campo é uma técnica que ajuda os usuários a formatar o texto inserido. Uma máscara aparece quando o usuário se concentra em um campo e formata o texto automaticamente à medida que o campo é preenchido, ajudando os usuários a se concentrarem nos dados necessários e a perceberem os erros com mais facilidade.

• Use recursos inteligentes, como preenchimento automático. Por exemplo, preencher um campo de endereço geralmente é a parte mais problemática de qualquer formulário de registro. O uso de ferramentas como o Place Autocomplete Address Form (que usa geolocalização e preenchimento prévio de endereço para fornecer sugestões precisas com base na localização exata do usuário) permite que os usuários insiram seu endereço com menos pressionamentos de teclas do que teriam com um campo de entrada normal.

• Valide dinamicamente os valores dos campos. É frustrante quando, depois de enviar os dados, você precisa voltar e corrigir os erros. Sempre que possível, verifique os valores dos campos imediatamente após a entrada para que os usuários possam corrigi-los imediatamente.

• Personalize o teclado para o tipo de consulta. Exiba um teclado numérico ao solicitar um número de telefone e inclua o botão @ ao solicitar um endereço de e-mail. Certifique-se de que esse recurso seja implementado de forma consistente em todo o aplicativo, e não apenas em determinados formulários.

Antecipar as necessidades dos usuários

Procure proativamente etapas na jornada do usuário em que os usuários possam precisar de ajuda. Por exemplo, a captura de tela abaixo mostra uma parte em que os usuários precisam fornecer informações específicas.

Use o peso visual para transmitir importância

O elemento mais importante na tela deve ter o maior peso visual. Adicionar mais peso a um elemento é possível com peso, tamanho e cor da fonte.

Evite jargão

A comunicação clara deve sempre ser uma prioridade em qualquer aplicativo móvel. Use o que você sabe sobre seu público-alvo para determinar se certas palavras ou frases são apropriadas.

Torne o design consistente

A consistência é um princípio fundamental do design. A consistência elimina a confusão. Manter uma aparência geral consistente em todo o aplicativo é essencial. Em relação ao aplicativo móvel, consistência significa o seguinte:

• Consistência visual
  Tipos de letra, botões e rótulos precisam ser consistentes em todo o aplicativo.

• Consistência funcional
  Os elementos interativos devem funcionar de maneira semelhante em todas as partes do seu aplicativo.

• Consistência externa
  O design deve ser consistente em vários produtos. Dessa forma, o usuário pode aplicar conhecimentos prévios ao utilizar outro produto.

Aqui estão algumas recomendações práticas sobre como tornar um design consistente:

• Respeite as diretrizes da plataforma.
  Cada sistema operacional móvel possui diretrizes padrão para design de interface: Diretrizes de interface humana da Apple e Diretrizes de design de material do Google. Ao projetar para plataformas nativas, siga as diretrizes de design do sistema operacional para obter a máxima qualidade. A razão pela qual é importante seguir as diretrizes de design é simples: os usuários se familiarizam com os padrões de interação de cada sistema operacional, e qualquer coisa que contradiga as diretrizes criará atrito.

• Não imite elementos de interface do usuário de outras plataformas.
  À medida que você cria seu aplicativo para Android ou iOS, não transfira elementos de interface do usuário de outras plataformas. Ícones, elementos funcionais (campos de entrada, caixas de seleção, opções) e tipos de letra devem ter uma sensação nativa. Use componentes nativos o máximo possível, para que as pessoas confiem no seu aplicativo.

• Mantenha o aplicativo móvel consistente com o site.
  Este é um exemplo de consistência externa. Se você tiver um serviço da Web e um aplicativo móvel, certifique-se de que ambos compartilhem características semelhantes. Isso permitirá que os usuários façam transições sem atrito entre o aplicativo móvel e a web móvel. A inconsistência no design (por exemplo, um esquema de navegação diferente ou esquema de cores diferente) pode causar confusão.

Coloque o usuário no controle

Mantenha os elementos interativos familiares e previsíveis

A previsibilidade é um princípio fundamental do design UX. Quando as coisas funcionam da maneira que os usuários prevêem, eles sentem uma sensação de controle mais forte. Ao contrário do desktop, onde os usuários podem usar efeitos de foco para entender se algo é interativo ou não, no celular, os usuários podem verificar a interatividade apenas tocando em um elemento. É por isso que, com botões e outros elementos interativos, é essencial pensar em como o design comunica a affordance. Como os usuários entendem um elemento como um botão? A forma deve seguir a função: A aparência de um objeto informa aos usuários como usá-lo. Elementos visuais que parecem botões, mas não são clicáveis, confundem facilmente os usuários.

O botão "Voltar" deve funcionar corretamente

Um botão “voltar” criado incorretamente pode causar muitos problemas para os usuários. Evitar situações ao tocar no botão “voltar” em um processo de várias etapas levaria os usuários de volta à tela inicial.

Um bom design torna mais fácil para os usuários voltar e fazer correções. Quando os usuários sabem que podem dar uma segunda olhada nos dados que forneceram ou nas opções que selecionaram, isso permite que eles prossigam com facilidade.

Mensagens de erro significativas

Errar é humano. Erros ocorrem quando as pessoas se envolvem com aplicativos. Às vezes, eles acontecem porque o usuário comete um erro. Às vezes, eles acontecem porque o aplicativo falha. Seja qual for a causa, esses erros e como eles são tratados têm um enorme impacto no UX. O tratamento incorreto de erros combinado com mensagens de erro inúteis pode deixar os usuários frustrados e pode ser o motivo pelo qual os usuários abandonam seu aplicativo.

Tome uma tela de estado de erro do Spotify como exemplo. Não ajuda os usuários a entender o contexto e não os ajuda a encontrar a resposta para a pergunta: “O que posso fazer a respeito?”

Não assuma que os usuários são experientes em tecnologia o suficiente para descobrir as coisas. Sempre diga às pessoas o que há de errado em linguagem simples. Cada mensagem de erro deve informar aos usuários:

• o que deu errado e possivelmente por que,
• qual é o próximo passo que o usuário deve tomar para corrigir o erro.

Considere ler “Como projetar estados de erro para aplicativos móveis” para obter mais informações sobre o tratamento de erros.

Projete uma interface acessível

O design acessível permite que usuários de todas as habilidades usem os produtos com sucesso. Considere como os usuários com perda de visão, perda auditiva e outras deficiências podem interagir com seu aplicativo.

Esteja ciente do daltonismo

4,5% da população global sofre de daltonismo (1 em 12 homens e 1 em 200 mulheres), 4% sofrem de baixa visão (1 em 30 pessoas) e 0,6% são cegos (1 em 188 pessoas). É fácil esquecer que estamos projetando para esse grupo de usuários porque a maioria dos designers não enfrenta esses problemas.

Deixe-me dar um exemplo simples. As mensagens de sucesso e erro em formulários móveis geralmente são coloridas em verde e vermelho, respectivamente. Mas vermelho e verde são as cores mais afetadas pela deficiência de visão de cores (essas cores podem ser difíceis de distinguir para pessoas com deuteranopia ou protanopia). Provavelmente você já viu a seguinte mensagem de erro ao preencher um formulário: “Os campos marcados em vermelho são obrigatórios”? Embora possa não parecer grande coisa, essa mensagem de erro combinada com o formulário no exemplo abaixo pode ser uma experiência extremamente frustrante para pessoas com deficiência de visão de cores.

Como afirmam as diretrizes do W3C, a cor não deve ser usada como o único meio visual de transmitir informações, indicar uma ação, solicitar uma resposta ou distinguir um elemento visual. É importante usar outros significantes visuais para garantir que os usuários possam interagir com uma interface.

Tornar animações opcionais

Os usuários que sofrem de enjoo geralmente desativam os efeitos animados nas configurações do sistema operacional. Quando a opção de reduzir o movimento estiver habilitada nas preferências de acessibilidade, seu aplicativo deverá minimizar ou eliminar suas próprias animações.

Simplifique a navegação

Ajudar os usuários a navegar deve ser uma alta prioridade para todos os aplicativos. Todos os recursos interessantes e conteúdo atraente que seu aplicativo possui não importarão se as pessoas não conseguirem encontrá-los; Além disso, se levar muito tempo ou esforço para descobrir como navegar em seu produto, é provável que você perca usuários. Os usuários devem poder explorar o aplicativo intuitivamente e concluir todas as tarefas principais sem nenhuma explicação.

Usar componentes de navegação padrão

É melhor usar padrões de navegação padrão, como a barra de guias (para iOS) e a gaveta de navegação (para Android). A maioria dos usuários está familiarizada com os dois padrões de navegação e saberá intuitivamente como contornar seu aplicativo.

Para obter mais informações sobre padrões de navegação, leia o artigo “Padrões básicos para navegação móvel: prós e contras”.

Priorizar opções de navegação

Priorize a navegação com base na forma como os usuários interagem com seu aplicativo. Atribua diferentes níveis de prioridade (alto, médio, baixo) a tarefas comuns do usuário. Dê destaque na interface do usuário a caminhos e destinos com altos níveis de prioridade e uso frequente. Use esses caminhos para definir sua navegação. Organize sua estrutura de informações de uma forma que exija um número mínimo de toques, furtos e telas.

Não misture padrões de navegação

Ao escolher um padrão de navegação principal para seu aplicativo, use-o de forma consistente. Não deve haver uma situação em que parte do seu aplicativo tenha uma barra de guias, enquanto outra parte tenha uma gaveta lateral.

Tornar a navegação visível

Como diz Jakob Nielsen, reconhecer algo é mais fácil do que lembrar. Minimize a carga de memória do usuário tornando visíveis as ações e opções. A navegação deve estar disponível o tempo todo, não apenas quando prevemos que o usuário precisa dela.

Comunicar a localização atual

Deixar de indicar a localização atual é um problema muito comum de muitos menus de aplicativos móveis. "Onde estou?" é uma das perguntas fundamentais que os usuários precisam responder para navegar com sucesso. As pessoas devem saber onde estão em seu aplicativo a qualquer momento.

Use animação funcional para esclarecer as transições de navegação

A animação é a melhor ferramenta para descrever transições de estado. Ele ajuda os usuários a compreender uma mudança de estado no layout da página, o que acionou a mudança e como iniciar a mudança novamente quando necessário.

Tenha cuidado ao usar gestos na interface do usuário

Usar gestos no design de interação pode ser tentador. Mas na maioria dos casos, é melhor evitar essa tentação. Quando os gestos são usados ​​como uma opção de navegação primária, eles podem causar um terrível UX. Por quê? Porque os gestos são controles ocultos .

Como Thomas Joos aponta em seu artigo “Beyond the Button: Embracing the Gesture-Driven Interface”, a maior desvantagem de usar gestos em uma interface de usuário é a curva de aprendizado. Sempre que um controle visível é substituído por um gesto, a curva de aprendizado do aplicativo aumenta. Isso acontece porque os gestos têm menor capacidade de descoberta – eles estão sempre ocultos e as pessoas precisam ser capazes de identificar essas opções para usá-las. É por isso que é essencial usar apenas gestos amplamente aceitos (aqueles que os usuários esperam em seu aplicativo).

Quando se trata de usar gestos em uma interface do usuário, siga algumas regras simples:

• Use gestos padrão.
  Por "padrão", quero dizer gestos que são mais naturais para o aplicativo em sua categoria. As pessoas estão familiarizadas com os gestos padrão, portanto, nenhum esforço extra é necessário para descobri-los ou lembrá-los.
• Ofereça gestos como um complemento, não um substituto, para as opções de navegação visíveis.
  Os gestos podem funcionar como atalhos de navegação, mas não como um substituto completo para menus visíveis. Assim, ofereça sempre uma maneira simples e visível de navegar, mesmo que isso signifique algumas ações extras.

Para obter mais informações sobre o uso de gestos em sua interface do usuário, leia “Gestos no aplicativo e experiência do usuário do aplicativo móvel”.

Concentre-se na primeira experiência

A primeira experiência é uma parte importante dos aplicativos móveis. Você só tem uma chance de uma primeira impressão. E se você falhar, há uma grande probabilidade de que os usuários não iniciem seu aplicativo novamente. (Pesquisas da Localytics mostram que 24% dos usuários nunca retornam a um aplicativo após o primeiro uso.)

Evite paredes de login

Um mural de login é um registro obrigatório antes de usar um aplicativo. É uma fonte comum de atrito para os usuários e uma das razões pelas quais os usuários abandonam os aplicativos. O número de usuários que abandonam o processo de registro é especialmente significativo para aplicativos com baixo reconhecimento de marca ou aqueles em que a proposta de valor não é clara.

Como regra geral, peça que os usuários se registrem apenas se for essencial (por exemplo, se os principais recursos do seu aplicativo estiverem disponíveis somente quando os usuários concluírem o registro). E mesmo nesse caso, é melhor atrasar o login o máximo possível – permita que os usuários experimentem o aplicativo por um tempo (por exemplo, faça um tour) e só então lembre-os gentilmente de se inscrever. Isso dará a seus usuários um gostinho da experiência, e eles estarão mais propensos a se comprometer com ela.

Projete uma boa experiência de integração

No contexto do UX móvel, oferecer uma excelente experiência de integração é a base para reter usuários. O objetivo da integração é mostrar o valor que seu aplicativo oferece.

Entre as muitas estratégias de integração, uma é especialmente eficaz: integração contextual. A integração contextual significa que as instruções são fornecidas apenas quando o usuário precisa delas. Duolingo é um excelente exemplo. Este aplicativo combina um tour interativo com divulgação progressiva para mostrar aos usuários como o aplicativo funciona. Os usuários são incentivados a entrar e fazer um teste rápido no idioma selecionado. Isso torna o aprendizado divertido e detectável.

Outra coisa que pode ser muito útil durante a integração é um estado vazio. Um estado vazio é uma tela cujo estado padrão é vazio e exige que os usuários passem por uma ou mais etapas para preenchê-la com dados. Além de informar ao usuário qual conteúdo esperar na página, um estado vazio também pode ensinar as pessoas a usar um aplicativo. Mesmo que o processo de integração consista em apenas uma etapa, a orientação garantirá aos usuários que eles estão fazendo a coisa certa.

Considere ler “O papel dos estados vazios na integração do usuário” para obter mais informações sobre a integração.

Não peça informações de configuração antecipadamente

Uma fase de configuração obrigatória cria atrito e pode levar ao abandono do aplicativo. Quando os usuários iniciam um aplicativo, eles esperam que ele funcione. Assim, projete seu aplicativo para a maioria dos usuários e deixe que os poucos que desejam uma configuração diferente ajustem suas configurações para atender às suas necessidades a qualquer momento.

Dica : Tente inferir o que você precisa do sistema. Se você precisar de informações sobre o usuário, dispositivo ou ambiente, consulte o sistema sempre que possível, em vez de perguntar ao usuário.

Evite pedir permissões logo no início

Evite uma situação em que a primeira coisa que um usuário vê ao iniciar o aplicativo é uma caixa de diálogo solicitando permissão. Semelhante a um mural de login ou fase de configuração inicial, a solicitação de permissão na inicialização deve ser feita somente quando for necessário para a função principal do seu aplicativo. Os usuários não serão incomodados por essa solicitação se for evidente que seu aplicativo depende dessa permissão para funcionar (por exemplo, está claro por que um editor de fotos solicitaria acesso às fotos).

Mas para quaisquer outros casos, peça permissões no contexto. Os usuários são mais propensos a conceder permissão se solicitados durante uma tarefa relevante.

Dicas :

• Peça apenas o que seu aplicativo claramente precisa.
  Não peça todas as permissões possíveis. Seria suspeito se um aplicativo solicitasse algo que não tem uma necessidade óbvia. Por exemplo, um aplicativo de despertador pedindo permissão para acessar sua lista de contatos seria suspeito.

• Explique por que seu aplicativo precisa da informação, se não for óbvio.
  Às vezes, você precisa fornecer mais contexto para sua solicitação. Por esse motivo, você pode criar um alerta personalizado para solicitar permissão.

Faça seu aplicativo parecer rápido e responsivo

O tempo de carregamento é extremamente importante para o UX. À medida que a tecnologia avança, ficamos mais impacientes e, hoje, 47% dos usuários esperam que uma página seja carregada em 2 segundos ou menos.

Se uma página demorar mais para carregar, os visitantes podem ficar frustrados e sair. É por isso que a velocidade deve ser uma prioridade ao criar um aplicativo móvel. Mas não importa o quão rápido você faça um aplicativo, algumas coisas levarão tempo para serem processadas. Uma resposta lenta pode ser causada por uma conexão ruim com a Internet ou uma operação pode estar demorando muito. Mas mesmo que não consiga encurtar a fila, pelo menos tente tornar a espera mais agradável.

Concentre-se em carregar conteúdo na área visível da tela

Carregue conteúdo suficiente para preencher a tela quando uma página for aberta. O conteúdo disponível na rolagem deve continuar sendo carregado em segundo plano. O benefício dessa abordagem é que os usuários estarão envolvidos na leitura do conteúdo inicial e, em alguns casos, nem perceberão que o conteúdo ainda está sendo carregado.

Deixe claro quando o carregamento está ocorrendo

Uma tela em branco ou estática que os usuários veem quando o conteúdo está carregando pode fazer parecer que seu aplicativo está congelado, resultando em confusão e frustração e potencialmente fazendo com que as pessoas saiam do seu aplicativo. No mínimo, mostre um spinner de carregamento que deixe claro que algo está acontecendo. Para um tempo de espera maior (mais de 10 segundos), é essencial exibir uma barra de progresso para que o usuário possa avaliar quanto tempo estará esperando.

Considere a leitura de “Melhores Práticas para Indicadores de Progresso Animados” para obter mais informações sobre indicadores de carregamento.

Ofereça uma distração visual

Se um aplicativo oferece aos usuários algo interessante para ver enquanto esperam, os usuários prestarão menos atenção à espera em si. Assim, para garantir que as pessoas não fiquem entediadas enquanto esperam que algo aconteça, ofereça-lhes uma distração. Um bom indicador de espera animado pode reter a atenção dos usuários enquanto eles esperam.

Dica : Mantenha a longevidade em mente. Mesmo uma boa animação pode ser irritante quando é usada em excesso. Ao projetar uma animação, pergunte a si mesmo: “A animação ficará irritante no centésimo uso ou será universalmente clara e discreta?”

Telas de esqueleto

As telas de esqueleto (ou seja, contêineres de informações temporárias) são essencialmente uma versão em branco de uma página na qual as informações são carregadas gradualmente.

Uma tela de esqueleto aparecerá no momento em que seu aplicativo começar a carregar dados, dando aos usuários a impressão de que seu aplicativo é rápido e responsivo. Ao contrário de um indicador de carregamento, que apenas transmite que algo está acontecendo, uma tela de esqueleto se concentra no progresso real.

Otimize o conteúdo para celular

O conteúdo desempenha um papel significativo no design. Na maioria dos casos, a principal razão pela qual as pessoas usam um aplicativo é o conteúdo que ele fornece. Mas não basta ter um conteúdo claro e bem elaborado. O conteúdo tem que ser fácil de digerir.

Tornar o texto legível e legível

Quando pensamos em conteúdo, na maioria dos casos queremos dizer tipografia. Como Oliver Reichenstein afirma em seu ensaio “Web design é 95% tipografia”:

“Otimizar a tipografia é otimizar a legibilidade, acessibilidade, usabilidade (!), equilíbrio gráfico geral.”

A chave para a tipografia móvel é a legibilidade e a legibilidade. Se os usuários não podem ler seu conteúdo, não faz sentido oferecer conteúdo em primeiro lugar.

Primeiro, algumas recomendações práticas sobre legibilidade:

• Tamanho da fonte
  Geralmente, qualquer coisa menor que 16 pixels (ou 11 pontos) é um desafio para ler em qualquer tela.

• Família de fontes
  A maioria dos usuários prefere uma fonte clara e fácil de ler. Uma aposta segura é a fonte padrão do sistema (Apple iOS usa a fonte San Francisco; Google Android usa Roboto).

• Contraste
  Texto de cor clara (como cinza claro) pode parecer esteticamente atraente, mas os usuários terão dificuldade em lê-lo, especialmente em um fundo claro. Certifique-se de que haja bastante contraste entre a fonte e o plano de fundo para facilitar a leitura. As diretrizes de acessibilidade de conteúdo da web do WC3 fornecem recomendações de taxa de contraste para imagens e texto.

E agora, algumas recomendações para legibilidade:

• Evite todas as tampas.
  Todo o texto em maiúsculas - ou seja, texto com todas as letras maiúsculas - é bom em contextos que não envolvem leitura atenta (como siglas e logotipos), mas evite-o quando sua mensagem exigir uma leitura pesada.

• Limite o comprimento das linhas de texto.
  Uma boa regra geral é usar de 30 a 40 caracteres por linha para celular.

• Não aperte as linhas.
  Adicionar espaço entre o texto ajuda o usuário na leitura e cria uma sensação de que não há tanta informação para absorver.

Imagens com qualidade HD e proporção correta

A ascensão de dispositivos com telas de alta resolução define um padrão para a qualidade das imagens. As imagens não devem aparecer pixeladas em telas HD.

As imagens devem sempre aparecer na proporção correta, para que não pareçam distorcidas. Imagens que são esticadas muito largas ou muito longas apenas para caber em um espaço parecerão desagradáveis ​​e fora do lugar.

O desafio mais recente que muitos designers de dispositivos móveis enfrentam é otimizar o UX para o iPhone X. Projetar para o iPhone X requer um tamanho de prancheta diferente de qualquer outro iPhone (você precisará de imagens com resolução de 375 x 812 pontos em 3x).

Considere ler “Designing Apps for iPhone X: What Every UX Designer Needs to Know About Apple’s Latest Device” para obter mais informações sobre como projetar para o iPhone X.

O conteúdo de vídeo é otimizado para o modo retrato

O vídeo está rapidamente se tornando um método padrão de consumo de conteúdo para muitos usuários. De acordo com o YouTube, o consumo de vídeo móvel cresce 100% a cada ano. Até 2020, mais de 75% do tráfego global de dados móveis será de conteúdo de vídeo. Isso significa que é essencial otimizar o conteúdo de vídeo para o modo retrato.

De acordo com a ScientiaMobile, 94% dos usuários usam seu dispositivo móvel no modo retrato. Se seu aplicativo fornece conteúdo de vídeo, ele deve ser otimizado para permitir que os usuários o assistam no modo retrato.

Design para toque

O design para toque tem como objetivo reduzir o número de entradas incorretas e tornar a interação com um aplicativo mais confortável.

Design For Fingers, Not Cursors

When you're designing actionable elements in a mobile interface, it's vital to make targets big enough so that they're easy for users to tap. Mistaken taps often happen due to small touch controls.

When designing a touch target, you can rely on the MIT Touch Lab's study (PDF) to choose a proper size for interactive elements. This study found that the average size of finger pads are between 10 and 14 mm and fingertips are 8 to 10 mm, making 10 by 10 mm a good minimum touch target size.

Not only is the size of the target important, but it's also essential to have the right amount of space between targets. If multiple touch targets are near each other (for example, “Agree” and “Disagree” buttons), ensure that there is good amount of space between them.

Consider Thumb Zone

Designing for thumbs isn't only about making targets big enough, but also about considering the way we hold our devices. A lot of users hold their phone with one hand. Only a part of the screen would be a genuinely effortless territory for their thumbs. This territory is called the natural thumb zone. Other zones require finger stretching or even changing the grip to reach them. Below, you can see what the safe zone looks like on a modern mobile device.

The bigger the display, the more of the screen is less easily accessible.

Consider all zones when designing for mobile:

• The green zone is the best place for navigation options or frequent interactive actions (such as call-to-action buttons).

• The red zone is the best place for potential danger options (such as “Delete” or “Erase”). Users are less likely to trigger this option accidentally.

Feedback on Interaction

In the physical world, objects respond to our interaction. People expect a similar level of responsiveness from digital UI controls. You'll need to provide instant feedback on every user interaction. If your app doesn't provide feedback, the user will wonder if it has frozen or if they missed the target. The feedback could be visual (highlighting a tapped button) or tactile (a device vibration on input).

Humanize The Digital Experience

UX isn't only about usability; it's mostly about feelings. And when we think about what makes us feel great, we often think about well-crafted design.

Personalized Experience

Personalization is one of the most critical aspects of mobile apps today. It's an opportunity to connect with users and provide the information they need in a way that feels genuine.

There are countless ways to improve the mobile UX by incorporating personalization. It's possible to offer personalized content depending on the user's location, their past searches and their past purchases. For example, if your users prefer to purchase particular groups of products each month, an app might track that and offer them special deals on those types of products.

Starbucks' mobile app is an excellent example that follows this approach. The app uses information provided by users (for example, the type of coffee they usually order) to craft special offers.

Delightful Animation

Unlike functional animation, which is used to improve the clarity of a user interface, delightful animation is used to make an interface feel human. This type of animation makes it clear that the people who crafted the app care about their users.

Otimizar notificações push

Notificações irritantes são o principal motivo pelo qual as pessoas desinstalam aplicativos móveis (de acordo com 71% dos entrevistados).

Não envie notificações push só porque você pode. Cada notificação deve ser valiosa e oportuna.

Empurre o valor

Quando um usuário começa a usar seu aplicativo, ele não se importa em receber notificações, desde que o valor recebido seja suficientemente maior que a interrupção. Quase 50% dos usuários são gratos por notificações que os interessam. Personalizar o conteúdo para inspirar e encantar é fundamental. A Netflix é um excelente exemplo de empresa que “empurra o valor”. Ele usa cuidadosamente os dados de visualização para apresentar recomendações que parecem feitas sob medida.

Evite enviar muitas notificações em um curto período de tempo

Muitas notificações entregues em um curto período de tempo podem levar à situação conhecida como notificação exagerada — em que um usuário não consegue processar as informações e simplesmente as ignora. Limite o número total de notificações combinando mensagens diferentes.

Tempo suas notificações

Não só o que você diz é importante, mas também quando você diz. Não envie notificações push em horários estranhos (como no meio da noite). O melhor horário para notificações push é o horário de pico de uso móvel: das 18h às 22h.

Considere outros canais para entregar sua mensagem

As notificações push não são a única maneira de entregar uma mensagem. Use e-mail, notificações no aplicativo e mensagens de feed de notícias para notificar os usuários sobre eventos importantes, de acordo com o nível de urgência e o tipo de conteúdo que você deseja compartilhar.

Otimizar para celular

Projeto para interrupção

Vivemos em um mundo de interrupção. Algo está constantemente tentando nos distrair e direcionar nossa atenção para outro lugar. Sem mencionar que muitas sessões móveis acontecem quando os usuários estão em movimento. Por exemplo, os usuários podem usar seu aplicativo enquanto esperam o trem. Essas sessões podem ser interrompidas a qualquer momento. Os usuários podem ficar facilmente frustrados quando um aplicativo esquece seu progresso atual assim que o fecha.

Quando ocorre uma interrupção, seu aplicativo deve salvar o estado atual (contexto) e permitir que os usuários continuem de onde pararam. Isso tornará mais fácil para os usuários se envolverem novamente com o aplicativo quando retornarem a ele após a interrupção.

Aproveite os recursos do dispositivo

Os dispositivos móveis possuem muitos sensores (câmera, rastreamento de localização, acelerômetro) que podem ser usados ​​para melhorar o UX. Aqui estão apenas alguns recursos que você pode usar para fazer isso:

• Câmera
  É possível simplificar as operações de entrada de dados usando uma câmera. Por exemplo, você pode usar a câmera digital para ler números de cartão de crédito automaticamente.

• Reconhecimento de local
  Os aplicativos podem usar os dados de localização de um dispositivo para fornecer conteúdo relevante para a localização do usuário ou para simplificar determinadas operações. Por exemplo, se você estiver projetando um aplicativo para entrega de comida, em vez de pedir ao usuário que forneça um endereço para entrega, você pode detectar automaticamente sua localização atual e pedir ao usuário que confirme que deseja receber uma entrega nesse local .

• Autenticação biométrica
  É possível minimizar o número de etapas necessárias para fazer login em um aplicativo usando recursos como login por toque de impressão digital ou identificação facial.

Dica : você pode encontrar recomendações práticas sobre como usar o Face ID da Apple em nosso artigo “Projetando aplicativos para iPhone X: o que todo designer de UX precisa saber sobre o dispositivo mais recente da Apple”.

Esforce-se para criar uma experiência multicanal

Não pense em seu aplicativo móvel como uma experiência isolada. Quando se trata de criar uma jornada do usuário, o objetivo final é criar uma experiência perfeita, em todos os dispositivos. Os usuários devem poder mudar para uma mídia diferente e continuar a jornada.

De acordo com a Appticles, 37% dos usuários pesquisam no celular, mas mudam para o desktop para concluir uma compra. Assim, se você estiver projetando um aplicativo de comércio eletrônico, os usuários de dispositivos móveis poderão alternar para o desktop ou laptop para continuar a jornada. A sincronização do progresso do usuário entre os dispositivos é uma prioridade fundamental para criar uma experiência perfeita. Isso faz com que os usuários sintam que seu fluxo de trabalho não é interrompido.

Adaptar o design móvel aos mercados emergentes

De acordo com o Google, espera-se que um bilhão de novos usuários entrem online nos próximos dois anos. E a grande maioria deles será de mercados emergentes (ou países chamados mobile-first, como Índia, Indonésia, Brasil e Nigéria). Eles terão acesso através de um telefone celular. Esses usuários terão experiências e expectativas muito diferentes daqueles que estão nos EUA e na Europa.

Se você estiver interessado em se tornar global, é importante considerar suas experiências.

Conectividade de Internet ruim

Nos EUA e na Europa, os usuários estão acostumados à conectividade onipresente. Mas isso certamente não é verdade em todo o mundo. Os produtos em mercados emergentes precisam ser capazes de funcionar em conectividade lenta ou intermitente. Dependendo da localização de uma pessoa, a rede pode mudar de Wi-Fi para 3G para 2G ou nenhuma conectividade, e seu produto precisa acomodar isso.

Se você planeja projetar para esse mercado, considere o seguinte:

• Certifique-se de que seu produto funcione quando não estiver conectado à Internet. Permitir armazenamento em cache de dados.

• Otimize seu produto para carregamento rápido. Minimize o tamanho da página mantendo imagens e outros conteúdos pesados ​​no mínimo; e reduzir o tamanho desse conteúdo.

O YouTube Go é um excelente exemplo de aplicativo para dispositivos móveis desenvolvido com base em restrições de conectividade. O aplicativo foi projetado para ser off-line primeiro (o que significa que pode ser usado mesmo quando não está conectado à Internet). O aplicativo permite que os usuários visualizem os vídeos primeiro e selecionem o tamanho do arquivo de um vídeo antes de salvá-lo offline para assistir mais tarde. Ele também possui um ótimo recurso que permite aos usuários compartilhar vídeos facilmente com amigos e familiares próximos, sem usar nenhum dado.

O Google News & Weather é outro ótimo exemplo de aplicativo que foi projetado para conexões ruins. O aplicativo possui um recurso chamado “modo Lite” para pessoas em conexões de baixa largura de banda. Quando esse modo é ativado, ele reduz o conteúdo ao essencial, para que o aplicativo seja carregado mais rapidamente. Segundo o Google, esse modo usa menos de um terço dos dados normais e é ativado automaticamente quando o aplicativo detecta uma rede lenta.

Dados limitados

Em cerca de 95% dos mercados emergentes, as pessoas dependem quase inteiramente de dados móveis pré-pagos caros. As pessoas compram uma quantidade fixa de dados e muitas só podem pagar algo como 250 MB de dados por mês.

Esses usuários apreciam a transparência quando se trata de entender seu consumo de dados. Eles também valorizam a capacidade de controlar se um produto é baixado por Wi-Fi ou usa dados.

Abaixo, você pode ver outro exemplo do YouTube Go. Depois de selecionar um vídeo, os usuários podem escolher a qualidade do vídeo. O aplicativo permite que eles saibam antecipadamente quantos dados eles gastarão antes de se comprometerem com uma ação.

Capacidades limitadas do dispositivo

Os smartphones em países que priorizam a mobilidade têm recursos dramaticamente diferentes dos Pixels e iPhones populares nos EUA. A maioria dos dispositivos de mercados emergentes custa menos de US$ 100 e pode vir com armazenamento e poder de processamento limitados. Certifique-se de que o produto que você projeta funciona com dispositivos e softwares mais antigos e de baixo custo.

Estética Local

O design minimalista, que é popular no mundo ocidental hoje, pode ser considerado muito nu para outras culturas. Se você deseja que seu produto tenha sucesso em mercados emergentes, preste atenção à estética cultural. Você pode se inspirar em produtos populares regionalmente ou contratar designers locais que estejam familiarizados com as preferências do usuário. Projetar de acordo com a estética local fará com que seu produto pareça mais relacionável.

Especificações da região

Quando o Google adaptou o Google Maps para a Índia, considerou que a Índia é o maior mercado de duas rodas do mundo, e os milhões de motociclistas e patinetes têm necessidades diferentes dos motoristas de automóveis. Ele lançou o modo de duas rodas no Maps. Este modo mostra rotas de viagem que usam atalhos, não acessíveis a carros e caminhões.

Teste e feedback

Todos os princípios que você acabou de ler podem ajudá-lo a criar uma experiência melhor para dispositivos móveis, mas não substituirão a necessidade de pesquisa e teste de usuários. Você ainda precisará testar sua solução com usuários reais para entender quais partes da interface do usuário precisam ser aprimoradas.

Loop de feedback

Incentive o feedback do usuário em todas as oportunidades. Para coletar feedback valioso, você precisa facilitar para os usuários fornecê-lo. Assim, construa um mecanismo de feedback diretamente em seu produto. Isso pode ser tão simples quanto um formulário marcado como “Deixe feedback”. Apenas certifique-se de que ele funcione perfeitamente para seus usuários.

Design é um processo sem fim

É justo dizer que o design é um processo de melhoria contínua. Como designers de produtos, usamos análises e feedback do usuário para melhorar a experiência continuamente.

Ferramentas e recursos úteis para designers

Verificador de contraste de cores

É surpreendente quantos aplicativos móveis não passam no teste AA. Não seja um deles! É essencial verificar a acessibilidade do contraste de cores. Use o Verificador de contraste de cores do WebAIM para testar combinações de cores.

Kits de interface do usuário para Adobe XD

Uma interface de usuário bem projetada fará seu aplicativo brilhar. É ótimo quando você pode projetar sua interface do usuário não do zero, mas usando uma base sólida, como um kit de interface do usuário. O Adobe XD tem cinco kits de interface do usuário que você pode baixar de graça. Esses kits aumentarão sua criatividade e ajudarão você a criar designs de interface de usuário visualmente interessantes.

Conclusão

Um ótimo design é a combinação perfeita de beleza e funcionalidade, e é exatamente isso que você deve buscar ao criar um aplicativo. Mas não tente construir um aplicativo perfeito logo na primeira tentativa. É quase impossível. Em vez disso, trate seu aplicativo como um projeto em constante evolução e use dados de sessões de teste e feedback do usuário para melhorar constantemente a experiência.

Este artigo faz parte da série de design UX patrocinada pela Adobe. O Adobe XD foi feito para um processo de design de UX rápido e fluido, pois permite que você vá da ideia ao protótipo mais rapidamente. Projete, prototipe e compartilhe - tudo em um aplicativo. Você pode conferir mais projetos inspiradores criados com o Adobe XD no Behance e também se inscrever no boletim informativo de design de experiência da Adobe para se manter atualizado e informado sobre as últimas tendências e insights para design de UX/UI.