Usar Animações em Seu Site: Os Prós e os Contras
Usar ou não usar animações? Eis a questão para quem decide criar um site. Os defensores do uso da animação no web design vão dizer que ela dá uma sensação de movimento, pois gera fluidez e dinamismo na experiência de usuário. Além disso, a animação tem sido uma das principais tendências do web design nos últimos anos, o que significa que seus visitantes já esperam ver alguma animação nas suas páginas. Por outro lado, os que se opõem vão argumentar que a animação distrai e para muitos visitantes pode parecer pouco profissional.
E então, quem está certo neste debate? Bem, ambos estão certos. A verdade é que a animação pode ser um maravilhoso acréscimo ao aspecto geral do seu site, mas que precisa ser bem pensado de forma a se adequar a todos os seus objetivos. A integração descuidada de animações ao seu web design pode resultar em uma verdadeira monstruosidade, e ninguém quer ver isso! Para ajudar a ver o que é certo e errado, criamos este guia com os prós e os contras da animação no web design.
Conheça noções básicas de animação
Primeiro, lembre-se que a animação pode ter diversas formas. Elas podem ser sutis, como um ligeiro movimento de um botão, ou espetaculares como a animação total de um background. A animação pode ser configurada como reação interativa ao comportamento dos seus visitantes (como objetos que vão sendo revelados à medida que vai rolando) ou podem ser totalmente independentes das ações dos visitantes. Pode ser aplicada a pequenos elementos, como uma seta, ou aos grandes elementos como um background de vídeo que ocupa toda a tela. Compreender todo o espectro das capacidades da animação ajuda a saber usá-la de forma estratégica.
Aqui no Wix, quando nossos designers criam templates e sites, eles dividem as animações em três categorias diferentes:
Micro interações: são usadas como pequenas interações rápidas e claras para o usuário, como clicar em um botão, e podem ser alcançadas usando o efeito caixa dinâmica.
Transições e comportamento da página: para facilitar a navegação de um ponto para outro, e alternando de uma página para outra.
Decorativo e prazeroso: dá um toque atrativo e glamuroso ao seu layout como a rolagem parallax.
Moderação é uma força, não uma fraqueza
Assim como em tudo o que há de bom nessa vida (incluindo sorvete e assistir Breaking Bad), a moderação é o grande segredo quando se trata de usar animações. É vital que você evite explodir a tela com uma overdose de animação. Por um lado, você deve evitar ao máximo deixar seu site pesado e sobrecarregar seu desempenho. Além disso, você não vai querer distrair seus visitantes com tanta ação. Manter a leveza garante que seus visitantes estejam desfrutando de uma experiência de navegação tranquila, e seguindo o fluxo do seu site.
Uma única função
Uma outra excelente orientação para você manter uma boa relação com as animações é usá-las apenas quando você consegue justificar um propósito definido. Em outras palavras, as animações precisam desempenhar uma tarefa, por exemplo:
Mostrar aos visitantes quando rolar e onde clicar, orientando-os a realizarem o movimento que você deseja para o site.
Dar apoio à sua narrativa, revelando os itens gradualmente.
Visualizar o impacto do seu produto ou serviço.
Quebrar a rolagem estática do site com algum movimento.
Criar uma atmosfera bem particular para aqueles sites que são mais adequados para conteúdo com animação, por exemplo, uma loja virtual de roupa infantil.
Você consegue justificar o uso da animação para algum destes propósitos? Ótimo! Então você está pronto para isso! (Só não se esqueça do uso moderado).
O que deve ser animado (e o que não deve!)
Alguns elementos que são comuns à maioria dos sites funcionam muito bem com animações, enquanto outros deixam a desejar. Foque toda a sua energia para a animação do primeiro grupo:
Qualquer coisa que possa ser um gatilho para um comportamento (como botões de navegação, CTAs ou imagens com um link)
Elementos que indicam uma direção (setas, rolagem de background)
Barras de carregamento
Elementos cujo propósito é atrair atenção (ícone de novas mensagens, janelas, botão para completar um pedido).
Os casos onde você não deve usar animação são aqueles em que o efeito animado vai de alguma forma prejudicar a funcionalidade do elemento. Por exemplo, você não deve adicionar animação a parágrafos de texto, pois dificultam muito a leitura. Você também não deve adicionar animação aos campos onde o visitante deve inserir seu próprio conteúdo (como um formulário de contato ou campos de comentários) porque vai distraí-lo de completar essa tarefa.
Simplificar o conteúdo
Uma excelente estratégia para integrar animação e web design é usá-la como uma ferramenta para esclarecer e simplificar o conteúdo. Digamos que você quer explicar aos visitantes do seu site como funciona o serviço de sua empresa de empacotamento e mudanças. Você pode descrever todo o processo em alguns parágrafos, pode criar uma tabela com marcadores ou pode simplificar tudo usando alguns elementos visuais com animação nos passos chave do processo. Transmitir informação através de animação é chamado de “onboarding”. É uma técnica de design que normalmente combina texto simples com elementos visuais animados, criando um método envolvente e intuitivo para guiar seu público através do fluxo do seu produto. É, ao mesmo tempo, bonito e útil e esta é a combinação mágica para qualquer designer.
O público importa
É sempre importante estar atento e ao seu público-alvo, especialmente quando se trata de animação. Leve em conta suas preferências estéticas, os motivos que os levam a visitar seu site, além de sua experiência com a tecnologia.
Exagerando um pouco (só um pouco): Se seu público-alvo prefere esquemas de cores monocromáticas ou se seus visitantes estão interessados no seu site apenas pelo seu aconselhamento jurídico, ou ainda se você está desconfiado que muitos deles estão acessando seu site através de uma versão antiga do navegador, ou em um sistema operacional desatualizado - então você pode ter certeza de que animações não são a escolha certa no seu caso.
Pronto para fazer algo bem bonito? Crie um site com Wix!
