Animação da Web na Era Pós-Flash

Nesse ambiente altamente competitivo, as empresas estão procurando freneticamente maneiras de capturar e reter a atenção das pessoas. À medida que avançamos em nossas vidas diárias, o fluxo interminável de estimulação visual que jorra de anúncios animados na rua, vídeos em nossos celulares, para não mencionar nossos feeds de mídia social, cria uma sensação de movimento constante que está disputando nossa atenção.

A reação de fração de segundo ao movimento em nosso ambiente foi desenvolvida a partir da necessidade de sobreviver e desencadeada por estímulos ambientais percebidos como potencialmente ameaçadores ou prejudiciais; as pessoas prestam atenção extra às coisas que se movem. À medida que captamos algo se movendo rapidamente com o canto do olho, o cérebro nos alerta em uma fração de segundo porque nosso cérebro subconsciente já reagiu ao perigo antes que nossa mente consciente tenha tempo de processar a informação.

Os anunciantes sabem disso, e é por isso que temos anúncios de rua animados em pontos de ônibus e plataformas de metrô, anúncios em vídeo aparecendo em fluxos de mídia social e outdoors eletrônicos com vídeo full-motion. A técnica é um efeito de golpe duplo projetado para entregar mensagens de marketing. Primeiro, capturando nossa atenção e, segundo, usando vídeo e animação para transmitir a mensagem.

Se uma imagem estática vale mais que mil palavras, quanto vale uma animação?

É aí que entra a animação na web. Os web designers esperam capturar e prender nossa atenção, e talvez adicionar um inesperado choque de prazer. A animação da Web pode ser usada para visualizar várias etapas em um processo ou ideia complexa, para ilustrar uma mensagem de marketing simples ou para mover coisas em uma página da Web de maneira natural e fluida à medida que as pessoas rolam - novamente, para chamar a atenção para algo.

Como a animação na web começou, a ascensão dos GIFs

Durante os primeiros dias da World Wide Web, as coisas eram bastante estáticas e chatas. As páginas da Web eram principalmente baseadas em design gráfico e layouts do mundo da impressão. No entanto, alguns designers fizeram um esforço conjunto – apesar dos desafios técnicos e de largura de banda – para incluir as primeiras formas de animação da web para torná-las mais dinâmicas e atraentes. Uma das primeiras adições de uma animação GIF a um site foi em Batman Forever, de Jeffrey Zeldman, em 1995. Os visitantes foram recebidos pelo vôo de Batman em direção a eles, animado como uma sequência de imagens.

O site promocional do Batman Forever foi um dos sites mais populares da época. Ele inspirou outros web designers e desenvolvedores a incorporar a animação da web GIF como um elemento peculiar e atraente em seus sites.

Avanço rápido de 20 anos e GIFs animados agora estão em toda parte. Eles estão no Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram e Facebook. Os GIFs são adequados para animações de loop curto, sequências de imagens e até loops de vídeo curtos. Uma falha lamentável, porém, é que o formato de arquivo GIF não tem transparência variável e não suporta um canal alfa; portanto, todos os pixels são totalmente opacos ou totalmente transparentes.

As animações GIF foram o início de um renascimento no web design, mas não eram ideais. Especialmente nos primórdios do dial-up e das velocidades lentas da Internet, os GIFs consumiam largura de banda. O resultado foi uma sequência pixelizada de baixa resolução. A desvantagem para os designers terem que compactar GIFs no menor tamanho possível era uma paleta limitada de 8 bits, o que resultava em muito pontilhamento. Isso mudou com a internet de alta velocidade se tornando mais comum no século 21 e, como consequência, a animação da web ficou mais bonita com milhões de cores e mais suave com taxas de quadros mais altas.

O alvorecer da animação da Web em Flash

O grande boom da animação na web veio com a introdução do Flash em 1996, quando a Macromedia anunciou seu plug-in da web e a ferramenta de animação baseada em quadros: Macromedia Flash (depois de adquirir o FutureSplash Animator, um programa de animação vetorial). O Flash desempenhou um papel de liderança ao trazer novos recursos para a web. De áudio e animação a interatividade e vídeo, o Flash ajudou a impulsionar a internet.

