Trazendo vida à microinteração e à animação da interface do usuário por meio de colaborações entre desenvolvedores e designers

Podemos criar uma experiência agradável para os usuários por meio de microinteração e animação da interface do usuário!

Olá, meu nome é Kyo Kim e trabalho como designer de produtos na Capital One há cerca de dois anos. Eu uso micro-interações e animações em todo o meu trabalho aqui, incluindo em alguns projetos para dispositivos móveis que você pode ter usado. Antes de começar a trabalhar em tecnologia, minha formação era em cinema. No filme, o foco é contar e editar histórias para criar uma história que envolva o público; e muito disso é conseguido através do uso de transições. Acho essas habilidades úteis hoje em dia ao criar experiências e histórias para ferramentas digitais.

Ao projetar, penso em fatores que proporcionariam aos usuários uma experiência excelente e agradável com transições e narrativas.

Para que um produto ofereça aos usuários uma experiência agradável, ele deve oferecer um design mais do que esteticamente agradável e efeitos de animação impressionantes.

Independentemente de o produto ser baseado em aplicativo, baseado na Web ou qualquer outra forma de produto digital, ele deve atrair os usuários, ser agradável para eles usarem e dar a eles a oportunidade de se envolver com ele de maneira direta e significativa maneira.

As micro-interações têm o poder de tornar a experiência do usuário agradável e satisfatória de uma maneira que muitos elementos de design não podem. Antes de entrarmos em micro interações no contexto do design do produto, vamos começar com os fundamentos.

O que eles são? Por que é bom para a experiência do usuário? Por que designers e desenvolvedores devem incorporá-los em seu trabalho? Como as equipes de design de produtos podem trabalhar juntas para melhorá-las?

O que são microinterações e por que devemos nos preocupar com elas?

O que são microinterações ou animações da interface do usuário? As pessoas costumam se referir a elas como animações bonitas, gráficos em movimento ou design de imagens em movimento. No entanto, eles são muito mais do que isso.

Ao contrário de outras formas de animação que existem apenas para criar a ilusão de movimento, as micro-interações envolvem diretamente o usuário, permitindo que ele realize várias tarefas e interaja com o produto de maneira intuitiva e eficaz.

Se amarrássemos isso de volta aos princípios de um bom design de sistemas, isso aprimora e possibilita o feedback do sistema para o usuário. Se feito corretamente, os usuários receberão micro-interações como uma mensagem do usuário de que ele (o sistema) está fazendo o que deveria estar em resposta ao que o usuário precisa.

Mesmo se você não souber o que são micro-interações, você se envolve com elas regularmente. Sempre que você usa um aplicativo ou produto baseado na Web para realizar uma tarefa específica - seja lendo as notícias, fazendo uma compra, jogando um jogo, criando um perfil ou ajustando suas configurações e preferências de notificação - todas as ações individuais que você faz constituem uma micro interação. As micro interações são perfeitamente integradas na plataforma de um produto, tornando suas funções transparentes e acessíveis, melhorando efetivamente a experiência geral do usuário.

Embora essas "ações" tenham várias formas diferentes, alguns exemplos comuns incluem:

  • Quando "movemos" um item para um carrinho de compras virtual.
  • Quando selecionamos entre duas opções em um botão de alternância do tipo CTA.
  • Quando "pressionamos" para atualizar um feed de notícias e ver a atualização mais recente.
  • Quando “rolamos para cima e para baixo” no feed ou na página longa.

Quando projetamos uma microinteração, precisamos examinar se é realmente necessário e vital para a experiência do usuário. Caso contrário, ele pode distrair o formulário do usuário usando seu produto com eficiência ou tornar-se ruído visual.

Princípios de microinterações

Existem três princípios que sempre considero ao projetar micro-interações.

  1. Continuidade (e subtileza)

Os elementos de microinteração devem ser sutis para que, quando um usuário faça uma ação, haja um fluxo contínuo em sua experiência. Por exemplo, se estivermos criando uma animação de rolagem em um feed longo, o usuário poderá focar no conteúdo da página e não na própria animação de rolagem.

