Adicionando movimento à próxima década de design atômico

Um século de animação

O design está em uma jornada há muito tempo, mas foi apenas no século passado que uma nova maneira de pensar sobre o design surgiu graças ao advento de novas tecnologias. Um milagre nasceu quando Walt Disney assinou um contrato para produzir uma série de Alice Comedies. O mesmo ano também marcou o início da The Walt Disney Company, inicialmente conhecida como Disney Brothers Cartoon Studio. Quem sabia o que teria acontecido entre dois irmãos? Era engraçado que os irmãos Wright fossem o outro par famoso de seu tempo.

Poderia ter terminado com a criação de Mickey Mouse ou com o lançamento de Branca de Neve e os Sete Anões, o primeiro longa-metragem de animação. Mas da mente criativa do empreendedor, inovação após inovação foi realizada. Logo, o mundo experimentou as emoções de um moderno parque temático conhecido como Disneylândia. Filmes de grande sucesso, como A Bela e a Fera, O Rei Leão e A Pequena Sereia, estabeleceram novos padrões enquanto estúdios de vanguarda como Pixar e LucasArts foram adquiridos. Se não bastasse a TV, a Disney entrou no streaming e foi atrás do dinheiro da Netflix.

E então 2023 chegou, e o pioneiro da animação está comemorando seu 100º aniversário. Ele construiu seu império sobre o valor de entretenimento das imagens em movimento.

Apesar de tudo, Walt Disney deu um salto de imaginação para produzir uma ideia arriscada. Aqui está como eu imaginei: entre o mar de histórias em quadrinhos estáticas e atuação da vida real, muito poucos se aventurariam a desenvolver um personagem que pudesse parecer vivo, muito menos parecer estar interagindo com o público. Ele teria seus críticos, talvez até refletindo sobre si mesmo como alguém com altos padrões. No entanto, apesar de falhar repetidamente e levar 5 anos para fazê-lo funcionar e mais 5 anos para ganhar dinheiro com o ofício, Walt Disney manteve sua crença de que há poder na narrativa e que seu melhor meio é a animação.

Seguimos em frente, abrindo novas portas e fazendo coisas novas, porque somos curiosos e a curiosidade sempre nos leva a novos caminhos. —Walt Disney

Uma década de design atômico

Há uma década, outro fenômeno aconteceu. Um designer pegou o conceito de estruturas atômicas e o aplicou ao design digital. O resultado foi uma explosão de ideias e contribuições da comunidade de design. O movimento do sistema de design, mais conhecido como “ Design Atômico ”, nasceu.
O design atômico é uma metodologia que se concentra em uma maneira de estruturar os componentes, padrões e modelos digitais de uma pessoa. Ao entender sua relação com a escala, uma equipe de design pode aplicar sistematicamente uma interface de usuário consistente, coerente e modular.

Desde então, a revolução não parou. Como não era apenas um repositório ou um manual de design estático, os códigos-fonte com documentação poderiam ser disponibilizados para as equipes de produto explorarem e desenvolverem. Guias que ensinaram aos novos membros da equipe o uso adequado e os limites do uso dos ativos em diferentes níveis.

De repente, as estratégias de web design responsivo e mobile-first tornaram-se o novo léxico à medida que os aplicativos nativos passaram a fazer parte do conjunto de produtos. Da mesma forma, os princípios de acessibilidade tornaram-se critérios importantes a serem considerados ao projetar componentes para um amplo espectro de usuários. Ferramentas, como o Storybook , atendem a desenvolvedores que procuram criar componentes de interface do usuário e páginas em um ambiente isolado. E à medida que nos aproximamos do 10º aniversário do Atomic Design, as discussões sobre o design do sistema de sistemas tornaram-se mais aceitáveis, como escrevi há cerca de um ano.

Então, o que vem a seguir com o Atomic Design?

Devemos fazer mais com a analogia de Brad Frost? Em vez de apresentar um modelo mental totalmente novo, minha preferência é manter a mesma analogia e construir um sobre o outro. Porque, a menos que sejam inválidas, grandes ideias são como árvores que continuam a crescer e amadurecer por muitos anos e além (a árvore mais velha é atualmente Matusalém com 4.584 anos de idade). Um erro seria impedir o crescimento de uma grande ideia, e o design atômico não deveria ser um deles.

