Os 12 Princípios do UX no Motion

Essa é uma tradução livre do artigo original “Creating Usability with Motion: The UX in Motion Manifesto“, escrito por Issara Willenskomer e publicado no Medium em 31 de Março de 2017. Issara é o fundador do UX in Motion, uma escola focada em ensinar animações para UX designers ao redor do mundo. Para conhecer mais sobre as aulas e assistir tutoriais, acesse: uxinmotion.net

Nota do editor: Por se tratar de termos parecidos, é comum ocorrer uma pequena confusão quando falamos sobre UI e UX Design. Então acho que é importante fazermos um breve esclarecimento sobre o tema. Em resumo: enquanto o UI (User Interface) se volta para a parte visual de um projeto, onde o usuário irá fazer sua navegação, o UX (User Experience) está relacionado com a experiência e sentimentos que este usuário terá após a interação.

Criando Usabilidade com Motion: UX no Manifesto Motion

Esse manifesto surgiu como resposta à seguinte pergunta “Sendo um UX ou UI designer, como sei quando e onde implementar motion para dar suporte a usabilidade?”

Ao longo dos últimos cinco anos tive o privilégio de treinar e orientar os UX e UI designers em mais de 40 países com oficinas e tutoriais sobre UI Animation. Depois de quinze anos estudando motion em interfaces, cheguei a conclusão de que existem 12 princípios específicos que colaboram na construção de uma usabilidade em seus projetos de UX. Chamei esses tópicos de “Os 12 Princípios do UX no Motion”, eles podem ser combinados harmonicamente em uma diversidade de maneiras inovadoras.

Para facilitar, dividi esse manifesto em cinco partes:

Dirigindo-se ao tema de UI Animation – não é o que você pensa;
Interações em tempo-real e em tempo-não-real;
Quatro maneiras em que o motion suporta a usabilidade;
Princípios, técnicas, propriedades e valores;
Os 12 Princípios do UX no Motion.

Não se trata de UI Animation

Já que o tema do motion em interfaces é entendido principalmente pelos designers como “UI Animation” – o que não é – sinto que preciso criar um pouco de contexto antes de entrarmos nos 12 Princípios.

“UI Animation” geralmente é pensado por designers como algo que faz a experiência do usuário ser mais deliciosa, mas que no geral não adiciona muito valor. É visto como algo que vem para dar aquele toque final, como um batom vermelho em uma sessão de maquiagem.

Além disso, o motion no contexto das UI tem tomado como base os 12 Princípios de Animação da Disney, algo que eu argumento contra no meu artigo “UI Animation Principles – Disney is Dead“. Neste meu manifesto mostrarei que as UI Animations são para os ‘Os 12 Princípios do UX no Motion’, como a construção é para a arquitetura. Com isso quero dizer que, enquanto uma estrutura precisa ser fisicamente construída para existir, a mão que projetou tudo e determina o que é construído, vem com base em um amontoado de princípios.

Animação é tudo sobre ferramentas. Os princípios são a aplicação prática de idéias que orientam o uso de ferramentas e, como tal, os princípios oferecem oportunidades de alavancagem para designers. O que a maioria dos designers pensam como “UI Animation” é de fato uma execução de uma modalidade mais elevada de design: o controle do comportamento temporal de objetos de interface durante eventos que se passam em um tempo-real e em tempo-não-real.

Interações em tempo-real e em tempo-não-real

Neste momento é importante fazermos a distinção de “estado” e “ação”. O estado de algo em UX é fundamentalmente estático, como uma comp de design. A ação de algo no UX é fundamentalmente temporal e baseada em movimento. Além disso, todos os aspectos temporais da interação podem ser pensados para dois ambientes, o em tempo-real e/ou tempo-não-real. Realtime significa que o usuário está interagindo diretamente com os objetos na interface. Non-realtime implica afirmar que o comportamento do objeto é pós-interativo: ele ocorre após uma ação do usuário e é considerada também uma transição.

Tempo-Real

Tempo-Não-Real

Essa é uma distinção importante.

As interações em tempo-real também podem ser pensadas como “manipulação direta”, na medida em que o usuário interage com os objetos da interface diretamente e imediatamente. O comportamento da interface está acontecendo quando o usuário está usando. As interações em tempo-não-real ocorrem somente após a entrada do usuário e têm o efeito de bloquear brevemente o usuário da experiência até que a transição seja concluída. Essas distinções nos dão clareza de ideias, enquanto continuamos nossa jornada no mundo dos 12 Princípios.

Motion suporta usabilidade de quatro maneiras

