Afinal de contas, o que é Microinteração?

microinteração

A diferença entre um produto que nós amamos e um produto que apenas toleramos, está geralmente na sua microinteração. — Dan Saffer

Microinteração de loading criada pelo Pedro Aquino
Criado por Pedro Aquino.

O que é Microinteração?

Respondendo objetivamente, microinteração são pequenas interações capazes de te dar a possibilidade de completar alguma tarefa.

Sabe o famoso Ctrl+C e Ctrl+V para copiar e colar? Isso já é uma microinteração.

Igualmente, o simples fato de você poder aumentar ou diminuir o volume do seu smartphone através de dois botões físicos na lateral é uma microinteração.

Quando você vai ao banheiro no shopping e o papel toalha desenrola automaticamente também é uma microinteração.

As microinterações existem não só na realidade física, como também na realidade digital. Entremos, por exemplo, na realidade das interfaces. A simples possibilidade de você dar Like em algum post, por exemplo, é igualmente uma microinteração.

Tudo o que se trata de pequenas interações visando estreitar o relacionamento entre a máquina e o seu humano, é uma microinteração.

Porém, de uns tempos para cá, com o desenvolvimento tecnológico e a evolução do motion design, temos visto essas microinterações possuindo mais vida ainda.

Peguemos novamente como exemplo uma microinteração das redes sociais. Hoje em dia não basta apenas existir o botão de Like, a maioria já faz isso. Da mesma forma, também não basta o botão acender ao clicar. Inegavelmente isto era o diferencial, mas agora não mais.

Então devemos ir além. Através de uma microinteração mais elaborada é possível proporcionar uma experiência única ao engatilhar esse comando. Sendo assim, o simples botão que até então apenas mudava de cinza para vermelho, vai passar a contar com animações muito bem pensadas por motion designers do ramo. Assim, no final das contas, deixamos de oferecer uma experiência “normal” para oferecer uma experiência inesquecível.

Um exemplo famoso de microinteração seria o botão de Like do Twitter.

Microinteração botão de like do instagram criada pelo Pedro Aquino
Animação reproduzida por Pedro Aquino: https://dribbble.com/pedroaquinofx

Afinal de contas, esta animação comunica ou não mais vida e felicidade? Dar like no Twitter virou uma experiência inédita!

Da mesma forma podemos pensar o botão clássico de ligar e desligar, o famoso interruptor. Naturalmente aquilo já é uma microinteração. Mas porque não fazer algo mais “vivo”, carregando mais sentido?

Micro Interação de tempo Criado por Tsuriel
Criado por Tsuriel: https://dribbble.com/shots/1909289-Day-Night-Toggle-Button-GIF

De fato está claro que o Motion Design mais uma vez entra em cena pra revolucionar a indústria das interfaces.

Até então todas as microinterações foram sempre muito “comuns”. Agora, elas podem carregar um sentido mais profundo.

Além também de possuir uma personalidade única capaz de afirmar mais ainda a identidade da empresa, a sua cultura, etc.

Vamos com calma.

Apesar das infinitas possibilidades que o motion de microinterações traz, devemos ter sempre em mente o seguinte:

É necessário entender o contexto dessas interações.

Isso significa que a ideia não é simplesmente sair animando sem critério algum. Na verdade, uma das coisas mais importantes é exatamente o critério ao criar essas pequenas animações.

Microinteração de busca de localização Criado por Srikant Shetty
Criado por Srikant Shetty: https://dribbble.com/shots/2591178-GPS-icon-Interaction

Como tudo no UX, nossa preocupação maior em microinteração é o que?

Melhorar a experiência do usuário. E para melhorar a experiência do usuário você precisa entendê-lo antes de criar as microinterações animadas.

Vejamos um exemplo bem simples:

Imagine uma interface de música que possui como público alvo homens e mulheres de 50 a 70 anos de idade que se interessam por música barroca. Um público bastante nichado!

Ao desenvolver a microinteração, e obviamente a interface como um todo, você com certeza não pode criar uma linguagem jovem, com movimentos divertidos e coloridos naquele estilo Sérgio Malandro.

Esse público geralmente é mais maduro, mais polido, gosta de uma estética mais clássica e tradicional.

Afinal de contas, como agradá-los? Provavelmente uma microinteração mais sóbria, movimentos mais sérios e objetivos, também quem sabe até um feedback mais auto explicativo (já que se trata muitas vezes de um público menos familiarizado com a tecnologia).

Microinteração Dropdown menu Criado por Felippe Silveira
Criado por Felippe Silveira: https://dribbble.com/shots/3545208-Dropdown-Menu-Animation

Enfim, embora sejam revolucionárias para a indústria de interfaces pelo fato de proporcionar, como nunca antes, uma experiência única e prazerosa, as microinterações animadas devem ser desenvolvidas sempre com um critério objetivo a respeito do público-alvo.

Por fim, estude os usuários da interface, a identidade da empresa e sua cultura, para a partir daí dar voz à sua criatividade. Lembre-se: o seu foco como UX Motion Designer é totalmente centrado no usuário.

Os motion designers estão sendo cada vez mais requisitados para atender esse mercado. Você provavelmente tem interesse em estudar UX Motion Design, certo?

Os 4 Princípios do Motion de Materiais

Material Design

Já sabemos que o Motion tem um papel essencial no mundo do Material Design. Mas como os Materiais de fato se movem? Quais são os princípios dessa animação?

No documento de especificações do Material Design existe uma sessão inteira só sobre Motion. Logo no início nos deparamos com os 4 princípios desenvolvidos para ajudar designers e desenvolvedores na criação de uma boa animação.

Os princípios são: responsivo, natural, atento e intencional.

Responsivo

Toda ação tem uma reação. Ao interagir com o Material, rapidamente deve haver alguma resposta. Caso a resposta seja mudança de posição, ela deve se adequar ao tamanho da tela do dispositivo. Isso acontece porque a duração do movimento deve estar diretamente ligado à distância percorrida.

Os motion designers que desenvolveram os princípios do Material motion estipularam uma média de 300 a 400ms para distâncias mais longas (em torno de 500 pixels) e 150 a 200ms para distâncias mais curtas (em torno de 120 pixels).

