Por que é tão fácil entender o mobile-first de maneira errada?
O projeto mobile-first funciona melhor quando o entendemos pelo o que ele realmente é
Definitivamente, existe lógica na filosofia básica da abordagem mobile-first de design, mas existem também alguns problemas escondidos que fazem com que até designers experientes errem questões fundamentais na experiência do usuário.
Fazer o projeto errado serve apenas para reverter o problema básico, criando uma experiência ruim no desktop ao invés de uma experiência ruim no mobile, o que só muda o problema de lugar, ao invés de realmente resolvê-lo.
Escreva sobre Design, UX, Produto & Tecnologia.
Primeiras dicas do problema
Comecei a me questionar sobre possíveis armadilhas do design mobile-first após a Apple efetuar o redesign do iWork, muito criticado em 2013. Eu estava entre os muitos usuários ativos que ficaram decepcionados pela remoção ou enterro de recursos que usávamos frequentemente.
A narrativa geral nos círculos de design naquele tempo foi que a unificação das experiências do celular, do tablet e do desktop era algo inevitável e glorioso, e este era o caminho do futuro. Eu não entendi porque ser capaz de utilizar o iWork em um celular significava que eu deveria ter uma experiência irritante no desktop, mas me mantive quieto, culpei-me e deixei rolar.
Na mesma época, notei que o MailChimp (outra ferramenta que utilizo frequentemente) passou por um redesign similar. Tenho bastante experiência com os softwares que utilizo sendo redesenhados, e geralmente não faço alarde disto, mas este estava me aborrecendo da mesma maneira que o redesign do iWork me aborreceu. Eu sabia que era um projeto mobile-first, que seria mais fácil para usar em tablets etc, mas eu ainda me sentia frustrado pois coisas que eram antes visíveis e fáceis de navegar agora estavam aninhadas em qualquer lugar não óbvio.
Novamente, entretanto, eu eliminei esses pensamentos, lidei como irritações mínimas para este claro e brilhante futuro do mobile-first. A propósito, estamos falando da Apple e do MailChimp aqui, duas das empresas mais amadas e amigáveis por aí. Ambas ferramentas são bem projetadas e fáceis de mexer no geral, então quem sou eu para criticá-las por conta das minhas pequenas irritações? Dor é apenas o preço da mudança, certo?
Mas elas não eram as únicas. Continuei notando um número crescente de sites que eram notoriamente mobile-first e que forneciam uma experiência confusa no desktop, como se agora fosse vez dos usuários de desktop sofrerem por todos aqueles anos que as necessidades dos usuários mobile foram neglicenciadas.
É fácil confundir um bom design e um design impecável, e tratar certas empresas como intocáveis. Porém, ainda há pontos de fricção até nos softwares melhor projetados, e há muita coisa a ser aprendida sobre o design avançado na experiência do usuário analisando as falhas de ótimas interfaces de outra maneira.
Um lembrete recente
Recentemente eu abri o Adobe Acrobat para reorganizar algumas páginas em um PDF que eu estava trabalhando, e descobri que ele tinha uma interface totalmente nova.
Eu bisbilhotei por alguns minutos e percebi que estava tendo problemas para descobrir como fazer algo que antes era relativamente simples, e fiquei surpreso em notar que estava pensando — Ah, este é provavelmente mais um desses designs mobile-first estúpidos…
Espera, o quê!?
Eu não deveria estar pensando coisas como esta. Design mobile-first é uma coisa boa. Que UX designer que se preze poderia sequer permitir ter essas ideias em sua cabeça?
Mas só por curiosidade eu pesquisei e encontrei um vídeo inspirador anunciando o redesign.
“Multiple devices ”, “cloud-connected ecossystem” etc. Eles estavam utilizando todas as palavras certas. Parece que seria uma experiência incrível para o usuário. Sem dúvidas.
Então por que eu estava aqui sentado frustado novamente, e por que eu estava atribuindo isto ao design mobile-first? Isso não poderia estar certo, poderia?
Como um teste de sanidade, eu dei um pulo no Twitter para ver se eu era o único me sentindo assim.
Ok, não era só eu.
O fato de eu estar instintivamente começando a pensar sobre design mobile-first (como usuário) com apreensão, junto ao fato de eu estar vendo um número crescente de usuários frustrados começando a reclamar sobre essas interfaces, fez-me começar a admitir para mim mesmo que talvez a abordagem mobile-first não era a resposta pura e certa que nós todos estávamos pensando que fosse.
Degradação Graciosa vs. Melhoria Progressiva
A mudança dos tamanhos das telas sempre causaram problemas para os designers de experiência do usuário (UX designers), mas a questão explodiu quando o iPhone surgiu em 2007 e mandou os números de utilização da web em mobile para o espaço. O que antes era ignorado, agora deveria ser considerado.
Isto estava inicialmente atrelado ao conceito de degradação graciosa, que basicamente significa projetar para os dispositivos maiores ou mais poderosos, depois gradualmente remover features (recursos) ou conteúdo baseados nas restrições dos dispositivos menores e mais fracos.
Esta abordagem era bem conhecida antes da utilização da web no mobile decolar, pois os designers e desenvolvedores utilizavam este conceito para resolver as diferenças nas quais páginas tipo cascada poderiam funcionar em navegadores, com suportes variados por meio de diferentes técnicas de design. Em uma abordagem de degradação graciosa, você deve projetar um site lindo para desktop, e então cortá-lo, apertá-lo, tirá-lo, ou fazer qualquer coisa para criar uma versão aceitável para dispositivos mobiles.
Uma filosofia concorrente recebeu o nome de melhoria progressiva, uma frase popularizada por Steven Champeon e Nick Finck em sua apresentação no SXSW em 2003, Inclusive Web Design for the Future with Progressive Enhancement (Web Design Inclusivo para o Futuro com Melhoria Progressiva). Nesta apresentação, eles incluíram a seguinte introdução:
Compromisso é possível e desejável, mas tal compromisso não deverá vir às custas do usuário, mas sim em termos das capacidades nativas da escolha do usuário pelo dispositivo. Dado às poderosas capacidades dos modernos gráficos dos navegadores para desktop, agora é possível fornecer uma experiência progressiva, gradualmente melhorada através de uma ampla variedade de navegadores, utilizando um documento markup e uma série de páginas de estilo, não seletivamente entregadas aos usuário através browser sniffing, mas sim requisitada pelo próprio cliente.
Não deixe ninguém para trás.
A estratégia básica da melhoria progressiva é projetar para o menor denominador comum, depois adicionar features opcionais baseadas nas habilidades do dispositivo.
O que é mobile-first?
Como o uso mobile continuou crescendo dramaticamente com o passar do tempo, a filosofia dominante no design começou a migrar de degradação graciosa para melhoria progressiva.
Em 2009, Luke Wroblewski escreveu uma peça chamada Mobile First que deu suporte (e um nome cativante) para a escola de pensamento de Melhoria Progressiva.
Wroblewski explicou que projetar para mobile faz você focar nas funções e prioridades mais essenciais, que no final das contas irá liderar para uma experiência menos desordenada, até mesmo no software para desktop.
Desde então, a ideia do design mobile-first decolou e continuou ganhando ímpeto.
Sempre há uma armadilha
Como designers, nós queremos acreditar. Queremos que os problemas impossíveis sejam resolvidos para que não tenhamos que continuar lutando com eles. Queremos que alguém nos dê a resposta, assim poderemos finalmente saber ao invés de questionar.
O design mobile-first tem todos os sinais de ser A Resposta Verdadeira. É vigoroso, fácil de entender e soa lógico.
Mas o projeto de experiência do usuário nunca é tão simples. Na verdade, se você sentir que um grande problema de design finalmente foi resolvido, você provavelmente deveria ficar preocupado, pois é muito mais provável que as pessoas estejam ignorantemente exagerando na eficácia da solução por um desejo de chamá-lo de problema resolvido.
Essa imagem famosa ilustra bem os conceitos de degradação graciosa (ou desktop-first) versus melhoria progressiva (mobile-first).
Parece óbvio pela sequência de cima que a degradação graciosa (Graceful Degradation) é a resposta errada, guiando para uma solução inchada que não funciona bem no mobile.
O que é menos óbvio, no entanto, é que a solução para desktop via melhoria progressiva (Progressive Enhancement) também tem problemas. A solução apresentada ali parece pouco desenvolvida e inapropriada para o contexto.
Está é a armadilha do design mobile-first. Quando começamos com a solução mais moderada, tendemos a ficar preguiçosos e falhamos em completá-las para contextos mais robustos.
O resultado final é um projeto que falha em tirar vantagem de todas capacidades nativas do dispositivo ou contexto do usuário, e pode (no pior dos casos) parecer simplista ou imaturo.
O contrário de uma resposta errada geralmente é outra resposta errada
Quando frustrados por uma situação externa, nós geralmente reagimos pulando para o outro extremo. Projetar primeiramente para desktop e tratar mobile como um pensamento posterior era errado, então como uma indústria nós respondemos projetando primeiramente para mobile, tratando o desktop como um pensamento posterior.
Nós não resolvemos o problema, apenas o reviramos.
Se eu estivesse no meu celular, eu certamente apreciaria uma interface como a do novo Adobe Acrobat DC. Meus dedos grandes não teriam problema para dançar pelos grandes botões, que estariam claramente visíveis na minha pequena tela do celular.
Porém, quando eu estou confortavelmente sentado em minha mesa de frente para um enorme monitor, utilizando um sensível mouse óptico, eu não tenho as mesmas restrições. Neste contexto, os botões gigantes fazem o software parecer mais com um brinquedo da Fisher Price, quase comicamente inapropriados para o display relativamente poderoso e dispositivos que estou utilizando.
Novos usuários vs. Usuários Capacitados
Minha esposa Katie tem um podcast chamado Fazendo Negócios como Família e nós usamos o Adobe Audition para pós-produção do áudio. É um ótimo software, e por não ser tão fácil para novos usuários como, digamos, o GarageBand da Apple, é uma ferramenta muito mais poderosa e flexível no final das contas.
GarageBand é um software maravilhosamente projetado e simples de usar, então por que usamos o Audition? Bom, é porque existe dois tipos de amigabilidade para o usuário.
Alguns softwares são amigáveis para novos usuários, mas frustrantes para usuários capacitados. A funcionalidade restrita, os botões gigantes, as animações amigáveis, os processos passo-a-passo etc., tudo auxilia os novos usuários com o mínimo esforço mental e os ajuda a começar rapidamente. Este é o GarageBand.
Outro software, embora, é projetado para usuários capacitados que estão familiarizados com o que estão fazendo, que entendem os conceitos e preferem a conveniência de ter informação e funcionalidade visíveis e com fácil acesso, mesmo se isto significar ter uma interface mais poluída. Se você olhar para qualquer software projetado para especialistas, quase sempre parecerá complicado para os menos familiarizados com ele. Este é o Audition.
No campo do design de experiência do usuário, existe uma tendência significante ao redor do primeiro tipo de amigabilidade do usuário. Nós otimizamos obsessivamente para o usuário novo e assumimos (frequentemente de maneira errada) que o que é bom para o usuário novo é bom para todos. Fazer as coisas ficarem mais fáceis para os novos usuários é um passo significante para frente, especialmente quando existem tantos softwares ruins lá fora, mas é realmente uma única peça de todo quebra-cabeça da experiência do usuário.
Esta tendência do novo usuário é importante ser entendida pois é parte do motivo que nós fazemos o mobile-first erroneamente. Estamos tão focados em conceitos como minimalismo, simplicidade, limitação etc. que geralmente esquecemos que estes não são sempre a resposta correta. Às vezes interfaces mais complexas são apropriadas, especialmente para softwares que são utilizados frequentemente, pois isto aumenta visibilidade e eficiência.
A abordagem de design mobile-first se desenvolve bem dentro desta tendência do novo usuário, o que é parte do motivo de ter decolado tão rapidamente para dentro da comunidade de design. Nós amamos a ideia de projetar algo tão simples que uma criança pode usar e às vezes nos esquecemos que o verdadeiro público-alvo não-infantil pode ficar frustrado por aquele tipo de interface.
Mobile-first é um compromisso, não um ideal
Em um mundo perfeito, os softwares teriam variações apropriadas para cada dispositivo e tamanho de tela nos quais ele opera. A versão mobile seria organizada apropriadamente para o tamanho da tela e dispositivos conectáveis. A versão para tablets seria diferente, talvez tirando vantagem das diferentes maneiras que as pessoas os seguram, a redução do alcance do dedão relativo ao tamanho da tela etc. E então, a versão para desktop poderia incluir um layout totalmente diferente, baseado no tamanho wide screen, posição do usuário totalmente diferente, aumentando a flexibilidade de outros dispositivos conectáveis etc.
(Estes são alguns dos muitos exemplos; existem muitos outros contextos para projetar do que apenas celular, tablet e desktop.)
Porém, nós não vivemos em um mundo perfeito. Nós vivemos em um mundo onde praticamente tudo tem um preço e um prazo de entrega, e isso significa que nós temos que fazer alguns compromissos em nome da eficiência.
O mobile-first não é ele a resposta correta. É apenas uma resposta eficiente. Se você pode projetar para um dispositivo e depois puxá-lo para funcionar mais ou menos em outros dispositivos, você economizou muito tempo do processo. Com a quantidade de possíveis dispositivos para os quais você, em outro caso, teria que projetar, isto é definitivamente uma coisa boa.
(E isso é uma coisa a ser dita para forçar a consistência das interfaces através dos dispositivos, embora eu acredite que a importância disto é quase sempre super estimada. O aplicativo do Facebook para mobile e o Facebook para desktop têm experiências significativamente diferentes, por exemplo, mas as pessoas geralmente parecem ter um pequeno problema com ir para frente e para trás entre eles.)
Quando discutindo e promovendo o design mobile-first, nós devemos nos lembrar que ele é uma solução com compromisso eficiente, planejado e alcançando resultados razoavelmente bons dentro de orçamentos limitados e prazos de entrega. Não é um passo brilhante para interfaces ideais.
Fazendo um design mobile-first da maneira certa
O mobile-first pode funcionar muito bem, se você estiver o fazendo com alguns princípios sólidos na mente:
- Não pare muito cedo. A versão desktop do seu projeto não deverá ser uma versão grande e espalhada da sua interface mobile. Existe uma série de tecnologias que permitem você trocar grandes porções da interface por mídias diferentes, então o que é uma lista na versão mobile pode facilmente se transformar em uma tabela na versão desktop, por exemplo. Faça a interface ser apropriada ao seu contexto, mesmo se isso significa mudar significantemente certos elementos.
- Considere orientação e dispositivos conectáveis. O usuário do seu aplicativo para celular está provavelmente realizando muitas das ações na orientação retrato predominante com seu dedão, então faz sentido manter a navegação e funcionalidade entre a parte de baixo até o centro da tela. Em um tablet, eles podem muito bem estar usando as duas mãos (incluindo os dedos indicadores) na orientação paisagem, o que lhe dá mais espaço para funcionalidades adicionais dentro do alcance conveniente. Em um desktop, eles estão provavelmente utilizando um mouse bem controlado ou um trakcpad, têm uma tela grande que pode muito bem mostrar as coisas em grandes detalhes e estão mais propensos a esperar as funcionalidades no topo da tela do que na parte de baixo. Todos estes princípios podem variar de acordo com a natureza do aplicativo, claro, mas você pode ver como faz sentido alterar significativamente a interface para diferentes contextos. Se seu usuário está mostrando maior capacidade ou controle, aproveite-se disto apropriadamente.
- Foque em funcionalidade, não no layout. Umas das maiores mudanças que o mobile-first nos trouxe foi a fuga do pensamento não é possível fazer isso no mobile. Agora é esperado que as interfaces mobile ofereçam acesso a todo o conteúdo e funcionalidades que a versão desktop possa trazer. Este é o principal valor do mobile-first. É muito menos importante que a experiência e o layout sejam os mesmos em vários dispositivos.
- Priorize contextos mais utilizados. Se você está projetando uma interface que monitora uma usina nuclear, e a maior parte do uso até então se deu por uma pessoa sentada o dia todo em sua estação de trabalho, é de fato ok projetar para desktop primeiramente. (Isto não significa que a interface mobile deverá ser uma versão cortada com funcionalidades restritas, claro — deverá permitir o usuário a fazer praticamente tudo o que a versão desktop permite. Entretanto, se a usabilidade é voltada para um certo contexto, faz sentido projetar primeiro para aquele contexto ao invés de tentar extrapolar o conteúdo projetado para outro contexto.)
- Não tenha medo de autenticamente separar as experiências. As versões mais restritas de uma interface devem oferecer as mesmas funcionalidades primordiais que estão nas versões mais robustas, mas é possível, em alguns contextos, observar ou trabalhar de maneira diferente se for mais propício para as necessidades ou situação do usuário.
- Equilibre-se apropriadamente entre novos usuários e usuários capacitados. Alguns softwares realmente são usados uma vez e raramente revisitados (por exemplo, um quiosque de informação de um shopping). Para estas situações, pode realmente fazer sentido projetar a interface para ser simples como a Fisher Price. Embora, se você está projetando um aplicativo que as pessoas irão utilizar cotidianamente como parte de seu trabalho ou vida pessoal, poderá fazer mais sentido focar primeiro em problemas de visibilidade e eficiência, mesmo se o caminho for uma interface mais complicada. Não deixe o mobile-first te forçar a uma tendência inapropriada no rumo do minimalismo, pois minimalismo não é a resposta para todo problema de design.
Design mobile-first é ótimo
Embora eu tenha tentado tirar o mobile-first de seu pedestal por um momento, eu devo esclarecer que sou um fã desta abordagem e acredito ser uma ótima maneira de disciplinar seu pensamento quando tratamos de design de interfaces.
Temos que nos lembrar, entretanto, de não nos embrulharmos na veneração de qualquer solução particular de UX, pois UX não é simples o suficiente para ter respostas universais. Mobile-first é uma abordagem de compromisso que objetiva mostrar boas soluções em orçamentos e prazos apertados, e faz realmente um bom trabalho disto, mesmo não sendo A Única Verdade para todas as situações. Mobile-first funciona melhor quando o entendemos o que ele é e quando usá-lo como uma plataforma para o progresso, e não uma desculpa para pular alguns pensamentos reais de contexto específico do design.
Texto original: Why is it so Easy to Get “Mobile First” Wrong? Mobile-first design works best when we understand it for what it really is de James Archer, traduzido por Daniela Castro.
