Aprender / Guias / O que é UX Design
Como utilizar os insights do usuário para aperfeiçoar o seu UX Design para dispositivos móveis
Imagine se o seu carro pudesse fazer curvas para a direita, mas não para a esquerda. Ter apenas uma parte da experiência de dirigir seria muito frustrante, certo? É assim que os seus clientes se sentem quando a versão do seu site para desktop é maravilhosa, mas o seu UX design para dispositivos móveis não funciona.
Como o seu UX design para dispositivos móveis constitui uma parte essencial da experiência do cliente, ele não pode ficar em segundo plano.
Conscientemente ou não, os visitantes de sites em dispositivos móveis julgam tudo aquilo com o que interagem. Um site difícil de navegar com pop-ups irritantes afasta as pessoas, enquanto uma página intuitiva e envolvente atrai os clientes e acaba criando uma afinidade com a marca.
Este guia aborda
6 maneiras de melhorar o UX design móvel
Criar um site que seja fácil e agradável de usar em um dispositivo móvel é uma parte essencial da experiência do cliente, e isso é algo que afeta o engajamento, a fidelidade do cliente e, principalmente, as conversões.
Aprimore o seu UX design para dispositivos móveis
Identificando o que impulsiona as visitas ao site originadas de celulares e de outros dispositivos móveis (como um tablet), desde as fontes de referência até as metas do usuário
Removendo barreiras que impedem o engajamento e a conversão, como botões quebrados ou uma experiência de navegação confusa
Pesquisando os ganchos que fecham uma venda com base nas personas de usuário dos seus clientes
Comparando a maneira como os usuários de dispositivos móveis e de desktop usam o seu site, para adaptar a experiência a todos os diversos tipos de dispositivo sendo utilizados para acessar o site
Priorizando o design acessível, para que todos os visitantes possam usar a versão móvel do seu site sem problemas
Medindo os parâmetros de Web Analytics e iterando seus projetos de UX
6 maneiras de otimizar seu UX design para dispositivos móveis
O UX design para celulares é o processo de criação de um site que seja fácil e agradável de usar através de um celular ou qualquer outro dispositivo móvel. É uma subseção importante do UX design, pois 57% do tempo que as pessoas passam navegando na Internet é de fato através de um dispositivo móvel.
Embora os mesmos conceitos básicos de UX design se apliquem aos sites para celular e para desktop, os visitantes podem interagir de forma diferente ao navegar no desktop e no celular.
Como a maneira como seus clientes usam os sites para celular e desktop varia, você precisa testá-los e ajustá-los separadamente—mas vale muito a pena investir tempo e recursos neste processo. Veja por quê:
Agora que você sabe por que o UX design para dispositivos móveis é importante, vamos nos aprofundar nas técnicas para otimizá-lo.
1. Identifique o que impulsiona as visitas a partir de celulares e de outros dispositivos móveis
Os motivadores são o motivo da visita, e a maneira como os visitantes chegam ao seu site. O caminho que as pessoas percorrem para chegar ao seu site e o que elas estão buscando e o que querem fazer lá podem variar entre desktop e celular, portanto, você precisa projetar o seu site para celular dando prioridade à exibição das informações relevantes.
Aqui estão algumas maneiras de identificar o que atrai os visitantes que chegam ao seu site através do celular:
Encontre suas páginas de destino mais populares para visitas com dispositivos móveis, e priorize as melhorias de UX nelas
Assista a gravações—reproduções em tempo real das interações dos visitantes—para saber como os usuários se movimentam pelo seu site e por quais páginas e conteúdos eles mais se interessam
Teste uma página "comece aqui" ou botões de destaque para categorias de páginas, e analise o que é mais popular entre os visitantes que estão acessando através de dispositivos móveis
💡 Dica avançada: use pesquisas compatíveis com a UX otimizada para dispositivos móveis para descobrir mais sobre os seus clientes. A ferramenta
Surveys da Hotjar permite que você obtenha feedback direto dos clientes para encontrar maneiras de melhorar o seu UX design, mas, se você não tomar cuidado, sua pesquisa móvel na página pode acabar sabotando a experiência que você deseja melhorar.
Aqui estão algumas maneiras de usar as pesquisas sem ignorar os princípios de UX design para dispositivos móveis:
Use pesquisas embutidas já existentes na sua página para dispositivos móveis ao invés de um pop-up que cobre toda a tela do usuário
Envie uma pesquisa aos clientes por e-mail perguntando sobre a experiência deles com o seu site desenvolvido para celular
Se você usar uma pesquisa de pop-up, teste o design em todos os dispositivos para garantir que o botão "X" seja perceptível e fácil de usar
2. Remova as barreiras ao engajamento e à conversão
Uma barreira é qualquer coisa que faz com que os visitantes que estão utilizando dispositivos móveis abandonem o site, como um botão que não funciona ou informações ausentes. Esses momentos de parada brusca afetam a sessão do visitante atual, e acabam deixando uma impressão duradoura que impede que os clientes em potencial retornem ao site no futuro.
Bugs, design defeituoso e frustração podem acontecer às vezes, portanto, sua melhor aposta é estar atento às barreiras que mais precisam de sua atenção. Veja como:
Filtre as gravações para cliques de raiva e retornos rápidos que sinalizam uma frustração ou confusão por meio de cliques repetidos ou de um retorno rápido a uma página anterior
Use um widget de feedback na página para encontrar as páginas com as quais os visitantes não estão satisfeitos
Analise mapas de calor que mostram onde a maioria dos visitantes rola, clica e se move pela tela, para que você possa encontrar elementos críticos que eles estejam ignorando, ou designs desnecessários que você pode excluir
🏃 Está com pressa? Experimente estas correções rápidas para problemas comuns de UX móvel.
As dicas acima o ajudam a encontrar barreiras específicas para o seu público e para a versão do site para dispositivos móveis, mas há outros problemas comuns em sites para celular que podem ser resolvidos para melhorar a sua UX.
Use o teste de compatibilidade com dispositivos móveis do Google para encontrar elementos de design não responsivos
Otimize os arquivos de imagem com o Smoosh
Crie alvos de toque com pelo menos 44 pixels para botões e links, e defina o preenchimento do botão e do link para pelo menos 8 pixels de cada lado
Adicione parâmetros aos pop-ups, como um número mínimo de páginas visitadas antes do pop-up ser exibido, para garantir que eles sejam exibidos somente aos visitantes que realmente estejam interessados.
Substitua o conteúdo de reprodução automática por uma imagem estática para evitar o esgotamento da bateria dos dispositivos móveis e o consumo excessivo de dados do plano de internet do usuário
3. Pesquise os ganchos que fecham a venda com sucesso
Os ganchos são aqueles elementos que persuadem os usuários a agirem ou a fazerem uma compra, portanto, você precisa saber o que repercute nos usuários de dispositivos móveis para otimizar o seu design e, consequentemente, aumentar as conversões.
Aqui estão algumas maneiras de encontrar ganchos:
Identifique os clientes que compraram pelo celular (ou tablet) e envie a eles um link para uma pesquisa pós-compra para descobrir o que eles gostaram na experiência, e o que quase os impediu de concluir sua compra
Realize testes A/B para encontrar variantes de UX design que aumentam as vendas e, em seguida, analise as gravações dessas sessões para entender por que o design funcionou
Entreviste clientes para descobrir detalhes sobre suas metas e objetivos, desafios e preferências e, em seguida, aplique a mesma terminologia utilizada por eles em seus designs
💡Dica avançada: descubra mais sobre os seus clientes para chegar ao UX design vencedor para dispositivos móveis.
Compreender os dados psicográficos—aqueles que descrevem quem são os seus clientes além dos dados demográficos clássicos (como idade) ajudará você a criar UX designs para celular com os quais seus visitantes adorarão interagir.
Por exemplo, a marca e o layout de um site móvel para uma empresa de equipamentos para atividades ao ar livre seriam muito diferentes de um site para um prédio de apartamentos de luxo na cidade, porque as metas e as prioridades de cada grupo de clientes variam.
Aqui estão alguns exemplos de como os detalhes do cliente influenciam o UX design:
Personalidade: os extrovertidos podem preferir fotos em grupo, enquanto os introvertidos podem querer imagens de momentos a sós
Interesses: pessoas interessadas em cultura pop podem se conectar com uma empresa de CPG (em Português: empresa de bens de consumo) que usa referências de filmes no seu design
Crenças: uma coleção de logotipos de organizações para as quais uma empresa faz doações pode atrair um público socialmente consciente
Valores: compradores com orçamento limitado podem ser atraídos com o uso de imagens de produtos contendo adesivos de desconto com uma porcentagem, no caso de pedidos em massa ou assinaturas
4. Compare as expectativas do fluxo de usuários com a realidade
Até mesmo as decisões de UX mais centradas no cliente ainda são, de certa forma, um palpite—você precisa ver como os usuários interagem na realidade, e comparar com as suas expectativas.
As ferramentas de experiência do usuário oferecem uma visão em tempo real das interações em sites móveis:
Aplique filtros nos funis para exibir as sessões em celulares e tablets e visualizar onde os usuários estão abandonando o site e, em seguida, compare estes dados com as visitas originadas de computadores de mesa
Analise as gravações de visitas originadas de celulares e tablets para saber como os visitantes navegam no seu site através do celular, em comparação com a navegação através do desktop
Use mapas de calor para descobrir com quais elementos de navegação os visitantes móveis mais interagem, e use isso para priorizar o seu roteiro de design
Como a re:member otimizou seu site para dispositivos móveis
A re:member, uma das principais empresas do mercado de crédito da Escandinávia, usou as ferramentas de análise de comportamento e de UX da Hotjar para aumentar as conversões em 43%. Aqui está o processo de cinco etapas que eles utilizaram para identificar e corrigir um problema de UX móvel que você também pode reproduzir na sua empresa.
Assistir às gravações: a re:member percebeu que os usuários do site para dispositivos móveis passavam o mouse sobre a seção "benefícios" na página de inscrição e, muitas vezes, rolavam o formulário de inscrição para cima e para baixo, sem preenchê-lo
Analisar mapas de cliques: os visitantes tentaram clicar na seção de benefícios e esperavam que os marcadores (pontos de destaque) fossem uma área expansível, que caso clicassem, iriam expandir, revelando mais detalhes sobre cada ponto
Comparar o comportamento do usuário entre as fontes de tráfego: a equipe do re:member levou a análise mais além, e comparou as interações de UX móvel entre as fontes de tráfego
Criar uma hipótese: eles perceberam que os usuários (especialmente os de links de afiliados) queriam obter mais informações sobre os benefícios do aplicativo antes de tomarem uma decisão
Testar uma solução: a equipe moveu a seção "benefícios" para a parte superior da versão da página para dispositivos móveis, e criou uma seção expansível na versão para desktop
A Re:member descobriu que os detalhes adicionais do cartão incentivavam os visitantes a preencherem um formulário de inscrição
5. Priorize o design acessível
Você quer que todos aproveitem o seu site, portanto, precisa considerar a acessibilidade do UX design. Deficiências visuais, mentais ou físicas permanentes e até mesmo lesões temporárias, como uma mão quebrada, afetam a forma como os clientes usam o seu site.
Aqui estão algumas dicas de acessibilidade para incorporar no seu design:
Coloque rótulos no código para que o conteúdo dinâmico funcione com leitores de tela
Analise os mapas de calor para descobrir quais cabeçalhos de navegação os visitantes usam com maior frequência, e quais eles usam com menor frequência, para que você possa exclui-los, simplificando assim o design
Use o WAVE para verificar a acessibilidade das fontes
Verifique o contraste de cores do seu site
Não se baseie em cores para transmitir uma mensagem, como verde para "bom" e vermelho para "ruim"—adicione também símbolos ou texto
💡 Dica avançada: converse com os clientes sobre a experiência móvel deles.
Converse especialmente com aqueles que possuem deficiências que afetam a forma como eles usam o seu site, para obter uma nova perspectiva sobre a acessibilidade da sua UX.
Envie um e-mail aos seus clientes com uma breve pesquisa para recrutar participantes para testes de acessibilidade e, em seguida, faça uma entrevista para ouvir sobre suas experiências com o seu site para dispositivos móveis.
Personalize as suas perguntas da pesquisa de recrutamento para encontrar participantes de um segmento específico
6. Medir e iterar
Após concluir a implementação das estratégias anteriores, você precisa medir o desempenho delas. As métricas de sites para dispositivos móveis sinalizam possíveis problemas e páginas de alto desempenho, o que significa que elas o ajudarão a encontrar páginas para iterar e designs para duplicar.
Veja a seguir o que medir para monitorar o seu UX design para dispositivos móveis:
Taxa de checkout e de abandono de carrinho: descubra em quais momentos na UX móvel os clientes decidem abandonar uma compra
Taxa de conversão: compare taxas de conversão entre dispositivos e também ao longo do tempo, para encontrar problemas de UX
Net Promoter Score® (NPS): entenda a probabilidade de os clientes móveis recomendarem você para seus amigos
Satisfação do cliente (CSAT): avalie a satisfação geral do cliente para avaliar como os usuários se sentem em relação ao seu UX design
💡Dica avançada: obtenha uma visão avançada das métricas de UX com a nossa ferramenta Hotjar Trends.
A análise detalhada do comportamento do usuário, como uma única gravação de uma visita realizada através de um dispositivo móvel, ajuda na otimização precisa de detalhes do seu UX design móvel—mas você também precisa analisar o desempenho em um nível mais avançado e com mais precisão.
A nossa ferramenta Trends permite a visualização dos padrões de comportamento do usuário, para que você possa obter insights valiosos sobre a experiência geral do cliente. Por exemplo, você pode verificar se os retornos rápidos no seu site para dispositivos móveis tendem a aumentar, e em seguida pode rapidamente identificar páginas com informações desatualizadas ou elementos de design quebrados.
5 exemplos incríveis de UX design para celular para você conhecer melhor
O melhor UX design móvel é específico para a sua empresa e seu público—algo que leva um certo tempo para ser aperfeiçoado. Ainda assim, observar exemplos inspiradores de um excelente UX design para dispositivos móveis oferece um ponto de partida e uma maneira de aprender sem ter que passar por um longo processo de tentativa e erro.
1. A pesquisa integrada do Duolingo
O site para dispositivos móveis do Duolingo pergunta aos novos usuários como eles ficaram sabendo sobre a plataforma, e por que estão interessados em usar seus produtos para o aprendizado de idiomas
Por que funciona:
O site do Duolingo identifica os motivadores do visitante, perguntando como eles chegaram à plataforma, através de seu dispositivo móvel, ou seja, como ouviram falar da empresa
Todas as opções de resposta aparecem em uma só página, sem rolagem
Há ícones facilmente reconhecíveis para as opções, bem ao lado do texto
Há apenas uma pergunta por página para não sobrecarregar os visitantes
2. Prioridades do Hotel Tonight na versão para dispositivos móveis
O Hotel Tonight coloca detalhes de referência rápida sobre hotéis na parte superior da página do celular, como, por exemplo, a nota dada pelos hóspedes ao estabelecimento, e a localização geográfica do mesmo
Por que funciona:
O site para dispositivos móveis do Hotel Tonight coloca o mapa do hotel na parte superior—ao invés de colocar numa posição mais inferior na página, como ocorre na versão para desktop, o que é perfeito para clientes que estão em movimento e usando o seu celular para encontrar hotéis
Os visitantes podem construir uma opinião mais rápida sobre os estabelecimentos graças ao texto "Por que gostamos dele", posicionado no alto da página
O botão "Reserve agora" com o preço por noite está sempre visível, para que os visitantes não precisem rolar a tela para cima ou para baixo para encontrá-lo.
3. Feedback discreto da Hotjar
O widget de feedback da Hotjar não aparece automaticamente e nem cobre toda a página do site para dispositivos móveis
Por que funciona:
O widget de feedback da Hotjar só abre quando um visitante clica nele—sem a inconveniência de pop-ups intrusivos
O botão 'X' no primeiro pop-up está visível, e o pop-up não bloqueia a tela
A caixa de texto permite que os visitantes adicionem mais comentários
4. Hierarquia de conteúdo da InVision
O blog da InVision permite que o conteúdo ocupe o máximo de espaço possível no site para celular, eliminando as barras laterais que causam distração
Por que funciona:
O foco do site da InVision é apenas o conteúdo—eliminando as distrações, e a fonte é a maior possível
Há uma barra de progresso sutil na parte superior da página para que os vistantes do site saibam em que ponto do conteúdo eles se encontram naquele momento
Há um espaço em branco entre os parágrafos e entre as linhas para facilitar a leitura.
5. Os detalhes encantadores do site da Spotahome
A Spotahome usa uma ilustração sutil na lateral do site para celular que abre um questionário a ser preenchido pelos novos usuários, para facilitar a busca por uma moradia
Por que funciona:
O gato na lateral do site para celular da Spotahome é encantador. A princípio, você não percebe que ele está ali, mas ele é bonito demais para ser ignorado.
O pequeno questionário parece uma aventura que se desenrola na frente dos olhos do usuário, ao mesmo tempo que constitui um elemento motivador de grande sucesso da empresa
A barra de progresso permite que os visitantes saibam em que ponto do processo se encontram, em tempo real
Um ótimo UX design móvel começa com a empatia
O comportamento do usuário e as interações transformam o seu site: de uma coleção enorme de códigos para uma experiência incrível—portanto, é fundamental incluir os clientes nos seus esforços de UX design para dispositivos móveis. Aprender com os clientes ajuda você a tomar decisões de design relevantes, enquanto reduz as suas suposições e as substitui por fatos, para que você consiga criar um site para celular o mais agradável o possível para seus visitantes.
Talvez você nem sempre saiba o que perguntar ou quando perguntar, mas liderar através da empatia com o usuário e aprender ao longo do caminho o levará a atingir seus objetivos.
Teste o seu UX design móvel com a Hotjar
As ferramentas da Hotjar permitem que você veja com precisão como os visitantes em dispositivos móveis estão interagindo com o seu site, para que você possa testar e iterar o seu design.
