Fluid UI Transforms, uma abordagem científica para a criação de experiências de usuário naturais agnósticas de estruturas.

Venho criando interfaces de usuário há 3 anos, em diferentes estruturas, desde flutter no celular e react na web e, ao longo dos anos, abstraí os princípios do que torna as experiências naturais e bonitas. Essa é principalmente minha observação e raciocínio.

a maioria dos frameworks de UI modernos são declarativos e permitem a composição de elementos de UI, e a UI é uma função do estado , seja um estado interno ou um estado no servidor.

As duas equações acima expressam a continuidade e a diferenciabilidade dessa função F, que é nosso código de interface do usuário que expressa o estado como interface do usuário.

Fluid UI Transform é algo que descrevo como a função do estado que expressa nossa interface do usuário como sendo contínua e diferenciável (melhor ainda é a ordem múltipla diferenciável) em todos os estados possíveis.

No entanto, praticamente nossas mudanças de estado não são contínuas, então nossa função descrevendo UI F(estado) precisa ser contínua e diferenciável na chegada de um novo estado devido à ação do usuário ou evento do servidor.

Sei que isso não está relacionado ao desenvolvimento de front-end ou à experiência do usuário e ao desenvolvimento do produto, por favor, tenha paciência, posso explicar.

Por exemplo, quando a lista de itens muda, por padrão, a interface do usuário muda repentinamente, mas quando uma animação de lista é aplicada, os itens são adicionados e removidos com animações, é isso que significam as transformações de estado fluido, quando o estado muda, faz com que a interface do usuário se transforme continuamente e suavemente do estado antigo para um novo estado.

Raciocínio

aqui está uma explicação de por que as transformações fluidas proporcionam uma melhor experiência do usuário, a maior parte do mundo físico com o qual interagimos com nossos dedos são corpos rígidos com diferentes coeficientes elásticos, aqueles com altos coeficientes elásticos não se deformam sob pressão aplicada pela ponta do dedo, mas materiais como borracha, espuma, silicone se deformam com ações, e a deformação é muito fluida e adere às transformações fluidas, acho que é por isso que parece mais natural para nós do que as transformações não fluidas.

não apenas isso, todo fenômeno físico não ocorre de forma descontínua, então é mais natural que nossos olhos sigam um processo contínuo em vez de uma mudança repentina e discreta.

TLDR;

Torne as mudanças de estado mais fluidas para que haja uma transformação contínua do estado antigo para o novo.

Inspiração

enquanto trabalhava no meu produto pessoal , senti a necessidade de entender o que constitui uma boa experiência do usuário e queria abstrair os detalhes para que pudesse ser aplicado em geral a qualquer framework.

obrigado por ler

para saber mais sobre mim e meu trabalho:

Twitter : Escrevo sobre software, desenvolvimento, desenvolvimento de produtos e pontos de conexão de diferentes campos.