Esses quatro pilares representam as quatro maneiras pelas quais o comportamento temporal das experiências dos usuários são compatíveis com a usabilidade.

Expectativa: A expectativa é mostrada de duas maneiras: como os usuários percebem o que é um objeto e como ele se comporta. E, como designers, queremos sempre minimizar a diferença entre o que os usuários esperam do que eles experimentam.

Continuidade: A continuidade fala tanto sobre o fluxo do usuário como sobre a “consistência” da experiência do usuário. A continuidade pode ser pensada em termos de “intra-continuidade” – a continuidade dentro de uma cena e “inter-continuidade” – a continuidade dentro de uma série de cenas que compõem a experiência total do usuário.

Narrativa: Narrativa é a progressão linear dos eventos na experiência do usuário que resulta em uma estrutura temporal/espacial. Isso pode ser entendido como uma série de momentos discretos e eventos que se conectam ao longo da experiência do usuário.

Relação: Relacionamento refere-se às representações espaciais, temporais e hierárquicas entre objetos de interface que orientam a compreensão do usuário e a tomada de decisões.

Princípios, técnicas, propriedades e valores

Tyler Waye diz que:

“Princípios são as funções que dão origem a qualquer tipo de técnica. Esses elementos permanecem consistentes, não importa o que esteja acontecendo.”

A partir daí, podemos imaginar uma hierarquia com Princípios no topo, Técnicas mais abaixo, Propriedades abaixo e Valores na base.

Técnicas podem ser pensadas como as várias e ilimitadas execuções e/ou combinações de Princípios. Penso em técnica como “estilo“.

Propriedades são os parâmetros específicos dos objetos que estão sendo animados para criar a técnica. Estes incluem (e não estão limitados a) posição, opacidade, escala, rotação, ponto de ancoragem, cor, stroke, largura, forma, etc.

Valores são os valores reais da propriedade numérica que variam ao longo do tempo para criar o que chamamos de “animação”.

Agora sim temos algumas ferramentas para dar início ao trabalho. E o mais importante, essas ferramentas linguísticas são a base de qualquer ferramenta de prototipagem específica.

Easing, Offset & Delay referem-se ao tempo. Parenting está ligada à relação de objeto. Value Change, Masking, Overlay, e Cloning se relacionam com a continuidade do objeto. Parallax relaciona-se com a hierarquia temporal. Obscuration, Dimensionality e Dolly & Zoom relacionam-se com a continuidade espacial.

Princípio 1: Suavização (Easing)

Todos os objetos de interface exibem um comportamento temporal (seja ele em tempo-real ou em tempo-não-real). O Easing cria e reforça o “naturalismo” inerente à sutileza das experiências do usuário e cria uma sensação de continuidade. A Disney refere-se a isso como ‘Slow In and Slow Out‘.

O primeiro exemplo tem o movimento linear e nos passa uma sensação de estar “ruim”. Já o segundo exemplo tem um movimento com mais suavidade e consequentemente, uma sensação de termos algo “bom”. Todos os três exemplos acima têm o mesmo número de frames e ocorrem na mesma quantidade de tempo. A única diferença está no seu easing.

Como designers preocupados com a usabilidade, precisamos exigir rigor de nós mesmos e identificar, além da estética, qual exemplo é mais útil para usabilidade?

O ponto que quero levantar aqui é que, certo grau de skeuomorfismo é inerente ao easing. Você pode imaginar um “gradiente de easing” em que os comportamentos que se enquadram nas expectativas dos usuários resultam em interações menos utilizáveis. No caso de um movimento devidamente atenuado, os usuários experimentam o próprio movimento de forma discreta e em grande parte invisível – o que é bom, já que evita uma distração. O movimento linear é visivelmente óbvio e causa uma sensação de deslocamento, inacabado, chato e nada atrativo.

Agora vou me contradizer completamente aqui e falar sobre o exemplo elástico. O movimento não é perfeito. Na verdade, tem uma sensação “projetada”. Parece diferente, mas ainda nos passa uma sensação de ser mais “correto” do que o exemplo com movimento linear.

Você pode colocar uma suavização e mesmo assim não suportar (ou pior, destruir), a usabilidade? A resposta é sim e existem várias maneiras. Uma maneira é o tempo. Se o seu tempo for muito lento ou muito rápido, você pode quebrar a expectativa e perder a atenção do usuário. Da mesma forma que se o seu easing estiver desalinhado com a marca ou experiência geral, isso também pode afetar negativamente a expectativa e a transparência.

