Life in Motion: um guia para animar visualizações de dados móveis

Atualmente, com a tecnologia impulsionando a coleta e a produção de grandes quantidades de dados, é relativamente fácil obter informações que podem orientar suas decisões diárias. Os aplicativos móveis baseiam-se na frequência cardíaca e em outros dados biométricos para rastrear metas de saúde e exercícios. Eles fornecem dados em tempo real sobre investimentos, gastos pessoais e orçamentos. Eles podem até ajudar os pais a avaliar os padrões de alimentação e sono de seus recém-nascidos.

Para compreender o grande volume de dados disponíveis, basta olhar para os relatórios anuais do designer Nicholas Felton construídos a partir de seus próprios dados pessoais. Com tanta informação ao seu alcance, a parte difícil é dar sentido a ela.

É aqui que a animação pode ajudar. A animação de dados os torna mais compreensíveis, envolventes e úteis, principalmente nas pequenas telas de dispositivos móveis. Com a animação, os números se tornam mais fáceis de digerir e tendências, padrões e narrativas negligenciados tornam-se aparentes. A interatividade em tempo real com esses visuais promove o engajamento e permite que os usuários explorem os dados mais profundamente.

Ao mesmo tempo, a animação excessiva ou equivocada pode frustrar seu propósito, obscurecendo em vez de iluminar os insights. Ao animar visualizações de dados móveis, os designers devem usar princípios de design de movimento e evitar armadilhas comuns.

Os benefícios de animar visualizações de dados móveis

A animação não é um mero embelezamento das visualizações de dados. O movimento oferece inúmeros benefícios e deve ser aplicado com o objetivo de alcançar um resultado específico.

Ajudar os usuários a perceber tendências e mudanças é uma das principais vantagens do uso de movimento nas visualizações de dados. O falecido acadêmico Hans Rosling é conhecido por uma animação em que plotou dados de expectativa de vida e renda para mostrar mudanças na saúde e na riqueza de dezenas de países ao longo de décadas. É uma animação cativante que esclarece as tendências ao longo do tempo e contraria as percepções comuns sobre o desenvolvimento global.

Pesquisas sugerem que animar gráficos estáticos pode melhorar a percepção gráfica e aumentar o interesse do espectador. Em vez de exibir um gráfico de uma só vez, por exemplo, os elementos podem entrar em velocidades variadas para não sobrecarregar o visualizador com muitas informações. Os movimentos “ajudam a mostrar ou aprimorar a hierarquia visual dos elementos, ou a orientação dos eixos e como os dados são exibidos”, diz Tetiana Donska, designer de UI/UX com sede em Londres na rede Toptal.

A animação também ajuda os designers a fazer uso eficiente das telas dos dispositivos móveis. “O movimento nas visualizações de dados ajuda a criar consciência de transições entre diferentes estados e fornece mais informações sem atrapalhar a experiência do usuário”, diz Donska. A interatividade em tempo real pode manter ainda mais uma interface limpa porque os usuários podem explorar os dados por meio de gestos como tocar, arrastar, rolar e aplicar zoom. Por exemplo, os usuários podem deslizar um dedo ao longo de um eixo para revelar valores diferentes ou tocar para revelar números.

A incorporação de atualizações em tempo real em visualizações de dados animadas pode torná-las ainda mais atraentes para os usuários. Olajide Akinpelu, designer de UI/UX da Toptal com sede na Nigéria, diz que ver a atualização de dados diante de nossos olhos ajuda a cognição humana. Um usuário atualizando dados estáticos terá mais dificuldade em detectar alterações; o movimento em tempo real os ajuda a identificar insights que, de outra forma, poderiam perder.

É claro que fazer transições e movimentos parecerem naturais sem distrair o usuário é mais fácil falar do que fazer.

Técnicas de Animação e Visualização de Dados para Celular

A visualização de dados não se limita a conjuntos de dados complexos representados por tabelas e gráficos tradicionais. Até mesmo um botão “curtir” que registra o sentimento do usuário em um aplicativo social é uma maneira de visualizar os dados.

