Incorporar animação e movimento em seu processo de UX design é vital para ajudar seus usuários a atingirem seus objetivos. O movimento conta histórias, mostra como seu design (aplicativo, animação etc.) está organizado e o que ele pode fazer.
Ao adicionar uma nova profundidade à interação, o motion também altera o UI design, redefinindo a navegação e criando uma experiência mais natural.
Este guia examina os benefícios de adicionar movimento ao seu design de experiência do usuário e o processo de adição de conteúdo animado aos seus designs. Porém, primeiro, vamos saber o que é motion no UX Design!
Introdução
A animação se refere a gráficos, imagens ou outros elementos que estão em movimento. Já os motion graphics são limitados a designs gráficos em movimento ou animados. No entanto, não é incomum que os designers usem os dois termos ― design de movimento e animação ― alternadamente.
Em essência, o design de movimento pega o design gráfico que seria estático e dá a ele animação e movimento, muitas vezes sem uma narrativa específica. Por exemplo, em vez de criar um design estático, você converte o design do seu logotipo para integrar movimento.
Ou, em vez de ter um gráfico de barras estático, um profissional de UX design pode usar gráficos em movimento para que as barras se movam para cima e para baixo, para um toque visual extra.
Quais são os benefícios do Motion no UX design?
Um dos maiores benefícios do movimento no design de experiência do usuário (UX) é que ele ajuda a contar a história completa. O design de movimento cria emoções que os usuários entendem prontamente. Essas emoções são necessárias se você deseja impactar positivamente o comportamento do consumidor.
Para entender como tudo isso funciona, imagine um usuário olhando para um ícone de carregamento animado com um sorriso no rosto. Esse sorriso pode elevar o ânimo do consumidor. Pode ajudar a definir o humor do consumidor antes mesmo de a página ser carregada.
Em um estudo, descobriu-se que os sujeitos expostos a círculos e triângulos animados rapidamente compreendem a narrativa, e a história imaginada instantaneamente se torna sua base para determinar as “emoções” das formas na tela.
Como tudo isso se conecta à experiência do usuário é simples. As experiências do usuário são histórias. Os designers gráficos têm a responsabilidade de entregar essas histórias em aplicativos, sites, logotipos e assim por diante.
Os consumidores, então, interagem com essas histórias quando visitam seu site, aplicativo, perfil de mídia social ou qualquer outro recurso online para fazer uma compra ou ler seu conteúdo.
Contanto que suas histórias (motion design) se conectem com o público, você tem um engajamento garantido.
O storytelling, no entanto, não é o único benefício do design de movimento. Outras vantagens de incorporar movimento ao seu UX design incluem:
Tirar o tédio de uma tela de carregamento
Você provavelmente já ouviu falar que consumidores digitais não querem esperar muito para carregar um site ou aplicativo. Em sites, leva apenas dois segundos para os usuários começarem a considerar suas opções. Na verdade, se depois de quatro segundos a página não estiver totalmente carregada, você perderá mais da metade de seus visitantes em potencial.
Quando integrada ao design da tela de carregamento, a animação mantém os usuários entretidos e engajados enquanto aguardam o carregamento da próxima página. Isso reduz o abandono.
Dar pistas aos usuários
O design de movimento também pode ser usado para dar aos usuários dicas sobre como usar ou o que esperar de um aplicativo/recurso. Por exemplo, se você estiver criando um aplicativo em que as postagens deslizam à medida que desaparecem na tela, você pode usar o design de movimento para dar aos usuários um “alerta” sobre isso.
O Instagram, por exemplo, usa design de movimento para alertar os usuários que eles podem “deslizar para cima” (“swipe up”) no recurso de Stories, para visitar o site do criador.
Fornecer feedback visual em tempo real
O feedback é fundamental para conversas significativas. Ao fornecer feedback sempre que necessário, você ajuda o usuário a entender se está fazendo a coisa certa ou não.
O design de movimento pode ser usado para fornecer um feedback altamente envolvente. Alguns aplicativos, por exemplo, mostram um botão de polegar para cima “dançando”, geralmente em um fundo verde para indicar que você está fazendo a coisa certa; e um botão de polegar para baixo, geralmente em um fundo vermelho, para sinalizar uma etapa errada.
Branding
Finalmente, o design de movimento também pode desempenhar um papel no design da marca. A capacidade do conteúdo animado de evocar emoções nos usuários o torna uma ferramenta de branding eficaz.
Você pode, por exemplo, incorporar design de movimento ao design do seu logotipo ou branding para provocar alegria, entusiasmo, expectativa, simpatia ou até mesmo curiosidade, como os usuários do Product Hunt fizeram para a listagem de sua marca.
Com um pequeno guia, um novo design de logotipo pode se tornar mais nítido e dinâmico quando o movimento é adicionado a ele. Da mesma forma, o tema do logotipo da marca, quando incorporado em vídeos ou gifs, pode influenciar muito o impacto visual, como num tutorial em vídeo ou podcast.
As marcas que provocam com sucesso as emoções certas por meio do design de movimento induzem facilmente um senso de lealdade e fortalecem o apego do consumidor.
Como integrar o Motion à experiência do usuário (UX Design) – O processo
A introdução do movimento em seu UX design é um processo delicado que requer a compreensão adequada das necessidades do seu público e a subsequente criação dos elementos de movimento certos para atender a essas necessidades. Proceda da seguinte forma:
1. Entenda quando usar o design de movimento
Infelizmente, a decisão de usar ou não o design de movimento não é algo que você pode tomar sozinho. Em vez disso, você deve primeiro ir até seus usuários, estudá-los em suas atividades do dia a dia e observar seus comentários para tomar a decisão certa.
Isso não deve ser muito difícil se você estiver projetando um novo aplicativo, construindo um novo site ou criando novos elementos de design gráfico para sua campanha digital. Apenas preste atenção às áreas/etapas onde o usuário fornece feedback, como:
- Eu não sei onde me concentrar
- Não tenho ideia de como usar esta ferramenta
- Para onde eu vou daqui?
- Como posso saber se concluí a tarefa?
- Eu não entendo o que esta etapa exige de mim
Sempre que você recebe essas perguntas dos usuários, tem a oportunidade de usar o design de movimento para resolver desafios flagrantes.
2. Alinhe o design de movimento às necessidades do usuário
Alinhar o design de movimento às necessidades do usuário não apenas permite que você veja o valor real dos elementos de movimento, mas também o impede de contemplar um design excessivamente complexo e sem sentido.
Nesta etapa, comece revisitando as razões pelas quais o movimento é usado no design em primeiro lugar. Como já discutimos, o movimento traz quatro coisas principais para o seu design:
- Ele fornece um nível profundo de clareza
- Ele fornece feedback útil para seus usuários
- Ele envolve os usuários por meio de criações imaginativas
- Dá aos usuários dicas e pistas sobre o que vem a seguir
Outros benefícios, como estética, melhor comunicação, direcionamento do foco do usuário e reforço da hierarquia de elementos decorrem dos quatro usos acima.
A ideia aqui é mapear esses benefícios em relação ao feedback discutido na etapa 1 acima. Qualquer feedback pode ser abordado diretamente por um ou mais dos benefícios discutidos na etapa 2.
Assim, torna-se fácil identificar os elementos de design de movimento certos a serem usados para cada situação.
Por exemplo, se os usuários estão reclamando que “não sabem quando uma tarefa está concluída”, um elemento de design de movimento que “fornece feedback para os usuários” seria o ideal. Recomendamos explorar sites de portfólio como Dribble, Behance e CodePen para encontrar inspiração para o tipo certo de design de movimento. Assim que terminar, comunique as descobertas à sua equipe.
3. Design e storyboard
Nesta etapa, você já tem as ideias e a inspiração, agora precisa projetar. Veja como proceder:
Esboço: cada processo de design começa com um esboço, e o design de movimento não é diferente. Portanto, pegue um papel, um quadro branco ou seu aplicativo de desenho ― SketchBook Pro, Mischief e Photoshop são ótimas opções. Um monitor com caneta (stylus) ou tablet com caneta seria um bônus.
Storyboard: crie um storyboard das principais fases de seu design de movimento. Use anotações simples para visualizar o fluxo.
Compartilhe: permita que sua equipe dê uma olhada em seus esboços e storyboard e forneça qualquer conselho ou visão.
Decidir: com base nos comentários e percepções de sua equipe, decida quais elementos de design de movimento serão prototipados e testados pelo usuário.
Se tudo correr conforme o planejado, ao final desta etapa, você deverá ter um esboço aceitável de como será a aparência do seu elemento de movimento.
4. Protótipo
A próxima etapa é criar um protótipo do design. Você pode criar um protótipo codificado ou usar um dos muitos aplicativos de protótipo no mercado.
Recomendamos aplicativos de protótipo, pois reduzem o tempo e o esforço necessários.
Alguns dos melhores aplicativos de prototipagem que você pode usar para design de movimento incluem: Adobe Photoshop, Adobe After Effects, Adobe Edge Animate, Keynote, Axure 8 Principle e Flinto.
No entanto, se você escolher a prototipagem codificada, algumas das melhores estruturas de IU e bibliotecas para prototipagem de design de movimento UX incluem: CSS3 Animation, Motion UI, Transit, Velocity e GSAP.
5. Teste seu design
Então, agora você criou o protótipo para o seu design. Tudo o que resta é testar o design para descobrir se você capturou as necessidades dos usuários e se eles estão impressionados. O processo de teste pode ser realizado em quatro etapas:
Cronograma: identifique os membros do seu público para o teste e decida quando o teste será realizado.
Conduza o teste: conduza os participantes nas tarefas típicas que levariam ao uso dos elementos de movimento recém-criados e observe se os novos elementos ajudam ou prejudicam a experiência. Lembre-se de coletar feedback.
Analise o feedback: reserve um tempo para analisar o feedback para determinar se os usuários gostam dos novos elementos. O feedback deve ser analisado juntamente com os desafios identificados na etapa 1.
Decida: os novos elementos de movimento melhoram a experiência do usuário? Se sim, parabéns, você foi bem-sucedido. Caso contrário, você tem que voltar para a prancheta de desenho.
Conclusão
O processo acima não deve ser simples, seja você um designer experiente ou não. O que devemos enfatizar, porém, é a necessidade de comunicação, tanto com sua equipe de design quanto com o público.
Embora o motion acrescente muito ao UX design, você não quer acabar com criações que não abordam os principais pontos de dor dos seus usuários.
Este é um artigo traduzido, você pode acessar a versão original em inglês aqui.
Todos os créditos para o autor: Tarif Kahn
Last modified: 20/05/2021