Isso significa que, por exemplo, caso a nossa composição tenha 60fps, o elemento que percorrer uma distância de 500 pixels passará por uma interpolação de 18 a 24 frames de duração.

Natural

Tudo o que acontece à nossa volta se move de acordo com as forças do mundo real. A teoria que melhor descreve essa realidade são as leis de Newton.

Quando um objeto sai do seu estado de inércia, a aceleração nunca é igual a zero. A força aplicada e a massa do elemento fazem com que haja tanto uma aceleração para iniciar o movimento como também uma desaceleração ao parar.

Essa realidade deve ser levada em consideração no mundo dos Materiais. É essencial saber criar movimentos com Ease, o que não significa só apertar F9 no After Effects! Você sempre terá que personalizar as curvas de interpolação, seja através do Graph Editor ou do Keyframe Velocity.

Nas próprias especificações do Material Design existem valores “padronizados” de (des)aceleração a serem aplicados na entrada e saída dos keyframes, dependendo do que está sendo animado e porque.

Material Design
https://material.io

Outra força que também devemos considerar é a gravidade. Com ela, os movimentos percorrem ao longo de um arco ao invés de uma simples linha reta.

Atento/Consciente (Aware)

O Material está sempre ligado ao que acontece à sua volta. Ele sabe que existe tanto um usuário interagindo quanto outros Materiais partilhando do mesmo ambiente.

Aqui entramos na ideia de Coreografia. Todos os materiais em movimento incitam outros materiais a se moverem de forma ritmada, no timing perfeito.

Este princípio é muito importante para mostrar qual é o relacionamento entre os elementos:

 

Intentional

Praticamente todos os movimentos devem ser carregados de intenções. Seja para guiar o usuário sobre o que fazer em seguida, dar algum feedback sobre uma ação ou até mesmo desviar o foco para algo específico.

Inclusive, no nosso artigo Importância do Motion Design para UX falamos dos quatro tipos de motion mais usados para melhorar a experiência do usuário de acordo com o Saptarshi Prakash. Dentre eles está exatamente o feedback e o desvio de foco. Recomendo a leitura!

Resumindo, os Materiais devem estar sempre perfeitamente preparados para dar uma resposta às interações , simular as forças do mundo real, estar sempre ligado ao que acontece à sua volta e comunicar suas intenções ao usuário.

Parece simples, mas cada princípio é ainda mais aprofundado no próprio documento de especificações do Material Design.

Provavelmente alguns desses princípios já estão no sangue de muitos motion designers. Mas se você estiver começando agora no mundo do motion de interfaces, seja você um designer ou um desenvolvedor, tenha certeza que a sua perspectiva sobre os movimentos mudará drasticamente ao internalizar e aplicar esses princípios.

Caso você seja um UX Motion Designer em potencial, em nosso curso UX Motion Design em After Effects vamos aprofundar mais ainda sobre estes e vários outros princípios do motion de interfaces.

Introdução ao Material Design

Material Design

Em Junho de 2014, a Google lançou uma série de novidades e, no mesmo evento, apresentou a sua nova linguagem visual batizada de Material Design.

Essa novidade não só foi apresentada, como também já chegou incorporada em seu próprio produto digital, a nova versão do sistema operacional Android 5.0 Lollipop.

Muitos vêm mostrando interesse sobre o assunto, querendo entender o que exatamente é esse tal de Material Design. Como eu também me apaixonei pelo assunto, resolvi criar esse breve artigo para compartilhar o que já absorvi a respeito.

Obs: este artigo não se trata da visão de um desenvolvedor/programador sobre o assunto, mas sim de um motion designer.

O que é Material Design?

Material Design é um termo criado pela Google para definir sua nova linguagem visual voltada para interfaces web e mobile que visa melhorar a experiência dos usuários.

Mas o que é exatamente uma linguagem visual? Pode ser óbvio para alguns, mas como já recebi de vários alunos esse tipo de pergunta, tenho certeza que esta pode ser uma dúvida de muitos.

A linguagem visual se refere a um pequeno sistema composto por determinados elementos visuais com a intenção de comunicar algo.

Em outras palavras, são desenhos, formas, cores, tipografias, movimentos, etc., que em conjunto falam com você em uma determinada “língua”. Você, como receptor, entende essa comunicação e a partir daí cria um vínculo, interage, experimenta, imagina…

No caso do Material Design, a linguagem visual é uma soma de elementos como cor, luz e movimentos, não apenas para agradar aos olhos de quem vê, mas para que a navegação seja a mais intuitiva possível.

Essa linguagem visual veio, principalmente, para ajudar desenvolvedores de aplicativos para Android a criarem interfaces mais bonitas e intuitivas. Porém, toda ela é composta por elementos desenvolvidos por designers e motion designers.

Qual é o objetivo?

Além da ideia de criar uma linguagem visual que “sintetiza os princípios clássicos do bom design com as inovações e possibilidades que a tecnologia e a ciência oferece”, tem um outro objetivo nessa história toda:

Criar um padrão entre as interfaces das plataformas digitais da Google (e de quem aderir à nova linguagem) unificando a experiência dos usuários. Dessa forma, a experiência se torna mais consistente pelo fato de você se sentir familiarizado com todas as interfaces.

Como usuários, uma coisa podemos afirmar com certeza: nada melhor do que uma interface intuitiva. E nesse ponto o Material Design tem proporcionado um resultado bastante positivo!

Princípios do Material Design

Os três princípios mais importantes que formam o Material Design são:

1. Material is the metaphor (Material é a metáfora):

Material Design
Fonte: material.io/guidelines

O primeiro princípio é o conceito de que a metáfora é o material. Isso significa que metaforicamente falando todos os elementos da interface são como pedaços de matérias físicas feitas de papel e tinta.

Para existirem, os materiais precisam de um espaço físico. Então esse espaço deve ser respeitado na metáfora, assim como as próprias leis da física. Tanto que o Material Design contou com uma análise empírica de como pedaços de papel e tinta se comportam na realidade.

Você consegue imaginar dois corpos ocupando o mesmo espaço no mundo real? Imaginar… talvez! Mas isso é fisicamente impossível. Logo, essa impossibilidade também deve ser levada em consideração no mundo do Material Design.

