A forma como exploramos a internet tem vindo a sofrer mudanças consideráveis ao longo dos últimos anos: enquanto o uso de desktops tem decrescido, a busca de informação sobre produtos ou serviços a partir de dispositivos móveis tem crescido astronomicamente, sendo que mais de metade do tráfego web no mundo provém de smartphones.

Nesse sentido, devemos estar preparados para acompanhar esta mutação no mundo mobile da publicidade, da comunicação e do marketing digital. Se queremos que os visitantes do nosso website ou os leitores dos nossos e-mails tenham a melhor experiência de navegação e de leitura, devemos adoptar um design orientado ao dispositivo.

O erro mais frequente é dizer que um mobile site é apenas uma versão mais pequena da versão desktop quando, na verdade, consiste num website desenhado especificamente para funcionar bem em pequenos ecrãs, na medida em que os seus utilizadores têm interesse em tomadas de decisão críticas e momentâneas.

Contrariamente ao que se pensa, devemos então começar por desenhar para mobile e só depois permitir ao design expandir-se, levando-nos a reorganizar o conteúdo, a redefinir todo o nosso workflow e a adoptar uma filosofia mobile first.

Enquanto designers, devemos inclusive colocar algumas questões que reiteram o facto de que o comportamento humano deve influenciar o design, tais como “Estarei a pensar na forma como as pessoas utilizam o seu dispositivo móvel no meu website? Estarei a dar a devida e maior importância ao meu conteúdo, mais do que ao aspecto estético? Estarei a proporcionar opções relevantes de navegação e exploração? Estarei a conseguir manter a clareza e o foco entre o design e o conteúdo?” Assim, apresentamos algumas dicas de optimização para que consigas melhores resultados:

1.Simplificar

A estrutura e layout do conteúdo devem ser otimizados, alterando a disposição de alguns elementos. Aumentar o seu tamanho e reduzir o número de colunas força a criação de uma hierarquia mediante a qual o conteúdo de destaque se localiza no topo, seguido do restante. A navegação deve ocupar um espaço reduzido no ecrã, estar bem visível e ser facilmente acessível.

2.Less is more

A atenção do utilizador é um recurso precioso, por isso devemos adaptar o conteúdo que é apresentado tendo presente o contexto em que o utilizador está a interagir e ajustá-lo às suas necessidades: Deste modo, preservamos apenas a informação mais importante e deixamos de parte o que não é relevante. É fundamental que o utilizador seja rapidamente orientado para o conteúdo que procura dado o seu reduzido tempo de atenção.

3.Permitir ao design respirar

Muitas vezes esquecidos ou negligenciados, os espaços “em branco” são elementos essenciais e cruciais quando pretendemos chamar a atenção para o conteúdo principal. Desempenham um papel importante na legibilidade, simplificando a User Interface (UI) e melhorando a experiência do utilizador (UX).

4.Desenhar para o touch

O modo de interação primário dos dispositivos móveis é através do toque. Assim, é necessário um maior cuidado do que no mundo desktop, pois não podemos esquecer que estamos a desenhar para dedos de diferentes formas e tamanhos e para diferentes tipos de pressão exercida no ecrã, de acordo com o dispositivo em questão. É essencial ter em conta que formulários, botões ou quaisquer outros elementos que necessitem de um input touch devem ser grandes o suficiente para evitar má interpretação do evento de toque ou a sua sobreposição com outros elementos.

5.Conhecer o target

A chave para orientar o processo de design e a estratégia para o mobile site é conhecer o tipo de dispositivo que o público-alvo está a usar, a forma como o faz e com que finalidade. Perceber como o nosso target interage com os seus dispositivos e tentar utilizá-los sob o ponto de vista do utilizador evita que haja equívocos que possam conduzir a más decisões de design.

6.Estar sempre um passo à frente

Pensar, à priori, que cada vez mais recorremos aos smartphones para executar as mesmas tarefas que realizaríamos num desktop e fazer pesquisas com base no nosso público para identificar o que resulta para ele, são o ponto de partida para uma boa estratégia de comunicação e marketing digital. Desenhar e construir algo que resulte bem no maior número de dispositivos possível irá oferecer-nos a melhor base para focar recursos e orçamento, não na manutenção, mas sim no conteúdo.

7.Testar, testar e testar

Ter a noção de que nem todos os utilizadores recorrem ao mesmo tipo de dispositivo deve ser um processo iterativo e contínuo no design para mobile, considerando que nem todos os ecrãs têm a mesma resolução ou input, por exemplo. Daí a necessidade de testar em vários dispositivos para nos certificarmos de que o que desenhámos se adequa a cada um deles nas suas especificidades.

Sendo um dos maiores desafios do design em mobile a capacidade de encaixar uma grande quantidade de informação num ecrã pequeno, é fundamental ter em atenção um conjunto de caraterísticas técnicas que assegurem uma solução eficaz:

  • todos os elementos gráficos devem ser suficientemente grandes para que qualquer movimento ou ação seja realizada sem esforço do utilizador;
  • o tamanho mínimo recomendado para a fonte é de 14px, já os headlines devem ter pelo menos o dobro do tamanho. Apenas é aconselhável usar uma ou duas fontes diferentes;
  • o contraste entre a cor da fonte e a cor de fundo deve ser suficiente para que o texto seja legível, uma vez que os utilizadores podem encontrar-se no exterior onde existe muita luminosidade. Também os ícones devem ter um contraste acentuado e, especialmente, os Call-to-Action, cuja cor deve ser vibrante e destacar-se dos restantes elementos;
  • a dimensão aconselhável para os Call-to-Action é de, no mínimo, 44px. Preservar espaço à sua volta é igualmente importante para assegurar que estes respondam facilmente ao toque. O seu posicionamento deve ser no topo da página de maneira a que seja imediatamente visível e sem exigir scroll, o que não invalida a sua repetição quando oportuno;
  • o uso de imagens no CTA deve fazer-se acompanhar sempre do texto ALT, embora seja desaconselhado este método, devido ao bloqueio automático de imagens em muitos e-mails;
  • a quantidade de texto a introduzir deve ser minimizada de forma a tornar os formulários o mais curtos e simples possível;
  • para conseguir que os elementos numa página assumam o comportamento que pretendemos é imprescindível o uso de regras e condições (media queries), sendo width a característica mais utilizada por se adaptar a qualquer tamanho de ecrã independentemente da sua orientação.

A perspetiva mobile first veio alterar o panorama da internet e é uma abordagem que devemos considerar no momento de desenhar aquela que será uma melhor experiência para o utilizador. Com a crescente importância do design mobile, necessitamos de uma solução que seja fácil de navegar e que permita ao utilizador encontrar facilmente o que procura, tendo em vista o princípio de que a essência da web é a experiência do utilizador e não o design.

A oportunidade está na ponta dos teus dedos!

Se ficaste com alguma dúvida sobre design em mobile ou outro assunto fala connosco. Subscreve a nossa newsletter e recebe mais conteúdos relacionados!

QUER ACELERAR O SEU NEGÓCIO NO MERCADO DIGITAL?

Deixe o seu Comentário

Comentários