O que quero mostrar é um mundo de possibilidades quando falamos de easing. Há literalmente um número infinito de “suavizações” que você, como designer, pode criar e implementar em seus projetos. Todas essas atenuações têm sua própria resposta de expectativa que permeiam os usuários. Para resumir: quando usar easing? Sempre. Você pode aprender mais sobre essa minha ideia do easing em meu artigo, “A ironia da usabilidade e do movimento linear“.

Princípio 2: Deslocamento e atraso (Offset & Delay)

Offset & Delay é o segundo de apenas dois princípios que são influenciados pelos Princípios de Animação da Disney, neste caso, temos o “Follow Through and Overlapping Action”. No entanto, é importante notar que a implementação, enquanto similar em execução, difere em propósito e resultado. Enquanto os Princípios da Disney resultam em “animações mais atraentes”, os Princípios de Animação da UI resultam em experiências mais utilizáveis.

A utilidade deste princípio é que ele “conta” para o usuário de forma pré-consciente, algo sobre a natureza dos objetos na interface. A narrativa na referência acima é que os dois principais objetos estão unidos e o objeto inferior está separado. Talvez os dois principais objetos possam ser uma imagem e texto não interativos, enquanto o objeto inferior é um botão. Mesmo antes que o usuário registre o que esses objetos são, o designer já se comunicou com o movimento através dela – que os objetos estão de alguma forma separados. Isso é extremamente poderoso.

Crédito: InVision

No exemplo acima, o botão de ação flutuante (floating action button-FAB) transforma-se em elementos de navegação de cabeçalho compostos por três botões. Como os botões são “deslocados” um do outro temporariamente, eles acabam dando suporte a usabilidade através de sua “separação”. O designer está usando o próprio tempo para dizer – mesmo antes de o usuário registrar quais são os objetos – que os objetos estão separados . Esse tipo de animação tem o poder de se comunicar com o usuário independente do design visual final.

Para mostrar melhor como isso funciona, vou mostrar um exemplo que quebra o princípio Offset & Delay.

Crédito: Jordi Verdu

No exemplo acima, o design visual estático nos diz que há ícones e um plano de fundo. A percepção é de que os ícones são todos separados uns dos outros e fazem coisas diferentes. No entanto, o movimento contradiz isso.

Temporalmente, os ícones são agrupados em linhas e se comportam como um único objeto. Seus títulos também são agrupados em linhas e também se comportam como um único objeto. O movimento está dizendo ao usuário algo diferente do que seus olhos vêem. Neste caso, podemos dizer que o comportamento temporal dos objetos na interface não está dando suporte a usabilidade.

Princípio 3: Parentesco (Parenting)

Parenting é um princípio poderoso que “relaciona” objetos na interface do usuário. No exemplo acima, a propriedade “escala” e “posição” do objeto superior ou “filho” é compartilhada com a propriedade “posição” do objeto inferior ou “pai”. Parenting é a ligação de propriedades do objeto a outras propriedades de um outro objeto. Isso cria relacionamentos e hierarquias de objetos de maneiras que dão suporte à usabilidade.

O Parenting também permite aos designers coordenar melhor os eventos temporais na interface do usuário, ao mesmo tempo em que comunica aos usuários a natureza dos relacionamentos dos objetos. Lembre-se de que as propriedades do objeto incluem os seguinte parâmetros: Escala, Opacidade, Posição, Rotação, Forma, Cor, Valor, etc. Qualquer uma dessas propriedades podem ser vinculada a qualquer outras propriedades para criarem momentos simultâneos na experiência do usuário.

Crédito: Andrew J Lee

Crédito: Frank Rapacciuolo

Neste primeiro exemplo, a propriedade do “eixo y” da “carinha” é o “filho” para a propriedade no “eixo x” do “pai”, o círculo demarcado. Quando o elemento indicador redondo se move ao longo do eixo horizontal, seu elemento “filho” se move junto com ele horizontal e verticalmente (enquanto está sendo Mascarado – outro princípio).

O resultado é uma estrutura narrativa temporal hierárquica que ocorre ao mesmo tempo. É de notar que o “rosto” funciona como uma série de “bloqueios” na medida em que há movimento. O usuário experimenta isso de forma discreta, embora possamos fazer a afirmação de que existe uma sutil “fraude de usabilidade” neste exemplo. Parenting funciona melhor como uma interação em “tempo-real”. Como o usuário manipula diretamente os objetos da interface, o designer se comunica com o usuário – via movimento -, mostrando os objetos e como estão vinculados e relacionados entre eles. O parenting ocorre em 3 formas: parenting direto como mostrado nos exemplos acima, parenting atrasado e parenting inverso, como no exemplo abaixo.

Delayed Parenting (Crédito: AgenceMe)