2. Previsibilidade

As micro interações de qualidade têm um elemento de previsibilidade que permite ao usuário navegar em um produto de maneira eficaz e eficiente. O usuário pode prever com precisão os efeitos de suas ações, sentir-se à vontade para revertê-las e confiante em sua capacidade de executar conforme o esperado.

3. Transformabilidade

Transições fluidas entre várias telas e transformações bem definidas dos vários objetos dentro delas são aspectos-chave das micro-interações de qualidade. Eles permitem ao usuário desenvolver uma compreensão intuitiva dos relacionamentos entre telas e os elementos dentro delas.

Quando projetadas seguindo esses princípios, as micro-interações fornecem contexto para um design, ajudando os usuários a saber como interagir com ele. Uma microinteração é um evento momentâneo que completa uma única tarefa. Indiscutivelmente os menores elementos interativos de um design de site ou aplicativo, as micro-interações são algumas das mais vitais, pois atendem a uma variedade de funções principais.

Os gatilhos (toque, deslize, arraste, etc.) iniciam todas as ações listadas na seção acima (continuidade, previsibilidade e capacidade de transformação). O usuário executa uma ação em um site ou aplicativo para iniciar o processo (mesmo se continuar após a etapa inicial). Isso segue um padrão de call to action de um usuário, regras de envolvimento conforme determinado pela interface (o que acontecerá e como), feedback do usuário (funcionou ou não) e padrões ou loops (a ação acontecer uma vez ou repetir em uma programação).

-Como desenvolvedores e designers podem trabalhar juntos para dar vida às microinterações

Como você pode ver, as micro-interações têm um papel crítico na formação da experiência do usuário. Por isso, eles se tornaram uma parte cada vez mais importante do meu trabalho como designer de produtos. Tendo trabalhado em vários projetos em várias plataformas e usos, notei que nem todos reconhecem o valor desses elementos ou como criá-los efetivamente. Mais importante, muitas vezes os membros da equipe não sabem como expressar suas idéias sobre o design de transições e micro-interações.

Percebi que tudo se resumia à comunicação - algo estava perdido na tradução quando expliquei minhas idéias de design para meus desenvolvedores. Você já deve ter ouvido essa citação de Confúcio antes: “Diga-me, e eu esquecerei. Mostre-me, e eu me lembro. Me envolva e eu entenderei. ”E é através do envolvimento que nós, como equipe de designers e desenvolvedores, criamos grandes experiências.

Primeiro, vamos fazer uma rápida descrição do processo de design ...

Em uma situação ideal, quando um designer tem uma idéia para uma microinteração, o fluxo de trabalho tradicional prossegue na seguinte ordem:

  1. O designer desenvolve os elementos visuais e os efeitos de animação necessários para atualizar sua ideia.
  2. O designer apresenta o modelo final e seus conceitos subjacentes aos outros membros da equipe.

Mas e se o processo de design não ocorrer na prática como na teoria? E se estivermos apresentando um storyboard ou um modelo incompleto? Ou alguém da equipe está projetando o modelo?

Quando isso acontece, é provável que surjam problemas na apresentação ou no desenvolvimento. Esses problemas geralmente se enquadram em uma de três categorias:

  1. A ideia de animação não é comunicada com clareza suficiente.

Se você estiver tentando descrever um conceito de animação com palavras ou imagens estáticas, poderá ver caretas nos rostos do seu público. Isso significa que eles estão tentando ao máximo entender sua ideia, mas na verdade não estão entendendo. Mesmo que eles entendam o conceito básico, a imagem que eles criaram em suas mentes provavelmente é inconsistente com o que você está imaginando. Como as pessoas tendem a perceber imagens em movimento, imagens fixas e descrições verbais de maneiras diferentes, confiar em palavras ou imagens para transmitir idéias de animação cria espaço para falhas de comunicação e, muitas vezes, tensões desnecessárias entre os membros de sua equipe.