Isso significa que se quisermos animar um card entrando na mesma cena que já possui um card, de duas uma: ou você posiciona um deles numa profundidade diferente (eixo Z através das sombras), ou então o primeiro card sai de cena para o segundo tomar o seu espaço.

Material Design
Fonte: material.io/guidelines

Você consegue imaginar um material sem sombra projetada em outro material? Por isso que no Material Design as sombras estão presentes a todo momento para comunicar qual a relação de elevação entre objetos.

Inclusive este assunto é abordado em um capítulo inteiro das especificações!

Foi especificado um série de padrões de elevação em pixels para cada parte da interface: menu, botões, barras, switches, cards, etc.

2. Bold, graphic, intentional (Ousado, gráfico e intencional)

Material Design
Fonte: material.io/guidelines
O Material Design foi construído tendo como princípio os fundamentos do design impresso: tipografia, grades, espaço, escala, cor e uso de imagens.

Todos esses elementos são usados não só para agradar os olhos dos usuários, mas para criar significado e hierarquia.

Dessa forma, o Material Design vêm carregado de uma série de padrões que devem ser seguidos, desde a tonalidade das cores, o números de pixels das sombras, até a curva de aceleração e desaceleração dos movimentos.

O design da interface como um todo ficaria mais ousado quando desenvolvido em cima desses fundamentos. Há uma intenção clara de fazer o usuário ter uma experiência mais imersiva.

3. Motion provides meaning (Movimento proporciona significado)

Material Design
Fonte: material.io/guidelines

Esta é a parte mais interessante. O Motion do Material Design! Os movimentos são tão importantes que são um dos princípios fundamentais dessa linguagem.

Assim como o design não é criado apenas para agradar aos olhos dos usuários, o motion também segue essa mesma ideia. Aqui no Material Design esqueça o “motion delight” que falamos em outro artigo. Há sempre uma intenção e significado por detrás dos movimentos.

O motion no mundo do Material Design é usado para descrever relações espaciais, funcionalidades e intenções com beleza e fluidez.

Cada movimento é pensado de forma lógica. O próprio tamanho da tela já deve fazer com que repensemos o movimento. Por exemplo, deveria a transição de cards em um tablet durar mais ou menos tempo em comparação com um smartphone? Logicamente, quanto maior a distância a percorrer, maior deve ser a duração do movimento.

Outro exemplo é a lógica da aceleração/desaceleração de entrada e saída dos elementos. Isso é bastante óbvio para alguns, mas para muitos não é. Quando o objeto entra em cena, devemos necessariamente criar uma curva de desaceleração. Quando o mesmo objeto sai de cena, a curva deve ser de aceleração.

Material Design
Fonte: material.io/guidelines

Onde encontro as especificações do Material Design?


Diante do mundo que existe nas especificações do Material Design, esse breve artigo está longe de esgotar o assunto. Muito pelo contrário. A intenção desse texto é apresentá-lo à essa realidade dos materiais.

O documento oficial do Material Design está todo em inglês mas acredito que no futuro irão traduzir. Aos que sabem falar inglês, recomendo imensamente ler o documento, principalmente a parte de Motion.

Não leia as especificações como se fossem mandamentos absolutos. O propósito do Material Design é outro, como eles mesmo dizem:

Esta especificação é um documento vivo que será atualizado à medida que continuamos desenvolvendo os princípios e especificidades do material design.

O Motion Design e os 4 Pilares da Usabilidade

experiência do usuário

A Experiência do usuário é o mais importante neste artigo e o comportamento dos objetos de uma interface são essenciais para criar uma experiência inesquecível. Isso é indiscutível.

Mas por quê? Em que o Motion é capaz de contribuir para a experiência?

O motion designer, especialista em usabilidade, Issara Willenskomer, escreveu um trabalho fenomenal chamado Creating Usability with Motion: The UX in Motion Manifesto.

Esse Manifesto é um marco importante na história quando o assunto é Motion Design para melhorar a Usabilidade. Recomendo a leitura! É extenso e em inglês… mas vale a pena o esforço!

Pois bem, Issara definiu muito bem os quatro campos em que o Motion pode melhorar a usabilidade na experiência do usuário: expectativa, continuidade, narrativa e relacionamento.

Expectativa

Muitos de nós somos acostumados a criar expectativas. Quando esperamos que algo vai acontecer de determinada maneira e acontece de forma diferente, estranhamos.

Ao interagir com as partes de uma interface, o usuário espera um tipo determinado de comportamento. O grande desafio é tentar diminuir ao máximo a distância entre o que o usuário espera acontecer e o que de fato acontece.

Esses dias li este artigo apresentando dados bem interessantes.

Depois de várias sessões de testes de usabilidade, em que as expectativas dos usuários foram quebradas, foi observado que as duas reações mais presentes foram: negação e resistência.

Negação

O exemplo real da negação foi quando os usuários clicaram várias vezes no botão “Comprar Agora” porque não sabiam se o site tinha entendido ou não seu comando.

De fato o botão estava funcionando, o produto foi adicionado ao carrinho de compras. Porém, não tinha um feedback claro. Tudo aconteceu de forma sutil e os usuários não tinham percebido isso.

Veja que nesse caso, por exemplo, bastaria um loader para comunicar que o comando estava sendo processado, e depois um pop-up animado confirmando que o produto foi adicionado no carrinho.

Resistência

O exemplo da resistência foi bem interessante pois aconteceu comigo também. Nesse caso o artigo cita a atualização do Office 2003 para o 2007.

Vários usuários evitaram a atualização alegando que investiram muito tempo para aprender a versão 2003 e que não queriam aprender tudo novamente.

Em ambos os casos é bem possível pensar em uma série de coisas em que o Motion poderia entrar para solucionar. Desde o loader e pop-up animado até umas pequenas animações guiando o usuário sobre como usar a nova ferramenta.

Continuidade

A continuidade envolve o “Flow” e a “Consistência” da experiência do usuário.

Segundo Issara Willenskomer, a continuidade pode ser pensada de duas maneiras.

A intra-continuidade, que seria a continuidade que existe dentro de uma cena, por exemplo o Zoom-In e Zoom-Out em um mosaico de fotos, ou o próprio Ease-In e Ease-Out do movimento de um objeto.