nverse Parenting (Crédito: AgenceMe)

Princípio 4: Transformação (Transformation)

Esse já foi bastante falado por aí, e de certa forma é o mais óbvio e de fácil compreensão dos princípios de animação. A Transformação é a mais discernível, principalmente porque se destaca. Um botão ‘enviar’ mudando de forma para se tornar uma barra de progresso radial e, finalmente, alterar a forma novamente para se tornar uma marca de verificação de confirmação é algo que notamos. Agarra nossa atenção, conta uma história e conclui.

Crédito: Colin Garven

Crédito: Pedro Aquino

O que a Transformação faz é transitar de forma discreta o usuário através dos diferentes estados UX. O usuário é projetado através desses espaços funcionais para o destino final. A transformação tem o efeito de separar cognitivamente momentos-chave na experiência do usuário em uma série contínua de eventos. Essa sutileza resulta em uma melhor conscientização e retenção do usuário.

Princípio 5: Mudança de valor (Value change)

As mudanças de textos e números são tão comuns; chega a ser estranho distinguir e avaliar seu papel no suporte à usabilidade. O que o usuário experimenta quando os valores mudam? A ideia aqui é conectar o usuário à realidade por trás dos dados.

Vejamos o exemplo de um painel de controle do usuário.

Quando os elementos baseados em valores são carregados sem “alteração de valor”, é transmitido ao usuário uma noção de que os números são objetos estáticos. São apenas signos pintados que exibem um limite de velocidade. Os números e os valores são representações de coisas que estão acontecendo na realidade. Essa realidade pode ser o tempo, a renda, as pontuações dos jogos, as métricas do negócio, o rastreamento físico, etc. O que estamos distinguindo pelo movimento é que o “assunto do valor” é dinâmico e os elementos estão refletindo algo desse conjunto de valores dinâmicos.

Quando empregamos representações de sistemas dinâmicos na forma de valores com base em movimento, é ativado uma espécie de “neurofeedback“. Quando os valores são estáticos, há menos conexão com a realidade por detrás dos valores e os usuários perdem sua essência.

Crédito: Barthelemy Chalvet

Crédito: Gal Shir

Esse princípio pode ocorrer em eventos de tempo real e não-real. Em eventos de tempo real o usuário está interagindo com os objetos para alterar valores. Em eventos de tempos-não-reais, como carregadores e transições, os valores mudam sem a interferência do usuário para refletir uma narrativa dinâmica.

Princípio 6: Máscara (Masking)

O ato de usar máscara está diretamente relacionado com a forma do objeto e sua utilidade. Como os designers estão familiarizados com o termo “masking” no contexto do design estático, é interessante frisar uma breve distinção com relação ao masking no UX, pois nesse caso o mascaramento ocorre no tempo como uma ação e não como um estado. Isso carrega consigo efeito de preservar o fluxo narrativo.

Crédito: Anish Chandran

No exemplo acima, a imagem do cabeçalho muda de forma e posição, mas não o conteúdo, e se torna um álbum. Isso tem o efeito de mudar o objeto, enquanto preserva o conteúdo dentro da máscara – um truque bem legal, hein? Isso ocorre em tempo-não-real, como uma transição, que é ativada após o usuário tomar uma ação.

Lembre-se, os princípios de UI Animation ocorrem temporariamente e dão suporte à usabilidade através da continuidade, narrativa, relacionamento e expectativa. Na referência acima, enquanto o próprio objeto permanece inalterado, ele também possui limites e localização, e esses dois fatores determinam o que é o objeto.

Princípio 7: Sobreposição (Overlay)

A Sobreposição permite que os usuários utilizem propriedades de elementos ocultos em um plano, contornando a falta de hierarquias não espaciais. Ele permite que os designers usem o movimento para comunicar com objetos dependentes da localização que existe por trás ou na frente de outros elementos, em um espaço não 3D.

Crédito: Bady

Crédito: Javi Pérez

No primeiro exemplo o objeto de primeiro plano desliza para a direita para revelar a localização de objetos de fundo adicionais. No segundo exemplo toda a cena desliza para baixo para revelar o conteúdo e opções adicionais (usando também o Princípio Offset & Delay para comunicar a individualidade dos objetos fotográficos).

Até certo ponto, como designer, a ideia de “layer” é bem óbvia. Desenvolvemos tudo com camadas e o seu conceito já bem internalizado. No entanto, devemos ter um mínimo de cuidado para distinguir entre o processo de ‘fazer’ versos ‘usar’. Por estarmos bem envolvidos no processo de “fazer”, estamos intimamente familiarizados com todas as peças do projeto (incluindo as peças escondidas), que estamos produzindo. Como usuário, no entanto, essas peças não visíveis são, por definição e prática, escondidas visual e cognitivamente.

