Por que precisamos de ferramentas paramétricas de design de IU

Por que precisamos de ferramentas paramétricas de design de IU

Setembro 23, 2020

Os designers de interfaces para utilizadores não tiveram ferramentas de design adequadas durante anos. Felizmente, com o aparecimento do Sketch há 10 anos atrás, as coisas começaram a mudar e agora com o Adobe XD, o Figma e outras ferramentas a entrar no mercado estamos a começar a ver uma competição feroz. Estas ferramentas tornam certamente a vida dos designers muito mais fácil do que antes, mas ao mesmo tempo, os designers têm agora a tarefa de desenhar aplicações cada vez mais complexas, envolvendo centenas de ecrãs diferentes.

A minha formação é em Arquitectura e vi esta competição entre ferramentas acontecer há 20 anos atrás. Quando comecei eram apenas uma forma digital de fazer os mesmos desenhos que fazíamos em papel. Mas depois, as ferramentas evoluíram e o design paramétrico entrou em cena.

O que é design paramétrico?

O design paramétrico é vastamente utilizado em Arquitectura onde a relação entre elementos é usada para modificar e informar o design de geometrias e estruturas complexas. Arquitectos mundialmente famosos como Zaha Hadid, Norman Foster ou Santiago Calatrava usam parâmetros para gerar geometrias complexas através de interfaces de programação gráfica, que seriam impossíveis de alcançar com métodos tradicionais de design.

Em Design, paramétrico refere-se a um processo baseado num pensamento algorítmico que utiliza parâmetros e as suas inter-relações para definir uma forma geométrica (que podem ser botões, secções, painéis, etc.). O design de um objecto é então substituído pelo design do processo que gera esse objecto.

Já existem ferramentas que permitem algum tipo de ajuste de espaçamento, contudo ainda não há nenhuma que englobe totalmente a capacidade do design paramétrico. Este método pode gerar formas conectadas a componentes de código, sendo mais fácil fazer mudanças. Numa altura em que as exigências e solicitações de design são constantes e os prazos são mais apertados, o design paramétrico pode ser revolucionário para a produtividade das equipas.

Então como iria funcionar?

O design paramétrico pode ser aplicado no desenho de interfaces para utilizadores uma vez que o designer pode definir parâmetros e as suas inter-relações para definir objectos. Para compreender melhor como funciona o design paramétrico é importante clarificar alguns dos seus termos. Comecemos então por olhar para estes dois botões - A e B. Cada botão é um objecto (que pode ser qualquer elemento no design, como um botão, uma secção ou um painel) e há uma relação entre os dois, neste caso é a distância entre o botão A e o botão B. Podemos definir um parâmetro para cada um, digamos, a largura do botão e a distância a outros botões, que seriam os nossos valores. Finalmente, a combinação de um parâmetro e de um valor específico definido pelo designer é chamado de atributo.

Vejamos um exemplo. Aqui temos um ecrã de telemóvel com o Botão A e o Botão B. A largura do botão A está definida para ser 80px e a relação entre os dois botões é 10px, contudo o designer não definiu a distância entre a margem do botão B e a margem do ecrã.

Quando adoptando uma abordagem de design tradicional onde a relação entre os objectos não é definida, se a largura do Botão A é redefinida para 100px, então irá sobrepor-se ao Botão B, arruinando a relação entre os dois botões.

Por outro lado, se seguirmos o método de design paramétrico e mudarmos a largura do Botão A para 100px, e estabelecermos que a relação entre os dois botões deverá ser sempre 10px, então essa distância ao Botão B irá ser sempre respeitada independentemente do atributo dado ao Botão A. De forma a manter relações entre objectos, alguns parâmetros não definidos poderão mudar como consequência. No exemplo abaixo, a distância entre o Botão B e a margem do ecrã tornou-se mais pequena.

Agora vamos imaginar que redefinimos o parâmetro do Botão A e aumentamos a sua largura para 160px. Uma vez que o Botão B é maior que o espaço restante, move-se imediatamente para baixo do Botão A. É depois necessário definir o espaçamento superior entre os dois objectos.

Vamos subir de nível

Mas pode-se fazer isso com ferramentas de auto-flow nas aplicações actuais, diriam vocês. Sim, de certa forma. Mas não há como tratar das instâncias de elementos de design como seus próprios objectos. E só funciona a um nível macro. Por que é isto importante?

Consideremos o seguinte exemplo. No ecrã original, a altura da secção A é 115px, da B é 45 px e a relação entre as duas é 10px de preenchimento. Agora, imaginemos que precisamos de redesenhar a secção A e é agora mais pequena, com uma altura de 85px. Com as ferramentas actuais, a secção B não se ajusta à A então há um grande espaço entre eles. Imaginemos ter de ajustar isto em dezenas de ecrãs. No design paramétrico podemos definir essa relação para que a secção B seja sempre 10px da margem inferior da A, então se a A se tornar mais pequena, a B irá sempre mover-se para cima.

E se a A se tornar maior, empurra a B para baixo, em vez de se sobrepor e estragar o design. Se isto acontecer, para influenciar outras secções à volta, tudo o que tem de se fazer é mudar alguns parâmetros nessas secções e os ecrãs onde aparecem irão magicamente re-organizar-se. Isto acelera consideravelmente o processo de design sempre que é preciso fazer ajustes.

Acelerar o design de aplicações complexas

O design paramétrico é particularmente importante no desenho de aplicações e websites complexos que englobam um grande número de ecrãs, e quando o projecto está constantemente a sofrer mudanças. Por exemplo, desenha um painel com um elemento de notificações comum a vários ecrãs mas, a certa altura do projecto, o cliente diz que precisa de menos elementos. Numa abordagem tradicional de design, ajustar este elemento iria criar grandes lacunas no design que teriam de ser ajustadas manualmente. Com os elementos de design paramétrico, se um objecto está já definido, as relações entre este objecto e outros objectos podem ser introduzidas e ajustadas a qualquer altura e seriam reflectidas em todos os ecrãs desenhados. Pode até introduzir diferentes relações entre diferentes elementos para que, quando na presença do Objecto Y, comportar-se-ia de certa forma, e na presença do Objecto Z teria um comportamento completamente diferente. As possibilidades são tremendas, particularmente para projectos de larga escala e duração.

Particularmente poderoso com design systems

Um design system é uma biblioteca de componentes e padrões de interface é agora vastamente utilizado pelas equipas de produto para assegurar consistência numa variedade de aplicações. Dada a natureza contínua e a evolução constante destas, o design paramétrico é particularmente adepto de reflectir mudanças em vários ecrãs. Se um padrão ou uma ferramenta é definido como um objecto, pode ser usado e indefinidamente ajustado de acordo com diferentes parâmetros, e depois reflectido por todo o ecossistema de aplicações usando esse design system.

As possibilidades são infinitas

Como podem ver, o design paramétrico oferece novas e poderosas formas de desenhar aplicações. Não só permite efectuar mudanças muito rapidamente, como mudar o design depois dos elementos terem sido colocados num ecrã. E com os parâmetros certos definidos, nem é preciso posicionar os objectos numa página, pode só especificar que objectos estão presentes numa dada página e os objectos serão dispostos automaticamente. É também um melhor reflexo do processo de desenvolvimento, que com os parâmetros expostos pode realizar o seu trabalho consideravelmente mais rápido.

Por Bruno Figueiredo & Ana Catarina Ferreira

Artigos