5 dicas de UX móvel que todo designer deve seguir

Há muito foco agora na correção de problemas móveis, incluindo problemas de desempenho móvel, pois os usuários continuam grudados em seus dispositivos menores.

Normalmente, esses problemas são resolvidos após o lançamento de um site, quando os erros começam a aparecer nos relatórios do Google Search Console sobre usabilidade em dispositivos móveis. Embora as equipes de desenvolvimento possam resolver esses erros com frequência, é muito mais eficiente para os designers entender e implementar as melhores práticas de UX móvel desde o início.

A velocidade móvel também é um grande fator para a otimização do mecanismo de pesquisa, portanto, designers e desenvolvedores precisam considerar como tudo, desde animação a imagens, afetará essas métricas.

Concentre-se no espaçamento dos elementos de design

Espaçar os elementos de design não é apenas criar um fluxo visual agradável; trata-se de tornar seu site fácil de usar para todos os visitantes, incluindo aqueles em dispositivos móveis.

Um erro comum de usabilidade móvel no Google Search Console é que “elementos clicáveis ​​estão muito próximos”.

Isso cria uma experiência frustrante para os visitantes em dispositivos menores, onde eles clicam inadvertidamente em elementos enquanto tentam navegar no site.

Do ponto de vista do design de UX móvel, botões e elementos interativos ou clicáveis ​​precisam ser grandes o suficiente e colocados longe o suficiente no design.

Em um desktop, os visitantes estão navegando com um mouse, que é uma ferramenta muito precisa, enquanto no celular, a maioria dos usuários está usando os polegares. Os polegares geralmente são maiores do que o pequeno cursor do mouse e podem ser um pouco mais desajeitados, especialmente se você estiver tentando navegar em um site enquanto caminha ou realiza várias tarefas.

Portanto, você precisa projetar espaço suficiente entre botões e elementos, para que o visitante não tenha uma experiência móvel frustrante.

Você também precisa considerar a acessibilidade e como os visitantes podem estar segurando o dispositivo menor. Alguns podem estar segurando o telefone ou tablet com a mão esquerda, outros com a mão direita ou alguns com as duas mãos. O design do site precisa ser fácil de navegar, independentemente disso.

Por fim, os visitantes também estão usando o polegar para rolar no dispositivo e percorrer a página da web, portanto, você precisará garantir que não haja grandes elementos clicáveis ​​​​que eles possam tocar inadvertidamente durante a rolagem.

Garanta a legibilidade do texto e da fonte

Além do espaçamento, outro erro comum de usabilidade móvel nos relatórios do Google Search Console é “o texto é muito pequeno para ler”. Embora um desenvolvedor possa ajustar alguns aspectos do dimensionamento da fonte, existem várias práticas recomendadas de UX que as equipes de design podem implementar desde o início em termos de legibilidade.

Selecionar um tipo de letra que seja facilmente legível é o primeiro lugar para começar. Lembre-se de que os usuários geralmente estão andando ou realizando várias tarefas ao ar livre enquanto estão em seus dispositivos menores e podem estar em cenários não ideais ao tentar navegar em seu site.

Criar uma hierarquia visual em termos de tamanho de fonte é outra maneira de ajudar esses usuários móveis a digitalizar e entender rapidamente o conteúdo da página. Também ajuda em dispositivos móveis ou tablets, onde os textos do título podem passar para a próxima linha. Utilizar a mesma fonte e tamanhos em toda a página pode causar confusão em torno do significado da página.

Em seus designs, você também pode aumentar a altura da linha entre as linhas de texto para aumentar a legibilidade de uma página.

Depois de decidir a fonte e o tamanho, você também precisa considerar as taxas de contraste das cores.

Como os visitantes podem estar em ambientes internos ou externos ou com pouca iluminação, é importante seguir os padrões para o contraste entre as cores de fundo e de primeiro plano.

Isso também desempenha um papel na acessibilidade e na criação de um site compatível com ADA. De acordo com as normas WCAG 2.1, recomenda-se uma relação de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande.

Certifique-se de que os cursores e a animação sigam as práticas recomendadas

A maioria dos designs da web hoje incorporam algumas micro-animações e componentes interativos; é uma solicitação comum de clientes em um processo de redesenho.

Adicionar movimento a um site geralmente é uma colaboração entre designers e desenvolvedores, pois a animação pode afetar o tempo de carregamento da página e causar QC sem fim se não for bem codificada. Ao selecionar animações no processo de design, você também precisa planejar se essas interações ocorrerão em dispositivos móveis.

Devido a problemas de desempenho, é comum desativar animações complexas e planos de fundo de vídeo em dispositivos móveis, pois podem diminuir o tempo de carregamento do site, especialmente para visitantes em uma rede móvel. Esse tipo de alteração tem sido cada vez mais comum desde 2018, quando a velocidade da página mobile se tornou um dos fatores de ranqueamento do Google.

