Projetando interações com propósito

Descubra os princípios-chave do design de interação proposital, quais desafios de design a interação pode resolver e como incorporá-los ao seu processo.

Quando pensamos em design de interação e animação na experiência do usuário, é fácil confundir com coisas sofisticadas: os sinos e assobios, ou os objetos voadores aleatórios que “dão a um site o fator wow“. Pode trazer deleite a curto prazo, mas logo pode se tornar irritante para usuários regulares.

Para combater esse tipo de futilidade, vamos dar uma olhada nos princípios básicos do design de interação significativa, como isso pode resolver desafios comuns de design e como você pode introduzi-lo em seus processos e sistemas de design. A interação não deve mais ser um toque final que sai do escopo como um "bom ter", mas uma parte integrante da experiência geral do usuário.

Quatro princípios fundamentais do design de interação significativa

1. Evite criar obstáculos

Pense em um “menu de hambúrguer” que leva dois ou três segundos para ser animado em tela inteira. Cada vez que um usuário deseja navegar no site, ele tem que esperar. Criar tempos de tarefa mais longos para o usuário é uma maneira garantida de devolvê-los ao site ou aplicativo de um concorrente.

No entanto, existem alguns casos em que atrasar o progresso de uma interação pode ser benéfico. Quando a interação é complexa, desacelerá-la pode fornecer ao usuário um melhor contexto e feedback. Aqui estão alguns exemplos de quando você pode atrasar interações e animações:

• Integração de novos usuários em uma nova interface. Certifique-se de reduzir os obstáculos com a opção de pular.
• Arraste e solte interfaces que mostram causa e efeito. Muito rápido e os usuários podem se perguntar para onde esse arquivo foi.
• Adicionando um produto ao carrinho. Isso não deve criar uma barreira prolongada para o check-out, mas deve fornecer ao usuário feedback suficiente para que ele saiba que sua tarefa foi bem-sucedida.

Como regra, as interações simples devem ser rápidas e as complexas devem ser atrasadas apenas o suficiente para que o usuário entenda o contexto.

2. Combine o movimento com a mensagem

Se a Apple decidisse que todas as suas interações no iOS seriam rápidas, nítidas, na sua cara e faria um monte de coisas spinny, você sentiria como se estivesse usando um produto da Apple? Se você estivesse usando o aplicativo Alton Towers e visse uma animação em desvanecimento lento e uma abundância de transições no estilo Ken Burns, seria um lugar mágico de diversão e emoção ou um anúncio de TV da M&S?

A forma como uma interação é animada deve sempre representar o tom que você deseja e que parece certo para seus usuários - torna a experiência mais envolvente e consistente. Se for um site de entretenimento para crianças, pode ser um pouco estranho e extravagante. Se for uma boutique de luxo, mantenha-a lenta, sofisticada e de bom gosto.

3. Dê um propósito

O design de interação tem tanto potencial para elevar a experiência do usuário, e é por isso que é tão tentador usar em excesso e sem um propósito. Lembre-se de sites em Flash?

Role um pouco mais adiante e dê uma olhada nos oito desafios que o design de interação pode resolver. Se suas interações não seguirem esses padrões, há uma boa chance de que não tenham outro propósito além de agradar os usuários.

4. Torne-o invisível

Isso soa comovente, dado o tempo investido no design das interações, mas se passa despercebido, é provavelmente porque eles fizeram um trabalho incrível. Temos a tendência de prestar mais atenção ao uso de uma peça de tecnologia ou de uma interface quando ela está dando errado ou algo parece desajeitado. Quando as coisas estão tranquilas, o usuário pode se concentrar no conteúdo.

A quantidade de consideração do design de interação em aplicativos e sites amplamente usados ​​como Facebook, Pinterest, Twitter e produtos do Google é incompreensível. E, no entanto, você nunca notaria até que alguém apontasse para você. Eles tornam o design invisível para que você possa aproveitar a experiência e construir uma conexão emocional mais forte com o produto, serviço ou conteúdo.

Seis desafios de design que o design de interação pode resolver

1. Orientação e contexto

Este é um desafio particular para o design móvel quando o espaço da tela é limitado. Mostre tudo abertamente e o usuário fica cognitivamente sobrecarregado. Mostrar coisas vitais e esconder coisas menos críticas é o que buscamos; no entanto, ele esconde uma parte da experiência. Portanto, usando interações significativas, podemos ensinar visualmente ao usuário onde as coisas estão, de forma que seja fácil de lembrar e intuitivo.

Aqui estão alguns exemplos de criação de contexto usando interação:

• Trocador de cores de fundo das fontes do Google. As cores parecem que vivem dentro do ícone do balde de tinta.
• O processo de adicionar ao carrinho e finalizar a compra no Cotton Bureau. Em vez de levá-lo para uma nova página de cesta de compras, é como um carrossel que fica à direita da página visível.

2. Demonstrando causa e efeito

Um exemplo clássico disso é uma interface de arrastar e soltar. Quando você pega um objeto de mídia e o move para a “zona de soltar”, deve haver um feedback para o usuário dizer que o pegou e se mudou para o lugar certo para soltar o item. Depois que eles o inserem, deve haver validação para dizer ao usuário que ele foi bem-sucedido em sua tarefa. Isso pode ser feito por meio de mudanças de cores, mensagens de validação positiva ou até mesmo efeitos sonoros.

