Desde 2014 os gadgets mobile ultrapassaram a TV e se tornaram a principal tela das pessoas. Um estudo realizado pela AdReaction mostrou que naquele ano os norte-americanos gastavam 157 minutos na frente dos seus smartphones e 143 minutos eram dedicados às TVs. Os números da China eram mais significativos, 170 vs 89 (quase o dobro). No Brasil, 149 minutos no smartphone contra 113 na frente da TV.
Em 2017, de acordo com o Google, os usuários gastam em média 177 minutos na frente da tela dos seus smartphones. Um estudo da Smart Insights mostra que 80% das pessoas que acessam a internet tem um smartphone. E o que isso significa? Que independente do seu negócio, o seu público está conectado constantemente: pesquisando, tentando encontrar produtos e informações de maneira ágil.
Diante desses dados, aí vem a pergunta: como é seu site quando acessado via smartphone? Está mais que claro que para atingir clientes em potencial, toda empresa precisa ter seu site pronto para ter uma navegação fácil nos dispositivos móveis. Por isso escrevi esse texto. Aqui vamos mostrar alguns pontos essenciais para a construção de um site mobile assertivo.
Note que quando eu falo em um Site Mobile eu quero dizer que o seu site está oferecendo uma experiência favorável no ambiente dos smartphones, independente de ser responsivo, adaptativo ou aquele “mobile-site” com uma URL específica, desenvolvido exclusivamente para smartphones.
Mobile First
O significado da expressão mobile first é bem simples: na hora de pensar no seu site, faça para o mobile primeiro e depois replique as soluções para os desktops. Pensar em mobile é desenvolver uma melhor usabilidade, otimizar a navegação e simplificar os elementos e layouts do design, colocando os dispositivos móveis na linha de frente e pensando soluções para aquele ambiente.
Por pura ironia, sites nasceram inicialmente para aparecer nas resoluções dos computadores desktops (cada vez maiores). Com o surgimento do iPhone, em 2007, o caminho para a produção de sites viu uma quebra de paradigma, fazendo com que o conteúdo fosse pensado para ocupar uma tela menor. A cultura de aplicativos mantinha os olhos dos usuários cada vez mais vidrados nas telas dos smartphones, a conexão constante com a internet colocava a pessoa na boca do gol da informação sem precisar passar perto de um computador, seja em casa, trabalho ou lan house.
As necessidades das pessoas tomam novos contornos, um novo comportamento surge diante dos novos gestos utilizados nos smartphones.
Pensar na experiência do usuário e desenvolver um fluxo em que a ação seja simples, didática e contínua nunca foi tão importante. Observando os gestos, a primeira regra é pensar que a usabilidade do seu site será direcionada para os Big Gestures (ou gestos únicos). O seu público navegará pelo seu site em diversos tipos de situação e a menos frequente é atrás de uma mesa. Por isso o que é mostrado na tela deve ser direto e não necessita que o usuário tenha uma precisão para navegar.
Uma solução inicial quando começar a desenvolver seu site é pensar em dobras de conteúdo, no melhor estilo dividir e conquistar. E pensar que cada dobra tem seu conteúdo específico, com uma ação específica que não provoque uma overdose de informação no usuário.
Nas palavras de Luke Wroblewski, que cunhou pela primeira vez o termo Mobile First em 2009 “o mobile não deixa espaço para nenhum conteúdo de relevância duvidosa. Você precisa saber o que realmente importa. Para fazer isso, você precisa conhecer bem os seus usuários e o seu mercado.”
Facilitando a navegação
No ambiente mobile, construir uma navegação simples para que o conteúdo seja acessível mesmo em um espaço restrito é um dos maiores desafios. Em uma pesquisa feita pela Nielsen/Norman Group, empresa especializada em pesquisa com usuários, quando temos padrões de navegação ocultos (como menus de hambúrguer) a descoberta do conteúdo diminui em 21% e o tempo necessário para usar a navegação aumenta em média 2 segundos.
Com isso, o menu se transforma em um “obstáculo” para o usuário na leitura do conteúdo do site e esse entrave na usabilidade acontece porque o menu de hambúrguer é tão utilizado que os usuários tendem a ignorá-lo. Outra razão é que as pessoas inicialmente não sabem o que está escondido no menu e com isso elas têm o hábito de rolar a página para ver se elas encontram o que procuram primeiro. Os usuários preferem ter suas chances de acessar o conteúdo percorrendo a página antes de acessar o seu menu.
Sabemos que um menu de navegação totalmente visível é a melhor solução, mas pelo tamanho das telas dos smartphones isso simplesmente não é viável. Com isso, uma solução sugerida é utilizar uma navegação combinada. Ela permite ver as opções que os usuários mais precisam e o resto fica acessível via menu oculto. Um exemplo é o site da Apple, que mantém o botão de comprar sempre acessível combinado com um menu de navegação oculto:
Um caminho para o seu site ter uma experiência mobile relevante para seus usuários é pensar bem o conteúdo em conjunto com as ações que você quer que seu usuário tome junto com um padrão de navegação de fácil aprendizado.
Design para os polegares
As telas dos smartphones estão ficando cada vez maiores, tanto em altura quanto largura. E a experiência das pessoas ao navegar, utilizando principalmente os polegares, mostra que com esse acréscimo de área torna mais difícil acessar os limites da tela durante a navegação.
É bom ter esse conhecimento em mente na hora de planejar o seu site para dispositivos móveis. Inicialmente você pode considerar em fazer o seu menu no topo da tela, porque a maioria dos demais sites o fazem. Mas só seguir a inércia não torna sua experiência melhor.
Alguns sites, dentro da nova realidade do tamanho das telas, estão colocando sua navegação na parte debaixo da tela, considerando que é mais fácil do polegar alcançar aquela posição, proporcionando assim um melhor conforto durante a navegação.
Facilite a digestão do seu conteúdo
Sabemos que cada vez mais as pessoas não querem gastar tempo navegando indefinidamente para tomar uma decisão ou ter uma informação. As pessoas não querem pensar, elas querem agir e concluir um objetivo enquanto acessam seu site. Conteúdos extensos, técnicos, lotados de jargões específicos podem ser uma combinação indigesta para o seu público.
Organizar seu conteúdo utilizando Cards (ou cartões) é uma forma de dar aos usuários informações suficientes para se decidirem, se querem aprofundar no conteúdo ou seguir num plano onde eles vão ganhar tempo. Cada cartão representa um pedaço da informação, de maneira geral, normalmente utilizando título, um pequeno texto, normalmente com uma imagem ou gráfico e é uma forma mais amigável de ler e absorver o conteúdo. Essa é uma técnica eficiente e não é à toa que o Google utiliza essa técnica para organizar seu conteúdo de maneira geral em seus sites e aplicativos.
Pense nos Cards como tópicos que você apresenta ao seu leitor. O ideal é começar com uma visão geral e em seguida, dê mais informações de forma progressiva, para que os usuários se mantenham interessados em avançar no seu site, sem se sentirem atolados pela indigestão da sua overdose de conteúdo.
Experiência do Usuário vs KPIs
Como todo bom projeto, seu site para dispositivos móveis deve ser construído sobre um escopo bem definido, com objetivos e metas a serem alcançados mas acima de tudo, oferecendo uma experiência relevante e positiva para o seu público.
“Devo valorizar mais o meu Design para a experiência do usuário e deixar de lado meus indicadores-chave de performance (ou Key Performance Indicators)?”. A resposta é não e isso abre uma nova jornada dentro do seu site: oferecer a melhor experiência possível mas definindo indicadores que te darão insumos para uma evolução constante. Antes de tudo, conhecer o público que acessa (ou vai acessar) o seu site é primordial. Conhecer significa saber os comportamentos e especialmente as dores e necessidades, significa ir na jugular dessas necessidades.
Pense no seu site como um projeto que tem diversas fases. Uma das fases mais ignoradas é quando o site vai pro ar e toda a equipe comemora o fim daquele projeto que todo mundo suou a camisa pra concretizar. Mas logo depois do nascimento vem outra fase tão importante quanto: é ali, no mundo real que os usuários mostram de verdade como eles interagem com seu site. O que eles acessam mais, o que é ignorado, o que funciona e o que não funciona. Por isso a experiência deve andar lado a lado dos KPIs, pois com os indicadores de sucesso definidos, é possível trabalhar uma evolução contínua, baseada em dados e calcada na realidade.
Dicas para seu site ser mais amigável no ambiente Mobile
Pra você que chegou até aqui e já está convencido a trabalhar seu site para o ambiente Mobile, umas dicas úteis que podem te ajudar a oferecer uma experiência cada vez melhor para seu usuário.
. Seu site precisa ter a meta tag Viewport: O Viewport é a área onde seu site aparece nos browsers. Obviamente ele varia de acordo com o tamanho da tela e nos smartphones ele será menor do que o monitor do seu computador. Inserir a tag <meta> Viewport no HTML do seu site informa ao navegador que ele deve caber em uma tela menor. Com isso, independente do modelo do smartphone, o site se ajustará ao tamanho da tela.
. Para Mobiles Sites o tamanho importa: É frustrante entrar em alguma página e não conseguir ler porque o texto está muito pequeno ou não conseguir acessar um link porque o botão é pequeno demais para o tap na tela. Se preocupar com o tamanho das fontes e dos links presentes no site é tão importante quanto o tamanho dele no browser dos dispositivos móveis. Fontes devem ter no mínimo 14px de tamanho, já os CTAs, podem ser maiores, um tamanho mínimo de 45 pixels de largura e altura garante uma melhor performance, especialmente em e-commerces.
. Sem pop-ups ou atualizações repentinas: Se no desktop já é desanimador ter a navegação interrompida por um pop-up ou uma atualização que te leva para o topo da página, no mobile então nem se fala. Se precisa mostrar algo além do que está na página, um lightbox pode funcionar, já sobre aquele refresh automático, evite ao máximo. Deixe que o usuário atualize a página por conta própria.
. Simplifique o design do seu site: Lembra do Mobile First? Utilizar somente o necessário e caminhar para soluções minimalistas pode melhorar sua usabilidade no Mobile consideravelmente. É tudo uma questão de equilíbrio entre navegação e conteúdo.
Falar sobre Mobile Sites é algo que sempre vai levantar discussões, testes a serem feitos e novas descobertas, uma vez que é um ambiente com mudanças constantes. Mas com os raciocínios explicados aqui, além das dicas, acredito que na hora de fazer ou ajustar o seu site para dispositivos móveis, o seu público terá uma experiência satisfatória.