Assim, vamos tomar um segundo para se tornar uma mosca na árvore, que é observar o modelo atual e deliberar sobre o que pode ser o próximo. Além dos componentes óbvios e visíveis dos átomos, vamos examinar os aspectos invisíveis dos átomos, moléculas e organismos.

Isso foi alguma forma de movimento?

Inequivocamente, os átomos vibram. Na verdade, você poderia dizer que existe alguma forma de movimento que existe em diferentes escalas. Isso pode ser explicado com base na força eletrostática de atração entre os íons carregados negativamente dos átomos, bem como o constante empurrão e puxão dentro de uma molécula responsável por criar a vibração. É como se os átomos estivessem conectados por minúsculas molas em constante movimento. E se há forças pequenas, então há forças maiores no nível do organismo e além.

O movimento está em toda parte. Na quietude dos momentos, até os corpos planetários e humanos se movem. A noção de movimento é tão difundida que é difícil ignorá-la. Então, por que não estamos expandindo nosso universo de design atômico e projetando sistemas com movimento?

Parte do motivo é que o movimento pode ser complexo devido às várias variáveis ​​a serem consideradas. Eles variam de entradas, como toques, a saídas, como fades e outros efeitos. Depois, há a questão do tempo, que determina o início e o fim de uma sequência e suas propriedades associadas. A lista continua, mas o movimento tende a ser visto como um “bom ter” com as predefinições básicas do Figma . Vários sistemas de design mantêm o movimento como uma pequena seção ou o priorizam em uma fase posterior. Pode ser sentido como um item de lista de verificação, em vez de uma ideia difusa e contínua.

Na verdade, continuidade e fluxo são conceitos importantes. Originário de Issara Willenskomer, um pioneiro em UX de movimento, ele argumentou em seu manifesto de movimento que as interações se estendem dentro de uma cena e entre cenas (ou telas), criando assim consistência na experiência do usuário. A expectativa em si não é estática; os modelos mentais criam um nível de experiência percebida do que um objeto faria e como ele se comportaria. As narrativas não são enquadradas em um quadro estático; eles estão interconectados com uma série de eventos que moldam a intenção geral e a satisfação do indivíduo. E relacionamentossão a montagem harmoniosa de microcópias, gráficos, ilustrações e UI. O movimento é, em essência, parte integrante da experiência do usuário. Movimento é comportamento ao longo do tempo.

Talvez seja hora de "transformar-se" e o que pode ajudar é olhar para o futuro. Em seu livro “ Feito para durar: hábitos de sucesso de empresas visionárias ”, Jim Collins e Jerry Porras usaram pela primeira vez a frase “Big Hairy Audacious Goals”, ou BHAG para abreviar. A premissa era simples: defina uma meta inspiradora e de longo prazo que leve seu pensamento (ou empresa) para o próximo nível. Aqui reside uma possível nova MA: e se pudéssemos ter uma visão ampliada do Atomic Design, adicionando movimento completamente em diferentes níveis em um sistema de design?

Comportamentos, não animação

Como Micah Bowers compartilhou antes, o motion design não é uma forma de decoração. Em vez disso, resulta de um sistema ou gatilho humano, que leva a uma forma de feedback ( Dan Saffer ). Esses são os ingredientes básicos que formam o comportamento. A animação, por outro lado, é uma sequência de ações que não requer nenhuma forma de entrada do usuário. Portanto, é importante considerar um conjunto mais completo de requisitos ao projetar o movimento.

Movimento, não apenas interação

É apenas semântica ou há realmente uma diferença entre movimento e interação? Do ponto de vista técnico, pode-se implementar a interação de forma binária ou linear. A saída, no entanto, deixa o usuário com uma sensação insípida, quase antinatural. A razão pela qual o movimento triunfa sobre a interação é porque há um movimento mais expressivo , criando uma maior apreciação do usuário. Técnicas como easing, encenação, antecipação e apelo são apenas alguns dos doze princípios básicos de animação da Disney, uma peça de literatura de leitura obrigatória para qualquer designer de movimento. Dominar todos eles aumentará a experiência geral de seus projetos.

Fora e dentro

A justaposição de movimento dentro e fora da tela ajuda os designers a escolher entre exibir informações adicionais. A beleza de ter uma tela como restrição e, ainda assim, ter um modelo espacial tão intuitivo possibilita fluxos e transições. Os designers sensíveis a esses detalhes podem orientar os usuários para uma conclusão bem-sucedida sem o uso de nenhuma instrução. Assim como um binóculo, o usuário vê seus passos à sua frente e sabe como se mover de acordo.

