Transições em interfaces

Transições em interfaces

Transições em interfaces podem ser mais do que algo “bonitinho”. Se usadas de forma correta, elas não só melhoram a aparência da aplicação como também sua funcionalidade, diminuindo o esforço cognitivo do usuário e deixando assim mais claro, por exemplo, uma troca de contexto.

Este post é bastante visual, com muitas animações. Para que ele não ficasse muito “piscante” e prejudicasse a leitura, as animações estão desabilitadas por padrão. Para iniciá-las, coloque o mouse sobre as imagens.

Abaixo segue a tradução, com a devida permissão, do excelente post do Pasquale D’Silva sobre como melhor utilizar transições em interfaces. Espero que curtam.

Designers adoram detalhes. Muito tempo é gasto deixando botões perfeitos pixel a pixel, em estilos de forms, escolhendo a melhor tipografia, e deixando aqueles ícones sem serrilhas. Nota 10, mandaram bem, continuem com o trabalho classe A.

…mas pouco tempo é gasto arquitetando como tudo isso se junta no final, fora de uma composição estática. Você clica em um botão e o form simplesmente…aparece? Você dá um swipe pra deletar um item e ele simplesmente some? Isso é superestranho e nada natural. Praticamente nada no mundo real muda de estado tão abruptamente. Iria parecer que algo está errado.

Ahh, mas o designer deixou uma observação: “Isto tem um efeito de slide”.

Como? Rápido? Ele tem bounce back? Cushion in? Design estático não fornece contexto sobre troca de estados.

As pessoas insistem em usar a palavra “lindo” quando falam sobre animações e interações “bonitinhas”. Ótimo para elas. Mas vocês sabiam que…animações podem ser usadas de forma funcional também? Não é apenas um detalhe de embelezamento.

Animações tiram proveito de uma dimensão geralmente esquecida: tempo. Esse tecido invisível onde o universo é costurado. E você não precisa ser um matemático sequelado para entender isso.

Vamos dar uma olhada em algumas idéias.

Easing / Cushioning

Em animação tradicional, o breakdown determina como um objeto se move do Ponto A para o Ponto B. Ele determina como o restante dos frames irão se comportar. Vamos pegar esses 25 frames interpolados, onde o frame 13 muda de posição.

Linear Computer Garbage
Ease-in
Ease-out

Olha isso! Você acabou de aprender easing/cushioning. Computadores são idiotas e adoram preencher espaços de forma linear porque são apenas sacos de fios preguiçosos. Um bom designer de motion/animação gasta boa parte de seu tempo lutando contra computadores para que eles não bagunçem com isto.

Animação é uma questão de timing. É possível brincar com todos os possíveis diferentes espaçamentos para obtermos resultados diferentes. Mas chega disso. Isso não é um tutorial sobre animação, a idéia era fazer com que você pensasse na linguagem do tempo e espaço.

Algumas idéias de animação no contexto de Interfaces

Como disse antes, animações podem ajudar a fornecer contexto. Isso ajuda o cérebro a entender o fluxo da informação.

Inserindo um item em uma lista

Digamo que você está olhando a uma lista de coisas no mundo real. E você adoraria popular essa lista com dados reais. Se você desse esse trabalho a um computador, teria um resultado parecido com isto:

Inserção de item na lista sem transição

Ahhh, isso tá muito ruim.

Suavizar isto só requer alguns frames adicionais de animação. O que acha de dar uma dica ao seu cérebro sobre o que está acontecendo na lista?

Inserção de item na lista com transição
Inserção de item na lista com transição

Para que um novo item seja adicionado a lista é preciso primeiro criar espaço para que, só então, o item (que vem do além) preencha o espaço recém-criado. Muito mais óbvio. Existe também ease-in e ease-out para suavizar a mudança. Desta forma a mudança parece mais natural pois nós temos um gancho contextual no espaço - espelhando o modo que adicionaríamos algo a uma pilha de coisas reais.

Entrando (drilling down) em uma lista de itens

Existe a abordagem clássica de dar um slide para um item. Um padrão bastante usado, mas que não faz muito sentido espacialmente:

Drilldown em uma lista

A direção do slide não nos dá de fato nenhuma “dica” fora de um contexto linear de views.

E se considerarmos um item como um container que expandimos para mostrar mais detalhes, inline?

Drilldown em uma lista

Se o objetivo é entrar na lista e dar atenção e foco total ao item, nós poderiamos fazer com que tudo sumisse dentro da mesma view:

Drilldown em uma lista

Usar > breadcrumb > para > chegar > até > a > view > é um ótimo método para fazer com que o usuário se perca.

Uma vantagem de permanecer inline é que você pode remover a explicação sobre o quão fundo o usuário está dentro de uma sub-view. Você pode retirar a visualização de uma navegação hierárquica porque o usuário viu como ele chegou lá.

É claro que a idéia acima não funciona em todos os casos – mas essa perspectiva pode levar a soluções mais elegantes sobre como conectar o fluxo de informações.

Thinglist - um exemplo implementado

Thinglist

O Thinglist, um produto da Elepath que eu (Pasquale D’Silva) estou trabalhando junto com Kyle Bragger, possui algumas transições na interface bem divertidas. O exemplo acima demonstra como revelamos a nova feature de filtro.

Outros exemplos que valem a pena serem vistos

Eu não consigo realmente sugerir muitos…Em uma extremidade da escala, existem várias interfaces bonitas, mas totalmente estáticas. Na outra ponta, interfaces com animações desnecessárias a fim apenas de “embelezar”.

Três me vêem à cabeça agora:

  • Clear: bastante orientado a animações
  • Willcal: possui um ritmo consistente, cinético. Não existem mudanças de estado sem transição. É um prazer usar.
  • Facebook.app: não é muito consistente, mas apresenta algumas soluções interessantes para guiar o foco.

Pra mim é meio louco pensar que a maioria das pessoas não leva em consideração a dimensão do tempo quando tratam de interfaces. Motion pode nos dar muita informação! Talvez as ferramentas para a criação de protótipos sejam muito complexas para a maioria dos designers.

Eu (Pasquela D’Silva) originalmente escrevi isto como um documento interno para os empregados da Elepath, para iniciar a explicar minha obsessão com motion. Afinal, eu sou um animador.

Nós achamos que seria legal compartilhar este documento para discussão. Eu adoraria ouvir comentários de outras pessoas que constroem interfaces, com um cuidado especial sobre como e porque elas se movem.

#41