Já a inter-continuidade é a continuidade de várias cenas que compõem a experiência como um todo.

Narrativa

A Narrativa nada mais é do que a história contada através de todas as etapas da experiência.

Todo produto conta uma história. No caso de um aplicativo, pense em todas as escolhas que o usuário faz ao interagir com a interface, trazendo a tona uma série de etapas, formando uma experiência composta por cenas muito bem conectadas entre elas.

A Narrativa também se encontra nos detalhes, na cadeia de pequenos eventos de uma interação. Como por exemplo na imagem abaixo.

No primeiro momento você digita, depois aperta o botão para enviar a mensagem. Esta, por sua vez, se desconecta do box de digitação e se instala na área do chat. Logo depois pontinhos animados nos dão o feedback de que a outra parte está digitando. E por aí vai.

Relacionamento

O relacionamento refere-se às representações espaciais, temporais e hierárquicas entre os objetos de uma interface que guiam o usuário a entender algo ou tomar uma decisão.

Por exemplo, veja a imagem abaixo:

Este é o princípio de Parentesco, bastante conhecido por nós usuários assíduos do After Effects.

Veja que há uma clara relação de hierarquia temporal e espacial. O objeto-filho acompanha exatamente a mesma variação de tempo e espaço do objeto-pai.


A partir do entendimento dessas quatro áreas em que o Motion pode elevar o nível da experiência do usuário através da usabilidade, comece a analisar as interfaces que passam pela sua frente.

Quando você experimentar um sentimento muito positivo sobre uma determinada interface, tente entender o porquê. É bem divertido.

Analise cada movimento, a relação entre os objetos, as transições, como os objetos entram e saem de cena… como tudo isso junto conseguiu criar a narrativa que fez você ter uma experiência positiva.

O contrário é mais divertido ainda. Ao se deparar com uma interface frustrante, ao invés de fugir dela comece a navegar em cada detalhe para criticar mentalmente o que te incomoda e o que poderia melhorar.

Já pensou em aprofundar mais ainda na animação de interfaces e interações? Imagine como você pode se destacar! Você está convidado a fazer parte do nosso curso online:

UX Motion Design em After Effects: www.uxmotiondesign.com

Animações Desnecessárias na Experiência do Usuário — UX

Muitos designers estão incorporando, ou desejando incorporar, animações em seus trabalhos para melhorar a experiência do usuário. Isso é ótimo. Mas é importante frisar que o mundo fantástico do motion design é capaz de fazer maravilhas, nos obrigando a ter moderação quando inserido no mundo da Experiência do Usuário.

Aplicar motion para melhorar a experiência do usuário não significa simplesmente entretê-lo com animações fofinhas e engraçadinhas só porque está na moda.

O motion design no UX deve ter, antes de tudo, um real motivo de existir, seja para comunicar algo ou solucionar um problema.

Pensemos na animação de um Loader:

Animation by Ramotion

Como nós já falamos no artigo sobre a Importância do Motion Design para UX, um dos mais importantes e tradicionais princípios da animação na interação usuário-máquina é o Feedback.

Veja que o papel de um Loader, a princípio, é simplesmente comunicar ao usuário que a máquina está processando. Assim evita qualquer tipo de confusão com relação ao que de fato está acontecendo.

Existe também o problema da espera entediante. Muitos, principalmente os mais jovens, estão cada vez mais impacientes com o fato de esperar alguma coisa. Se este for o público alvo, não tenha dúvida de que a impaciência é um problema que deve ser solucionado.

Logo, um bom motion designer pode ajudar ao criar um loader lindo, prazeroso de assistir, hipnotizante, etc. Assim o usuário vai sentir o tempo passar muito mais rápido.

O problema surge quando, na empolgação das emoções, começamos a querer animar absolutamente tudo sem critério algum. Animar por animar, só porque é legal e está na moda, é uma péssima escolha e muitas vezes gera frustração no usuário.

Então como podemos evitar essa frustração?

Onde deve entrar o Motion?

Para a gente entender o que devemos evitar, antes é necessário entender o que devemos fazer.

O que mais me fez pensar a respeito sobre esse assunto foi a pirâmide criada por Aarron Walter, ex-diretor de UX no Mailchimp.

Em seu livro entitulado Designing for Emotion, Walter apresenta uma hierarquia de necessidades que devem ser levadas em consideração ao criar um design para melhorar a experiência do usuário.

Se entendermos o que devemos fazer para melhorar a experiência, saberemos qual é o tipo de animação que deve ser evitada!

Da base da pirâmide até o topo nós temos quatro camadas: funcional, confiável, usável e prazeroso. O motion está inserido na usabilidade e no prazer, mas é importante entendermos cada um.

Funcional

A primeira coisa que esperamos de uma interface é que solucione o nosso problema.

Uma vez baixei um aplicativo que prometia rastrear todos os ônibus da cidade. Resolvi instalar para evitar um problema: nunca gostei de esperar por 30 minutos a 1 hora no ponto de ônibus.

Quando chegou a hora de usar o aplicativo… simplesmente não funcionou da maneira como eu esperava, não solucionou o meu problema. Resolvi desinstalar o aplicativo e nunca mais confiei no produto. O que nos leva ao próximo ponto.

Confiável

Ao sofrer uma frustração por causa da má funcionalidade ou por não solucionar o meu problema, a credibilidade caiu por terra.

Depois que você perde a confiança dos usuários, fica muito difícil reconquistá-la.

Usável

A terceira camada é quando nossa preocupação enquanto designers gira em torno de oferecer uma interação que seja fácil de entender, fácil de usar e fácil de lembrar.

Quanto menos esforço cognitivo na interação, mais agradável será a experiência!

Aqui, o Motion Design entra em cena com força. É impressionante como é possível, através da animação, otimizar a usabilidade de qualquer interface. É possível comunicar com rapidez e precisão coisas que o design estático, sozinho, não conseguiria.

Em breve vamos escrever a respeito de onde o motion design é peça chave na otimização da usabilidade do usuário.

Prazeroso

Finalmente, depois de passar por todas as três camadas anteriores, deveríamos começar a enxergar o lado prazeroso da experiência.

A usabilidade em si, atingindo o seu ponto mais alto, já entrega uma experiência incrível ao usuário. Porém, através da camada do Prazer, é possível atingir um nível de afeição humano-máquina nunca visto antes.