A oportunidade de construir animações web simples, enxutas e baseadas em vetores em sites inteiros que incluíam interações, criou o que poderia ser chamado de período “barroco” do web design com (demasiados) elementos animados lotando a paisagem. No entanto, o Flash ofereceu um vislumbre das possibilidades do web design dinâmico, liberando os designers para experimentar e desencadeando um período de rápida evolução do web design.

As animações em Flash são leves e relativamente fáceis de fazer. Apenas alguns kilobytes de tamanho, eles são distribuídos em formato de arquivo SWF e um arquivo usando som com gráficos vetoriais nítidos. A criação de animações da web tornou-se um processo simplificado que não acrescentou muito ao tempo de carregamento da página da web. Mas, apesar de tudo isso, uma desvantagem significativa permaneceu - um plug-in de navegador era necessário para que ele fosse executado.

Além disso, a interação sofisticada no Flash foi habilitada pelo ActionScript (AS), uma linguagem de programação orientada a objetos semelhante ao JavaScript. O ActionScript foi inicialmente projetado para controlar animações vetoriais 2D simples, mas posteriormente evoluiu para uma ferramenta sofisticada.

Infelizmente, a animação em Flash não se destinava a ser responsiva, não funcionava bem em todos os dispositivos e acabou sendo descartada de todos os dispositivos móveis populares. Embora o tamanho do arquivo fosse relativamente pequeno, o Flash não estava bem otimizado e acabou consumindo CPU, o que também era um problema em celulares. O fim da era do Flash veio depois que Steve Jobs decidiu não oferecer suporte ao Flash em dispositivos móveis da Apple.

O Flash foi criado durante a era do PC — para PCs e mouses. Mas a era móvel é sobre dispositivos de baixo consumo de energia, interfaces de toque e padrões abertos da Web – todas as áreas em que o Flash fica aquém.

Steve Jobs

Animação da Web hoje

Hoje, como o Flash está obsoleto, temos diferentes necessidades de animação na web. As ferramentas devem ser flexíveis e leves. Os web designers devem criar conteúdo responsivo e adaptável para diferentes dispositivos (desktop, tablet e celular), levando em consideração várias dimensões de tela, navegadores, proporções, densidades de pixels e muito mais. Nossas obras-primas de animação da web precisam funcionar em um celular de 5 polegadas e 720px até um tablet QXGA de 9,7 polegadas e uma tela Retina 6K de 32 polegadas.

A tecnologia amadureceu a um ponto em que mesmo dispositivos móveis com pouca potência têm largura de banda e poder de processamento para lidar com animações da Web muito exigentes e conteúdo de vídeo de alta resolução. Isso não significa que os sites devem estar super “ocupados”. Como sempre, trata-se de encontrar o equilíbrio certo entre a animação, a interação dinâmica e os elementos estáticos. O fato de podermos implementar muitas animações da web sofisticadas hoje não significa que deveríamos.

Web designers/animadores também devem considerar o suporte multiplataforma. Dez anos atrás, os designers não precisavam garantir que suas criações ficariam bem em uma variedade tão ampla de dispositivos. Diferentes proporções, orientações de retrato e paisagem, bem como várias densidades de pixels e distâncias de visualização, devem ser levadas em consideração. Esse enigma apresenta aos web designers um conjunto de novos desafios e armadilhas em potencial. O teste do usuário consome um tempo precioso, mais coisas podem dar errado em várias plataformas e as animações da Web precisam ser mais detalhadas do que nunca.

HTML5, CSS3, JavaScript e SVG (gráficos escaláveis) parecem ser as melhores soluções para animação na web. O uso dessas modernas tecnologias e linguagens da Web ajudará a resolver a maioria, mas não todos, os problemas acima. Mas é sempre uma boa ideia andar com cuidado, especialmente quando em território desconhecido, e QA e testes extensivos são obrigatórios.