3. Fornecendo feedback

Para este exemplo, vamos usar um botão de pagamento. Quantos gateways de comércio eletrônico mal executados você já experimentou quando clicou naquele botão “Pague Agora” bonito e brilhante, apenas para se deparar com a confusão de saber se clicou ou não porque está em processamento? Não disse que era isso que estava acontecendo. Assim, a interação pode alterar o status de um botão e com um pouco de animação, pode dizer ao usuário que “o pagamento está sendo processado”, e então avisar o usuário quando “o pagamento foi recebido” antes de mudar para uma página de confirmação do pedido. Não mais se perguntando o que está acontecendo por dez segundos e questionando se você quebrou a internet.

4. Destaque as informações principais

A animação pode promover e chamar a atenção para informações críticas melhor do que um conteúdo estático.

Quando algum conteúdo tem uma prioridade mais alta na mesma exibição de tela, o uso de cores e tipografia para promovê-lo pode quebrar a consistência de seu sistema de design ou parecer deslocado se usado em excesso. A interação pode ajudar a acentuar o conteúdo importante sem comprometer o layout.

Pense em aplicativos de fitness: quando você carrega o painel pela primeira vez, deseja ver as principais atividades e estatísticas de hoje. Usar uma animação simples pode trazer esse conteúdo para fora sem diluir a quantidade de coisas mostradas na tela.

5. Crie a percepção de desempenho

A velocidade é um assunto importante e por um bom motivo, pois é um fator comum associado às taxas de rejeição. Haverá casos em que você maximizou a otimização da velocidade na página e ainda está demorando um pouco para carregar a página. Existem alternativas para não mostrar nada ao usuário ou mostrar um ícone de carregamento.

O carregamento esquelético pode ser usado para mostrar um layout previsível em forma de wireframe para que, antes do carregamento da página, o usuário saiba aproximadamente para onde olhar e como pode interagir com a interface. Psicologicamente, parece que a página carregou mais rápido em comparação a nada acontecer, mas, na realidade, carrega ao mesmo tempo.

Você também pode usar os tempos de carregamento como uma oportunidade para educar os usuários sobre o que está acontecendo e o que está para acontecer com mensagens amigáveis ​​que diminuem o tempo de espera.

6. Adicionando personalidade à marca

Marcas guiadas por personagens podem se beneficiar muito com a introdução de interação para trazer personalidade à experiência. Você pode aproveitar as características humanas dos mascotes. Quando você não tem nada visual em sua marca, ainda pode adicionar personalidade usando velocidade e frequência. Pense no Google e seus peculiares pré-carregadores de pontos ou ativação de comando de voz que trazem uma abordagem amigável e divertida de uma forma simples.

Construir uma conexão emocional com o usuário é uma ótima maneira de obter visitas regulares. O design de interação pode fazer com que a tecnologia pareça mais centrada no ser humano - o que é sempre bom ter como objetivo.

Introduzindo a interação em seu processo de design

Esboços e composições de baixa fidelidade

Ferramentas de design de interação

• Keynote: Se você está procurando algo bruto e simples para transmitir sua ideia, o Keynote é a vitória rápida.
• Adobe Animate: mantenha tudo dentro da Adobe e cruze perfeitamente com outras ferramentas. Isso é ideal para animação ilustrativa.
• Tumult Hype: Se você está familiarizado com a interface do Sketch e sabe como lidar com as linhas do tempo, você se sentirá em casa com o Tumult.
• Framer: Esta é uma ferramenta de design de interação desenvolvida para um propósito que possui recursos realmente avançados para combinar sua animação com o JavaScript.
• Principle: Com um link Sketch agradável, Principle está se tornando o ponto de partida para a interação. É relativamente simples de aprender e o que você pode conseguir com ele é ótimo.
• Atômico: adicione dados, lógica e variáveis ​​para tornar suas interações tão práticas quanto a construção final. Isso é para o designer avançado que possui algum conhecimento de codificação.
• Invision Studio: Ainda é o começo, mas o Invision Studio tem ótimas capacidades e semelhanças com o Principle. O tempo dirá se isso será avançado o suficiente para dominar o mercado de prototipagem e colaboração.

Notas detalhadas de transferência

Deixar as notas do desenvolvedor é um pomo de discórdia se você estiver em um ambiente altamente colaborativo, mas se estiver trabalhando remotamente, notas detalhadas sobre suas ideias e protótipos com uma boa transferência podem garantir que suas interações sejam levadas em consideração na construção.

Compile uma biblioteca de demos e inspiração

Adicione-o ao seu sistema de design

Se você resolveu com sucesso um problema comum (testado adequadamente) com interação, coloque-o em seu sistema de design ou biblioteca de padrões para reutilizá-lo em cenários semelhantes sem o investimento de tempo para fazer outra coisa do zero.

Para obter ajuda com web design e experiência do usuário (UX), entre em contato conosco hoje mesmo.

Se precisar de ajuda com sua experiência de usuário, não hesite em nos contatar.