As 10 boas práticas em mobile sites

7 de Julho de 2012

Retirei do site Google Mobile Initiative (GoMo) as 10 boas práticas para o desenvolvimento de sites móveis. Confira abaixo:

1) Faça seu site carregar rapidamente

Dicas para site mobile ter carregamento rápido

Os usuários móveis muitas vezes possuem tempo curto. Para ajudá-los, projete seu site para que carregue rápido e seja de fácil leitura.

a) Priorizar o conteúdo e funcionalidades que os usuários móveis mais precisam

b) Reduzir quantidade dos textos

c) Comprimir imagens para um carregamento mais rápido

2) Simplifique a navegação

Dicas para sites móveis, tenha navegação simples

Ninguém gosta de coisas confusas. Uma navegação clara e a funcionalidade de pesquisa, em sites grandes ou complexos, ajudam seus clientes a encontrarem o que precisam.

a) Minimize a rolagem e mantenha um visual somente vertical. Use uma hierarquia clara em menus e evite sobreposições.

b) Ajude os usuários a navegarem sempre destacando os botões “voltar” e “início”.

c) Utilize até sete links por página de navegação.

d)Deixe sempre uma caixa de pesquisa em destaque para sites complexos.

3) Ofereça a Experiência Local

Sites móveis Ofereça a Experiência Local

Consumidores procuram informações locais em seus telefones o tempo todo, desde encontrar o posto de gasolina mais próximo até achar uma pizzaria aberta. Inclua funcionalidades que ajudem as pessoas a encontrar e chegar até você.

a) Exiba seu endereço ou um localizador de lojas na página de destino.

b) Inclua mapas e rotas. Use GPS para personalizar sempre que possível.

c) Permita que os usuários consultem o estoque de lojas próximas.

4) Lembre-se dos polegares

Uso de dedos polegares em sites mobile

As pessoas usam seus dedos para manusear dispositivos móveis, especialmente os polegares. Desenvolva um site que permita uma fácil interação, mesmo para quem tem as mãos grandes.

a) Use botões grandes e centralizados e proporcione espaço extra para evitar cliques acidentais.

b) Aumente botões menores para ampliar a área clicável.

c) Aumente a área das caixas de seleção tornando os textos clicáveis.

5) Ofereça uma experiência perfeita

As pessoas usam seus dedos para manusear dispositivos móveis, especialmente os polegares. Desenvolva um site que permita uma fácil interação, mesmo para quem tem as mãos grandes.

a) Use botões grandes e centralizados e proporcione espaço extra para evitar cliques acidentais.

b) Aumente botões menores para ampliar a área clicável.

c) Aumente a área das caixas de seleção tornando os textos clicáveis.

6) Ofereça visibilidade

Dicas para sites mobile, tenha visibilidade dos produtos

Um site otimizado para celular transmite sua mensagem sem cansar a vista dos usuários. Facilite a leitura para seus clientes. Lembre-se de que eles podem estar em um ambiente com pouca luz.

a) Crie contraste entre o pano de fundo e o texto.

b) Verifique se o conteúdo cabe na tela e pode ser lido sem aumentar o zoom.

c) Use tamanhos e cores para indicar a prioridade de links/botões.

d) Use efeitos 3D e sombreamento nos botões.

7) Use redirecionamentos para o site Mobile

Um redirecionamento para o site mobile é um código que pode informar se os visitantes estão usando um dispositivo móvel e enviá-los para a versão de seu site adequada para celular de forma automática. Peça que o desenvolvedor do site implemente um código de redirecionamento para que seus clientes tenham acesso à melhor versão de seu site de acordo com suas necessidades.

a) Dê aos usuários a escolha de voltar para o site para computador, mas facilite o retorno para o site para celular.

b) Permita que os usuários escolham qual versão eles preferem ver nas próximas visitas.

c) Inclua informações importantes, como seu endereço ou um localizador de lojas, na página de redirecionamento.

8) Torne seu site mobile acessível

Flash contra o HTML5 em sites mobile

O ideal é que seu site mobile funcione em todos os dispositivos móveis e todas as orientações de tela que eles estiverem.

a) Encontre alternativas ao Flash. Ele não funciona em alguns dispositivos.

b) Use HTML5 para oferecer interatividade e animações.

c) Adapte seu site para as orientações vertical e horizontal.

d) Mantenha os usuários no mesmo lugar quando mudarem a orientação.

9) Escute, aprenda e repita

Bons sites mobile são voltados para o usuário, o que significa que eles foram desenvolvidos com base em informações do público-alvo. Pergunte aos usuários de seu site para computador o que eles querem em um website mobile e execute testes e otimizações como processos contínuos.

a) Use uma ferramenta de análise para compreender como as pessoas usam seu site.

b) Se possível, especialmente para sites complexos, faça um teste com os usuários antes da implementação e colete comentários.

c) Repita com frequência e melhore seu site com base em pesquisas de forma contínua.

10) Facilite a conversão

Seja qual for o objetivo de seu site, seus clientes precisam ser capazes de atingi-lo com um teclado virtual e sem o mouse. Fazer compras ou entrar em contato deve ser uma tarefa fácil.

a) Enfatize as informações que ajudam a gerar conversões (por exemplo, detalhes de produtos).

b) Reduza o número de etapas necessárias para concluir uma transação.

c) Mantenha os formulários curtos, utilizando o menor número de campos possíveis.

d) Use a funcionalidade “clique para ligar” com todos os números de telefones.

Designing Mobile Experiences

Está em inglês, mas pode-se muito bem entender a ideia e conceitos apresentados.

Criando um site mobile amigável – Melhores práticas

Vídeo do próprio Google com boas práticas. É longo, vale a pena para quem quer se aprofundar.