Princípios Fundamentais do Design de UX para Dispositivos Móveis

Design de UX para Dispositivos Móveis Princípios Fundamentais Design de UX para dispositivos móveis A adoção de smartphones e sua influência na vida das pessoas estão crescendo a uma taxa exponencial Em 2016 mais de 28 da população do mundo usava um smartphone As estatísticas prevêem que o número de usuários globais de smartphones chegue a 61 bilhões até 2020 Design de UX para dispositivos móveis Os smartphones se tornaram uma fonte de acesso a todos os tipos de informações porque são facilmente acessíveis a qualquer hora em qualquer lugar Além da comunicação e coleta de informações serviços e recursos como bancos pedidos rastreamento de assistência médica e até segurança em casa tornaramse parte da experiência do smartphone Design de UX para dispositivos móveis O mais importante a ser lembrado ao projetar um aplicativo móvel é garantir que ele seja útil e intuitivo Se o aplicativo não for útil ele não terá um valor real para o usuário e ninguém terá motivos para usálo Se o aplicativo for útil mas exigir muito tempo e esforço as pessoas não se incomodarão em aprender como usálo Design de UX para dispositivos móveis Um bom design de interface do usuário aborda esses dois problemas de design Para serem úteis os aplicativos móveis devem ser centrados no usuário Os usuários instalam seu aplicativo porque precisam resolver um problema Pense no que seus usuários tentarão alcançar e se concentre em seus objetivos principais remova todos os obstáculos que encontrarem Você deve trazer clareza à sua interface do usuário Não deve haver espaço para confusão na sua interface do usuário Design de UX para dispositivos móveis Mas projetar uma experiência móvel utilizável e agradável é mais do que apenas uma boa estética Para provocar reações positivas você precisa satisfazer os princípios básicos de usabilidade do design de interface Design de UX para dispositivos móveis Aprendizagem com que facilidade os usuários iniciantes concluem tarefas básicas Eficiência a rapidez com que os usuários executam tarefas básicas depois de aprenderem o design Memorabilidade a capacidade dos usuários de se lembrar de como usar o sistema Erros a quantidade e a gravidade dos erros que os usuários cometem e com que facilidade podem corrigilos Satisfação Quão agradável foi a experiência de usar o design 1 Remover a desordem A atenção do usuário é um recurso precioso e deve ser alocado de acordo A confusão de interface sobrecarrega o usuário com muita informação cada botão imagem e linha de texto adicionados tornam a tela mais complicada 1 Remova a desordem 1 Remova a desordem Há uma famosa citação de Antoine de SaintExupéry que diz A perfeição é alcançada quando não há mais o que tirar É importante se livrar de qualquer coisa em um design para dispositivos móveis que não seja absolutamente necessária pois reduzir a desordem melhora a compreensão 1 Remova a desordem Uma regra simples uma ação principal por tela Cada tela projetada para o aplicativo deve suportar uma única ação de valor real para a pessoa que o usa Isso facilita o aprendizado o uso e a adição ou desenvolvimento quando necessário Cem telas claras são preferíveis a uma única tela desordenada 1 Remova a desordem Veja o Uber por exemplo O Uber sabe que o objetivo do usuário que usa o aplicativo é pegar um táxi O aplicativo não sobrecarrega o usuário com outras informações ele detecta automaticamente a localização dos usuários com base nos dados GEO e a única coisa que os usuários precisam fazer é selecionar um local onde ele se encontra 1 Remova a desordem Uma regra simples uma ação principal por tela Uma das regras básicas do bom UX é reduzir o esforço que os usuários precisam fazer para conseguir o que querem 2 Tornar a Navegação Intuitiva Ajudar os usuários a navegar deve ser uma alta prioridade para todos os aplicativos Uma boa navegação deve parecer uma mão invisível que guia o usuário ao longo de sua jornada Afinal mesmo o recurso mais interessante ou o conteúdo mais atraente é inútil se as pessoas não o encontrarem Os princípios de boa navegação móvel são 2 Tornar a Navegação Intuitiva Os princípios de boa navegação móvel são A navegação móvel deve ser coerente 2 Tornar a Navegação Intuitiva Os princípios de boa navegação móvel são A navegação móvel deve ser consistente para o aplicativo Não mova os controles de navegação para um novo local ou oculteos em páginas diferentes Isso apenas desorienta o usuário 2 Tornar a Navegação Intuitiva Os princípios de boa navegação móvel são A navegação móvel deve comunicar a localização atual Falha ao indicar a localização atual é provavelmente o erro mais comum de se ver nos menus de aplicativos Onde estou é uma das perguntas fundamentais que os usuários precisam responder para navegar com sucesso 2 Tornar a Navegação Intuitiva A capacidade de aprendizado do seu design é essencial para o seu sucesso Os usuários devem poder intuitivamente navegar pelo aplicativo por caminhos claros e concluir todas as tarefas principais sem exigir explicações 2 Tornar a Navegação Intuitiva As jornadas do usuário devem ser lógicas o suficiente para que uma tarefa seja realizada em um único aplicativo Não faça com que os usuários tenham que alternar entre páginas e aplicativos para fazer algo Simplifique o processo e tenha todas as informações necessárias prontamente disponíveis 3 Crie uma experiência perfeita Você não deve pensar em um design para dispositivos móveis isoladamente Criar uma experiência perfeita em dispositivos móveis computadores e tablets é muito importante para seus usuários 3 Crie uma experiência perfeita Apple Music 3 Crie uma experiência perfeita Veja o Apple Music por exemplo Você pode configurar uma lista de reprodução no seu Mac e ela estará disponível instantaneamente no seu iPhone A Apple reconhece que embora o design do aplicativo móvel seja muito importante a criação de uma experiência perfeita no iPhone no desktop e no iPad é tão importante para os usuários 4 Projete alvos de toque amigáveis Alvos de toque menores são mais difíceis de atingir do que os maiores Ao projetar interfaces para dispositivos móveis é melhor aumentar seus objetivos o suficiente para facilitar o acesso dos usuários 4 Projete alvos de toque amigáveis Crie controles que meçam o tamanho de 7 a 10 mm para que possam ser precisamente tocados com um dedo Esse alvo permite que o dedo do usuário se ajuste confortavelmente dentro do alvo As bordas do alvo são visíveis quando o usuário toca nele Isso fornece a eles um feedback visual claro de que estão atingindo o alvo com precisão Verifique também se há uma boa quantidade de espaçamento entre os pontos de toque 5 O conteúdo do texto deve ser legível Quando comparados aos computadores de mesa os smartphones possuem telas relativamente pequenas o que significa que um dos desafios do design para dispositivos móveis é incluir muitas informações em uma pequena interface do usuário Você pode ter a tentação de esmagar tudo para um design móvel na tentativa de fornecer o máximo de informações possível Mas você deve resistir à tentação 5 O conteúdo do texto deve ser legível Uma regra prática para dispositivos móveis o texto deve ter pelo menos 11 pontos para que seja legível a uma distância de visualização típica sem o zoom 5 O conteúdo do texto deve ser legível Melhore a legibilidade aumentando a altura da linha ou o espaçamento das letras Um espaço em branco bom e generoso pode fazer com que algumas das interfaces mais confusas pareçam convidativas e simples 6 Tornar os elementos da interface claramente visíveis Você deve usar cores e contraste para ajudar os usuários a ver e interpretar seu conteúdo Escolha cores primárias secundárias e de destaque para seu aplicativo que suportam usabilidade Garanta um contraste de cores suficiente entre os elementos para que usuários com baixa visão possam ver e usar seu aplicativo 6 Tornar os elementos da interface claramente visíveis Verifique se há amplo contraste entre a cor da fonte e o fundo para que o texto fique legível O W3C recomenda as seguintes taxas de contraste para o corpo do texto e o texto da imagem O texto pequeno deve ter uma taxa de contraste de pelo menos 45 1 no plano de fundo O texto grande com 14 pontos em negrito 18 pontos em regular e acima deve ter uma taxa de contraste de pelo menos 3 1 no fundo 6 Tornar os elementos da interface claramente visíveis O texto que não atende às recomendaçõ es da taxa de contraste de cores é difícil de ler em segundo plano 6 Tornar os elementos da interface claramente visíveis É extremamente importante ter contraste suficiente no celular os usuários podem estar ao ar livre com baixo contraste na tela por causa da iluminação 6 Tornar os elementos da interface claramente visíveis O cinza neutro desta página é agradável ao olhar em ambientes fechados mas ao ar livre não parece tão bom 6 Tornar os elementos da interface claramente visíveis Ícones ou outros elementos críticos também devem usar as taxas de contraste recomendadas acima 7 Projetar Controles com base na posição da mão Steven Hoober em sua pesquisa sobre o uso de dispositivos móveis descobriu que 49 das pessoas confiam em um dedo para fazer as coisas em seus telefones 7 Projetar Controles com base na posição da mão Na figura abaixo o diagrama que aparece nas telas dos telefones celulares são gráficos de alcance aproximados nas quais as cores indicam quais áreas um usuário pode alcançar com o polegar para interagir com a tela 7 Projetar Controles com base na posição da mão Verde indica a área que um usuário pode alcançar facilmente amarelo uma área que requer alongamento e vermelho uma área que exige que os usuários mudem a maneira como estão segurando um dispositivo 7 Projetar Controles com base na posição da mão 7 Projetar Controles com base na posição da mão A posição e a aderência das mãos devem influenciar o posicionamento dos controles em um design móvel É importante colocar no menu de nível superior controles usados com frequência e ações comuns na zona verde da tela porque eles são alcançados confortavelmente com interações de um polegar 7 Projetar Controles com base na posição da mão Coloque ações negativas como excluir ou apagar na zona vermelha difícil de alcançar porque você não deseja que os usuários as toquem acidentalmente 8 Minimize a necessidade de digitação Mantenha os formulários o mais curto e simples possível removendo todos os campos desnecessários 8 Minimize a necessidade de digitação Use dados de preenchimento automático e personalizados quando apropriado para que os usuários precisem inserir apenas o mínimo de informações 9 Teste seu Design Com muita frequência um design para celular fica ótimo quando visualizado em uma tela grande de área de trabalho mas não funciona quase a metade quando é testado em um celular real Mesmo o UX mais minuciosamente considerado acabará por conter alguma falha invisível quando colocado no mundo real 9 Teste seu Design É por isso que é tão importante testar seu aplicativo com usuários reais em uma variedade de dispositivos móveis Você deve pedir aos usuários reais que realizem tarefas regulares somente depois de ver o desempenho realmente do design Trate seu aplicativo como uma entidade em constante evolução usando dados de análises e feedback do usuário para melhorar constantemente a experiência 9 Teste seu Design É por isso que é tão importante testar seu aplicativo com usuários reais em uma variedade de dispositivos móveis Você deve pedir aos usuários reais que realizem tarefas regulares somente depois de ver o desempenho realmente do design Trate seu aplicativo como uma entidade em constante evolução usando dados de análises e feedback do usuário para melhorar constantemente a experiência 10 Priorização de conteúdo A atenção humana é muito curta Tipo muito muito curto 8 segundos para ser exato Isso torna extremamente importante atrair a atenção de seus usuários nos primeiros segundos de interação com seus produtos 10 Priorização de conteúdo Exiba apenas o conteúdo e as funcionalidades essenciais que o usuário precisa O espaço limitado disponível em uma tela pequena torna cada elemento adicional que você adiciona impressionante aos seus usuários O conteúdo secundário deve estar disponível através de um menu As listas de menus curtas ou longas devem ter divulgação progressiva e terminologia simples para não confundir seus usuários Para reduzir ainda mais a desordem use ícones em vez de texto sempre que possível Priorize o conteúdo e lembrese de que as notificações para novos conteúdos devem aparecer sem interromper o conteúdo principal 10 Priorização de conteúdo 10 Priorização de conteúdo Exiba apenas o conteúdo e as funcionalidades essenciais que o usuário precisa O espaço limitado disponível em uma tela pequena torna cada elemento adicional que você adiciona impressionante aos seus usuários O conteúdo secundário deve estar disponível através de um menu As listas de menus curtas ou longas devem ter divulgação progressiva e terminologia simples para não confundir seus usuários Para reduzir ainda mais a desordem use ícones em vez de texto sempre que possível Priorize o conteúdo e lembrese de que as notificações para novos conteúdos devem aparecer sem interromper o conteúdo principal