UX Motion Design: boas aplicações e seus princípios

Esse artigo foi escrito pelo Glauber Santos Moreira e por mim, esperamos que aproveitem a leitura! Confira também nosso vídeo no Youtube sobre os 12 princípios.

Nos últimos anos, o Motion Design se tornou cada vez mais presente na vida das pessoas, eles são vistos em propagandas, videoclipes, TV, cinema e isso não seria diferente no universo mobile. O Motion Design aplicado a interfaces ou UX Motion Design traz diversos benefícios e causa grande impacto na experiência do usuário. Sua aplicação é capaz de influenciar ações, gerar uma sensação de segurança e conforto, dar significado a interação, entre outros fatores.

No momento de criação do Motion é muito importante avaliar o tempo, pois animações muito rápidas ou muito lentas prejudicam a qualidade do design e afetam negativamente a interação entre usuário e produto. Também é importante manter os movimentos o mais próximo da realidade, utilizando a física do mundo real. Outro fator a se considerar é a orientação espacial, ela é especialmente útil para estabelecer onde os elementos da interface estão, de onde vem e para onde vão. Isso muda a relevância de elementos em tela, evita a fadiga e confusão do usuário, pois reduz a carga cognitiva na compreensão do que está acontecendo.

Com isso em mente, há 12 princípios que nos guiam no planejamento do UX Motion Design. São eles:

• Easing — Ele corresponde a aceleração e desaceleração de um elemento, dividindo-se em 3 aplicações principais: (1) Ease In ou Curva de Aceleração que acontece quando há um atraso inicial e a velocidade aumenta aos poucos; (2) Ease Out ou Curva de Desaceleração que ocorre quando o elemento vai perdendo velocidade até ficar estático; (3) Ease-in-out ou Curva Padrão que é a junção dos dois anteriores, ou seja, o elemento começa em repouso e acelera aos poucos, depois de atingir uma determinada velocidade começa a ficar mais devagar até estacionar novamente.

• Offset & Delay — É a forma como a interface comunica a hierarquia quando elementos entram ou saem de tela. Por exemplo, ao mover dois elementos juntos enquanto um terceiro é deslocado somente depois, entende-se que há algum tipo de “separação”.

• Parenting — Pode ser confundido com Offset & Delay, mas nesse caso, os objetos possuem relações entre si, ou seja, a alteração de um influencia instantaneamente no outro.

• Transformation — É uma característica que ajuda a construir continuidade entre os elementos e no fluxo narrativo quando a finalidade de um objeto muda. Por exemplo, um botão de enviar, que vira uma barra de progresso e no final confirma a ação.

• Value Change — É uma forma de criar um relacionamento narrativo e dinâmico para comunicar mudança de valor. Quando valores são carregados sem “alteração de valor”, o usuário pode entender que eles são estáticos. Em uma representação dinâmica onde há movimento do “sujeito do valor”, o usuário compreende que ele tem poder para agir.

• Masking — Ajuda a construir continuidade em um objeto ou grupo de objetos quando a utilidade dele é determinada através do ato de revelar ou ocultar uma parte do mesmo. Pode ser confundido com o princípio Transformation, mas no caso do Masking, ele não muda o conteúdo, somente o formato.

• Overlay — Permite que a interface comunique que há elementos na frente ou atrás em um plano que não é 3D, ou seja, a sobreposição. É uma forma de criar uma narrativa da relação espacial e do objeto na área plana.

• Cloning — Ocorre quando funções se originam de um elemento, criando continuidade, relacionamento e narrativa. A interface guia o olhar do usuário e comunica que a ação ‘x’ sob ‘y’ resulta no surgimento de novos objetos filhos.

• Obscuration — Possibilita que o usuário se oriente em relação a objetos ou cenas que não estão na hierarquia visual primária, ou seja, ele consegue focar em um ponto sem sair da tela. Talvez seja confundido com Overlay, mas nesse caso não há troca de telas.

• Parallax — Auxilia na criação de hierarquia quando o usuário utiliza o scroll. Ele ocorre quando diferentes objetos se movimentam em tempos diferentes de acordo com sua prioridade. Elementos em primeiro plano ou que se movem “mais rapidamente” são mais próximos para o usuário, enquanto objetos em segundo plano ou que se movem “mais lentamente” são percebidos com mais distância.

• Dimensionality — É um modo de superar a falta de profundidade da interface plana quando elementos surgem ou saem de tela. É dividida em 3 tipos: (1) origami — quando o objeto é “dobrável” ou “articulado”; (2) flutuante — quando a origem e a partida é espacial, como se ele flutuasse e; (3) do objeto — quando o elemento parece ter profundidade e forma real.

• Dolly & Zoom — São conceitos de filmagem que se referem aos movimentos de objetos relevantes para a câmera e ao tamanho da imagem no frame quando há uma mudança suave do plano geral (long shot) para o plano fechado (close up). É utilizado para preservar a continuidade e a narrativa espacial ao navegar pelos objetos ou espaços da interface. O dolly ocorre quando há o movimento da câmera ou do objeto na direção contrária ou de encontro com o elemento estático. Enquanto no zoom ambos estão estáticos e há somente a variação de escala do objeto, comunicando que objetos adicionais estão “dentro” de outros objetos ou cenas.

O UX Motion Design se mostrou um grande aliado em tornar as interfaces mais funcionais e atrativas, portanto sua aplicação correta e os testes contínuos podem mudar complemente a relação entre usuário e interface. Uma tela bem construída deve — dentro do possível — buscar contemplar tanto usuários com ou sem deficiência, distúrbio ou necessidades específicas.

A utilização do Motion Design aplicado a interfaces não pode ser vista como um enfeite, mas sim uma ferramenta, então não exagere, o excesso de informações pode desorientar e dispersar os usuários.

Utilize animações sutis que indiquem funcionalidades e tragam feedbacks sobre as ações realizadas, sempre levando em consideração o ponto em que o usuário deve focar sua atenção.

Referências

• Animações e UI: Ganhando a Atenção do Usuário — UX Motion Design por Fernando Cerioni
• Creating Usability with Motion: The UX in Motion Manifesto — UX in Motion por Issara Willenskome
• Motion Graphics: Um pouco sobre o Design em movimento — Design Culture por Lucas Esteves
• Motion UI: 4 formas de usar animação funcional — DPW por Tárcio Zemel
• O bom uso de animações em UX Design — Gas Rocket por Tais Semensato
• O motion na interface vs o motion tradicional — UX Motion Design por Felippe Silveira e Pedro Aquino
• The ultimate guide to proper use of animation in UX — UX Colletcive por Taras Skytskyi
• UX Motion: Fatores de acessibilidade — Layer Lemonade por T. Lloyd