2. O designer não sabe se a animação está funcionando bem até que verifique e teste o protótipo do desenvolvedor.

Quando os designers não possuem habilidades de prototipagem, eles se limitam a apresentar suas idéias aos desenvolvedores por meio de um storyboard. Mesmo que um designer acredite firmemente em um modelo de micro-interação, ele ou ela não pode dizer se está trabalhando com todo o seu potencial até que o desenvolvedor conclua o protótipo. Isso é problemático por várias razões, sendo a principal a alta probabilidade de falta de comunicação que essa abordagem introduz no processo. Além disso, abre a porta para dúvidas dos membros da equipe e leva a perguntas sobre a viabilidade da ideia. Isso pode ser caro em termos de tempo, da perspectiva do desenvolvimento.

3. O designer e o desenvolvedor não estão na mesma página

Quando os designers fazem animações da interface do usuário ou microinterações, eles tentam incluir detalhes complexos do design, como flexibilizações personalizadas, scripts, expressões e outros efeitos. Ao apresentar essas idéias aos desenvolvedores, eles podem ouvir: "Não é possível fazer isso em nossa linha do tempo" ou "Não podemos fazer exatamente da mesma forma, mas tentaremos". Nesse momento, eles podem tentar usar hash os vários detalhes e questões técnicas com os desenvolvedores. No entanto, essas discussões podem acabar sendo infrutíferas se o designer não tiver um conhecimento prático das ferramentas ou idiomas que os desenvolvedores usam. Esses fatores devem ser levados em consideração ao formular e discutir idéias para que as micro interações sejam compatíveis com as configurações padrão dos desenvolvedores, aumentando a probabilidade de o produto final atender aos padrões do designer (e de todos os outros).

Quais são algumas soluções para esses problemas?

Embora todos os designers e desenvolvedores tenham sua própria maneira de se comunicar sobre seus conceitos de animação, quero compartilhar um dos métodos que minha equipe está usando. Esse método teve muito sucesso e resultou em menos reuniões e melhorou drasticamente a comunicação de nossa equipe.

Agora, não estamos mais discutindo sobre a inclusão ou não de micro-interações, estamos explorando maneiras de torná-las ainda melhores!

Conceito de interação com esqueleto e guia de interação

“O conceito de interação esqueleto e o guia de interação não deixam espaço para interpretação, o que me permite começar o trabalho imediatamente e ter confiança em corresponder à visão do designer.” –Jesse M. Majcher / engenheiro líder do IOS

O processo padrão que usamos para nos comunicar sobre designs de UX não se traduz bem em animações de interface do usuário. Primeiro, os projetos e fluxos de UX ainda são projetados tela por tela e são estáticos. As animações da interface do usuário são fluxos em si mesmas, são fluidas e baseadas no tempo. Quando criamos um design estático, criamos uma estrutura de arame áspera para entender a idéia e discutir o fluxo. Isso nos permite revisar e ajustar com facilidade o design antes de criar a versão final. Quando todos os membros da equipe concordam que o design está pronto para ser entregue aos desenvolvedores, o designer fornece ao desenvolvedor um guia de estilo e uma linha vermelha contendo detalhes, especificações e outras informações importantes sobre o design.

Se usamos um processo semelhante para animações, nosso processo pode ser muito mais rápido e melhor.

  1. Conceito de interação do esqueleto (estudo de movimento)

Um conceito de interação do esqueleto é semelhante ao wireframe que você criaria ao projetar o fluxo, a principal diferença é que essa é uma demonstração de protótipo reproduzível / clicável. Se levarmos isso para uma reunião, os membros da nossa equipe não precisarão usar sua imaginação para entender o conceito. O designer pode usar a demonstração reproduzível / clicável ou o storyboard estático para referenciar diretamente os elementos visuais e de animação do design. Isso dará a todos um senso claro e preciso de sua ideia. Por sua vez, os parceiros podem fornecer um feedback altamente específico e, portanto, altamente valioso para o designer. Ao mesmo tempo, as equipes de gerenciamento e desenvolvimento de produtos obterão informações que lhes permitirão melhorar suas comunicações internas e estimativas de tempo para o projeto.