Por que usar animação na web?

A animação da Web pode envolver e prender a atenção das pessoas por mais tempo do que uma página da Web estática e comunicar uma ideia ou conceito de forma mais clara e eficaz. Excelente animação na web transmite uma história por trás de cada movimento. Trata-se de dar vida a uma animação com significado e “alma” (lat. anima).

A animação da Web deve ser suave, significativa e apoiar a jornada do visitante. O web designer/animador precisa estar ciente de como a animação se encaixa na experiência do usuário, tentar prever os fluxos prováveis ​​do usuário e apoiá-la de maneira significativa.

Os web designers não devem olhar para a animação da web de uma perspectiva puramente técnica; eles precisam olhar para isso da perspectiva do usuário.

Uma das coisas essenciais sobre a animação é o tempo. O timing adequado dá significado físico e emocional a uma animação. A experiência deve ser contínua e lógica. Se a animação não for fluida (tem um problema de timing), as pessoas podem percebê-la como um bug e perder toda a motivação para explorar mais o site.

O animador precisa usar o tempo apropriado para fornecer o efeito pretendido. Quantos quadros-chave devem ser usados ​​na animação? Que tipo de mudança dinâmica na animação se deve à interação do visitante e com que rapidez a resposta vem após a interação? A animação é caprichosa, séria, divertida?

Do ponto de vista lógico, podemos dividir a animação da web em dois tipos básicos:

• Uma animação da Web estática e não interativa, por exemplo, uma animação GIF.
• Uma animação da web dinâmica com engajamento e interatividade do usuário que muda de acordo com a entrada do usuário.

O melhor exemplo de animação dinâmica é um jogo, onde os usuários manipulam o conteúdo na tela. Outro exemplo simples seria alterar a posição de certos elementos à medida que um visitante do site percorre um site de rolagem parallax. A animação não é passiva, varia de acordo com as ações do usuário.

A animação dinâmica da Web é frequentemente usada para apresentar infográficos animados em um site, para que as pessoas prestem mais atenção a áreas específicas enquanto rolam a página - é uma maneira poderosa de destacar informações relevantes.

Os prós e contras da animação na web

Aqui estão alguns prós e contras das técnicas de animação da web, incluindo soluções legadas que não estão mais em uso.

E quanto aos prós e contras da animação na web em geral? A animação da web bem executada ainda pode parecer fora de lugar, por isso é sempre uma boa ideia fazer algumas perguntas cruciais (assim como clientes de teste e outros membros da equipe) antes de prosseguir para integrar a animação ao design de um site.

Primeiro, precisamos verificar como a animação afetará a experiência do usuário. Vai melhorar o UX do site? Os designers devem:

• Examine o design do site existente (se disponível)
• Verifique o público-alvo e as plataformas de hardware que eles usam
• Verifique os tempos de carregamento do site e a carga da CPU
• Explore outras alternativas
• Fique de olho na usabilidade

Não é uma boa ideia usar animação da web em um site para simplesmente seguir tendências.

A decisão de usar animação na web deve ser tratada como qualquer outra decisão de design; web designers devem pesar os prós e contras e certificar-se de que a experiência do usuário não seja comprometida. Eles também devem trabalhar com os desenvolvedores para verificar os requisitos de código e garantir que não fiquem presos a códigos ineficientes que possam ter que ser ajustados no futuro.

A tecnologia moderna de animação da web amadureceu significativamente nos últimos 20 anos – o desempenho, a largura de banda disponível e a qualidade de renderização aumentaram. No entanto, os designers devem ter cuidado e só adicionar animação a um site se isso melhorar significativamente a experiência do usuário.

Leia mais no Blog Toptal Design:

• Como criar animações de carregamento personalizadas para diminuir as taxas de rejeição
• Criando ilustrações alucinantes com Sketch e Looper em pouco tempo
• Um guia passo a passo para animação de interface do usuário com princípio e esboço
• Inspirações de animação de logotipo para tornar sua marca mais relacionável
• Um guia passo a passo para criar vídeos explicativos de produtos animados