Não como itens únicos, mas como componentes reutilizáveis

Pesando em blocos modulares de interações seria um ótimo complemento para um sistema de design bem-sucedido. Identificar conjuntos comuns de movimentos consistentes é mais importante do que identificar movimentos aleatórios supérfluos. Isso diferencia o UI artist do UX designer, onde o primeiro cria uma expressão artística única e o último entende a viabilidade e usabilidade de módulos de movimento reutilizáveis . Em vez de rejeitar quaisquer movimentos de assinatura de um produto, o caos se instalará rapidamente se cada movimento for único.

Embora possa haver muito mais para descompactar, o que pode ser abordado em discussões subsequentes, gostaria de compartilhar a analogia expandida do Design Atômico, incorporando o movimento em cada nível:

Íons: tokens de design + gatilho e respostas

Um equivalente das propriedades de um componente de design - gatilho, regras e respostas - são os ingredientes necessários para o design de movimento, a fim de obter uma causa e efeito. Sem isso, eles são simplesmente animações. A propósito, os tokens de movimento são introduzidos em mais sistemas de design, como a 3ª edição do Material Design.
Exemplo: tocar, beliscar, passar o mouse, mover, dimensionar, pular

Átomo: componente + microinteração

Assim como as minúsculas vibrações que residem como forças elétricas dentro dos átomos, as microinterações são movimentos que tendem a criar efeitos dentro do componente. Conforme definido por Ondřej Dostál, são momentos interativos únicos em um produto que aprimoram o fluxo de trabalho e tornam o produto mais agradável.
Exemplos: rolar em uma barra de rolagem, puxar para atualizar, ícones de reação em mídias sociais

Moléculas: padrões + movimento

As ligações químicas combinam dois ou mais átomos para formar uma molécula. Esses são um conjunto maior de componentes de interface do usuário, mais conhecidos como padrões. Nesse caso, a interação fica mais avançada, pois pode haver um efeito em cadeia ou múltiplas respostas simultâneas a partir de um único gatilho. Os padrões tendem a atingir componentes específicos sem afetar o restante dos componentes no quadro. O mesmo se aplica ao movimento também.
Exemplos: carrossel deslizante, clicar para expandir a caixa de pesquisa, entrar e sair de lanchonetes

Organismos: características + cenas

Quando um organismo se move, ele o faz em relação a outras forças em jogo, como forças aplicadas resultando em energia cinética e força gravitacional. É aqui que a interação vai além do quadro, envolvendo camadas, transições e até telas adjacentes. A atenção às ações-chave em um fluxo é necessária. Eles fundamentalmente tendem a ter recursos baseados em uma combinação de padrões e componentes autônomos. Tais situações são conhecidas como “cenas” na produção cinematográfica, onde a unidade da ação com os elementos é fundamental. Vemos plataformas como o Protopie capitalizando esses conceitos para criar um melhor entendimento para seus usuários.
Exemplos: visualização de cartão em tela cheia, barras deslizantes ou de navegação, carregadores esqueléticos

Organismos Complexos: templates e páginas + fluxos

No nível das formas de vida avançadas, como animais, plantas e seres humanos, os produtos são igualmente complexos. Além dos modelos de componentes, padrões e recursos, eles têm fluxos em diferentes páginas ou telas. Assim, o movimento não é apenas importante com base na relação de seus elementos relacionados nas telas adjacentes, mas a narrativa e a consistência de um fluxo específico de uma experiência também precisam ser levadas em consideração para que o usuário faça seu trabalho.
Exemplos: Fluxo de usuários, prototipagem, caminhos e conexões

Espécies: produtos + viagens

Finalmente, quando as espécies coexistem como uma família de organismos complexos, o mesmo ocorre com vários produtos em um portfólio. E como acontece com a interação em todos os níveis, a orquestração da ação do usuário ao longo das jornadas é o estágio final. Trata-se de um artefato onde pontos de contato físicos e digitais se cruzam para fortalecer a narrativa de um usuário que está passando por um conjunto de etapas com um objetivo em mente.
Exemplos: jornada do usuário, blueprint de serviço, fluxo de valor

Outras considerações

