The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

O Que Torna um Site Móvel Bom?

A Google e a AnswerLab conduziram um estudo de pesquisa para responder a essa pergunta.

Usuários de dispositivos móveis têm objetivos muito definidos. Eles esperam poder obter o que precisam imediatamente e à sua maneira.

O estudo foi conduzido em sessões de usabilidade presenciais de 119 horas com participantes dos EUA. Os participantes foram solicitados a realizar tarefas essenciais em um conjunto diverso de sites móveis. Usuários Android e iOS foram incluídos e eles testaram os sites em seus próprios celulares. Para cada site, os participantes foram solicitados a dar suas opiniões em voz alta quando concluíssem tarefas com foco em conversão, como uma compra ou o agendamento de uma reserva.

O estudo descobriu 25 princípios de design de sites móveis, agrupados em cinco categorias.

Mantenha as chamadas para ação em destaque

Disponibilize tarefas secundárias por meio de menus ou "abaixo da dobra" (a parte da página que não pode ser vista sem rolar para baixo).

CERTO: Facilitar o acesso às tarefas mais comuns dos usuários.
ERRADO: Desperdiçar espaço preciso acima da dobra com chamadas para ação vagas, como "saiba mais".

Reduza os menus

CERTO: Reduzir os menus.

Usuários de dispositivos móveis não têm paciência para navegar por uma longa lista de opções até encontrarem o que desejam. Reorganize seu menu para usar a menor quantidade possível de itens sem sacrificar a usabilidade.

Facilite o retorno à página inicial

CERTO: Facilitar o retorno à página inicial.

Os usuários esperam voltar à página inicial quando tocarem no logotipo no canto superior esquerdo de uma página para dispositivos móveis e, quando esse recurso não está disponível ou operacional, eles se frustram.

Não deixe que promoções roubem a cena

Grandes intersticiais de instalação de aplicativo (como promoções de página inteira que ocultam o conteúdo e incentivam o usuário a instalar um aplicativo) irritam os usuários e dificultam a realização de tarefas. Além disso, sites que usam intersticiais de instalação de aplicativos são reprovados no Google Mobile-Friendly Test, o que pode afetar negativamente seus rankings de pesquisa.

CERTO: As promoções devem ser fáceis de divulgar e não distrair o usuário da experiência.
ERRADO: Intersticiais frequentemente irritam os usuários e prejudicam a usabilidade do site.

Pesquisa no site

Deixe o recurso de pesquisa no site visível

Usuários que procuram informações geralmente utilizam a pesquisa, portanto, o campo de pesquisa deve ser uma das primeiras coisas que eles avistam em suas páginas. Não esconda a caixa de pesquisa em um menu.

CERTO: Deixar o recurso de pesquisa visível
ERRADO: Ocultar o recurso de pesquisa em menus flutuantes

Garanta que os resultados de pesquisas no seu site sejam relevantes

Os usuários não verificam várias páginas de resultados para encontrar o que procuram. Facilite o trabalho dos usuários preenchendo consultas automaticamente, corrigindo erros de digitação e sugerindo consultas relacionadas. Em vez de reinventar a roda, considere produtos robustos como a Pesquisa personalizada do Google.

CERTO: A Macy's retorna apenas itens infantis.
ERRADO: Retornar resultados para qualquer coisa que tenha a palavra infantil.

Implemente filtros para refinar os resultados

Os participantes do estudo utilizam filtros para encontrar o que buscam e abandonam sites que não têm filtros eficazes. Coloque filtros acima dos resultados de pesquisa e ajude os usuários exibindo quando resultados serão retornados quando um determinado filtro for aplicado.

CERTO: Facilite o uso de filtros.
ERRADO: Ocultar o recurso de filtragem.

Oriente os usuários a obterem resultados de pesquisa melhores

A Zappos orienta os usuários perguntando o que eles estão procurando.
CERTO: Ajudar os usuários a encontrar o que procuram direcionando-os para o caminho certo.

Para sites com segmentos de clientes diversificados, faça algumas perguntas antes de apresentar a caixa de pesquisa e use as respostas do cliente como filtros de consulta de pesquisa para garantir que os resultados apresentados sejam do segmento mais relevantes.

Comércio e conversão

Deixe que os usuários explorem antes de se comprometer

Participantes de um estudo ficaram frustrados com sites que exigiam registros imediatos para que o conteúdo fosse visualizado, principalmente quando não conheciam a marca. Apesar de as informações do cliente serem essenciais para sua empresa, solicitá-las cedo demais pode reduzir o número de registros.

CERTO: Permitir que os usuários naveguem pelo site sem exigir que façam login.
ERRADO: Exigir o login ou registro cedo demais em um site.

Deixe que os usuários façam compras como convidados

CERTO: Permitir que os usuários façam compras com uma conta de convidado.

Participantes de um estudo consideraram compras realizadas como convidados algo "conveniente", "simples", "fácil" e "rápido". Os usuários se irritam com sites que os forçam a criar uma conta ao fazer uma compra, principalmente quando o benefício de ter um conta não é claro.

Use as informações existentes para maximizar a conveniência

Lembre e pré-preencha as preferências de usuários registrados. Ofereça serviços de compra de terceiros conhecidos para novos usuários.

