Motion em Interações Digitais

Artigo

Partilhamos um artigo de João Veríssimo, Lead Motion Designer na Hi Interactive, onde explica que a animação tem, hoje em dia, uma importância relevante no Design de Interfaces como uma das ferramentas para construir interações de sucesso.

Motion Design é a área criativa onde se trabalha grafismo em movimento: está cada vez mais presente na realidade de todos, desde vídeos promocionais e publicidade a animações ou micro-animações em websites e aplicações. A visão humana perceciona o movimento de forma intuitiva e natural. Os cenários digitais podem beneficiar desta característica, seja em pequenas interações do utilizador com o layout, seja em botões ou outros elementos presentes no ecrã.

Hoje em dia, a animação tem uma importância relevante no Design de Interfaces como uma das ferramentas para construir interações de sucesso. Através da animação é possível tornar o produto simples, direto e centrado no utilizador, proporcionando uma experiência positiva.

Todos os elementos interactivos podem (devem) ter algum tipo de Motion no momento da interação, tais como hovers, que indicam ao utilizador que os elementos têm uma ação associada. Estas animações poderão ser mais óbvias ou mais subtis, de acordo com a abordagem criativa do projeto e com o tipo de utilização pretendida. Em elementos clicáveis, como menus, a animação de expansão a partir do elemento clicável deve poder guiar de forma simples o utilizador na navegação.

O Motion em interações digitais facilita a experiência de utilizador e torna-a mais imersiva. Um layout estático não proporciona ao utilizador a mesma vivência de um layout que funciona como um organismo vivo e que reage à interação. A animação deverá ser sempre planeada tendo em conta a User Journey, de forma a garantir a máxima eficácia em usabilidade, utilidade e desejo pelo produto, garantindo assim as decisões mais acertadas para o utilizador. Seguindo o planeamento das animações, é necessário identificar os elementos que terão interação com o utilizador e os que não terão.

Botões deverão ter hover e um resultado de clique associado para identificar os seus diferentes estados. Elementos como setas de scroll poderão ter um subtil movimento para indicar a acção respectiva ao utilizador. As transições de páginas, de acordo com o planeamento, devem respeitar a direcção de forma a manter uma lógica de movimento, uma seta de slide lateral para a direita irá trazer os novos elementos vindos da esquerda. Na existência de fundos com uma abordagem mais rica visualmente, deverão ter uma animação subtil de forma a não colidir com os elementos gráficos que constituem o layout.

Um ponto forte em animação de interfaces é a possibilidade de mais facilmente trabalhar a hierarquia visual permitindo ao utilizador, sem grande esforço, compreender a navegação.

Outro elemento crucial ao pensar em Motion em Interação Digital é a velocidade. Seguindo a lógica de todos os outros fatores, a velocidade está diretamente associada a uma boa experiência visual e de utilizador. Numa interface, todos os elementos de interacção são reacionários o que implica que haja uma reacção ao toque/clique e por isso a velocidade a que um botão ou elemento responde ao nosso input é fundamental. É importante que o utilizador não se aborreça na navegação e os tempos de animação das interacções que não respeitem esse detalhe estão condenados ao insucesso.

A referência ao mundo real é uma das inspirações a seguir em interações digitais, como gravidade e fricção. Os objetos, naturalmente, não têm paragens abruptas nem ganham velocidade instantaneamente, por isso, seguindo este racional, conseguimos obter movimentos naturais.

Replicando a essência e naturalidade de interações que existem no mundo real ajuda a relacionar a pessoa com o produto e com o mundo. E estas interações que reagem com o utilizador tornam a experiência facilmente apreciada e natural.

A aproximação de animações à realidade cria a agradável alusão ao mundo real e da forma como objetos físicos interagem, não necessitando assim tanta percepção cognitiva. Ao premir um botão, arrastar um elemento ou transitar entre páginas os movimentos devem ser naturais e não forçados.

O equilíbrio perfeito entre utilidade e usabilidade com emoções e estética garantem ao utilizador uma boa experiência e satisfação para com o produto.