Provavelmente à esta altura, entrando na segunda década do século XXI, você já deve ter se deparado com interfaces que da vontade de “levar para a casa”.

Aquele design lindo, elementos bem desenhados, cores bem escolhidas, tipografia… Tudo é tão bonito, que da vontade de entrar naquela experiência só por prazer.

Só o Design estático já é muito capaz, e sempre foi, de entregar essa experiência bastante prazerosa ao usuário. Acontece que quando o Motion Design chega de forma bem pensada e estruturada, a conexão pode ser mais forte ainda!

Um exemplo é o próprio macaquinho animado do Mailchimp. Antes de clicarmos “Send”, existe aquela tensão emocional, um frio na barriga. Logo depois que tomamos coragem para clicar em Enviar, o macaquinho manda um “high-five” para comunicar que “tamo junto, parceiro!”.

Claro que depois você se acostuma, mas a conexão emocional estabelecida é realmente incrível.

Motion do Mailchimp antes de clicar Enviar.

Motion do Mailchimp depois de clicar Enviar.

O que evitar, então?

Antes de tudo, é muito importante frisar que o motion design chega para agregar a experiência. Ele não deve ser o protagonista. Até porque não adianta experimentar uma interação repleta de animações enquanto o objetivo do usuário não for alcançado de forma consistente.

Outro ponto que devemos levar em consideração é: a animação está dando algum suporte à usabilidade do usuário? Se estiver dificultando a interação, deve ser evitado ou repensado. O usuário não pode sentir que existe uma animação entre ele e o seu objetivo.

Por exemplo, existem muitas reclamações quando determinadas animações são lentas ao ponto do usuário ter que esperar mais do que o necessário.

Veja este exemplo:

Olha como a velocidade gera frustração. Você só quer que o vídeo entre ou saia da tela cheia, mas entre o seu comando e o objetivo final existe uma animação muito demorada.

Importante deixar claro que é sim um tipo de movimento importante pelo fato de que ele orienta o usuário sobre que está acontecendo no ambiente virtual. Apesar disso, a velocidade gera o efeito inverso. Ao invés de melhorar a experiência do usuário, piora.

Um outro ponto importante a ser considerado é, caso a animação não esteja ligada diretamente à usabilidade, estaria ela gerando efetivamente uma afeição? O usuário está experimentando mais prazer em usar o aplicativo por causa desta ou daquela animação? (não esquecendo, claro, que o aplicativo deve estar atendendo todos os requisitos de funcionalidade, confiabilidade e usabilidade).

Enfim, devemos evitar ao máximo que o motion design na experiência seja apenas uma modinha e passe a ser de fato uma forma de atingirmos uma comunicação mais consistente com o usuário, melhorando substancialmente a usabilidade e o prazer.

Se você tiver interessado em receber os artigos e outros conteúdos de UX Motion Design na sua caixa de e-mail, se inscreva abaixo e comece a fazer parte da nossa comunidade!

Referências:

https://medium.com/@geraldgordinier/user-experience-is-not-a-pyramid-82806f715c82

https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

https://medium.com/@sophie_paxtonUX/stop-gratuitous-ui-animation-9ece9aa9eb97

https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/

http://blog.alura.com.br/ux-nao-e-so-uma-questao-de-usabilidade/

https://uxdesign.cc/ui-animation-please-use-responsibly-e707dbdb12d5

https://uxplanet.org/progress-indicators-in-mobile-ux-design-a141e22f3ea0

Timing e Spacing é o que importa!

Timing e Spacing. A boa animação se sustenta nesses dois princípios. Entender o que significa cada um, como eles se aplicam na realidade e na animação, é o que vai ditar se você está no rumo certo da animação ou não.

Se for a sua primeira vez lendo sobre este assunto, não se preocupe porque é algo bem simples (apesar da sua gigantesca importância).

Timing pode ser traduzido para temporização. É basicamente levar em consideração os pontos no tempo onde acontecerão cada movimento.

De forma simples e prática, é onde cada keyframe se encontra na linha do tempo, além da distância entre eles. Lembra quando criamos uma transição e escolhemos se ela vai acontecer em tantos frames? É basicamente isso.

Spacing, como a própria palavra já diz, é a variação no espaço. Aqui estamos preocupados com o que acontece no espaço, em cada quadro: quantos pixels de posição, graus de rotação, porcentagem, valores, enfim, qual variação no espaço ocorre entre um quadro e outro.

Na prática, alterar o spacing é o que fazemos ao personalizar as curvas de interpolação no editor gráfico dentro do After Effects.

Vamos pensar numa transição básica de expansão circular. O spacing vai tratar não só da variação de 0 a 100% da escala, mas também da aceleração e desaceleração (ease-in e out). Já o timing está relacionado com a duração que vai ocorrer essa interpolação, que no caso é de 1/3 de segundo (10 frames).

Animação criada por Pedro Aquino para UX Motion Design

Spacing está relacionado principalmente com que acontece em todos aqueles frames intermediários, ou seja, qual será o valor no segundo frame, terceiro, quarto, até o penúltimo frame. Estes frames intermediários, representados pela interpolação gráfica, são os famosos inbetweens.

O que são inbetweens?

Esse termo é muito conhecido no mundo da animação desde a época de Dick Huemer, um grande animador que fez parte da Era de Ouro da Animação. Inclusive, dizem que foi ele quem criou os inbetweens.

Dick Huemer

Traduzindo para o português, inbetween significa simplesmente “entre”, ou intermediário. São os quadros que irão compor tudo o que acontece entre o início e fim de um movimento.

O conceito de inbetweens, ou tweens, foi basicamente criado para ganhar tempo.

Um animador cria a primeira e última pose, e os animadores operacionais desenham os frames intermediários baseando-se num espaçamento representado por um gráfico (timing chart).

Podemos dizer que a interpolação no Editor Gráfico do After Effects é a representação do que está acontecendo nos inbetweens.

Quando afastamos ou aproximamos a ponta das alavancas da interpolação para personalizar suas curvas, estamos praticamente definindo a variação do espaço do movimento.

No caso do exemplo da transição circular, a interpolação baseada nos valores ficou assim:

Ease-in: 100% Ease-out: 33%

Como identificar o melhor Timing/Spacing?

Observe a realidade e faça conexões. A melhor maneira de se acostumar com a temporização e o espaçamento das coisas é observando tudo o que acontece à sua volta. Absolutamente todos os movimentos ocorrem com suas próprias variações de tempo e espaço.

Se você já jogou boliche, por exemplo, provavelmente já se deparou com aquela pessoa que, por não saber jogar, acaba lançando a bola para cima. O que acontece quando a bola cai na pista? Sobe e desce rápido, quica uma vez no máximo e para. Como no exemplo abaixo:

Se você programar a sua mente para analisar a realidade sob essa ótica, a sua imaginação sobre timing e spacing vai mudar exponencialmente. Os movimentos da natureza, na maioria das vezes, são lindos.

Hipnotizar-se com os movimentos de uma simples árvore balançando com o vento se tornará uma hábito!

Imaginando e atuando o movimento

Quando você entrar no After Effects para criar algum tipo de animação, tente imaginar o movimento acontecendo. Se preciso, faça uma atuação com seus braços ou com o seu corpo todo se preferir.

Depois de muito tempo fazendo essa maluquice, acabei descobrindo que se trata de uma técnica muito utilizada pelos animadores clássicos.

Faça um teste você mesmo. Feche o seu punho nesse momento e simule um pêndulo indo para um lado e para o outro.

Veja que automaticamente o seu cérebro, através da imaginação, vai fazer o seu punho criar um movimento bem semelhante a um pêndulo. Nos extremos vai rolar um ease-in e ease-out, e no meio do movimento (o chamado breakdown) o seu punho estará em alta velocidade. Agora basta traduzir isso nos keyframes.

Obs: se preciso, adicione um pouco de sonoplastia com a boca quando o punho estiver em alta velocidade. Um “vuumm” serve!

Tente o mesmo simulando uma bola quicando, uma pedra impactando numa superfície, etc. Parece coisa de maluco, mas funciona e é engraçado.

Timing and Spacing no UX Motion Design

https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations. Clique na imagem para acessar.

Na realidade do UX Motion Design também devemos ter uma atenção especial ao tempo e ao espaçamento dos movimentos.

Existem alguns padrões de timing/spacing criados para a animação de interfaces e suas interações. O projeto mais famoso sobre isso (talvez o único, por enquanto) é o chamado Material Design, desenvolvido pela Google.

Em breve vamos lançar um artigo especial só sobre o motion do Material Design, mas gostaria de compartilhar um princípio que achei bem interessante.

The movement should be fast enough that it doesn’t cause waiting, but slow enough that the transition can be understood.

O movimento deve ser rápido o suficiente para não gerar espera, mas lento o suficiente para que a transição seja entendida.

Só neste princípio estamos lidando com puro timing. Quanto tempo vai durar determinado movimento? Dez frames? Cinco frames?

Se pensarmos numa transição da tela A para a tela B, também devemos levar em consideração o tamanho da tela. O usuário estará em um mobile, tablet ou monitor?

Segundo o Material Design, quanto maior for a tela, mais lento deve ser o movimento porque irá percorrer distâncias maiores. Aqui também estamos falando de timing.

Para citar um exemplo, uma mesma animação ocorrendo na tela de um tablet deve ter uma duração 30% maior do que no mobile.

O Material Design também possui alguns padrões de spacing. Eles definiram como curva padrão para objetos que crescem ou diminuem o valor de 80% de influência no ease de entrada e 40% no ease de saída.

Mas como falei anteriormente, em breve dedicaremos um artigo inteiro só sobre Material Design.


Resumindo, neste pequeno artigo aprendemos: o que é timing/spacing e a importância de cada um, o que são os inbetweens e como eles são responsáveis pelo tipo de movimento que queremos transmitir, como identificar o timing/spacing que vamos aplicar no movimento, a técnica de imaginar e atuar os movimentos, e como tudo isso é relevante para o UX Motion Design, ou seja, os movimentos/animações que ocorrem no ambiente das interfaces com a finalidade de melhorar a experiência do usuário.

Se você tiver alguma dúvida ou sugestão, comente logo abaixo e não deixe de se inscrever na nossa lista para receber mais conteúdo sobre UX Motion Design.

Importância do Motion Design para UX

O que é UX — Experiência do Usuário?

Estamos imersos numa realidade repleta de experiências individuais. Todos os tipos de produtos que usamos, serviços que contratamos, ambientes que frequentamos, estão carregados de características que nos fazem ter uma experiência positiva ou negativa.

Um exemplo que gosto de imaginar é quando frequentamos um restaurante.

Joben Bistro, Cluj-Napoca, Romania

Todos os mínimos detalhes causam, de certa forma, um impacto profundo na nossa experiência. Nome e logotipo da empresa, arquitetura e design de interiores, música ambiente, atendimento do garçom, design do cardápio, sabor e aparência da comida.

A experiência chega a ser tão importante que às vezes um simples atraso no pedido da sobremesa, mais a frustração de chegar algo inferior do que esperávamos, somado com uma música ambiente ruim, etc., pode acabar destruindo a experiência e queimar o filme daquele estabelecimento por muito tempo.


Antes de existir o termo UX, a experiência dos usuários ao consumir um produto ou serviço sempre foi seriamente levado em consideração por muitas empresas do mundo todo.

Essa preocupação em agradar os clientes que frequentam um determinado estabelecimento é a mesma preocupação que deve haver quando falamos de produtos digitais.

No mundo digital ouvimos muito falar no termo UX Design, pois de fato ele está geralmente mais relacionado à produtos digitais, aplicativos e web. E é exatamente aqui que nós, motion designers, entramos em cena.

Otimizando a Experiência com Motion

A preocupação com a experiência do usuário no desenvolvimento de interfaces tem evoluído de tal forma que de uns tempos para cá o motion se tornou parte essencial desse processo.

Isso porque não há interação com o mundo real sem movimento. Logo, não existe uma experiência completa sem movimento.

Imagine um aplicativo que tem como proposta a leitura de livros digitais. No momento em que viramos a página, inconscientemente esperamos certo tipo de movimento. Se o corte for seco, sem qualquer tipo de transição, a experiência será drasticamente prejudicada.