Em geral, a animação e a interação devem ser usadas de maneira sutil para apoiar a experiência do usuário e não devem distrair o visitante. Nem deve ser um ingrediente essencial para ajudar um visitante a completar uma ação.

Os hover overs são outro elemento de design comum que pode parecer diferente no celular. Na área de trabalho, passar o mouse sobre ele se refere a um objeto ou imagem que altera ou revela texto quando o visitante passa o mouse sobre ele. Embora isso funcione bem em dispositivos grandes, lembre-se de que, em dispositivos móveis, os visitantes não estão usando um mouse, o que significa que o visitante terá que tocar para ver o cursor do mouse.

Portanto, se você tiver uma caixa ou imagem que revele texto ao passar o mouse, verifique se a mensagem não é crítica para as etapas dos visitantes.

Ao discutir animação, você e sua equipe de desenvolvimento também podem revisar as práticas recomendadas do Google para diretrizes de animação da Web para evitar erros relacionados a flash ou tecnologia desatualizada.

Planeje o posicionamento de pop-ups e elementos de terceiros

Sempre houve muito debate sobre usar formulários pop-up em sites e implementá-los em dispositivos móveis.

Um argumento para evitar formulários pop-up em dispositivos móveis é que pode ser mais difícil para um visitante fechar o formulário ou a mensagem. Desde janeiro de 2017, o Google alertou contra o uso de intersticiais intrusivos que impedem que todo o conteúdo de uma página fique visível para um visitante, pois são especialmente problemáticos em dispositivos móveis.

Você pode avaliar todos esses elementos em discussões com clientes sobre formulários pop-up e decidir sobre a melhor experiência do usuário para o design do formulário.

Ao adotar uma abordagem de design inteligente para dispositivos móveis, é útil considerar como os elementos serão colocados em dispositivos menores. Por exemplo, um botão fixo no lado direito da tela que permanece enquanto o visitante rola pode funcionar bem na área de trabalho, mas esses tipos de elementos fixos podem tornar o espaço de visualização ainda menor em um dispositivo móvel.

Embora alguns elementos, como bate-papo ao vivo e widgets de acessibilidade, possam ser adicionados no último momento, planejar isso no início do processo de design da web pode ajudar a evitar uma interface caótica para os visitantes.

O bate-papo ao vivo se tornou uma ferramenta extremamente popular e os widgets de bate-papo geralmente são encontrados no canto inferior direito ou esquerdo do design. Oferecer recomendações sobre o posicionamento desses elementos, incluindo-os em modelos de design, ajudará você a prever quaisquer problemas com itens sobrepostos.

Reconsidere o design e o posicionamento do formulário

Preencher e enviar um formulário em um dispositivo móvel ou tablet menor pode ser uma tarefa chata para os visitantes. É por isso que é fundamental considerar opções alternativas aos formulários no design do site.

Ao criar a navegação do menu móvel, considere incluir um número de telefone "clique para ligar" no cabeçalho, para que os visitantes possam acessar facilmente a empresa.

Ao projetar todos os formulários no site, é uma prática recomendada para computadores e dispositivos móveis reduzir ao máximo o número de campos de formulário – e indicar claramente o que é um campo obrigatório.

Uma dica para a experiência móvel de um formulário é criar rótulos de formulário e não apenas utilizar texto de espaço reservado para os campos do formulário. Um visitante em um dispositivo móvel pode ser facilmente interrompido por outras notificações e interações, de modo que pode ser interrompido no processo de preenchimento do formulário e esquecer o texto do espaço reservado listado. Fornecer rótulos de formulário claros e mensagens de erro também é importante para a conformidade com a ADA.

Por fim, o posicionamento do formulário na página e como isso pode ser ajustado com o layout responsivo é fundamental, pois o posicionamento do formulário pode afetar as conversões.

Conclusão

Dado o foco maior no desempenho móvel, colocar algumas das ideias acima em prática ao projetar seus projetos economizará tempo e frustração à medida que esses projetos forem lançados. Existem dicas adicionais de UX móvel que ajudaram seu fluxo de design? Deixe um comentário abaixo!

Próximo: Desenvolva seu conjunto de habilidades de web design com cursos online úteis!

O design de UX móvel é apenas uma das muitas coisas que você precisa saber como um web designer profissional. Embora nem sempre haja muito tempo disponível para aprimorar suas habilidades, fazer um curso on-line é uma ótima maneira de garantir que você continue seus estudos.

Este artigo oferece uma lista abrangente de alguns dos melhores cursos online para web designers (+ quanto custam) para que você não precise gastar ainda mais tempo pesquisando todas as opções disponíveis!