Motion UI: e se um website fosse uma pessoa?
Resumo
Quantos de nós nos aborrecemos ao falarmos com alguém pouco expressivo e muito estático? Isso para mim não resulta. Preciso de sentir uma certa emoção e movimento para que não me façam perder a atenção, e mais importante, para que eu sinta que o que estou a ouvir é relevante o suficiente para me fazer “perder o meu tempo”.
Neste artigo pretende-se perceber a importância que o movimento tem nas páginas web e como pode melhorar a experiência do utilizador. No final, aborda-se ainda uma ferramenta para este efeito e algumas das suas features.
Introdução
Acho que falo por todos quando digo que as nossas vidas cada vez mais são mediadas pela internet e pelas tecnologias que estas disponibilizam. Estas tornaram-se os intermediários das nossas vidas, quase que como um segundo remetente nas mensagens que recebemos. Portanto, o que posso eu querer numa plataforma? O mesmo que mencionei no início, algo dinâmico e cativante. Quero ter a possibilidade de interação, quero sentir que existe uma nova dimensão.
A importância do movimento
Motion UI
“A arte de alavancar o movimento e a animação dentro de uma interface para ajudar a guiar a experiência do utilizador e comunicar uma sequência, próxima etapa, transição ou ação para um produto digital.” (Bernie Johnson, 2021)
O movimento melhora substancialmente a nossa experiência com o mundo, e aqui, o nosso mundo é a web, e é nessa vertente que o artigo se vai direcionar. Mas também não queremos exagerar, já que isso compromete não só a atenção que vamos dar à interface, mas também o tempo de carregamento da página web.
Vantagens
A principal vantagem do uso do movimento nas páginas web é fazer os utilizadores entenderem — de forma mais rápida e intuitiva — a narrativa que queremos passar. Contudo, existem outras vantagens como:
- Aumentar a dinâmica das páginas
Um exemplo muito prático disto pode ser o caso das páginas de loading, que todos sabemos que nos podem tirar do sério. Por padrão, os utilizadores esperam uma reação rápida, sendo que os primeiros 10 segundos são cruciais para os utilizadores decidirem se querem continuar a navegar pelo nosso website ou não. Se por acaso cerca de metade desse tempo for ocupado com a página de loading, o mais provável é o potencial alcance descer para metade. Se o movimento for integrado nestas páginas (e.g. logos a carregar, círculo a rodar…), ajuda a quebrar a monotonia e deixar os utilizadores com mais predisposição para esperar.
- Fornecer dicas aos utilizadores
Sabem quando estamos a ver as stories dos nossos influencers favoritos e eles fazem publicidade a algum produto ou marca? Imaginem como seria acabarem os vídeos com vontade de saber mais e o Instagram não nos dizer que tínhamos de fazer o swipe up. Estas dicas permitem-nos não só ajudar os utilizadores como também fazê-lo através de movimento e de uma maneira apelativa.
- Dar feedback atual da ação tomada
Não receber feedback é quase como falar para a parede, não sabemos se estamos a fazer as coisas certas ou não. Dá-lo é importante, já que este tipo de informação é fundamental para uma experiência significativa. Talvez por isso seja tão comum recebermos feedback nas redes sociais que fazem parte do nosso quotidiano. No Twitter, por exemplo, quando adicionamos um tweet aos favoritos, ou até mesmo no Facebook, com o thumbs up num like.
Motion UI atualmente
Cerca de 40% das nossas fibras nervosas conectadas ao cérebro estão ligadas à retina, pelo que somos captados pelo movimento e é a isto que respondemos mais rapidamente. A luta pela nossa atenção está cada vez mais difícil. O uso de movimento e animações para captar o utilizador e ao mesmo tempo cortar ruído do que vemos nunca foi tão crítico. O problema é que quando usado a mais, pode ter o efeito completamente oposto. Perdemos a nossa atenção daquilo que realmente interessava mostrar. As animações devem estar alinhadas com um objetivo comunicacional e com a personalidade subjacente do produto, devem guiar e comunicar com o utilizador. Há que alcançar um meio termo, porque, quando usadas com moderação, podem melhorar substancialmente a experiências de utilizador e tornar uma interação num momento memorável e de profundo envolvimento.
Hoje em dia, a maior parte do movimento de interfaces web é controlada pelo navegador, aproveitando tecnologias como HTML, CSS e JavaScript. Deste modo, não existe a necessidade de plug-ins ou vídeos para exibir movimento e animação. Existem muitas ferramentas para criar movimento e animações nas nossas interfaces web, mas hoje decidi falar apenas de uma delas, para que possam ficar a conhecê-la um pouco melhor.
O que é Framer Motion?
Framer Motion é uma biblioteca de movimento (óbvio) open source que usa React para criar animações. Mas atenção, para usar esta biblioteca precisamos de usar a versão 16.8, ou superior, de React.
Qualquer biblioteca que nos permita criar movimento e animações já parece ótima por si só, mas a Framer Motion tem alguns detalhes que me fizeram olhar para ela com outros olhos. Não admira estar no top 7 de bibliotecas de React sobre Motion UI de 2022!
A Framer Motion disponibiliza vários tipos de animação que podemos usar facilmente para criar animações complexas, e para além disso:
- Tem suporte para renderização do lado do servidor. Pode ser usado com estruturas baseadas em React, como Next.js, que oferece suporte à renderização do lado do servidor.
- As cores são simples de ajustar e manipular;
- A documentação é simples;
- Tem suporte para TypeScript;
- Tem auxiliares para animações complexas baseadas em física;
- A Motion API gera animações automaticamente, os utilizadores só precisam de definir as configurações corretas;
- Possui uma API declarativa muito simples que facilita a criação e orquestração de animações complexas com uma quantidade mínima de código.
Só vantagens… Mas afinal, que features pode oferecer esta ferramenta?
Não posso abordar todas (aqui entre nós, não me posso exceder muito mais), mas falarei daquelas que considero serem as principais e mais básicas, porque afinal de contas, estamos aqui para aprender, não queremos começar logo a não entender o que se passa.
Os componentes de movimento são um dos elementos principais no Framer Motion, pelo que podemos:
- Animar propriedades
É provavelmente a feature mais básica, onde o componente é animado de maneira diferente apenas com a variação do valor inserido.
Se quiseres testar, abre a Sandbox e altera os valores a teu gosto!
- Variar propriedades
Estas variantes são uma forma de orquestrar animações mais complexas. Com esta técnica, todos os componentes podem ser animados em sincronia pela alternância de um único suporte de animação.
- Gestos
Aqui, a animação pode fornecer gestos diferentes com ações diferentes, através das propriedades whileHover e whileTap, que definem para que estados animar enquanto um gesto está ativo.
- Tocar, arrastar e largar
O comportamento de arrastar é totalmente configurável com bloqueio de eixo, restrições elásticas de arrastar e transições de finalização de gestos.
- Scroll
Através da propriedade useViewportScroll, o Frame Motion retorna quatro MotionValues que são atualizados quando a viewport avança para obter efeitos como paralaxe ou indicadores de progresso de rolagem.
- Criar um caminho
Os componentes motion.path expõem três poderosas propriedades de caminho SVG: pathLength, pathSpacing e pathOffset, onde todos eles são definidos com um valor entre 0 e 1.
Conclusão
Depois disto até eu quero ir a correr para o VSCode e começar a testar as coisinhas boas que a Framer Motion me tem para oferecer.
Como percebemos, o movimento e as animações criam páginas visualmente atraentes e, acima de tudo, funcionais. Conseguimos agregar valor às experiências de utilizador que queremos dar e tornamos o nosso produto web mais intuitivo, amigável e vivo. Podemos ver a motion UI quase como um reflexo da nossa personalidade, tornar este intermediário o mais parecido connosco possível, que é o que faz os utilizadores apaixonarem-se por ele. Sem dúvida alguma que daqui para a frente tentarei trazer motion UI para os meus projetos.
Se quiserem saber mais sobre a ferramenta que vos trouxe hoje — pelo menos gosto de acreditar que sim — passem pela página oficial da Framer Motion.
Referências
What is motion design and its role in website development?
How to Integrate Motion into UX Design to Elevate Your Brand Experience
Rebooting the Web Experience With Motion UI
Everything you need to know about Loading Animations
Top 7 React Animation Libraries in 2022
