[MÚSICA] [MÚSICA] Olá pessoal, Nesse vídeo nós vamos falar um pouco sobre transições e microinterações. Transições são geralmente utilizados para troca de contexto entre telas, mas também podem ser utilizadas para troca de contexto de uma mesma tela quando, por exemplo, uma tela for muito longa. Já microinterações são pequenas interações com objetivos específicos. Geralmente elas são imperceptíveis do usuário, mas são importantes, pois tornam o seu sistema mais vivo e real e ajudam a trazer um pouco de vida ao design, que geralmente é estático. Uma outra importância de microinterações são ajudar a simplificar IOI fazer com que ajude no entendimento do que está ocorrendo na sua interface. Nesses dois exemplos vemos a diferença entre uma transição entre contextos de uma mesma tela. No lado esquerdo você pode ver que existe uma mudança abrupta de contexto. Então isso pode prejudicar a experiência do usuário. Já com simples animação de scroll da tela já ajuda a deixar a troca de contexto um pouco mais simples. Então uma dica importante é evite mudanças abruptas de contexto, isso pode prejudicar a experiência do seu usuário. Neste próximo exemplo vemos como usar microinterações para simplificar IOI. Então ao usuário fazer o scroll do aplicativo, tanto a barra superior quanto o menu inferior são escondidos para deixar o conteúdo maior e ajudar na interação do usuário e tirar possíveis distrações também de cima do conteúdo. Já nesse próximo exemplo, vemos que a barra de busca, ela só aparece quando o usuário realmente clica no ícone da lupa. Então isso ajuda a deixar a sua interface mais limpa e também usar a microinteração para que usuários só vejam o campo quando for necessário. Você também pode usar microinterações para deixar o seu site ou aplicativo mais divertido. Além de trazer clareza, você pode ajudar no engajamento e na retenção do seu aplicativo. Um próximo exemplo aqui é do MailChimp, que é um site de campanhas de e-mail, newsletters. Então existe ao criar toda a campanha, antes de disparar a campanha que é momento muito crítico, usa-se uma animação bem divertida para chamar atenção para esse momento crítico do sistema. Um próximo exemplo é a utilização de uma microinteração, animação, para chamar atenção em relação à segurança do aplicativo. Então ao usuário entrar no formulário e clicar no campo de senha, a coruja esconde os olhos passando a sensação de segurança. Uma primeira boa prática é ter objetivo claro, não importa se é para deixar seu sistema ou site mais divertido, ou para informar melhor o usuário do que está acontecendo na tela. É importante que todas as animações tenham objetivo bem claro. É uma boa dica aqui é você se colocar no lugar do usuário e ver se a sua animação, sua transição não está ficando chata ou não está confundindo, em vez de ajudar a entender o que está acontecendo. Primeiro exemplo vemos uma transição de uma tela com muitas animações ao mesmo tempo, o que prejudica o entendimento do usuário, que pode ficar confuso do que está acontecendo na tela. Já nesse próximo exemplo da mesma tela, vocês percebem que a transição entre as telas a gente utiliza animação de uma forma muito mais clara e não fica uma coisa muito chata para o usuário. Uma outra boa prática é suas microinternações ocorrerem a partir do ponto de onde elas foram disparadas. Então neste primeiro exemplo a esquerda, vocês podem perceber que ao clicar no menu esquerdo inferior a transição ela corre do sentido oposto, ocorre do lado superior direito. Isso pode acabar confundindo o usuário. Já uma boa prática seria ao clicar no menu esquerdo inferior a transição ocorrerá a partir desse ponto, então deixa a questão muito mais clara. Neste outro exemplo do sistema do Mac, ao minimizar ou maximizar uma tela, a ação também ocorre a partir de onde ela foi disparada, então deixando muito mais claro o que está acontecendo na tela. Uma outra dica, suas animações e transições devem parecer com interações do mundo real, então ela devem parecer naturais. Então ao se pensar interações com objetos reais, você deve prestar atenção em coisas como direção, atrito, aceleração, gravidade e tentar transpor isso para o seu site ou aplicativo. Neste próximo exemplo de item que ele expande para detalhe, a ideia é que a direção que ocorre a animação é de expansão desse item. Então existe uma forma correta de fazer isso para que passe essa impressão de que o item está crescendo. Então é muito legal. E uma última dica é cuidado com a duração. Então animações ou microinterações muito lentas podem causar um certo desconforto e até passar uma sensação de lentidão do seu sistema. Por outro lado, se as suas animações forem muito rápidas, isso também pode causar confusão para o usuário e ele não ter visto ou não ter entendido o que acabou de acontecer. Então desse próximo exemplo vocês podem ver, apesar de ser uma animação muito interessante, a duração dela é muito lenta. Então pode causar essa sensação de lentidão e desestimular o uso. Bom pessoal, é isso e espero que vocês tenham gostado. Tentamos passar por alguns itens e pontos importantes sobre transações e microinterações. Vamos deixar mais links nos sites como referência. E é isso. Valeu pessoal.