Motion em UX Design

Este artigo é uma tradução oficial autorizada pelo Autor. Artigo original: https://uxplanet.org/motion-in-ux-design-90f6da5c32fe

O Design Baseado em Movimento (Motion-based Design) no mundo do design é usado para descrever relações espaciais, funcionalidade e intenção, com beleza e fluidez. O Motion pode soar como um grande conceito, mas quando usado de forma eficaz, é sutil e natural. O movimento pensado para o design pode melhorar a experiência do usuário através dos elementos tradicionais do design.

Então, vamos falar sobre os fundamentos do Motion Design, entender o porque e quando usá-los na sua UI, e como isso pode te ajudar a melhorar a experiência com o usuário.

Design Baseado em Movimento (Motion-based Design)

Todos nós queremos contar uma ótima história interativa em telas minúsculas e o Motion nos dá o poder de fazê-la. Crédito da imagem: Dribbble

Porque o Motion é importante?

Quando os usuários interagem com seu produto, eles podem fazer as seguintes perguntas:

• “O que é mais importante aqui?”
• “Como eu sei o que devo fazer a seguir?”
• “Como sei que completei minha tarefa?”

Perguntas como essas podem revelar oportunidades de usar o Motion para aprimorar a experiência. O Motion otimiza a percepção da experiência do usuário e responde às perguntas:

• Ele chama a atenção do usuário e sugere o que acontecerá se um usuário concluir um clique / gesto.
• Ele ajuda você a orientar os usuários na interface e fornece um foco guiado entre as visualizações.
• Ele fornece um feedback visual.

Além disso, o design baseado em movimento traz outra coisa importante para a experiência do usuário: prazer - todos nós apreciamos o valor de produtos humanos, prazeroso, no lugar dos frios e racionais. Por isso os designers devem experimentar e encontrar soluções que pareçam mais naturais e evoquem uma conexão emocional.

Linguagem do Motion

O Motion nos está permitindo comunicar melhor a interação e facilitando o entendimento do usuário. Elementos de design baseados em Motion podem ser vistos em uma variedade de formas, incluindo transições, animações e até mesmo em texturas para imitar a profundidade 3D. A seguir, os lugares sugeridos para integrar o design de movimento no fluxo de trabalho do UX são:

Conduzindo a atenção dos usuários

Animações podem chamar a atenção do usuário para uma área específica ou ajudar a desviar a atenção dele - é tudo sobre como controlar as transições da hierarquia a cada momento no tempo. O bom design das animações torna a interface do usuário mais previsível e fácil de navegar - ela enfatiza os elementos certos, dependendo de qual é o objetivo e ajuda os olhos a verem de onde um novo objeto vem ou para onde um objeto oculto vai.

Mover um determinado elemento adiciona clareza à uma transição. Crédito da imagem: Dribbble

O Motion também fornece ao espectador uma “pista” sobre o que está prestes a acontecer - pode haver várias camadas de elementos trabalhando juntas para suportar essa ação.

Faça com que botões e painéis respondam às interações dos usuários de maneira agradável e perceptível. Crédito da imagem: Dribbble

Torne a UI espacialmente lógica

Mudanças de estado na interface do usuário geralmente envolvem cortes duros por padrão, o que pode dificultar sua execução. Na ciência cognitiva, isso é chamado de cegueira de mudança - quando uma mudança repentina no estímulo visual é introduzida e o usuário não percebe isso. Isso geralmente acontece quando uma página é recarregada, quando piscamos, quando nossos olhos saltam rapidamente de um ponto fixo para outro. Os usuários precisam entender de onde as coisas vêm e onde podem encontrá-las novamente, para que não pareçam difíceis - simplesmente porque as mudanças difíceis (ou repentinas) não existem no mundo real!

O design de movimento preenche a lacuna de compreensão definindo as relações espaciais entre as telas e os elementos. Ajuda as pessoas a se orientarem dentro da interface e a estabelecer relações visuais. No exemplo abaixo, durante a transição, o usuário é guiado para a próxima visualização e a superfície se transforma para se comunicar hierarquicamente:

Crie camadas de UI consistentes que permitem transições com um significado espacial. As transições criadas corretamente podem orientar seu usuário rapidamente. Crédito da imagem: Dribbble

Confirmando Ações

O movimento reforça as ações que um usuário está realizando. Para cada botão clicado e transição de tela, há uma oportunidade de usar um Motion Design. A resposta visual pode aumentar o envolvimento e encantar o usuário. Por exemplo, vamos ver como a animação pode ajudar ao digitar uma senha errada no iOS:

Apple iOS usa uma animação de tremido horizontal ao negar uma senha. Quando os usuários percebem a animação, eles imediatamente entendem a ação.

À primeira vista, tremer a animação na entrada de senha incorreta parece levar mais tempo do que exibir instantaneamente um pequeno emblema de erro. No entanto, na realidade, um usuário pode gastar alguns segundos tentando localizar a mensagem de erro para descobrir o que deu errado, em vez de perceber a animação e entender o problema instantaneamente. Essa animação é tão reconhecível que se tornou o principal feedback para confirmar a ação.

É prazeroso

O Motion pode tornar a experiência do usuário verdadeiramente prazerosa e memorável. Como designer, você deve trazer um pouco de si mesmo para o design e encantar seu Motion-Based Design com um apelo único que as pessoas vão adorar e lembrar. Ao injetar movimentos sutis no design, você pode fazer com que os usuários sintam que estão interagindo com algo que tem personalidade. Uma simples atenção aos detalhes geralmente é o que sinaliza às pessoas que estamos pensando sobre elas.

Até mesmo um pequeno elemento da interface do usuário, como ícones animados em seu design, pode trazer prazer. Crédito da imagem: Dribbble

Detalhes agradáveis ajudam a adicionar um elemento tátil às interações porque fazem com que os usuários se esqueçam de que estão tocando apenas um pedaço de vidro e, ao invés disso, sentem que estão interagindo com elementos reais na tela. É sempre bom sentir que as coisas estão reagindo ao que você está fazendo.

O nosso puxar engraçado para atualizar a animação de movimento. Image credit: Dribbble

Mas não se esqueça de que o principal desafio do movimento é fazer algo que não distraia os usuários do que eles estão tentando fazer.

Conclusão

O Motion é o próximo nível de tecnologia. É uma maneira natural de interagir com as coisas e é absolutamente essencial para o design do futuro. Precisamos nos despedir de UI estáticas e criar interfaces muito mais humanas e vivas. Criar uma linguagem de movimento para seu aplicativo reforçará sua marca e complementará seu design.

Faça parte do nosso Grupo do Facebook sobre UX Motion Design:https://www.facebook.com/groups/uxmotiondesign/