Poderíamos listar uma série de aplicabilidades do motion na otimização da experiência do usuário, mas esses dias algo me chamou atenção.

Eu estava assistindo a uma palestra muito interessante do Saptarshi Prakash, motion designer da Zeta, no qual o assunto era sobre motion design e microinterações em UX. Prakash fez um resumo elencando 4 tipos de motion mais usados para melhorar a experiência do usuário.

São eles: transição, feedback, shifting focus (desviando o foco) e delight (deleite).

1. Transição

Transição é o que acontece entre um estado inicial e um estado final. Se voltarmos ao exemplo do livro digital em algum aplicativo de leitura, quando viramos uma página esperamos que haja uma transição entre a página A até a página B. Talvez uma animação básica de page-turn. Algo que comunique ao usuário que de fato a página foi virada.

Existem outros exemplos de transições como popup, overlay, expansão, contração, etc. O importante é ter em mente que transição é todo tipo de movimento que relaciona um estado anterior com o posterior.

2. Feedback

Feedback é a resposta visual que o usuário recebe ao fazer uma ação.

É um tipo de movimento bastante comum. O exemplo mais clássico é um botão. Quando clicamos, a animação que simula a superfície afundando e voltando é um tipo de feedback. É algo que comunica ao usuário que aquele botão de fato foi apertado.

Experimente clicar em um botão e não receber resposta alguma. Talvez a primeira coisa que virá na sua cabeça é se o mouse falhou.

Estamos tão acostumados em esperar um feedback de que determinada ação foi realizada, que quando isso não ocorre nos gera uma certa estranheza. Por isso o feedback é considerado um dos tipos de motion mais importantes nas interfaces.

3. Shifting Focus (Desviando o Foco)

É muito usado para chamar a atenção do usuário com a intenção de comunicar algo. Geralmente para mostrar ao usuário que ali existe uma possível interação.

Um bom exemplo disso são aquelas animações que vai nos ensinando passo a passo onde devemos clicar e o porquê. Outro exemplo é o “arraste para confirmar”, com aquela setinha animada direcionando para onde devemos deslizar o dedo.

4. Delight (Deleite)

Estas são as interações animadas que tem uma única intenção: fazer conexão emocional com o usuário.

É claro que todos nós queremos algo que seja funcional e que atenda às nossas necessidades. Mas nossa exigência como usuários não para por aí. Somos seres emocionais, gostamos de sentir prazer em utilizar determinado produto.

Um bom exemplo pode ser aquele loader bonito que é capaz de transformar um momento de espera tediosa em algo divertido.


Segundo as pesquisas que tenho feito no mundo inteiro, estou cada vez mais convencido de que o motion design já conquistou, para sempre, o seu espaço no desenvolvimento de interfaces e produtos digitais.

Sobre isso recomendo um ótimo artigo do Craig Dehner, que é motion designer de um time da Apple, cujo título é:

Motion Design é o Futuro do UI.

Se você quiser ler estes artigo, segue o link:

https://blog.prototypr.io/motion-design-is-the-future-of-ui-fc83ce55c02f

Editor Gráfico do After Effects: onde toda a mágica acontece!

Muitos textos e artigos já foram escritos sobre este assunto, mas a maioria está em outra língua e explicam de forma muito superficial. Em português achei pouca coisa e alguns eram apenas uma tradução rápida de outro artigo.

Então vamos entender em português, de uma vez por todas, como funciona essa ferramenta magnífica!

A lógica do Graph Editor (Editor Gráfico) do After Effects é bem fácil de entender. A primeira vista parece complexo porque lembra aquelas representações gráficas que estudávamos em matemática e física, mas a partir do momento em que você entende os detalhes, o ambiente do editor gráfico vira oxigênio para a sua animação.


Uma representação gráfica no After Effects funciona basicamente da seguinte forma: temos o eixo horizontal que mede variação do tempo e o eixo vertical que mede a variação de velocidade ou valor. O gráfico é a interpolação que ocorre entre dois ou mais keyframes.

Digo velocidade ou valor porque é possível, dentro do After Effects, escolher se queremos visualizar/editar o gráfico baseado na velocidade da animação, ou se preferimos um gráfico baseado nos valores.

Lembre-se: para intercalar entre um e outro tipo de gráfico aperte o botão direito do mouse em cima do editor gráfico e selecione a opção Speed Graph ou Value Graph (Gráfico de Velocidade ou Gráfico de Valores).

O Exemplo da Bola Quicando (Bouncing Ball)

Vamos criar uma bolinha indo para baixo e para cima num período de 30 frames (um segundo). Não se esqueça de selecionar todos os keyframes e apertar F9 para inserir Ease-In e Ease-Out em todos eles. (mais sobre Easy Ease neste artigo).

Compare como isso é representado no Speed Graph e no Value Graph:

Speed Graph (Gráfico de Velocidade)

Value Graph (Gráfico de Valores)

Pode parece complicado para alguns, mas prometo que é ridiculamente fácil. Primeiro, vamos começar entendendo o que o gráfico de velocidade está nos dizendo.

Speed Graph — Gráfico de Velocidade

Vamos lembrar que eixo horizontal sempre será a variação do tempo da composição. Já o eixo vertical, quando escolhemos o Speed Graph, está nos informando a variação da velocidade da bolinha em pixels por segundo (px/sec).

No primeiro frame a velocidade é igual a zero. Do segundo em diante a velocidade vai subindo até mais do que 1000 pixels por segundo e depois vai desacelerando até zero novamente.

Após ter lido o que foi dito acima, volte os seus olhos novamente ao editor gráfico e analise cada detalhe. Os números do eixo X que são nada mais nada menos que os frames da timeline. Os números do eixo Y que são as velocidades em pixels por segundo. A interpolação entre os keyframes formando uma parábola.

Cada ponto da parábola é igual a determinada velocidade em um dado momento da composição.

Você nesse momento pode se perguntar: beleza, mas e essas alavancas amarelas que se encontram em cada keyframe, o que são?

Ótima pergunta, pois é nesse detalhe que a grande mágica acontece. Primeiro saiba que para estas alavancas ficarem aparentes você deve selecionar os keyframes.

