O Poder Transformativo do Motion
Porque o Motion é uma parte fundamental do Designer Toolkit?
Este artigo é uma tradução oficial autorizada pelo Autor. Artigo original: http://paulvanoijen.com/writing/motion.html
O Motion é um meio de contarmos histórias. Ele constrói uma narrativa que providencia contexto ao usuário. Ao conectarmos visualmente telas e elementos, fornecemos um guia estruturado. Ao estabelecermos uma relação espacial entre elementos, isto nos ajuda a entender a organização de um aplicativo.
Através do uso fluido, dinâmico e proposital, o Motion pode melhorar a experiência do usuário de várias maneiras diferentes: pode ser usado para transmitir mudanças de status, guiar o usuário para onde queremos e precisamos que ele vá, influenciar o comportamento e distraí-lo enquanto algo acontece em background. O Motion reduz a espera de um loading, por exemplo, tornando as relações espaciais entre os elementos mais claras e facilitando a compreensão de como os elementos estão interligados.
Uma aplicação significativa e bem pensada de uma animação pode transformar uma interface e proporcionar uma experiência melhor e amigável. Ao entender e alavancar os pontos fortes do Motion, essa experiência pode ser drasticamente aprimorada e prazerosa.
Motion é transformativo
A imagem acima pode transmitir uma mensagem de “Motion is love” (Motion é amor), lembrando as populares camisetas “I ❤️ New York”. Talvez seja uma expressão do meu amor pelo motion design — que, dado o meu entusiasmo pelo tema, poderia muito bem ser.
Mas o que acontece quando animamos o emoji?
Ao animar o emoji de coração na imagem, ele é transformado. Em termos técnicos, tudo o que aconteceu é que o ícone é escalonado para cima e para baixo em intervalos definidos. Mas a animação resultante atribui um significado diferente à imagem. Instantaneamente, a idéia de um coração pulsante vêm à nossa mente. Uma imagem de um coração batendo, uma imagem da vida e movimento. Isto descreve uma das maneiras mais poderosas pelas quais o movimento melhora a experiência do usuário:
Motion traz vida ao ambiente digital
Assim como a cinematografia dá vida às imagens fixas, a força central do Motion é a maneira pela qual ele transforma os produtos digitais. Ele dá vida ao que é de outra forma, um ambiente estático e sem vida. Produtos digitais como smartphones e laptops são “mídias frias”. Eles não possuem inerentemente qualquer forma de vida. Através do Motion, podemos transformar esse “meio frio” tirando-o desse estado sem vida.
Um exemplo disso é a animação do Assistente Google. Enquanto aguardam informações, os icônicos quatro pontos coloridos — uma indicação de como as cores da marca do Google são bem estabelecidas — flutuam suavemente para cima e para baixo em um padrão ondulado.
Embora o Google pudesse exibir apenas um ícone de microfone e uma sequência de texto instruindo você a falar, eles optaram por essa animação sutil. A animação é o que traz o assistente para a vida. Está calmamente, mas ativamente esperando pelo seu comando. Não há pressa aqui, conforme indicado pelo padrão suave do movimento.
Motion é informativo
Os produtos digitais costumam ser coisas complexas e complicadas. A qualquer momento, pode haver uma dúzia de coisas acontecendo em background, fora da vista do usuário. Embora possamos tentar o máximo para executar processos em segundo plano o mais rápido possível, haverá momentos em que o usuário terá que aguardar uma resposta.
Antes que o Motion se tornasse uma parte mais integral do ambiente digital, os usuários simplesmente olhavam para a tela, esperando por algo, qualquer coisa que acontecesse. “Meu “Eu” mais jovem, estaria olhando para os LEDs piscando no gabinete do meu computador, assumindo que enquanto ele estivesse piscando, ele ainda estaria processando e eu deveria apenas esperar pacientemente que as informações fossem carregadas.
Com a animação, no entanto, podemos informar o usuário sobre esses processos. Até agora, a maioria de nós estamos familiarizados com animações de carregamento (loading). Eles estão enraizados em nossas mentes por causa de seu uso abundante em uma grande variedade de websites e aplicativos.
Loaders, sejam eles círculos, cubos ou triângulos e se eles realmente giram em círculos ou não, são todos indicativos do mesmo conceito. Algo está acontecendo, em processamento. Em algum lugar no fundo, os dados estão sendo processados e os resultados estão sendo buscados.
Embora a ideia principal da animação seja indicar que algo está acontecendo em segundo plano, ela também tem um efeito secundário. Por associação, o usuário agora sabe que quando essa animação terminar, as coisas terão mudado. Dessa forma, o usuário fica ciente de uma alteração iminente e está preparado para esse evento. Eles sabem estar à procura de novas informações.
Neste exemplo, os quatro pontos do assistente Google mudam de forma para indicar uma alteração de estado. Essa mudança na forma informa ao usuário que o assistente não está apenas ouvindo um comando, mas agora está ouvindo sua voz ativamente e interpretando o que você está dizendo.
“O Motion deve, acima de tudo, ajudar a orientar os usuários, fornecendo-lhes as informações certas no momento certo.”
Tanto os loaders quanto as alterações de formas do assistente fornecem ao usuário as informações certas, na quantidade certa e no momento certo. Não há sobrecarga cognitiva nem dissonância. O usuário é informado sobre alterações e processos que estão em andamento, sem entrar em detalhes.
Motion fornece orientação ao usuário
Aplicações consistem regularmente em camadas sobre camadas de informação que são de alguma forma conectadas umas às outras. Crescemos acostumados com movimentos e cortes duros quando navegamos em websites, que piscam em branco ao passar de uma página para outra por exemplo. Nos smartphones, esse breve período em que não há nada na tela desapareceu, em vez disso, passamos instantaneamente de uma seção para outra.
O problema em ambos os casos é que é difícil discernir qualquer relação tangível entre as diferentes partes do site ou as diferentes telas do aplicativo. Claro, sabemos principalmente como chegamos de um lugar para outro porque somos os únicos que clicaram ou tocaram em nosso caminho até lá.
Mas como essas telas estão conectadas? Qual é a relação espacial entre os dois?
Ao animar a transição entre diferentes elementos, podemos fornecer clareza. Torna-se mais claro como seções diferentes são relacionadas umas com as outras e isso nos permite entender a estrutura e a hierarquia da aplicação utilizada.
No exemplo acima, dois elementos separados são conectados através do uso de animação. O botão de reprodução (play) simples e o painel de controle mais complexo compartilham a mesma funcionalidade: eles controlam e influenciam a reprodução de vídeo ou áudio.
A animação reforça este link e constrói unindo-os visualmente. Ao mostrar como o botão de play cresce no painel de controle ao ser clicado pelo usuário, fica ainda mais claro que os dois estão interconectados.
Essa inter-relação é ainda mais aparente na animação do ícone do menu — ou menu de hambúrguer — e na seta para trás. Ao transformar a seta para trás no ícone do menu, isso significa que os dois elementos são mutuamente exclusivos - eles não podem existir ao mesmo tempo. Para navegar de volta para o painel anterior, a seta para trás deve ser pressionada.
A transformação de um ícone para outro em um curto espaço de tempo, faz com que se torne mais tangível a relação espacial entre os dois elementos. Torna-se mais fácil entender a conexão entre os elementos e, por sua vez, o lugar deles na estrutura da aplicação.
Animação com um propósito
Acima de tudo, a animação deve ser significativa e proposital. Nós não devemos animar pelo simples fato de animar. O movimento deve fornecer orientação tornando a experiência mais confiável, consistente e compreensível. Deve ser aplicado deliberadamente e com cuidado. Obter esses detalhes corretamente melhorará em muito a experiência do usuário.
“Os detalhes não são os detalhes; eles fazem o produto ”.
- Charles Eames
