🏒 🔁 🕜 Lista de verificação UX de 30 pontos para aplicativos móveis 🚣🏿 🏹 🧒

Este artigo é um lembrete sobre o que você precisa verificar duas vezes no design do seu aplicativo antes de enviá-lo para o AppStore / GooglePlay. A lista é dividida em blocos temáticos:

Entrar / Registrar
Primeira experiência
Interações diárias
Notificações
Configurações da conta
Faixa de opções
Pesquisar
AppStore / GooglePlay

Este artigo foi traduzido com o suporte da EDISON Software, uma empresa que desenvolve aplicativos e sites , e também lida com interfaces de usuário .

1. Login / Registro

1. Protetor de tela

Uma tela inicial é exibida quando o aplicativo é iniciado. Essa é a primeira coisa que o usuário vê, isso cria a primeira impressão do produto, mesmo antes de começar a funcionar.

Tela inicial de logotipo por Gleb Kuznetsov

Transição de lançamento do piloto pelo Uber

Aqui estão algumas dicas para criar bons protetores de tela .

2. Esqueceu sua senha

A pessoa média está registrada em 90 serviços online que exigem uma senha. Portanto, as senhas geralmente são "esquecidas". Segundo as estatísticas, 21% dos usuários esquecem sua senha por 2 semanas e 25% esquecem uma senha pelo menos uma vez por dia. Se seu aplicativo exigir uma senha, cuide do formulário de recuperação de senha.

Esqueceu o fluxo de senhas de Emmanuel Torres

2. Primeira experiência

3. Tela de boas-vindas / instruções na primeira execução (Onboarding)

Onboarding é um termo de design de UX que significa como entender o usuário o que fazer com seu aplicativo, como navegá-lo, onde clicar. Uma boa integração aumenta a probabilidade de os "recém-chegados" se tornarem "permanentes".

Experiência animada de integração da Cuberto

Aqui estão dicas práticas para uma boa integração .

Aqui estão conceitos criativos para integração .

4. Tela com notificação de confirmação bem-sucedida dos dados

Muitos aplicativos móveis solicitam confirmação de e-mail / telefone. Uma notificação sobre uma operação de confirmação de dados bem-sucedida aparece após o usuário concluir tudo o necessário.

Telas de confirmação de Diana Caballero

Para esta tela, é vital garantir:

a capacidade de enviar novamente um código de confirmação (para telefones)
instruções sobre como encontrar uma mensagem de confirmação (pesquisa por título, pesquisa em spam etc.) (por e-mail)

5. Stubs para "Nenhum conteúdo ainda"

Conteúdo é para o que os usuários instalam a maioria dos aplicativos. É importante pensar naqueles lugares onde o usuário conseguiu olhar, onde ainda não há conteúdo. Esses lugares inexplorados não devem estar vazios.

Em vez de deixar um espaço vazio, insira um tutorial ou instruções sobre o que fazer a seguir.

Carreiras do Symplicity no estado vazio

6. Avatar de usuário padrão

A maioria dos usuários (~ 95% de acordo com Jared M. Spool ) não altera as configurações padrão. Isso significa que os usuários terão o avatar que você escolheu para eles.

Avatar de usuário padrão bonito no Dropbox

Aqui estão algumas idéias sobre como criar um avatar padrão .

3. Interações diárias

7. Tela de solicitação de resolução

Quando um usuário abre um novo aplicativo, a última coisa que ele quer é ver muitos pop-ups perguntando:

Permita que o aplicativo acesse sua localização.
Permita que o aplicativo acesse seus contatos.
permita que o aplicativo acesse sua câmera

Tais solicitações afetam negativamente a experiência do usuário e levam ao fato de que o aplicativo pode ser excluído com raiva. Essas solicitações de permissão têm um impacto muito negativo na experiência do usuário e geralmente levam ao abandono do aplicativo. Portanto, é melhor pedir permissão no momento da interação do usuário.

Diálogo de permissão de notificação por Anton Tkachuk

Aqui em mais detalhes sobre o pedido de permissão .

8. Vários estados para elementos interativos

Botões e outros elementos interativos têm vários estados. É muito importante pensar nos estados padrão / pressionado / não disponível para cada elemento interativo no seu aplicativo.