Estas alavancas são responsáveis pela curvatura da interpolação. Ao pressionar e arrastar a bolinha amarela da alavanca para esquerda ou para a direita podemos aumentar ou diminuir a curva de aceleração/desaceleração.

Importante pontuar que existe aqui um valor em percentagem que define a distância entre a ponta da alavanca até o keyframe. Este valor chamamos de Influência. No After Effects, quando apertamos F9 nos keyframes para inserir o Easy Ease, o valor começa em 33% por padrão.

Veja no GIF acima que enquanto mexemos na distância da alavanca, temos acesso ao valor de influência em tempo real.

Quanto mais longe do keyframe a ponta da alavanca estiver, maior é a percentagem de influência. Logo, quanto mais perto… menor é a percentagem! Detalhe: esta variação vai de 0% a 100%.

Continue comigo porque a maioria pula essa parte e você vai se destacar por entender o que estou prestes a revelar.

Pois bem, saindo da teoria e partindo para a prática, como podemos fazer com que esta bolinha tenha um movimento semelhante a uma bola quicando?

Voltemos para nossa imaginação. Visualize mentalmente uma bola quicando no chão. Ela começa em cima, com velocidade igual a zero. Vai acelerando até o momento em que bate na superfície. Até o impacto não há desaceleração alguma. Logo, a influência até o impacto deve ser igual a 0%.

Ao deixar a alavanca da entrada do segundo keyframe em 0% de influência, veja como fica a curva de aceleração de saída do primeiro keyframe. O que você acha? Condiz com a realidade?

Não! Lembre-se da aula de Física na escola.

A aceleração da gravidade é constante e durante todo o período da queda livre até o impacto a velocidade deve ir aumentando gradativamente.

Aqui eu definiria uma influência de mais ou menos 80%.

Agora do segundo keyframe até o terceiro acontece praticamente a mesma coisa, porém de forma inversa. A saída do segundo keyframe terá influência de 0% e a entrada do terceiro keyframe em torno de 80%.

Veja o resultado:

Obs: é claro que para deixar mais bonito ainda podemos animar o shape do círculo durante a animação. Mas este é um assunto para outra ocasião.

Agora que você já entendeu perfeitamente como funciona o editor gráfico de velocidade, vamos entender o de valores!

Value Graph — Gráfico de Valores

Se você nos acompanhou dentro do After Effects, dê Ctrl+Z até o ponto inicial quando inserimos o Easy Ease. Ou simplesmente selecione todos os keyframes e aperte F9.

Diferente do gráfico de velocidade, agora o eixo vertical nos mostra a variação de valores da propriedade (que neste caso é a de Posição).

Veja o gráfico:

A propriedade de Posição em um ambiente de duas dimensões possui dois valores: X e Y. Sendo X a posição na horizontal e Y a posição na vertical.

A linha vermelha é a variação da posição em X (horizontal), já a linha verde é a variação em Y (vertical). Como se trata de uma simples bola quicando, não há variação na posição horizontal (X), apenas vertical (Y). É por isso que estamos vendo a interpolação ocorrendo apenas na linha verde.

Vamos interpretar o que está acontecendo. No primeiro quadro, o ponto de ancoragem do círculo se encontra em 328 pixels na vertical. Depois forma um S, que significa uma aceleração que precede uma desaceleração, até o ponto de 756 pixels. Após atingir este ponto, volta para 328 pixels novamente acelerando e desacelerando.

Como fizemos com o gráfico de velocidade, fixe seus olhos nos mínimos detalhes na imagem anterior, analise cada informação. Veja que quanto maior é a velocidade do objeto mais íngreme é a curva, quanto menor a velocidade menos íngreme. É importante ter este detalhe em mente quando utilizarmos as alavancas para personalizar as curvas.

Você deve ter percebido que não existe neste caso as alavancas para modificar as curvas. Se você é das antigas, provavelmente lembra que até a versão anterior ao CS4 ficava por isso mesmo. Não era possível usar o Value Graph nas animações de posição. Isso porque desde sempre até hoje o software não nos permite modificar as curvas bézier das interpolações que incluem mais de uma propriedade. Naquela época, a única maneira de usar as alavancas para a Posição era ficando preso ao gráfico de velocidade.

A partir da versão CS4, quando foi incluído a possibilidade de separar as dimensões da posição (Separate Dimesions), nos foi concedido a liberdade de animar os eixos independentemente. Então é assim que liberamos as nossas queridas alavancas para o gráficos de valores de posição.

Clique o botão direito na propriedade de posição e selecione Separate Dimensions:

Obs: ao fazer isso, será necessário inserir o Easy Ease novamente. Selecione os keyframes e aperte F9.

Mais um detalhe importante. Não há qualquer medida numérica em tempo real para as alavancas do gráficos de valores. Ao arrastá-las, não mais temos aquelas informações precisas sobre as influências. Até hoje não consegui entender o porquê.

Outro detalhe também muito importante. Como estamos imersos no UX Motion Design, e como vamos nos relacionar bastante com os programadores, saiba que eles têm mais intimidade com o gráfico de valores do que com o de velocidade.

Agora, a pergunta que não quer calar:

Como vamos personalizar as nossas curvas para animar uma bola quicando?

Mesma lógica. Aumentando a curva de aceleração de saída do primeiro keyframe arrastando a alavanca para a direita. Depois aproxime ao máximo as alavancas de entrada e saída do segundo keyframe, retirando qualquer tipo de desaceleração e aceleração. No último keyframe, arraste a alavanca para a esquerda formando uma curva semelhante a da saída do primeiro keyframe.

O gráfico vai ficar mais ou menos assim:

Neste caso em específico o gráfico ficou bastante semelhante ao de velocidade. Porém, na maioria das vezes, fica bem diferente.

Enfim, quando devo usar cada um?

Essa pergunta sempre será eterna. Muitos vão defender com unhas e dentes o gráfico de valores. Outros são tão viciados na curva de velocidade que dirão para você esquecer a curva de valores.

Prefiro responder o seguinte: aprenda a dominar os dois gráficos. Questione quem defende um ou outro. Ambos são importantes.

Tendo pleno domínio de como funciona o Speed Graph e o Value Graph, você mesmo vai saber julgar perfeitamente qual é o ideal em cada momento.