Flame Design System
O desafio de aplicar movimento e interação nos componentes de um design system.
Em 2019 começou a nascer o Flame Brasil. Já em 2021 ele passou a fazer parte do “Santander Design Ecosystem”, que, mesmo tendo como objetivo propor padrões globais, respeita e mantém as características próprias do nosso país para garantir a proximidade com os usuários brasileiros, mantendo assim as especificidades e o tom de voz que conversa com esse público.
Como parte do time que construiu o design system, a minha principal atuação durante o processo de criação e desenvolvimento foi na definição das interações e movimentos (motions) dos componentes, com objetivo de proporcionar uma experiência mais fluida e agradável para os usuários.
Motion e interação nos componentes
Os motions (ou movimentos) definidos para os componentes do Flame buscam sempre alcançar um propósito, já que são uma ferramenta para melhorar a qualidade da experiência do usuário. Por isso, foi definido que eles devem ter finalidades como informar, orientar e/ou celebrar para que possam fazer parte das jornadas dos usuários.
Quando se pensa em motion para interfaces digitais, os loaders são um dos primeiros componentes a aparecer. Um componente que vem se solidificando como indispensável, e que tem como base de sua existência o movimento para indicar ao usuário que o sistema está em funcionamento, e também trás com ele a responsabilidade de reduzir a sensação de espera.
No exemplo mostrado, pode-se ver em funcionamento o loader primário e o secundário.
O primeiro, que aparece mais vezes para o usuário na navegação das interfaces, pois está presente em quase todas as transições de tela, também aproveita o momento para reforçar a marca por meio da utilização de seu ícone principal: a chama. Já o segundo, foi desenhado com o objetivo de se manter coerente com o primeiro, como se fosse parte dele, e indicar claramente ao usuário que o conteúdo está sendo carregado.
Exemplo de duas telas do aplicativo com os loaders animados, a esquerda o loader primário e a direita o secundário.
Os botões principais, por exemplo, já estão presentes na interface e reagem ao clique do usuário com um movimento para informar que a interação realmente aconteceu. O chamado feedback é um recurso muito importante para que o usuário saiba que sua ação está surtindo efeito no sistema acessado.
Exemplo do feedback ao click dos botões principais.
Diferente dos botões, a Tooltip e o Dialog são componentes que dependem de um acionamento do usuário para serem exibidos. A partir dessa ação, acontece o motion que, além de exibir o componente na tela, também direciona o olhar do usuário. Demonstrando assim que, naquele momento, aquela é a informação mais importante.
Na imagem, é possível perceber que ambos os componentes se utilizam dos mesmos tokens (de escala, de opacidade e de tempo), o que muda entre eles é apenas a posição do chamado “ponto de âncora”, que é o ponto onde a animação inicia.
Exemplo dos componentes Tooltip e Dialog sendo acionados pelo usuário.
Padrões (ou tokens) de motion
Os design tokens tem papel importantíssimo para se manter o padrão e consistência na aplicação de um design system. Por esse motivo, também foram definidos o que chamamos de “tokens de motion”. Assim, quando se quer adicionar movimento a um novo componente, já existem alguns padrões pré-definidos que podem ser aplicados de acordo com a função, tamanho e objetivo dele.
Entre os tokens definidos, os de tempo (time) – ilustrados na imagem – são um bom exemplo da forma como os padrões de movimento foram pensados para que funcionassem em escala.
Cada token tem suas características próprias e tem definido quando deve ser aplicado, dessa maneira, juntamente com a documentação completa de motion, fica claro em quais momentos deve-se ou não usar aquele token.
Motion aplicado nas jornadas
Além dos motions aplicados diretamente aos componentes, também é trabalhada a aplicação de movimentos específicos em cada jornada.
O trabalho individualizado de motion em uma jornada tem como objetivo principal explicar melhor conteúdos mais complexos, e também trazer momentos de celebração/descontração junto ao usuário. O que, consequentemente, melhora o entendimento e receptividade de quem está utilizando.
Gráficos em movimento
Os gráficos exibem informações em sua maioria de grande complexidade, e isso faz com que as pessoas tenham dificuldade de entendimento e também percam o interesse por eles.
Por isso, incrementar os gráficos com movimentos pode ajudar tanto a melhorar o entendimento, como dar destaque para as informações. Dessa maneita, é possível direcionar o olhar do usuário para a informação no momento certo. Além disso, os motions também tornam as linhas, barras ou círculos e seus números mais interessantes.
Aqui temos dois exemplos com as mesmas informações a serem apresentadas aos usuários, porém de formas totalmente diferentes. A primeira, o gráfico em linha e a segunda, o gráfico de barras. Não existe certo e errado, mas sim qual se adequa mais ao que se quer transmitir e dar destaque.
Exemplo de jornada com gráficos animados com objetivo de incentivar o usuário à atingir seus objetivos.
Gostou? Confira outros projetos:
Loader global: escalável, personalizável e acessível
Como parte do time de UX do Santander tive a oportunidade de criar novo loader do banco para ser utilizado por todos os países em seus aplicativos e plataformas digitais. Esse projeto foi parte de um desafio global do qual minha proposta foi a vencedora.
Expedição Quati Curioso
Plataforma educativa digital gamificada para uso em sala de aula pelos anos iniciais do Ensino Fundamental. Como coordenadora, tive como responsabilidade junto ao time buscar a melhor experiência e interface, com objetivo principal de ter um conteúdo pedagógico acessível à maior quantidade de pessoas possível.
PT 
EN