O Princípio de Sobreposição permite aos designers comunicar relações entre as camadas posicionadas do “eixo z” e, assim, promover a orientação espacial para seus usuários.

Princípio 8: Clonagem (Cloning)

Quando novos objetos são criados em cenas atuais (e de objetos existentes), é importante explicar narrativamente sua aparência. Neste manifesto, argumento com exatidão a importância de criar uma estrutura narrativa para a origem e partida do objeto. Uma opacidade simples, que fará o objeto desaparecer, tende a não conseguir esse resultado. Por outro lado, Mascaramento, Clonagem e Dimensionalidade são três abordagens poderosas para produzir narrativas fortes.

Crédito: Jakub Antalík

Crédito: Jakub Antalík

Autor (a) Desconhecido

Nos três exemplos acima, novos objetos são criados a partir de objetos principais existentes durante o tempo em que a atenção do usuário é conquistada. Essa abordagem – que ajuda a direcionar a atenção e, em seguida leva o olho através da criação de um novo objeto clonado -, tem o forte efeito de comunicar uma cadeia de eventos clara e inequívoca: essa ação ‘x’ tem o resultado ‘y’ na criação de novos objetos.

Princípio 9: obscurecimento (Obscuration)

Semelhante ao princípio de Máscara, Obscurecimento vive como um fenômeno estático e temporal.

Isso pode ser confuso para designers que não têm experiência de pensar num âmbito temporal – ou seja, os momentos entre os momentos. Designers projetam tela para tela ou tarefa para tarefa. Pense em Obscuration como o ato de ser obscurecido e não o estado de obscurecer. Um projeto estático representa o estado obscurecido. A introdução do tempo nos dá o ato de um objeto ser obscurecido.

Crédito: Virgil Pana

Crédito: Apple

Nos dois exemplos acima, podemos ver que o obscurecimento, que se parece como objetos transparentes ou sobreposições, também é uma interação temporal envolvendo várias propriedades no tempo. Várias técnicas comuns envolvem efeitos de desfocagem e uma diminuição da transparência total do objeto. O usuário é informado de um contexto não primário em que ela está operando – que há outro mundo, por assim dizer, “por trás” de sua hierarquia de objetos primários.

Princípio10: Parallax

Parallax como um princípio de UX, descreve diferentes objetos de interface movendo-se em taxas diferentes. O Parallax permite que o usuário se concentre em ações e conteúdo primários, mantendo a integridade do projeto. Os elementos de fundo “recuam” perceptivamente e cognitivamente para o usuário durante o evento. Os designers podem usar o Parallax para separar o conteúdo imediato do conteúdo ambiental ou de suporte.

Crédito: Austin Neill

Crédito: Michael Sevilla

O efeito que isso tem sobre o usuário é definir claramente a duração da interação com o objeto. Elementos de primeiro plano ou objetos que se movem “mais rapidamente” aparecem para o usuário como “mais próximos”. Da mesma forma, objetos de fundo ou objetos que se movem “mais lentos” são percebidos como sendo “mais distantes”.

Os designers podem criar esses relacionamentos usando o próprio tempo, para dizer ao usuário quais objetos na interface são de maior prioridade. Portanto, faz sentido empurrar o fundo ou os elementos não interativos “pra fora”. Não só o usuário percebe os objetos de interface como agora tendo uma hierarquia além do que é determinado no design visual: ele compreende a natureza da experiência do usuário antes de ficar ciente sobre o conteúdo.

Princípio 11: Dimensionalidade (Dimensionality)

Algo crítico para experiências de usuário é o fenômeno da continuidade, bem como o sentido da localização. O dimensional fornece uma maneira poderosa de superar a não-lógica da experiência do usuário. Os seres humanos são notavelmente habilidosos em usar estruturas espaciais para navegar no mundo real e em experiências digitais. Fornecer origem espacial e referências de partida, ajudam a reforçar os modelos mentais de onde os usuários estão no UX. Além disso, o Princípio da Dimensionalidade supera o paradoxo das camadas em zonas planas visuais em que os objetos com falta de profundidade existem no mesmo plano, mas ocorrem como “na frente de” ou “por trás” de outros objetos. A Dimensionalidade apresenta-se de três maneiras: Dimensionalidade de Origami, Dimensão Flutuante e Dimensionalidade de Objetos.

A Dimensão de Origami pode ser pensada em termos de objetos de interface tridimensionais “dobrados” ou “articulados”.