Use botões click-to-call para tarefas complexas

Em dispositivos com recursos de chamada, links click-to-call permitem que os usuários façam uma chamada telefônica ao tocar em um link. Na maioria dos dispositivos móveis, o usuário recebe uma confirmação antes de o número ser discado ou um menu surge perguntando ao usuário como o número deve ser utilizado.

Facilite a conclusão em outro dispositivo

CERTO: Fornecer maneiras fáceis para que os usuários continuem navegando ou comprando em outro dispositivo.

Os usuários sempre querem concluir tarefas em outros dispositivos. Por exemplo, eles podem querer ver um item em uma tela maior. Ou podem ficar ocupados e concluir a tarefa depois. Ofereça suporte a essas jornadas dos clientes permitindo que os usuários compartilhem links em redes sociais, ou enviem e-mails a si mesmos diretamente pelo site.

Entrada de formulário

Otimize a entrada de informações

Avance automaticamente para o próximo campo quando um usuário pressionar Enter. Em geral, quando menos toques o usuário precisar realizar, melhor.

Escolha a interação mais simples

Use o tipo de interação mais apropriado para cada cenário. Use elementos como datalist para fornecer valores sugeridos para um campo.

Forneça um calendário visual para a seleção de datas

CERTO: use widgets de calendário quando possível.

Identifique com clareza as datas de início e fim. Os usuários não devem precisar sair de um site e consultar um aplicativo de calendário para agendar um compromisso.

Minimize os erros de formulário com identificação e validação em tempo real

CERTO: Pré-preencher o conteúdo quando possível.

Identifique as entradas corretamente e valide-as em tempo real.

Crie formulários eficientes

Utilize o recurso de preenchimento automático para que os usuários possam preencher formulários com facilidade com dados pré-preenchidos. Pré-preencha campos com informações que você já tem. Por exemplo, ao recuperar endereços de entrega e cobrança, tente usar requestAutocomplete ou permita que os usuários copiem o endereço de entrega para o endereço de cobrança (ou vice-versa).

Usabilidade e formato

Otimize todo o seu site para dispositivos móveis

Use um layout responsivo que mude de acordo com o tamanho e os recursos do dispositivo do usuário. Participantes do estudo consideraram sites que misturavam páginas otimizadas para computadores e dispositivos móveis ainda mais difíceis de usar do que sites destinados a apenas computadores.

Não force os usuários a usarem gestos de pinça para controlar o zoom

Os usuários estão acostumados a navegar verticalmente em sites, mas não horizontalmente. Evite elementos grandes com largura fixa. Use consultas de mídia CSS para aplicar diferentes estilos para diferentes telas. Não crie conteúdo que só seja exibido corretamente em uma largura de janela de visualização específica. Sites que forçam os usuários a navegar horizontalmente são reprovados no Google Mobile-Friendly Test, o que pode afetar negativamente suas classificações de pesquisa.

Permita que imagens de produtos possam ser ampliadas

CERTO: Permita que as imagens de produtos sejam expandidas e visualizadas em detalhes com facilidade.

Os clientes de varejo esperam que os sites permitam visualizações de closes de alta resolução de seus produtos. Participantes do estudo se frustraram quando não conseguiam ver o que estavam comprando.

Diga aos usuários qual orientação funciona melhor

CERTO: Diga ao usuário qual orientação funciona melhor.

Participantes do estudo tendiam a ficar na mesma orientação até que algo os incentivasse a trocar. Crie designs para as orientações de paisagem e retrato ou incentive os usuários a trocar para a orientação ideal. Certifique-se de que suas chamadas para ação importantes possam ser executadas pelo que os usuários ignorem a sugestão de trocar a orientação.

Mantenha o usuário em uma só janela de navegador

CERTO: A Macy's mantém os usuários no seu site fornecendo cupons internamente.

Os usuários podem ter problemas para alternar entre janelas de navegador e podem não conseguir voltar ao site. Evite chamadas para ação que abram novas janelas. Identifique jornadas que possam fazer com que um usuário saia do seu site e forneça recursos para mantê-lo no site. Por exemplo, se você aceitar cupons, ofereça-os diretamente no site em vez de forçar os usuários a procurar promoções em outros sites.

Evite a identificação "site completo"

Quando os participantes do estudo viram uma opção para acessar o "site completo" (site para computador), em vez de um "site para dispositivos móveis", eles pensaram que o site para dispositivos móveis era incompleto e escolheram a versão "completa", sendo direcionados para o site para computador.

Seja claro ao indicar por que precisa da localização do usuário

Os usuários devem sempre entender por que você está solicitando a localização deles. Participantes do estudo que tentavam reservar um hotel em outra cidade ficaram confusos quando um site de viagens detectou sua localização e ofereceu hotéis em sua cidade atual. Deixe os campos de localização em branco por padrão e permita que os usuários os preencham com uma chamada para ação clara, como "Encontrar em locais próximos".

CERTO: Sempre solicitar acesso à localização em resposta a um gesto do usuário.
ERRADO: Solicitar a localização imediatamente na página inicial conforme o site carrega resulta em uma experiência desagradável para o usuário.