Tendências de UX que eu observei no Google como um lead de UX para dispositivos móveis

Ryan Warrender Blocked Desbloquear Seguir Seguindo 14 de novembro de 2018

Esta é uma lista de insights em parceria com mais de 150 equipes de desenvolvimento da Web nos últimos dois anos.

Eu me juntei a uma equipe do Google em 2016, chamada de Equipe de Transformação Móvel. Nossa equipe tinha um objetivo simples, mas muito ambicioso: tornar a Web para dispositivos móveis melhor para todos. Nós nos concentramos em ajudar empresas de pequeno e médio porte a melhorar suas experiências na Web para dispositivos móveis. Mais especificamente, éramos consultores de UX que trabalhariam com equipes de desenvolvimento web e forneceriam recomendações sobre como otimizar melhor desempenho, usabilidade e acessibilidade.

Nós defendemos os usuários finais.

Aqui estão os aprendizados, observações e armadilhas que coletamos depois de ver literalmente centenas de sites:

As primeiras impressões são importantes . Os usuários móveis são muito orientados para os objetivos e super impacientes. Evite distrair o usuário de seus objetivos. Mantenha sua página inicial e as principais páginas de destino simples. Certifique-se de ter uma call-to-action clara e uma proposta de valor acima da dobra. Um usuário deve saber o que fazer e por que eles devem permanecer no seu site móvel em um piscar de olhos.

Da esquerda para a direita: Warby Parker , Stash Invest , Drizly

Faça menos . A recomendação número um que eu fiz consistentemente foi "Do Less". Isso significa menos imagens, menos campos de formulário, menos padrões complicados de navegação, menos plugins, menos pixels de terceiros, menos paredes de texto, menos overlays de tela cheia, menos bloqueio de renderização js , menos cliques … menos formas de distrair seu usuário de suas metas.

A velocidade acentua o bom design . Não é surpresa que os sites para dispositivos móveis mais rápidos tenham um melhor envolvimento do usuário. Inúmeros estudos de caso, testes de usabilidade e tenho certeza de que suas anedotas pessoais deixam claro que a velocidade gera conversões. As três métricas de desempenho que realmente refletem a experiência do usuário são o First Contentful Paint (FCP), o Speed Index e o Time to Interactive (TTI). É fundamental definir um orçamento de desempenho e responsabilizar sua equipe. É uma pena, quando seu site lindamente projetado resulta em um usuário rejeitado porque você esqueceu de comprimir sua imagem de herói de 2MB. Use ferramentas como o Lighthouse (mostrado abaixo) para monitorar essas métricas.

Benchmarks recomendados:
<2s Primeira tinta de conteúdo (FCP)
<Índice de velocidade 3 (SI)
<5 Tempo para Interativo (TTI)

Captura de tela do Lighthouse

Converse com seus clientes . Isso pode parecer incrivelmente óbvio, mas não posso dizer quantos olhares em branco instiguei perguntando: "Quando foi a última vez que você conversou com seus usuários?" Nosso objetivo como leads de UX em dispositivos móveis era não apenas fazer recomendações, mas ser a voz do usuário. Coloque-se no lugar do usuário e tente completar as tarefas mais comuns (acompanhe o número de cliques e o tempo total a ser concluído).

Use dados para justificar o design . A tendência do “design apoiado por dados” não é novidade. Depois de priorizar um projeto para dispositivos móveis, é importante acompanhar os KPIs móveis. Para varejistas, monitore o valor médio do pedido (AOV) e a taxa de saída na página em que o funil de checkout começa. Para as empresas de geração de leads, concentre-se na CTR do botão de call-to-action principal e na taxa de lead-to-close (vendas / número de leads bem-sucedidos * 100). Se você tiver um site de viagens, concentre-se nas sessões de retorno (retenção de clientes) e no tráfego específico do canal (ou seja: os compartilhamentos sociais estão aumentando). Considere o monitoramento de microconversões, bem como inscrições em boletins informativos por e-mail, comentários em um artigo, resenhas de usuários, visualizações de vídeos ou compartilhamentos em mídias sociais. Dica profissional: eu recomendo fortemente que você aproveite este painel brilhante do Datastudio que um dos meus colegas (Damla Cakirca) fez para monitorar o engajamento do usuário em seu site.

Recaída é real . A maioria das empresas com as quais trabalhamos obteve melhorias significativas na velocidade do site e / ou engajamento do usuário. No entanto, 30 a 60 dias após a consulta (quando não estávamos ansiosos por olhar por cima do ombro), veríamos os maus hábitos voltarem à superfície. Para evitar essa armadilha, use um orçamento de desempenho. Além disso, recomendo usar a ferramenta Chrome Dev para encontrar códigos CSS e JS não utilizados na guia Cobertura. Quando você carrega ou executa uma página, a guia informa quanto código foi usado versus quanto foi carregado. Você pode reduzir o tamanho de suas páginas enviando apenas o código de que precisa. É essencial monitorar e auditar seu site para celular continuamente.

Seja otimista em novas tecnologias. Se você estiver procurando por uma experiência móvel moderna e transformadora, esclareça a criação de um PWA. Se você deseja otimizar seu tráfego pago, procure usar AMP nas suas principais páginas de destino. Se você for um varejista, procure formas de agilizar a compra, como reduzir campos, ativar o preenchimento automático ou implementar o Google Pay. A chave para o sucesso é adicionar tecnologias incrementalmente com foco no aprimoramento da experiência do usuário. Se isso não agregar valor aos seus usuários, não invista nele.

Da esquerda para a direita: American Tin Tilings , Rhone , SnapDeal

Cross funcional buy in é fundamental . Obter todos os principais interessados na mesma página é um lembrete óbvio, mas importante. Melhorar sua experiência na Web para dispositivos móveis é um esforço de equipe. Todas as equipes precisam se responsabilizar pelo monitoramento da experiência móvel. As equipes de marketing devem assistir ao uso de pixels de rastreamento de terceiros. As equipes de engenharia devem se concentrar em otimizar o caminho de renderização crítico (removendo os ativos de bloqueio de renderização). As equipes de UX devem garantir que as imagens sejam otimizadas e focar na redução dos pontos problemáticos da usabilidade (por exemplo: controles deslizantes automáticos). É essencial definir metas funcionais cruzadas e responsabilizar todas as equipes.

Observações das Tendências Móveis . Esta última seção é uma captura de todas as melhores tendências de UX que eu vi resultados positivos durante 2018.

  • Implementando uma gaveta de navegação inferior
  • Ativando notificações push (quando necessário)
  • Adicionando um botão de tela 'adicionar à página inicial' (manifesto do aplicativo)
  • Usando componentes da web do Material Design
  • Animações avançadas acionadas por rolagem
  • CTAs fixos na parte inferior da janela de visualização (especialmente nas páginas de detalhes do produto)
  • Permitir que os usuários comprem com uma conta de convidado
  • AMP First

Lembre-se de que não existe uma solução mágica para resolver todos os seus problemas de experiência do usuário. Melhorar seu site para dispositivos móveis exige paciência, análise e comprometimento multifuncional.

@RyanWarrender