Por Sherry Lamoreaux
Os smartphones, os tablets e outros dispositivos móveis estão em toda parte. Eles nos ajudam a pedir o almoço, a tirar fotografias, a obter orientações sobre o trânsito e a enviar uma piada aos nossos melhores amigos.
E nós não limitamos o seu uso à nossa vida como consumidores. Em viagens de negócios, nós mostramos o nosso cartão de embarque para o atendente da empresa aérea, e então revisamos as propostas de negócios, enquanto esperamos pelo embarque no avião. Para muitos de nós, verificar os e-mails de negócios em nossos smartphones é a primeira coisa que fazemos de manhã cedo, e a última que fazemos antes de deitar para dormir.
Como nota a agência de criação Babcock & Jenkins, “Móvel não é uma categoria de dispositivo, é um modo de vida”.
Nada sobre esta tendência está indo mais devagar. Como mostram os dados da comScore, o número de usuários de dispositivos móveis está aumentando:
…e 2015 foi o ano em que o mobile ultrapassou o desktop:
Portanto, você está encontrando os seus compradores onde eles estão… em dispositivos móveis? É esta uma boa experiência para eles?
Dê prioridade ao design para dispositivos móveis
Velhos hábitos são difíceis de enterrar. Tradicionalmente, o design das páginas da web, de landing pages (e também de páginas de e-mails) tem girado em torno da experiência de um usuário de desktop e o que testa bem nesse meio. Muitos de nós ficamos muito bons nisso.
Mas, agora, para muitos de nós (e, provavelmente, mais cedo ou mais tarde para todos nós) o nosso tráfico em dispositivos móveis está crescendo mais que o tráfico do desktop. Nós precisamos fazer a experiência do nosso leitor em dispositivos móveis com o nosso site satisfazer (melhor ainda, ultrapassar) o que eles querem e esperam.
Isto significa que nós temos que mudar a forma como desenhamos a experiência digital online. Nós precisamos dar prioridade ao design para dispositivos móveis.
Design responsivo e design adaptável
Há duas abordagens recomendadas, que são usadas para web design e as landing pages para consumo em dispositivos móveis: design responsivo e design adaptável.
O design responsivo serve para o mesmo código HTML na mesma URL, independentemente do dispositivo do usuário (desktop, tablet, dispositivo móvel, ou qualquer outro), ou do tamanho da tela. Você cria um layout fluido. A página da web usa consultas de mídia para descobrir o tamanho da tela do dispositivo no qual ela vai ser mostrada. Então ela ajusta as imagens flexíveis, as grades fluidas, a navegação do site e o layout fluido para caber na tela e para manter o foco nas partes mais importantes.
No design adaptável, você cria múltiplos layouts fixos para um dado número de múltiplos tamanhos de telas, baseado num conjunto predefinido de tamanhos de viewports e em outras características. Você pode ter, por exemplo, um layout para certos tamanhos de dispositivos móveis; outro para certos tamanhos de tablets; e outro para desktops e laptops.
A maioria das pessoas prefere o design responsivo, por vários motivos. Uma razão: os tamanhos das telas variam frequentemente e o design responsivo se adapta a essas mudanças sem trabalho adicional – enquanto que você teria que construir novos layouts no design adaptável.
O Circle S Studio mostra como um design responsivo se adapta a quatro diferentes tamanhos de tela.
Uma terceira opção é desenhar sites separados para desktops e para acesso em dispositivos móveis. Esta não é uma solução prática para a maioria das empresas; em primeiro lugar, ela representa muito mais trabalho para manter dois sites diferentes; em segundo lugar, isto pode afetar negativamente a sua SEO (otimização para as máquinas de busca), pois os seus backlinks podem ser espalhados em dois sites, diminuindo a probabilidade de você obter uma boa classificação. E, finalmente, há um grande risco dos sites ficarem fora de sincronia.
E por falar em SEO… os dispositivos móveis são muito importantes.
Danny Sullivan da SearchEngineLand leva o crédito por cunhar a palavra “Mobilegeddon” para descrever a implantação pelo Google, em 21 de abril de 2015, de um algoritmo de busca para penalizar os websites que não são amigáveis para os dispositivos móveis. Foram necessários alguns meses para que os resultados aparecessem (a maioria das mudanças de algoritmos produz resultados gradativos), mas isto aconteceu.
Conforme foi relatado num post do Wall Street Journal por Alistair Barr, a Stone Temple Consulting descobriu mudanças significativas, que foram mostradas no gráfico acima.
E há mais: A maioria do tráfico das buscas feitas no Google é agora proveniente de dispositivos móveis, o que significa que muitas pessoas estão buscando – e encontrando – em telas pequenas. É importante que elas tenham uma boa experiência de usuário quando elas engajarem com o seu site, ou você pode perdê-las para um concorrente, que for mais inteligente que você nas telas pequenas.
Você quer ver quanto uma das suas webpages é amigável para dispositivos móveis? Vá para esta página de Desenvolvedores do Google e preencha a URL da página na qual você está interessado. Esta imagem mostra o relatório da homepage da HyTrade.
Comece por um design para dispositivos móveis
De acordo com o Google, as suas páginas precisarão satisfazer alguns requisitos básicos para serem consideradas “amigáveis para dispositivos móveis”; estes são os mais importantes:
- Texto que possa ser lido (sem tocar ou aumentar o tamanho)
- Alvos para serem tocados confortavelmente espaçados (botões ou imagens nos quais você possa tocar com um dedo para interagir com a página)
- Sem conteúdo que “não possa ser visto”, como certos tipos de vídeo, conteúdo para ser mostrado em Flash, etc.
- Sem a necessidade de rolagem horizontal
Simplicidade
Espaço limitado significa que você precisa eliminar a gordura e manter a sua informação mais importante e eficaz na frente e no centro.
Alguns pontos chaves para lembrar:
- Faça a sua chamada para ação de forma limpa e simples, além de muito clara e específica.
- Faça o seu texto curto e conciso. Escreva em blocos que possam ser movidos num layout responsivo e ainda assim fazer sentido.
- Segmente! Se você puder especificar aquele exato leitor para quem a sua página é dirigida, você pode ser mais específico com um texto curto.
Alvos para serem tocados
Os desenhistas e os cientistas não chegaram a um acordo sobre o tamanho ótimo (Apple, Microsoft, MIT Touch Lab study) para os alvos a serem tocados; não há uma resposta fácil sobre “qual deve ser o tamanho dos meus botões”. Escolha um tamanho e teste.
Velocidade da página
As pessoas não irão esperar muito tempo para a página abrir.
Para ver uma lista completa sobre as melhores práticas para velocidade das páginas, veja este guia prático da Moz. Para testar o desempenho do seu próprio website, veja http://www.webpagetest.org/.
Simplifique os formulários
Lembre-se que os seus usuários de dispositivos móveis são, frequentemente, gente que tem multitarefas ou que está viajando. Quantos mais passos estiverem envolvidos, mais razões um usuário terá para dizer “Eu não tenho tempo para isto”. Garanta ter o menor número possível de campos nos seus formulários. Veja este guia da Frictionless Forms.
Teste e teste novamente
Os testes A/B são um método para comparar duas versões de uma webpage para determinar qual delas tem melhor desempenho. Você pode testar o texto, a cor, o lugar e o layout; mesmo acrescentar ou subtrair algo tão simples como pontos de exclamação pode fazer uma diferença nas suas conversões. Nas telas menores dos dispositivos móveis, cada detalhe é importante.
Amigável para dispositivos móveis ou, em primeiro lugar, para os dispositivos móveis? Qual é a diferença?
A ideia por trás de ser “amigável para os dispositivos móveis” é geralmente descobrir como fazer um bom design responsivo para a web, que funcione em telas pequenas, quando isso for necessário. A elegante frase “degradação graciosa” se refere à prática de construir uma experiência completa para um tamanho ótimo de tela, e, então, “dar um desconto para cada degradação possível e garantir que, apesar das deficiências, o site permanecerá funcional” (Leia a discussão completa sob o ponto de vista de um designer na CodeMyViews).
“Os dispositivos móveis em primeiro lugar” vira este conceito de cabeça para baixo. Aqui, você começa com um site pobre, que contém o essencial. Ele deve parecer bom e funcionar bem. Então, você aplica a “melhora progressiva” para adaptar o seu design para os dispositivos maiores. A grande energia inicial vai para os dispositivos móveis, e o resto dela é uma construção contínua, ao invés de um emparelhamento à distância. Isto muda tudo.
Como diz a Beyond Nines (uma agência que serve globalmente entidades não lucrativas): “Esta diferença sutil força uma maior disciplina – e maior esperteza – sobre como um website realmente funciona nos smartphones, e que querem e esperam os visitantes de websites nesse contexto”.
Outra citação da Babcock & Jenkins: “Ao invés de degradar uma experiência robusta, uma primeira abordagem para dispositivos móveis melhora uma abordagem altamente focada… Os dispositivos móveis representarão uma presunção e não uma extensão para o marketing”.
Portanto, amigável para dispositivos móveis ou os dispositivos móveis em primeiro lugar? O que você pensa? Deixe-nos saber qual foi a sua experiência na seção dos comentários.
[wt_divider_dotted margin_top=”20″ margin_bottom=”20″]
Baixe gratuitamente o nosso e-Book para obter mais informações e dicas para tirar vantagem do marketing em dispositivos móveis para desenvolver estratégias bem sucedidas de geração de leads.
Sobre a Autora: Sherry Lamoreaux é a editora do Marketing Action blog da Act-On. Ela também escreve e edita e-Books, white papers, estudos de caso e miscelânea. Ela é uma escritora criativa premiada.
Fonte: Act-On Software
Tradução: Fernando B. T. Leite
® Copyright: A HyTrade é agência parceira da Act-On e todos os artigos são traduzidos e republicados com autorização.