As micro-animações são a forma de tornar as interações rápidas e diretas para o utilizador, tais como o pressionar de botões. Torna-se “invisível” quando está a ser utilizado de forma correta mas é facilmente perceptível a sua importância quando não é usado devidamente.

As animações são normalmente discretas e pequenas mas como todos os elementos discretos numa interface, requerem bastante tempo e esforço criativo para torná-las simples e de forma a exponenciar a usabilidade do produto. São fundamentais para esta positiva experiência de utilizador, são os detalhes que tornam a navegação clara e simples. O facto de, ao clicar num botão de “gosto”, haver uma mudança de contador e alterar a cor informa imediatamente o utilizador que a sua ação foi concluída e que surtiu aquele efeito na interface. Uma animação que também ajuda o utilizador na sua navegação é  o “Pull-down to refresh” que informa a chegada ao topo da página e também que está a ocorrer um carregamento de conteúdo. Estas animações também podem ser aproveitadas para incluir alguma originalidade visual e animada, inclusivamente para utilizar alguns elementos da marca dando assim suporte à sua “brand awareness” e tornando-a mais reconhecível e memorável. Quando criado e animado duma forma original, estas animações podem ser características de partilha entre utilizadores pelo seu destaque visual e/ou criativo.

Existem mais alguns tipos de animação que podem ser identificados em interações digitais:

Progresso

Vários tipo de barras de Loading que identificam o quão avançado vai o progresso e dá ao utilizador uma expectativa real do tempo necessário para obter os resultados da sua ação. Seja a abertura duma página, um login ou qualquer tipo de transição.

Explicativo

As animações explicativas ajudam o utilizador através de chamadas de atenção para ações ou áreas da interface que serão relevantes para a sua utilização. Regularmente é evidenciado numa primeira utilização duma plataforma com o intuito de explicar os passos básicos para a utilização da mesma.

Decorativo

Através de animações decorativas é possível destacar visualmente o desenho da interface e criar mais ligação com o utilizador. Por vezes é usado nas marcas para dar alguma vida ao layout e destacar criativamente a marca em si.

Reactivo

O utilizador quer saber quando a sua ação foi realizada e as suas consequências. Permitem ao utilizador a constante percepção das suas interações com a interface, mantendo a ligação com o utilizador presente e a experiência positiva e eficaz relativamente à sua navegação. Botões animados e outros elementos interactivos informam o utilizador rapidamente tirando partido da percepção visual.

Informativo

É importante informar o utilizador de progressos de forma a mantê-lo a par de páginas a percorrer ou outras interações de forma a não se perder o contato das etapas necessárias. Barras de progresso, timelines animadas ou outros elementos dinâmicos podem ajudar a garantir uma boa experiência de utilizador.

Será sempre importante ter em conta alguns pontos de forma a garantir o bom funcionamento do produto, como por exemplo, a alocação de tráfego para carregamento de dados – se as animações forem demasiado pesadas poderão ter um efeito negativo ao criar longos tempos de espera e aborrecer os utilizadores. Demasiada animação poderá também ter o efeito contrário ao esperado e por isso mesmo é importante não exagerar nos movimentos presentes no ecrã e garantir que existe um equilíbrio perfeito para o utilizador. Se tudo tiver movimento na interface o utilizador rapidamente ficará cansado com demasiada informação.

Outro dos factores relevantes nas interações digitais são os efeitos sonoros que ajudam ao universo que se quer transmitir sendo que é preciso ter em conta que este não se sobreponha a tudo o resto. Sons ligeiros e reactivos ajudam a integrar o utilizador com o layout. A opção de desligar o som é também uma das características fundamentais a ter em conta.

Para a produção da animação, a nível técnico, é preciso perceber a melhor forma de estruturar o ficheiro para as animações que ficaram previamente planeadas.  É sempre importante ter em mente que todo o processo de animação é desenvolvido em softwares de animação, tais como o After Effects, mas tudo termina com código. Por isto mesmo, um Motion Designer ao animar uma interface deverá também estar sempre em comunicação com os Designers e Developers para garantir o sucesso duma boa interação digital.


Partilhar:

    Fale connosco

    Interesses

      Subscrever Newsletter

      Interesses