Considere uma abordagem mobile-first para sua próxima iniciativa na web

Em nosso mundo conectado atual, os usuários têm grandes expectativas para experiências digitais. E em um laptop ou desktop de última geração, é bastante simples atender a essas expectativas. Telas grandes agradáveis, internet rápida, muito armazenamento e até dispositivos de entrada adicionais, como teclado ou mouse, fornecem aos designers e desenvolvedores muitos recursos para criar uma experiência de usuário de primeira classe.

Os dispositivos móveis, no entanto, não têm todos esses sinos e assobios. Portanto, ao começar com uma mídia menos restritiva e depois tentar reduzir, como as organizações tradicionalmente fazem, muitas vezes os usuários acabam com uma experiência abaixo do ideal em dispositivos móveis. No cenário de aplicativos de ontem, provavelmente estava tudo bem. Havia aplicativos de desktop e, em seguida, aplicativos móveis – o primeiro sendo onde o trabalho era feito e o último mais focado em casos de uso de conveniência.

O que é uma abordagem mobile-first?

Quando os aplicativos e sites móveis chegaram à cena, os designers se esforçaram muito pelo que foi chamado de “degradação graciosa”. Isso significava que, à medida que a experiência passou do desktop para tablets e telefones, recursos e funcionalidades foram eliminados.

O mundo mudou significativamente na última década, principalmente quando se trata de onde, quando e como trabalhamos. Para atender a essas necessidades em constante mudança, os defensores do mobile-first se apegaram ao “avanço progressivo”.

O avanço progressivo é o inverso da degradação graciosa. Ao começar com a menor tela e garantir que ela possa oferecer a experiência do aplicativo principal, os designers podem adicionar funcionalidades e recursos adicionais com cada classe de dispositivo maior.

Dessa forma, onde quer que os usuários e o aplicativo se cruzem, eles ainda podem esperar uma experiência de usuário de primeira linha e as principais funções necessárias para realizar o trabalho.

VEJA: Crie aplicativos móveis personalizados sem ter que codificar com este aplicativo simples (TechRepublic Academy)

Por que o mobile first faz sentido no cenário digital de hoje

Hoje, mais de 2 bilhões de pessoas acessam a internet a partir de seus smartphones. Alguns analistas preveem que até 2025 pode ser assim que mais de 70% dos usuários de internet operam.

Desde 2012, as vendas de smartphones superaram drasticamente as vendas de computadores desktop. O mercado de jogos para celular está vendendo mais do que PC e consoles juntos. Não faltam estatísticas que você pode encontrar na internet para mostrar o quão importante é capturar e cativar os usuários móveis. Mas há mais na história do que apenas o grande volume de dispositivos nas mãos do consumidor.

Os algoritmos do Google favorecem sites compatíveis com dispositivos móveis. Na verdade, é tão importante para o gigante das buscas que eles até criaram um site que pode testar a compatibilidade com dispositivos móveis do seu site para você.

Para a maioria das aplicações, o tráfego orgânico através dos motores de busca é um ingrediente chave para o sucesso a longo prazo. Prestar atenção aos algoritmos do Google é uma das melhores maneiras de garantir a descoberta. E como a mobilidade está no topo dessa lista, por extensão, uma estratégia mobile-first oferece uma vantagem competitiva.

O conteúdo é o rei indiscutível

Ao começar a usar dispositivos móveis, é importante lembrar que o conteúdo é rei. Os designers devem se concentrar em exibir exatamente o conteúdo que um usuário precisa e nada mais. Elementos extras tendem a distrair o foco do usuário na tarefa atual, e a produtividade sofre quando o espaço da tela é limitado.

Portanto, embora seja típico mostrar todas as opções em uma visualização de desktop, aplicativos móveis bem projetados usam o contexto para decidir o que mostrar quando e, igualmente importante, o que não mostrar.

Isso não significa que os usuários móveis não podem acessar todas essas opções refinadas, significa apenas que as opções que geralmente não suportam o caso de uso principal estão ocultas por trás de construções de interface do usuário de baixo perfil, como menus recolhíveis e acordeões.

Práticas recomendadas de design para dispositivos móveis

Comece com seus usuários em mente

Seu aplicativo está resolvendo um problema e, se o design do seu celular não permitir que o usuário resolva esse problema de forma rápida e eficiente, é uma oportunidade perdida.

A hierarquia importa

Deve ficar claro de como seu aplicativo é apresentado ao usuário o que é mais importante naquele momento específico. Se você estiver em um site de banco móvel para transferir fundos, espera ver quanto dinheiro tem na frente e no centro.

Simples é melhor

Reduza o número de links em sua navegação quando possível e use menos páginas que aproveitam a rolagem vertical. Para aplicativos de retrato, não divida a tela em mais de duas colunas. E considere fontes maiores e bordas amplas e limpas.

Chamada para ação clara

Cada tela deve ter um call to action (CTA) claro. Deve ser brilhante, ousado e consistente. O Material Design do Google tem uma ótima construção para isso chamada FAB, ou botão de ação flutuante, se você quiser algumas diretrizes.

Não faça os usuários esperarem

Verifique os tempos de carregamento. Um estudo sugere que 79% dos compradores provavelmente não usarão um site novamente se o desempenho for ruim. Comprima imagens onde puder e utilize técnicas como “carregamento lento” para melhorar o tempo de espera.

VEJA: Teste de carga vs. teste de estresse: Quais são as principais diferenças? (TechRepublic)

Inspiração de aplicativos mobile-first

Se você está procurando alguma inspiração, considere dar uma olhada nestes sites móveis exemplares. Felizmente, esses exemplos farão com que você considere se uma abordagem mobile-first pode ser a abordagem certa para seu próximo empreendimento digital.

Pólen

Não deve ser surpresa que o Pollen tenha uma experiência móvel elegante quando você dá uma olhada no que eles fazem. Pollen é um estúdio digital de design e UX. O site carrega rapidamente, faz um ótimo uso de espaço em branco e faz um excelente trabalho de adaptação do menu de navegação com base em se o site está rodando em desktop ou mobile (Figura A).

Figura A