Estados de três botões

Botão de design de material por Vadim Gromov

Aqui estão dicas sobre como criar botões .

9. conjunto de ícones

Será melhor se seus ícones forem do mesmo estilo.

Ícones da barra de guias no aplicativo do Twitter para iOS

Aqui está uma lista de verificação para os ícones .

10. Mensagens de erro

A melhor mensagem de erro é aquela que não aparece. Uma maneira melhor de evitar cometer um erro é instruir adequadamente o usuário com antecedência. Porém, se, no entanto, ocorreu um erro, uma mensagem de erro competente não apenas ensina o usuário como evitá-lo no futuro, mas também deixa claro para o usuário que ele é atendido e não é ignorado.

Interação de erro por Dwinawan

Aqui estão alguns casos para os quais você precisa pensar em mensagens de erro:

Sem conexão à internet. Pense no que o usuário deve ver quando não houver conexão.
O usuário inseriu os dados incorretamente.
Erro no sistema

Aqui está um artigo de instruções sobre como criar boas mensagens de erro .

11. O processo de inicialização

Embora a resposta instantânea do aplicativo seja a melhor, há momentos em que ele terá que "mergulhar". Uma conexão de Internet ruim pode causar uma resposta lenta ou a operação em si pode levar muito tempo. Nesses casos, para minimizar o estresse do usuário, você deve garantir aos usuários que o aplicativo está trabalhando em sua solicitação. Quando um aplicativo não pode notificar os usuários de que leva algum tempo para concluir uma ação, os usuários geralmente pensam que o aplicativo não recebeu a solicitação e tentam novamente. Devido à falta de feedback, o usuário pode pressionar todos os botões com força.

Um indicador de progresso animado é a forma mais comum de fornecer status do sistema aos usuários quando algo acontece ou é carregado.

Carregador de sorriso para design de produto de IA por Gleb Kuznetsov

Aqui estão algumas dicas para criar indicadores de carregamento .

12. A mensagem de que você fez tudo certo

Os estados de sucesso são telas que mostramos aos usuários quando eles concluem tarefas. Os designers devem considerar os seguintes tipos de condições de sucesso:

Estados surpreendentes (primeiro sucesso). No momento em que o usuário executa uma tarefa importante pela primeira vez, você tem uma grande oportunidade de criar uma conexão emocional positiva entre ele e seu produto. Informe seus usuários que estão obtendo sucesso, reconhecendo seu progresso e comemorando o sucesso com o usuário.
Tela de confirmação. Uma tela de confirmação é uma tela necessária para aplicativos de comércio eletrônico. No momento em que o usuário conclui a compra, precisamos mostrar uma tela que forneça todas as informações necessárias sobre a compra.

Tela de confirmação em Booking.com

13. Preenchimento automático

Os designers sempre devem se esforçar para minimizar o custo da interação removendo ações desnecessárias. O preenchimento automático simplifica a entrada do usuário, reduzindo o número de cliques que o usuário deve concluir para concluir a solicitação.

Imagem: Louise Chang

14. Cancele a operação

Todos cometemos erros, mas quando se trata de interagir com o usuário, é extremamente importante fornecer uma opção que ajude o usuário a recuperar dados importantes.

Desfazer para excluir item. Imagem: Sashoto Seeam

Desfazer para enviar email. Imagem: Tyler Beauchamp

15. Localização / Internacionalização

Como muitas equipes de desenvolvimento têm planos de alcance global, é importante tornar a localização / internacionalização uma parte natural do processo de design. As propriedades visuais dos elementos (por exemplo, tamanho) e cópias de UX devem ser selecionadas com base na localização / internacionalização.

Botão Upvote em diferentes idiomas. Imagem: Chier Hu

16. Ajuda / Instruções

Quando os usuários têm um problema, sua primeira reação natural é encontrar uma solução no aplicativo. Portanto, é uma boa ideia fornecer um link para a seção de ajuda / perguntas freqüentes no aplicativo.

Ajuda e Feedback por Alex Muench

17. Acessibilidade