Independentemente da complexidade, um conjunto comum de princípios e técnicas entra em jogo ao animar visualizações de dados. As quatro técnicas que focalizamos neste artigo – mudança de valor; easing, offset e delay; paternidade; e zoom — visam imbuir o movimento no ambiente de UX com a naturalidade do movimento no mundo real, em conformidade com as expectativas inatas dos usuários e os sentidos de continuidade e narrativa. O objetivo, afinal, é ajudar os usuários a entender dados abstratos, não apenas envolvê-los ou encantá-los.

Alteração de valor

Ao mostrar alterações de valor com animação, em vez de exibir um número estático, um contador numérico sobe ou uma barra sobe antes de chegar a um valor final. Essa pode ser uma maneira poderosa de transmitir progresso ou crescimento — ou a falta dele. Também significa que os dados estão sujeitos a alterações e, em alguns casos, valores animados indicam interatividade.

As visualizações de mudança de valor são predominantes em todo o cenário móvel, inclusive em aplicativos de fitness, educação e finanças. Em um aplicativo de aprendizado de idiomas, por exemplo, uma barra pode subir gradativamente até chegar a uma pontuação final em um teste. A mudança de valor mostra o progresso e pode proporcionar ao usuário uma sensação de realização, incentivando-o a continuar um caminho de aprendizado.

Aplicar alteração de valor às linhas em um gráfico é outra maneira de demonstrar as alterações ao longo do tempo. Em um gráfico de barras que mostra o produto interno bruto (PIB) de diferentes países, por exemplo, o movimento pode revelar as trajetórias das economias nacionais em relação umas às outras. Esses visuais são chamados de corridas de gráfico de barras.

Easing, Offset e Delay

No mundo físico, um objeto não pode ir instantaneamente de zero a 20 mph. No mundo digital, no entanto, você pode criar movimento sem aceleração ou desaceleração. Mas isso não significa que você deve. Para o olho humano, tal movimento parece não natural, e é por isso que é benéfico dar aos elementos gráficos velocidades naturais de entrada e saída – conhecidas como easing.

Compensar a introdução de diferentes elementos de interface do usuário e atrasar sua velocidade pode sinalizar ainda mais aos usuários que variáveis ​​distintas estão sendo mostradas e pode ajudar a estabelecer uma hierarquia entre elas. Em um aplicativo de negociação de ações, por exemplo, o valor das ações de um usuário pode aparecer primeiro, seguido por índices gerais. O deslocamento e o atraso tornam mais fácil para os usuários compreender os números e gráficos do que se eles fossem apresentados de uma só vez.

Parentalidade

Parenting cria relacionamentos entre componentes de interface do usuário. Quando uma propriedade (como posição, escala ou cor) no elemento pai é alterada, uma propriedade no elemento filho é alterada. Por exemplo, em um gráfico de linhas, se um ponto em uma linha for o pai, conforme o usuário arrasta o ponto, ele pode ver a alteração do valor (o objeto filho).

A paternidade é uma maneira eficaz de aumentar a interatividade e criar hierarquia.

Zoom

O zoom permite que os usuários passem facilmente de uma visão panorâmica dos dados para uma mais granular. Pode ser uma técnica útil ao apresentar grandes conjuntos de dados, do tipo que normalmente pode ser visualizado na área de trabalho. Um aplicativo de rastreamento de ações, por exemplo, pode carregar uma visualização semanal dos preços de uma determinada ação e permitir que os usuários aumentem ou diminuam o zoom para revelar dados diários ou anuais.

Uma das formas mais comuns de visualização de dados são os mapas, que são amplamente usados ​​em aplicativos de fitness, compartilhamento de bicicletas e aplicativos de carona. O zoom é uma ferramenta crítica nesse contexto, pois os limites da tela do celular reduzem muito o que pode ser apresentado em um único visual.

Armadilhas do Motion Design a evitar

Edward Tufte, o homem creditado por escrever literalmente o livro sobre visualização de dados moderna, tinha uma máxima simples: “Acima de tudo, mostre os dados”.

