Mobile First: entenda a nova experiência do usuário

Por ,
em

Mobile first

No último artigo, falamos como o mobile first está revolucionando o modo de pensar e construir sites. Agora, quero me aprofundar no assunto, analisando em maiores detalhes alguns aspectos, principalmente os que tangem a experiência do usuário (UX), que está intimamente ligada à relação que temos com o espaço. Neste ponto, Internet e arquitetura tornam-se muito semelhantes.

Na arquitetura, a limitação de espaço nos obriga a pensar no que é mais importante. Por isso, tanto em um escritório ou casa quanto em um site é preciso pensar pensar no que deve estar mais visível, no que o usuário pode optar por ver e no que o não deve fazer parte de um escritório – ou de uma página de Internet.

A limitação de espaço é fundamental para entendermos a experiência do usuário nestes tempos em que estamos mais conectados nos celulares que nos computadores.

Sites pensados para desktop são bonitos, mas pouco funcionais

O desktop oferece bastante espaço para o conteúdo, o que dá mais liberdade para distribuí-lo como quiser na página. As abordagens mais comuns são o chamado “Layout Z”, que segue a ordem de leitura da esquerda para a direita, quebrando a linha e o layout em colunas, que cria vários vieses de conteúdo dentro da página.

Essa liberdade criativa de certa forma desobrigava os designers de pensar o espaço de maneira funcional, pois não havia muito controle sobre como os usuários liam a página. Alguns profissionais sequer consideravam a organização do conteúdo, atentando mais para a estética.

Como o celular muda o modo de consumir informação

Em mobile a limitação de espaço dificulta a disposição de elementos lateralmente, por isso o mais comum é que o layout siga uma ordem mais LINEAR, de cima para baixo. Isso obriga a pensar melhor não apenas na ordem de prioridade dos conteúdos na páginas, mas também no fluxo de leitura que irá conduzir o usuário do site à conclusão esperada, por exemplo em uma loja virtual, a foto, a descrição do produto e a oferta antes do botão de compra.

Essa necessidade de entender o comportamento dos usuários fez com que a web importasse uma prática bastante comum no design de produtos, o estudo de UX (sigla em inglês para experiência de usuário), que contribuiu para um grande salto qualitativo da web nos últimos anos.

Novos tempos, novas experiências

Como dito anteriormente, a web surgiu no desktop e aos poucos teve que se adaptar ao espaço mobile. Com isso, surgiram diversos padrões de design responsivos. Um dos mais comuns é o grid, que consiste em quebrar o conteúdo em diversos blocos que se encaixam no espaço disponível, lado a lado no desktop ou um abaixo do outro em mobile. O problema com essa abordagem é que, ao concentrar o conteúdo em um espaço menor, você aumenta a altura da página. Exemplo: um site com um grid de três colunas em desktop terá o triplo da altura quando os blocos do grid se posicionarem um abaixo do outro.

Para resolver esse problema, foram criadas novas soluções de design, como a janela modal (uma espécie de pop-up mais amigável), o slider arrastável e painel off-canvas, que desliza da borda da tela para ser exibido, depois desliza para fora novamente, para ser ocultado. Essas soluções economizam espaço ao ocultar o conteúdo secundário e exibi-lo conforme o usuário demandar. Como um bônus, esses recursos enriqueceram a experiência de navegação dos usuários, sendo adotadas inclusive no desktop.

Muitas das animações de transição surgiram de limitações técnicas dos smartphones, como a necessidade de um feedback visual para ações como clicar e arrastar, ou a eventos como envio de formulário e carregamento de imagem.

Os 2 maiores erros de site de mobile first

É muito fácil errar na aplicação do conceito de mobile first, porque os paradigmas da web desktop estão muito incutidos na mente dos designers, especialmente os mais experientes. A web mobile traz novos paradigmas de design, como as interações com a tela de toque, a performance de carregamento, as variações de tamanho e orientação de tela, entre outros.

1. Sites que não foram feitos para serem tocados

O primeiro erro ao se projetar um site mobile é desconsiderar as interações com as telas de toque. É comum ver designs considerados responsivos que dependem de interações de desktop, como mouse hover e scroll. Em mobile, essas interações são substituídas por tap e drag ou swipe. É bem comum ver menus dropdown (menu de salto), que exibem o submenu quando se passa o mouse sobre o link. O problema com isso é que no mobile você precisaria clicar para ver o submenu, porém ao clicar no link, o menu salta e, em seguida, você é redirecionado para o endereço do link que clicou. Esse é apenas um exemplo, mas existem diversas interações que divergem do desktop para o mobile. Além disso, existem outras interações interessantes que são pouco exploradas, como swipe, press, drop, pinch, rotate e por aí vai.

2. Sites que não respeitam o espaço

Outro erro comum é não respeitar as restrições de espaço. No desktop, você tem bastante espaço para trabalhar e um cursor preciso que mostra sua posição na tela o tempo todo. Em um smartphone, você tem uma tela pequena e o cursor é a ponta do seu dedo.

Quando se tem elementos como botões e campos de formulário muito pequenos ou muito próximos, é difícil pressioná-los em telas de toque, porque muitas vezes o ponto do dedo é maior que o elemento e acaba pressionando os elementos próximos. Também é comum ver elementos, como imagens ou até páginas inteiras, maiores que a tela, obrigando os usuários a dar zoom e arrastar a tela exaustivamente para visualizar tudo.

Como testar seu site

Se você gostaria de testar o quanto seu site é amigável para o celular, sugiro as seguintes ferramentas:

Google Mobile-Friendly Test Tool

Chrome Device Mode

PageSpeed Insights

A Conversion na mídia
Rede Globo de Televisão SBT Rede Record TV Bandeirantes Portal do UOL Yahoo Notícias Diário do Comércio e Indústria
Voltar ao Topo
fechar

Solicite Orçamento