O futuro do design da interface do usuário: ferramentas de interface do usuário de última geração

As ferramentas de design de interface do usuário percorreram um longo caminho desde a primeira geração do Adobe Photoshop, um programa destinado à edição de fotos, não à criação de interfaces de usuário dinâmicas. A geração atual de ferramentas, como Adobe XD, Figma e Sketch, tornou nosso trabalho mais fácil e rápido.

No entanto, as ineficiências em nossos fluxos de trabalho diários são abundantes e estamos desperdiçando tempo e recursos preciosos quando poderíamos estar projetando produtos que as pessoas desejam usar. Os programas de design disponíveis hoje são superiores aos que começamos, mas eles não capitalizam a tecnologia atual e nos impedem de realizar todo o nosso potencial como designers de interface do usuário.

É hora de uma nova geração de ferramentas de interface do usuário.

Integrando Design e Código

As futuras ferramentas de interface do usuário reunirão design e código para fornecer uma experiência mais perfeita para designers e desenvolvedores. Nossas ferramentas atuais não estão nos ajudando a projetar interfaces de usuário da web; eles estão nos ajudando a projetar representações abstratas de interfaces de usuário da web. Mock-ups feitos no Figma e Sketch são desconectados do código-fonte.

Hoje, muitos designers conhecem o básico de HTML e CSS. Alguns linha-dura projetam em código, mas isso não é eficaz para projetos complexos; os designers precisam da capacidade de explorar uma prova de conceito rapidamente antes de se comprometerem com ela.

Os desenvolvedores de software têm o Visual Studio Code, uma ferramenta que une edição e desenvolvimento de código e permite que engenheiros construam, testem e depurem código no mesmo ambiente. Da mesma forma, os designers precisam de um ambiente de desenvolvimento visual que forneça recursos completos de design, mas também gere código pronto para produção.

Aqui está o que o futuro reserva.

A criação paralela substituirá as transferências de designer/desenvolvedor

Há muito vai-e-vem entre designers e desenvolvedores, especialmente durante a fase de transferência. Em alguns casos, a transferência é tão demorada e exaustiva que a qualidade do trabalho é prejudicada. Com ferramentas de design de última geração que fazem interface com o código-fonte, os desenvolvedores não serão mais os únicos responsáveis ​​pela criação de interfaces de usuário. Em vez disso, eles poderão se concentrar no desenvolvimento da arquitetura lógica que conecta a interface do usuário de um produto ao seu back-end e o faz funcionar corretamente.

Os designers estabelecerão as bases das interfaces de usuário com o código integrado e os desenvolvedores desenvolverão esse código para dar vida aos produtos. Os designers não precisarão mais incomodar os desenvolvedores com solicitações como “Por favor, adicione 16 px de preenchimento em vez de 8 px, conforme mostrado na maquete”. E os desenvolvedores não terão que pausar para fazer perguntas de design como "Como esse componente deve ser dimensionado entre os pontos de interrupção do tablet e do desktop?"

Em vez disso, designers e desenvolvedores farão parcerias em questões mais importantes, como se uma abordagem de design é viável com o tempo e o orçamento ou se todos os estados de um componente de interface do usuário foram resolvidos.

Ferramentas de design de interface do usuário e software de desenvolvedor se alinharão

As ferramentas atuais contam com modelos de programação sob medida para gerar componentes de design. Esses modelos geralmente não são tão robustos quanto o CSS e não permitem que os designers vejam o código gerado automaticamente subjacente a seus arquivos de design — código que deve ser exportado para HTML, CSS ou JavaScript. Seria muito mais simples se nossas ferramentas usassem HTML e CSS nativamente.

Por exemplo, CSS usa o modelo de caixa, que exige colocar os elementos HTML em cada página dentro de uma caixa que é codificada para definir sua altura, largura, borda e preenchimento. O Figma chega perto de fornecer esse recurso com seu recurso de layout automático. Mas se o Figma usasse o modelo de caixa que já alimenta a maioria das interfaces de usuário da web, os desenvolvedores precisariam traduzir e exportar menos.

O mesmo vale para a herança de estilo, que controla o que acontece quando nenhum estilo é especificado para um elemento específico - semelhante a um padrão. O CSS o usa, mas a maioria das ferramentas de design, que não foram criadas para serem específicas da web, não.

Precisamos de nossas ferramentas para gerar visualizações da Web, não pranchetas estáticas ou maquetes. Não precisamos de simuladores de HTML e CSS. Precisamos de HTML e CSS.

Maquetes se tornarão obsoletas

Em vez de maquetes descartáveis, vamos jogar maquetes pela porta.