A acessibilidade permite que pessoas com todas as habilidades percebam, entendam e interajam com seu produto. Aqui está um ótimo resumo de Lillian Xiao sobre o que os designers precisam saber sobre a disponibilidade de dispositivos móveis.

E aqui está uma lista de ferramentas para verificar o contraste das cores .

4. Notificações

18. notificações de aplicativos / notificações push

Você sabia que as notificações ruins são a principal razão pela qual os usuários desinstalam o aplicativo?

As notificações irritantes são a razão pela qual as pessoas desinstalam aplicativos móveis (71% dos entrevistados dizem).

No entanto, você pode transformar esse antipadrão de UX em algo significativo e útil para empresas e usuários. Para obter bons resultados com notificações no aplicativo, os designers precisam de uma estratégia de publicação mais adequada para dispositivos móveis.

Aqui está um artigo que fornece informações sobre como criar boas notificações .

E aqui estão algumas idéias de design inspiradoras .

19. Configurações de notificação

É sempre um prazer dar aos usuários liberdade de escolha. No contexto de notificações para dispositivos móveis, isso significa poder escolher quais notificações eles desejam receber.

Definir opções de notificação no Slack

5. Configurações da conta

20. Ferramenta para cortar a foto do perfil

Permita que os usuários não apenas carreguem um avatar, mas também modifiquem-no de acordo com as necessidades deles diretamente no seu aplicativo.

Editando um avatar por Scott Thomas

21. Telas para visualizar / alterar dados pessoais

Permita que os usuários editem seus dados pessoais diretamente no aplicativo móvel. Crie telas para visualizar as informações de remessa / cobrança e adicionar essas informações a uma lista editável.

Os endereços residencial e do escritório são editáveis. Selecione um endereço de entrega de Dhiraj S. Karki

22. Sair

Se o seu aplicativo exigir login, também deverá haver uma oportunidade de sair.

Sair do Facebook para iOS

23. Termos de uso

Adicione os Termos de Uso ao seu aplicativo para evitar ações legais.

Imagem: Cristian Dina / Shutterstock

24. configurações de privacidade

Permita que os usuários vejam os dados que eles enviam para você e que eles escolham.

Imagem: Vitaly Friedman

Aqui estão dicas sobre como lidar com a privacidade nos aplicativos .

25. Enviar feedback

Ao fornecer uma maneira rápida de compartilhar comentários sobre o seu produto, você não apenas coleta informações valiosas sobre usuários de usuários reais, mas também faz com que eles acreditem que as resenhas são valiosas para você.

O Skype para iOS oferece aos usuários a opção "Deixar comentários", "Informar um problema" ou "Sugerir um recurso".

6. Fita

26. Rolagem

Monitores móveis são pequenos. Para economizar espaço na tela, os designers geralmente desejam otimizar as informações exibidas e ocultar tudo o que não tem valor para o usuário. É por isso que muitas telas de canais têm dois estados: o estado padrão (a tela que os usuários veem quando entram no canal) e o estado de rolagem (quando o usuário rola para cima para ver mais conteúdo).

Observe que a área do título é recolhida ao rolar. Animação móvel Craiglist de Aurélien Salomon

Pesquise dentro do aplicativo

27. O comportamento padrão

Wang precisa decidir qual será a ordem de pesquisa padrão. Por exemplo, se você estiver criando uma página de resultados de pesquisa para um aplicativo de comércio eletrônico, precisará decidir se classificará a saída de acordo com a melhor correspondência / preço / prazo de entrega.

28. Compartilhar / Marcar

Permita que os usuários compartilhem e adicionem aos favoritos o que encontrarem.

Opções de Curtir, Marcar e Compartilhar no App AE de Martin Berbesson

29. Formulário vazio para "Sem resultados"

O que os usuários verão se estiverem procurando algo, mas não há resultados de pesquisa? A tela "Sem resultados" não deve significar o fim. Diga ao usuário que passo a seguir.

O aplicativo Google Flights oferece aos usuários uma limpeza de todos os filtros para encontrar voos

8. AppStore / GooglePlay

30. Ícone para o aplicativo

Você precisa criar um ícone atraente para o seu aplicativo, algo que reflita a essência do seu produto e desperte interesse entre os usuários em potencial.