A eterna busca pela fluidez
Em um mundo onde os vídeos nos oferecem 120fps, com telas que chegam a mais de 240Hz, estamos mais do que nunca à procura de fluidez. E isso em todas as áreas, então a web vai para lá. Um site fluido tanto no carregamento quanto na navegação em si será necessariamente muito mais agradável.
Então, que alegria quando os recursos CSS3 chegaram! Transições entre estados, animações, etc. Mas gananciosos que somos, queríamos ir mais longe com o webGL e outras técnicas misteriosas para fazer as coisas acontecerem. Fantástico, não estamos na web para visualizar pdfs estáticos. Tão perfeito, aqui estamos equipados para fazer rebolando todas as divs de nossas páginas web.
Todos experimentam aos poucos, pegam novos códigos, se apropriam dos princípios das animações mais avançadas. É lindo. Tal como acontece com muitas coisas, você tem que experimentar em excesso para perceber o que parece equilibrado. E este ainda é o caso hoje. É indiscutível (ou abrir o debate sobre nossa Twitter) essa animação traz muito para a experiência do usuário.
A animação guia, informa, mantém as pessoas em suspense, reforça certos elementos e faz tudo isso sem brilho excessivo ou outras grandes setas vermelhas.
sublimado espera...
Existem várias maneiras de esperar, dependendo do contexto, mas com um loader (grau 0) ou uma barra de progresso, um redimensionamento do contêiner para exibir todo o conteúdo, um carregamento e, portanto, exibição progressiva do conteúdo... conseguir: acompanhar ou entreter o usuário enquanto ele espera, ou dar-lhe informações sobre sua espera.
Animar um stepper, fazer um efeito de foco que se move, slider automático, são algumas soluções que podem guiar o usuário em sua jornada. Ou pré-mastigando o trabalho para ele, ou acompanhando-o.
Às vezes, também é usado para ganhar credibilidade: alguns comparadores fingem um carregamento para exibir os resultados para, assim, acreditar na complexidade de sua tarefa.
Consumir com moderação?
Também temos o hover, que é adicionado às animações. Por mais que seja importante entender sobre quais botões você está passando o mouse, não há necessidade de ver a animação de retorno, que meio que força seu olhar a permanecer em um botão que você já deixou.
Os efeitos de aparência de modais, páginas, cartões, etc., muitas vezes são bons exemplos de animações que não trazem nada, exceto um atraso antes de acessar o conteúdo.
O olho humano (e o cérebro) é forte, mas não será capaz de se concentrar se houver 7 movimentos simultâneos na página, ou se considerar que certas animações são inesperadas (no sentido de anomalia para este plano -este). Se o olho se move para todos os lugares, o usuário não encontra suas informações rapidamente e rapidamente volta para os concorrentes (não há mais pós-trabalho pago pela sua startup).
encontre o equilíbrio, dá sentido
Por outro lado, acho que também devemos aceitar certas animações que podem parecer gratuitas.
#1 Aqueles que servem como um “efeito Uau” (não panquecas)
Mas dizem respeito a certos tipos de sites, que precisam jogar com emoção para cativar o usuário (principalmente sites de eventos, portfólio). Se o seu banco começar a dar-lhe uma casa com animações de movimento do mouse em 3D, você pode ficar com medo.
#2 Aqueles que adicionam uma dimensão emocional às animações básicas
Vamos dar um exemplo, certamente será mais revelador: uma atualização de uma lista que é acionada ao rolar para cima. Seja uma roda giratória ou um lançamento de foguete, você sabe que a ação solicitada foi executada e que algo está acontecendo. O trabalho é feito em termos de compreensão, mas acho que o foguete terá mais impacto, é uma pequena surpresa agradável, que pode ecoar a identidade. A pepita, a cereja, quase aposto que você vai recarregar uma segunda vez para rever.
Pareciam livres, porque o valor agregado não está no significado que podem carregar (embora), mas na emoção que trazem.
A animação faz sentido, não é este brinquedo “novo” que queremos absolutamente usar e testar em todos os projetos e situações. É também por isso que encontramos orientações sobre animações com material. As animações apresentadas são simples e sustentam o sentido ou sentido da leitura, a hierarquia. É inclusive a primeira categoria do site deles na aba de animação: “entendendo o movimento” (“animações compreensíveis”).
Portanto, faz parte da boa prática ter significado. Mas o Google não nos diz para não fazer muito. Isso não me parece motivo para abusar nesse sentido. O Google também se mantém no aspecto do usuário, e não fala do aspecto emocional que certas animações podem trazer.
LEVAR EM FORA
Em geral, as animações devem complementar a experiência do usuário, reforçar a hierarquia, fornecer significado e auxiliar na compreensão da navegação sem ofuscar a funcionalidade. No entanto, o aspecto emocional de um site e sua identidade não devem ser negligenciados. É importante também que ele se destaque por meio de animações.
Iremos devagar, como o pimentão que vem para apimentar sua nova criação culinária. Demora um pouco, mas um pouco demais e é a terrível dor de estômago.
- As animações devem acompanhar a experiência, apoiar o assunto e dar sentido
- Não se esqueça do aspecto emocional que as animações podem trazer
- Quando há muitos deles, ou quando são muito marcados, eles têm precedência sobre o conteúdo, sobre a ação. O olhar se distrai e isso quebra a fluidez da experiência, atrapalhando as funcionalidades principais e essenciais.
Julien, ui-designer @ux-republic