2. Guia de Interação

Depois que a equipe concorda com o conceito, o designer cria o guia de interação. Isso é semelhante a um guia de estilo, pois descreve a posição, rotação, escala e tempo dos elementos. Podemos adicionar todos os detalhes sobre as animações, o que ajudará nossos parceiros a entender claramente. Quando o designer mostra o guia de interação com seus parceiros, ele pode ser ainda mais claro sobre o movimento e a medição do conceito de animação. Isso é muito útil para finalizar o trabalho por meio da colaboração. Também ajuda os designers a serem mais atenciosos em seu design de animação / micro-interação.

3. Habilidades de prototipagem para designers

Na minha experiência, para se preparar para uma colaboração de design bem-sucedida, o designer do produto deve ser o driver da animação e o desenvolvedor deve fornecer o suporte. Isso significa que o designer do produto assume a maior parte da responsabilidade na parceria. Eles não apenas são responsáveis ​​por explicar suas idéias com muita clareza, mas também devem mostrar que são viáveis, fornecendo prova de conceito. Isso também significa que os designers de produtos precisam ser capazes de criar seus próprios protótipos de animação. Se um designer de produto puder criar um protótipo e apresentá-lo durante uma reunião, a discussão a seguir será mais clara e consumirá menos tempo, levando a um processo de comunicação mais eficaz em geral.

Então, com quais tipos de ferramentas de prototipagem os designers devem se familiarizar? Existem muitas ferramentas por aí, mas nem todo mundo sabe o que funciona melhor para tarefas específicas de microinteração. Aqui estão minhas recomendações baseadas em minha experiência pessoal no design desses elementos.

Se você conhece a codificação:

  • Celular: Xcode, estúdio Android
  • Celular ou Web: Framer
  • Web: animação CSS

Se você deseja projetar uma interação entre um push semelhante a uma tela e um módulo:

  • Invision e Marbel

Se você deseja criar interações mais detalhadas:

  • Princípio, Adobe CC, origami Studio e Pixate

Se você deseja criar interações detalhadas + animação:

  • Depois dos efeitos

Atualmente, sou fã do After Effects na minha criação de protótipos. Mesmo que não seja interativo (ou seja, clicável), é a maneira perfeita de apresentar um conceito de animação. Além disso, não há limitação de efeito e você pode controlar o movimento detalhado. É até possível usá-lo para fazer uma interação no espaço 3D, como para AR e VR.

Interações de equipe deliciosas produzem produtos deliciosos

As micro interações tornaram-se um elemento cada vez mais importante - se não crítico - da web, design móvel e muito mais. Mesmo que designers e desenvolvedores reconheçam o valor das animações da interface do usuário e sejam motivados a criá-las, eles geralmente lutam para colaborar de uma maneira eficiente e eficaz. É preciso uma equipe forte para enviar grandes micro-interações no prazo; essas equipes exigem uma definição clara de funções, habilidades eficazes de comunicação e as ferramentas de prototipagem certas para as tarefas em questão.

Para definir suas micro interações para o sucesso, verifique se sua equipe possui essas características e se envolve com esses processos. E boa sorte com sua própria jornada de microinteração!

DECLARAÇÃO DE DIVULGAÇÃO: Essas opiniões são da responsabilidade do autor. Salvo indicação em contrário neste post, a Capital One não é afiliada, nem é endossada por nenhuma das empresas mencionadas. Todas as marcas comerciais e outras propriedades intelectuais usadas ou exibidas são de propriedade de seus respectivos proprietários. Este artigo é © 2017 Capital One.

Para saber mais sobre APIs, código aberto, eventos da comunidade e cultura de desenvolvedores na Capital One, visite DevExchange, nosso portal completo de desenvolvedores: developer.capitalone.com.