Concentre-se em transmitir informações. Atributos como cor, forma e movimento devem ser usados ​​apenas para melhorar a compreensão dos dados. Elementos visuais estranhos – ou “lixo gráfico”, como Tufte se referia a ele – prejudicam esse propósito.

Em dispositivos móveis, onde os usuários de tela podem estar propensos à distração, muitas partes móveis em uma visualização de dados podem ser esmagadoras.

“Com o celular, você já tem um formato pequeno que exige foco”, diz o designer veterano Darrell Estabrook, que ingressou na rede da Toptal em 2019. Para qualquer fluxo de trabalho móvel, sem etapas discretas e bem projetadas, “o usuário meio que dá errado”.

Estabrook acrescenta: “Para toda a visualização de dados, você deve perguntar quais informações você está fornecendo ao usuário para que ele possa tomar a próxima decisão … apertar um botão ou escrever um e-mail ou ir mais fundo. O que você precisa fazer para fornecer essas [informações] para eles?”

Você pode projetar visualizações de dados móveis focadas e eficazes evitando estas armadilhas:

Visuais com uso intensivo de recursos que não agregam muito valor

A renderização de movimento em visuais pode consumir muitos recursos no back-end e pode afetar negativamente o desempenho e a experiência do usuário no front-end. Grandes conjuntos de dados ou dados que exigem codificação extensa aumentam esse risco. Antes de colocar os recursos na construção desses visuais, as equipes de design e os clientes devem ter clareza sobre o resultado desejado – e que valerá a pena o esforço.

Animação chamativa ou supérflua

As visualizações de dados animadas devem dar suporte à finalidade de um aplicativo. ​​Um aplicativo de aprendizado de idiomas pode usar o movimento para enfatizar o progresso dos usuários, enquanto um aplicativo de investimento pode destacar sutilmente os dados acionáveis. Independentemente da natureza do aplicativo, no entanto, na maioria dos casos, os designers devem evitar animações chamativas, como confetes caindo ou fogos de artifício. Eles não apenas correm o risco de gamificar visuais, o que pode levar a um envolvimento prejudicial com um aplicativo, mas também podem obscurecer ou exagerar o que os dados realmente transmitem.

Visuais excessivamente interativos

Trabalhar com dados requer um grau de precisão, e os usuários precisarão de uma parte decente da tela do smartphone – 7 a 10 mm geralmente é considerado uma prática recomendada – para executar gestos com sucesso. Excesso de interatividade pode ser complicado e frustrante. É benéfico priorizar uma ação de cada vez.

Estilo inconsistente

As visualizações de dados devem combinar com o estilo geral e a funcionalidade de um aplicativo, algo a que a Apple se refere em suas Diretrizes de Interface Humana como integridade estética.

De acordo com Akinpelu, designer de UX/UI da Nigéria, manter a consistência estilística “no tipo de transição que você usa, o tipo de animação, a mistura de cores” ajuda os usuários a navegar nos conjuntos de dados.

Mantendo o ritmo com dados crescentes

Os dados se tornaram um elemento fixo em nossas vidas, desde o trabalho e a escola até a saúde e as finanças. Com smartphones cada vez mais sofisticados e a disseminação da conectividade 5G, o volume de dados – e o potencial para aplicá-los – certamente crescerá também.

A animação pode ser uma ferramenta importante para ajudar as pessoas a entender todas essas informações. O Motion torna mais fácil para os usuários compreenderem as principais métricas, tendências e relacionamentos. Como acontece com qualquer recurso de UX, no entanto, a animação pode ser usada em excesso ou mal utilizada, o que pode tornar os dados menos compreensíveis. Usando princípios e técnicas de design de movimento, os designers podem criar visualizações de dados móveis animadas que são envolventes e perspicazes.

Leitura adicional no blog Toptal Design

• Compeling and Moving: A Guide to Motion Design Principles
• O Impacto Ampliado da Indústria de Motion Design
• Encante os usuários com essas práticas recomendadas de design de aplicativos para dispositivos móveis