Como Motion & Interaction Design Podem Ser Direcionadores Estratégicos de Produto

5 min readSep 21, 2022

Overview

Este artigo tem o objetivo de estabelecer algumas premissas importantes para capacitar um membro de uma squad de produto a defender a priorização de experiências digitais ricas em movimento e interações como parte fundamental e estratégica no design de um produto. Forçando o necessário processo discriminatório de priorização a incorporar o design em movimento e design de interações como cidadãos de primeira-classe de um bom design de produto e não como “detalhes que podem ser adicionados na v2, mas podem ser negligenciados agora”.

O que é?

Motion design é o uso de técnicas de produção de vídeos e filmes, como animações, movimentos e outros efeitos especiais, para criação de experiências de usuário mais “vivas” e responsivas.

Interaction design é o campo de UX (experiência de usuário) que estuda as interações do usuário com interfaces e em como projetar essas interações de forma que as experiências sejam mais eficientes e suas informações sejam absorvidas de forma completa.

Motion design se relaciona diretamente com interaction design de modo que as técnicas de motion design permitem que os feedbacks e gatilhos visuais com movimento sejam melhor percebidos e absorvidos pelo usuário.

Por que devo me importar?

O ser humano evoluiu para perceber e dar atenção prioritária aos movimentos, e ignorar o que é estático. Durante todo o processo evolucionário a habilidade de perceber objetos em movimento permitiu que a humanidade pudesse defender-se de ameaças imediatas à sua integridade, afinal um predador correndo em sua direção deveria ter uma prioridade muito maior em sua hierarquia de atenção do que qualquer outro objeto inerte no seu campo de visão.

Além disso o provérbio “uma imagem vale mais que mil palavras” apesar de ser um truísmo universal, é factualmente impreciso, já que segundo estudos mais recentes uma imagem é 60 mil vezes mais eficiente que palavras equivalentes. Para tangibilizar melhor, é importante colocar em evidência como um vídeo de um minuto pode ser o equivalente a 1.8 milhões de palavras, para então entender como o apoio visual é crucial para a absorção eficaz de informações pelo recipiente da mensagem.

Com esses dois pontos podemos concluir que a melhor forma de criar experiências digitais significativas, que chamem a atenção para os pontos mais relevantes para a tarefa em questão e que possibilitem o consumo eficaz do conteúdo apresentado é utilizando de uma combinação inteligente e funcional de imagens e movimentos.

Um último ponto importante a ser levantado é como a expectativa do usuário em relação a experiências digitais tem crescido exponencialmente nos últimos anos, muito por quê as barreiras tecnológicas para criar experiências digitais realmente impactantes estão beirando à inexistência, fazendo com que startups e até indivíduos com pouquíssimos recursos consigam impressionar usuários de forma muito mais frequente do que as gigantes da alta tecnologia. Isso cria uma expectativa inconsciente no usuário de ser o tempo todo surpreendido com a próxima experiência digital arrebatadora, criando uma “corrida armamentista” entre as melhores experiências digitais para se manterem relevantes. Nesse contexto, imagens e movimentos são as “armas” mais eficientes e abundantes para continuar nessa corrida com uma chance realista de vencê-la.

Custo vs valor

Durante muito tempo o esforço despendido para construir experiências digitais com movimento e interações expressivas era tão significativo que era difícil justificá-las economicamente, e isso se dava por alguns motivos:

As plataformas (web e mobile) não suportavam a flexibilidade, performance e qualidade necessárias para criação de experiências significativas;
As plataformas não possuíam ferramentas e bibliotecas que reduziam a complexidade de criar essas experiências;
Devido às limitações técnicas, as experiências possíveis não geravam o impacto necessário no comportamento dos usuários, muitas vezes levando a frustração dos mesmos.

Mas hoje o cenário é completamente diferente, os dispositivos estão cada vez mais baratos, mais eficientes, as plataformas web e mobile evoluíram significativamente e passaram a suportar tecnologias como WebGL, HTML Canvas, SVG, CSS Transitions, CSS Keyframes, Web Animation API e outros. E além disso, ecossistemas e comunidades open-source se mobilizaram para criar inúmeras bibliotecas e ferramentas para tornar o uso dessas tecnologias o mais simples possível, impactando cada vez menos a performance da experiência.

Todo esse avanço tecnológico tornou irrisório o custo para se criar experiências digitais com movimento e interações expressivas, e ao mesmo tempo aumentou exponencialmente o impacto positivo para o usuário com movimentos mais suaves, complexos e performáticos. Fazendo com que a adoção das técnicas de design em movimento e design de interações possa ser facilmente justificada não só nos produtos mais arriscados, mas também nos protótipos necessários para validá-los.

Casos de uso

Imagens e movimentos são utilizados com sucesso em experiências de usuários em vários contextos, uma lista não exaustiva de casos de uso são:

Experiências interativas: utilizar movimento e micro interação nas interfaces torna-as perceptivelmente mais “vivas” para o usuário, encorajando a interação com elas, aumentando consequentemente o engajamento;
Reforço da marca: utilizar imagem e movimento de forma consistente sempre que a marca é exposta utiliza o mecanismo evolucionário referido anteriormente para “carimbar” a imagem marca na memória dos consumidores;
Redução de rejeição: utilizar imagem e movimento interativo em comportamentos ininterrompíveis, como o carregamento de recursos ou a execução de uma ação síncrona, torna-os mais “suportáveis” pelo usuário, fazendo com que mais usuários permaneçam até o fim e podendo resultar em melhor desempenho orgânico em plataformas de busca como Google;
Atraindo atenção: utilizar imagem e movimento utilizam de nossas incríveis habilidades de percepção de movimento e interpretação visual para direcionar atenção aos pontos mais relevantes de uma interface;
Melhorando compreensão: utilizar imagem e movimento facilitam a absorção de informações complexas pelo cérebro do usuário e também às tornam mais memoráveis, tornando mais duradouro o conhecimento pelo usuário da informação desejada;

Ferramentas

Há várias ferramentas que permitem a criação e utilização de movimento e interações ricas nos produtos digitais de forma muito mais simples do que era há alguns anos atrás. Abaixo, segue uma lista não exaustiva de ferramentas que podem facilitar na adoção de imagem e movimento no processo de design e construção de experiências de usuário.

Lottie (AirBnB): Tecnologia para transformar animações do After Effects em animações utilizando svg ou canvas web (web e mobile);
LottieFiles: Marketplace de assets animados que utilizam o Lottie como formato transporte;
IconScout: Marketplace de assets animados que utilizam o Lottie como formato de transporte;
Rive: Plataforma de criação e exibição de animações em plataformas web e mobile;
Framer: Plataforma no-code de criação de experiências web fortemente baseadas em movimento e micro interações;
Motion UI: Framework SASS para animação de elementos HTML;
Origami Studio: Plataforma de prototipação e animação completa;
Invision Studio: Plataforma de prototipação e animação completa;
Animate CSS: Biblioteca CSS de animação para elementos HTML;
Anime.js: Biblioteca javascript de animação para elementos HTML, SVG e Canvas;
Popmotion: Biblioteca javascript de animação para elementos HTML e SVG;
GreenStock Animation Platform: Framework javascript completo para animações web;
AniJS: Biblioteca javascript de animação para elementos HTML e SVG com abordagens declarativas;
MoJS: Framework javascript completo de animações web;
Vivus: Biblioteca javascript para animação automática de elementos SVG;
ScrollReveal: Biblioteca javascript para revelação animada de elementos de acordo com o scroll da página.