Como seus princípios se diferenciam?
Este artigo tem com base a live desenvolvida para a turma 4 do curso UX Motion Design, entre o Felippe Silveira e o Pedro Aquino, apresentando os 12 Princípios do Motion na Usabilidade. Aqui fazemos um resumo deste paralelo dos 12 Princípios da Animação tradicional, com os 12 do UX Motion. Para um conteúdo mais aprofundado no assunto, recomendamos conferir o vídeo atrelado à este artigo.
O Motion em interfaces (na usabilidade), pode ser considerado o nicho mais recente que surgiu dentro de nossa área. Entretanto, os pioneiros nesse campo, vieram desenvolvendo estudos e definindo conceitos para servirem de base do pensamento e construção de animação nesses novos meios. Um conteúdo que se mostrou fundamental para todos que estudam e trabalham com o UX Motion Design, são os 12 Princípios do UX Motion, desenvolvido por Issara Willenskomer.
Este 12 princípios, como já tratado anteriormente em outros artigos nossos, se tornaram a base para muitos Motion Designers de Interface. Porém, quando falamos de 12 Princípios, nosso cérebro automaticamente nos joga para aqueles famosos 12 Princípios da Animação Clássica com base no livro Illusion of Life: Disney Animation lançado em 1981. Este princípios são ensinados em todos os cursos de animação e é a base pela qual muitos animadores desenvolvem seus trabalhos.
Entretanto, por mais que existam alguns pontos em comum, os princípios do UX Motion possuem grande disparidade.
Princípios da Animação Tradicional
Rapidamente relembrando aqui, os 12 Princípios da Animação Tradicional, são:
- Squash & Stretch (Achatar e Alongar)
- Antecipação
- Staging (Encenação)
- Straight Ahead & Pose to Pose (Animação direta e pose a pose)
- Follow Through & Overlapping (Continuidade e sobreposição da ação)
- Slow In & Slow Out (Aceleração e desaceleração)
- Arcos
- Ações Secundárias
- Timing
- Exagero
- Desenhos Sólidos (ou desenho volumétrico)
- Apelo
Esses princípios tinham como função básica dar vida à personagens inanimados e acima de tudo criar uma conexão emocional entre espectador e obra animada. Muitos desses princípios como Exagero, Squash & Stretch e Desenhos Sólidos são bem fortes em cartoons já que a ideia de volume associada ao exagero, reforçava aquele universo mágico criado por animadores.
Outros princípios como os de Straight Ahead & Pose to Pose, Slow In & Slow Out, Follow Through & Overlapping são mais fundamentais em questões de animação relacionado à maneira de construção das mesmas ou parâmetros que definiam uma boa animação.
Princípios do UX Motion
Por mais que a base da animação tradicional seja essencial para qualquer animador, nem todos os princípios tradicionais se aplicam em interfaces. Por isso, apesar de alguns destes princípios serem iguais ou bem próximos, o UX Motion possui princípios únicos e elimina aqueles que no final não contribuem direto para a experiência do usuário. Os princípios do UX Motion são:
- Easing
- Offset & Delay
- Parentesco (Parenting)
- Transformação
- Mudança de Valor
- Mascaramento (Masking)
- Sobreposição (Overlay)
- Clonagem (Cloning)
- Obscuração
- Parallax
- Dimensionalidade
- Dolly & Zoom
De cara, é possível ver que não são os mesmos princípios. Dentre os princípios de UX Motion, o Easing, Offset & Delay e a Dimensionalidade, seriam os mais próximos da animação tradicional. Entretanto, essa diferenciação se faz pois o objetivo final dos dois são diferentes.
Enquanto a animação tradicional teve como objetivo primário o entretenimento, a alusão à vida em elementos anteriormente estáticos, e a criação de um universo “mágico” de histórias; a animação para interfaces é centrada no usuário — naquele à navegar por determinado aplicativo — pensando em como fazer daquele momento algo memorável e agradável. Experiência é a palavra chave aqui.
Com isso, seus princípios tem como base parâmetros fundamentais na criação dessas experiências e em como conectar interfaces — que a princípio é algo frio, tecnológico e distante — com algo mais humano.
Motion e emoção
No final de tudo, motion é amor, motion é emoção. A emoção é o que conecta as pessoas e elas deixam de pensar em interfaces como algo frio e passam a ver nela algo tátil e mais próximo delas mesmas. Naturalmente nós seres humanos somos atraídos pelo movimento. Esse movimento é o que nos remete vida e faz com que criemos uma conexão mais profunda com o nosso redor.
Já falamos aqui anteriormente, mas isso é sempre bom reforçar. Na imagem acima, a mensagem sem dúvida é transmitida. Porém ali, ela ainda se mantém estática. Por mais bonita que seja a mensagem, ela de longe tem o impacto que somente a imagem abaixo consegue transmitir:
Esse é o poder que a animação possui. Seja na animação tradicional ou no UX Motion, só ela é capaz de dar vida ao inanimado. Os princípios servem para que possamos transmitir mais vida em nossas interfaces e trazer experiências únicas à todos os usuários.