Além das viagens: o tempo pode ser uma variável muito vaga. Apesar do movimento acontecer em um estado ativo, pode haver lapsos de passividade. Ou um período de hiato antes de uma nova jornada ser reiniciada quando o usuário repete o mesmo trabalho para fazer algo. Nessa conjuntura irregular, pode coexistir uma forma de interação, mais provavelmente baseada em um gatilho do sistema ou um gatilho de ação feito por outro usuário. No entanto, há um conjunto inteiramente novo de movimento que flui no lugar.

Bibliotecas de movimento versus mapas de jornada: Mais uma vez, pode-se observar as diferenças gritantes nas forças entre os mundos físico e molecular. Na última exposição, houve uma distinção entre bibliotecas e sistemas em dois mundos diferentes. Da mesma forma, poderíamos ver o mesmo fenômeno com forças, exceto que, em vez de um sistema, os mapas são uma expressão melhor para capturar o movimento. As ferramentas digitais, como o Miro e o Glassbox, estão lentamente tornando as ações do usuário modulares possíveis de escalar em diferentes jornadas e, ainda assim, contêm o movimento como uma unidade em uma biblioteca de interação.

A próxima década de movimento

Motional Atomic Design pode estar à beira de algo grande na próxima década. Assim como o próximo marco da Disney, há muito mais para se animar.

Apesar de tudo, o Motional Atomic Design exigiria um salto de imaginação para desenvolver uma nova ideia. Foi assim que imaginei: em meio ao mar de componentes estáticos e outros substitutos (como IA), poucos se aventurariam a desenvolver uma experiência que pudesse parecer viva, muito menos trazer interações alegres com os usuários. Teria críticos, talvez até tendo que definir padrões elevados. No entanto, apesar de girar e possivelmente levar 5 anos para fazê-lo funcionar e mais 5 anos para estabelecer o ofício, o Motional Atomic Design pode ser uma meta audaciosa que se baseia no poder das narrativas e experiências humanas. Seu BHAG é o Design Atômico em movimento.

Leitura adicional

• Bowers, Mica. “Um guia para princípios de design de movimento — Prototypr | Prototipagem.” Prototypr , 10 de dezembro de 2020, prototypr.io/post/a-guide-to-motion-design-principles.
• Collins, James C e Jerry I Porras. Feito para durar: Hábitos bem-sucedidos de empresas visionárias . Nova York, Collinsbusiness Essentials, 2002.
• Gelo, Brad. “Desenho Atômico”. Brad Frost , 10 de junho de 2013, bradfrost.com/blog/post/atomic-web-design/.
• Issara Willenskomer. “Criando Usabilidade com Motion: O Manifesto UX in Motion.” Medium , UX in Motion, 31 de março de 2017, medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc.
• “Fazendo seu primeiro protótipo com ProtoPie | Introdução | Guia ProtoPie. ProtoPie , www.protopie.io/learn/docs/introducing-protopie/making-your-first-prototype. Acessado em 24 de abril de 2023.
• Movimento — Design de materiais 3 . (nd). Design material. Recuperado em 24 de abril de 2023, dehttps://m3.material.io/styles/motion/overview
• Patton, Jeff, e outros. Mapeamento da história do usuário: descubra toda a história, crie o produto certo . Pequim; Sebastopol, Califórnia, O'reilly, 2014.
• Pfitzer, Kurt. “A Essência Vibrante do Universo.” Lehigh University , 9 de fevereiro de 2017, www2.lehigh.edu/news/the-vibrating-essence-of-the-universe.
• Saffer, Dan. “O que é uma microinteração? | Microinterações.” Microinteractions.com , 2020, microinteractions.com/what-is-a-microinteraction/.
• Thomas, Frank e Ollie Johnston. A Ilusão da Vida: Disney Animation . Nova York, Hyperion, 1995.
• “Por que você precisa adicionar movimento aos seus sistemas de design — LottieFiles.” Lottiefiles.com , 12 de julho de 2022, lottiefiles.com/blog/guides/why-add-motion-design-systems#:~:text=Motion%20tells%20a%20story%20%E2%80%93%20Is. Acessado em 24 de abril de 2023.
• Sim, Darren. “Design atômico 2022: o que podemos aprender com Eames e outros gigantes do design.” Médio , 24 de abril de 2022, medium.com/user-experience-design-1/atomic-design-2022-what-we-can-learn-from-eames-and-other-design-giants-4d8e2f579daa. Acessado em 24 de abril de 2023.