Mock-ups deixam muitas perguntas sem resposta. É inviável projetar um para cada ambiente digital. Hoje, os designers criam layouts para larguras de tela de 320 px, 834 px e 1440 px; mas o que acontece se parte do layout quebrar em uma viewport de 1220 px? E por que não otimizar para 375 px, um tamanho comum para os telefones maiores de hoje?

Criar uma prancheta para cada cenário é impraticável, especialmente ao considerar todos os pontos de interrupção e visualizações, sem mencionar os temas obscuros. Projetar para todas essas variáveis ​​aumenta o número de pranchetas além da razão.

Mock-ups também são um desperdício de recursos. Eles são demorados para construir e se tornaram menos proeminentes no design de produtos digitais. O Webflow acabou com os mock-ups e, em vez disso, defende protótipos responsivos e interativos. (Infelizmente, o Webflow é limitado a soluções baseadas na web e atende a sites simples). E, embora as entregas descartáveis ​​possam fazer sentido durante a concepção, elas são um desperdício durante a fase de solução.

Todos os estados do sistema serão contabilizados

Todos os produtos digitais têm estados que correspondem ao que estão fazendo em um determinado momento – por exemplo, travando durante o carregamento ou exibindo uma mensagem de erro.

Cada estado deve ser considerado, mas as ferramentas de UI atuais deixam essa tarefa para os designers, forçando-os a criar inúmeras variantes de um único componente. As ferramentas de desenvolvimento React e Vue.js permitem que os desenvolvedores ajustem facilmente todos os estados possíveis de um componente. As ferramentas de projeto devem seguir o exemplo e encorajar os designers – até mesmo importuná-los – a garantir que todos os estados dos componentes sejam projetados.

Dados reais substituirão o conteúdo do marcador de posição

Assim como os designers criam componentes para vários estados, eles também projetam para uma ampla variedade de dados. Os designers de interface do usuário precisam ser capazes de testar seus componentes com a entrada real - a cópia, imagens, datas, nomes, títulos e muito mais - que preencherão os componentes em seus designs. Atualmente, os designers só podem simular dados copiando e colando manualmente em pranchetas, uma tarefa extremamente tediosa. Existem plugins que podem ajudar a automatizar esse processo, mas são complicados.

Pedir aos desenvolvedores que avaliem como os componentes lidam com os dados também não é a resposta. Quando os componentes chegam ao teste, é muito demorado reprojetá-los. E se os designers não puderem testar e iterar componentes com dados reais, como eles saberão se um cartão funciona com um título longo ou nenhum título? Como eles descobrirão que uma fonte não suporta caracteres árabes ou que um site não aceita idiomas lidos da direita para a esquerda?

O teste de caso de borda ficará mais fácil

Quando as ferramentas de interface do usuário finalmente atenderem a todos os estados e permitirem testes de dados reais, os designers poderão antecipar melhor os casos extremos. Uma vez que um componente é criado, os designers irão testar seus vários estados, bombardeando-o com diversos dados para ver como ele se comporta em diferentes cenários. Dessa forma, a interface do usuário se tornará o domínio do designer, liberando os desenvolvedores para se concentrarem em tarefas como corrigir o JavaScript ou testar as APIs.

Um mundo de ferramentas de desenvolvedor e extensões de navegador de terceiros será aberto

Uma vez que nosso trabalho esteja em HTML e CSS, todo um ecossistema de extensões ficará disponível durante a fase de design, como o indispensável Lighthouse para auditorias de desempenho, SEO e acessibilidade, ou as várias ferramentas de desenvolvedor de navegadores que simulam pontos de interrupção de dispositivos e baixas velocidades de rede. O conjunto de ferramentas do navegador é muito mais valioso para criar e testar UIs prontas para produção do que qualquer um dos plug-ins do Figma, Sketch ou Adobe XD.

Designers e desenvolvedores trabalharão em paralelo

Eu comparo o estado atual do desenvolvimento de produtos a uma cozinha na qual um chef está tentando cozinhar um prato ditando a outro chef o que fazer: pode funcionar, mas levará muito mais tempo e será muito menos eficiente. Existem empresas desenvolvendo ferramentas de design baseadas em código – Hadron, Modulz e Relate têm produtos em versão beta. A adoção generalizada dessas ferramentas marcará o início de uma revolução na criação de produtos digitais.

Também sinalizará uma mudança radical na relação designer-desenvolvedor. Com os dois lados trabalhando em paralelo, as equipes de produto se tornarão exponencialmente mais eficientes. Os desenvolvedores estarão livres para lidar com a lógica complexa da arquitetura da interface do usuário em vez de perder tempo interpretando maquetes ou ficar atolados por designers pedindo que eles ajustem os pixels à perfeição. E os designers serão mais valiosos para suas equipes e empresas à medida que se tornarem co-criadores de produtos digitais de sucesso.