A experiência do usuário é essencial para a forma como os usuários interagem com nossas marcas e as percebem. Quanto mais entendermos sobre nossos usuários, mais poderemos dar a eles o que precisam da maneira que desejam e esperam que aconteça. À medida que a tecnologia avança, espera-se que os fornecedores tornem a jornada do cliente mais simples e mais agradável em cada estágio e, muitas vezes sem saber, para o usuário, esses pequenos detalhes de design de interação fazem a diferença entre um produto aceitável ou funcional e um excelente.
O que são microinterações?
De acordo com o Nielsen Norman Group,
Microinterações são pares de gatilho-feedback em que (1) o gatilho pode ser uma ação do usuário ou uma alteração no estado do sistema; (2) o feedback é uma resposta estritamente direcionada ao gatilho e é comunicado por meio de pequenas alterações altamente contextuais (geralmente visuais) na interface do usuário.
As microinterações são (geralmente) animações pequenas e sutis que tornam os aplicativos digitais mais interessantes, intuitivos, envolventes e eficientes. Elas aumentam a qualidade da experiência do usuário, acrescentando validação às ações e, muitas vezes, com entretenimento que aumenta a força da marca.
Elas nem sempre são animações visuais; podem ser hápticas ou acionadas por áudio. Seu relógio esportivo pode emitir um zumbido quando você está se aproximando de uma curva ou entrando em uma zona de frequência cardíaca diferente, ou suas notificações reproduzem sons reconhecíveis que você associa a determinados aplicativos de mensagens, contas de e-mail ou realizações.
Benefícios das microinterações
Apesar de parecerem pequenos toques que permitem que o criador se "exiba" um pouco, os benefícios são muitos e de valor real. Experimentamos centenas desses pequenos toques em nossa vida cotidiana, na maioria das vezes sem perceber.
- Incentivar o engajamento
- Aumentar a satisfação do usuário
- Reduzir a frustração
- Fornecer feedback do sistema
- Mantenha os usuários informados em tempo real
- Exibir o status do sistema ou do processo
- Aprimorar a usabilidade
- Tornar os produtos mais intuitivos e interativos
- Reduzir as falhas de usabilidade
- Introduzir interações de IU mais suaves
- Acelerar a jornada do cliente
- Evitar erros do usuário
- Simplificar tarefas complexas
- Gamificar os processos, tornando-os mais divertidos, aderentes e interessantes, aumentando a retenção
- Reforça o tema, a voz e o tom da marca
Práticas recomendadas de design de microinteração
Identificar e entender o problema do usuário
Todo bom produto, experiência ou serviço é projetado para resolver um problema. Ao projetar microinterações, definir esses problemas e abordar como resolvê-los pode ser óbvio, mas é mais provável que eles sejam revelados durante a pesquisa do usuário.
Mantenha as microinterações naturais
Os designers devem evitar animações estranhas que complicam ou confundem o processo. As microinterações são naturais e fluidas, fornecendo feedback visual simples e agregando valor ao processo. Elas nunca devem ser excessivamente complicadas, desviar o foco verdadeiro ou apresentar detalhes desnecessários. O mais importante é que elas devem se concentrar em uma única tarefa.
Testar e iterar as descobertas da pesquisa do usuário
A fase de pesquisa do usuário cria uma oportunidade ideal para localizar problemas e oportunidades e para garantir os melhores resultados. Como especialistas em pesquisa de UX, não podemos deixar de enfatizar a importância dessa parte do processo de UX.
Desconstruindo o design de microinteração
Estrutura de microinteração
Apesar de nossa definição anterior do Nielsen Norman Group sugerir que as microinterações são um sistema de dois estágios, cada interação tem quatro partes essenciais.
- Gatilhos ? Seja acionado pelo usuário ou pelo sistema, é a primeira parte do processo, alertando o usuário sobre uma ferramenta, ação ou informação importante. A gatilho iniciado pelo usuário é acionado, como está implícito, por uma solicitação do usuário ao clicar, deslizar ou outro. A acionador iniciado pelo sistema é acionado quando o software detecta que determinadas qualificações estão sendo atendidas.
- Regras ? A regra determina o que acontece após o acionamento inicial. Se o usuário clicar, deslizar, tocar ou falar, uma animação será reproduzida, um processo útil será iniciado, um lembrete será definido ou um item será adicionado a uma cesta?
- Feedback ? Manter os usuários informados garante que eles se sintam seguros e que sua solicitação esteja sendo processada. A validação e a segurança são grandes fatores psicológicos na experiência do usuário, portanto, manter todos informados em todas as etapas fornece uma atualização sobre o status do sistema e a pequena dose de dopamina que mantém os usuários satisfeitos.
- Loops e modos ? O estágio final determina se o ato é repetível ou uma transação única. Os loops e os modos determinam as meta-regras de cada mircrointeração: um deslize para recarregar uma página ou pedir à Siri para responder às suas perguntas pode ser acionado quantas vezes forem necessárias (loops), enquanto que adicionar um item a uma cesta só acontece uma vez (a menos, é claro, que você adicione uma opção para ?comprar outro? ou ?editar detalhes da compra?).
Exemplos de microinterações
Nossa seleção de exemplos não é de forma alguma exaustiva; é apenas uma gama de usos comuns. Eles são apenas alguns dos elementos digitais que você provavelmente encontrará todos os dias e que agregam valor à sua experiência on-line, mas que, na maioria das vezes, não são considerados como garantidos.
Barra de rolagem
Nos primeiros anos da Internet, uma barra de rolagem tinha uma função física: ser agarrada e movida para navegar pela página. Agora, elas são um recurso animado que nos mostra em que ponto da página estamos e quanto conteúdo a página contém.
Puxe para atualizar a animação
Um recurso comum em smartphones, a microinteração pull-to-refresh pode recarregar uma página, receber novos e-mails, atualizar as previsões do tempo e muito mais. Uma roda giratória, um gif com a marca ou uma barra de progresso nos permite saber que a solicitação foi reconhecida e está sendo processada.
Animação Swipe
O que seria dos aplicativos de namoro sem o famoso deslizar de dedo? A animação de uma cruz, um tique ou uma vibração de corações fornece feedback em tempo real sobre nossas decisões.
Alarme digital
Um exemplo de resposta auditiva a um acionador iniciado pelo sistema: em um horário específico, seu alarme soará. No entanto, em seu smartphone, tablet ou computador, ele é apoiado por um feedback visual que exige uma resposta à conclusão da tarefa.
Notificação
O mesmo vale para as notificações. O feedback sonoro e visual fornece atualizações e alertas sobre eventos, opções ou promoções solicitados (e, muitas vezes, para aqueles em que você não imaginava ter se inscrito!), projetados para atrair de volta um usuário desinteressado.
Erro de senha
Em vez de saltar para uma nova página de erro que exige o preenchimento repetido dos campos de entrada, a validação em linha economiza tempo e frustração. Além disso, a configuração de novas contas pode ser simplificada com o feedback de erros de senha em linha, como a garantia do número correto de letras, dígitos e caracteres especiais.
Hotspots de integração
Há muito a aprender quando você explora um novo software ou plataforma. Seja um pequeno ponto pulsante ou um balão de fala bem posicionado, o usuário sabe instantaneamente como seguir esse tutorial iniciado pelo sistema. O excesso de animações na página de uma só vez seria esmagador e desajeitado, portanto, seguindo um caminho definido, os novos usuários aprendem a navegar pelos recursos e a digeri-los da maneira mais fácil possível, um de cada vez.
Status de bate-papo e mensagens on-line
Fornecer feedback visual aos usuários de aplicativos de mensagens é um ótimo exemplo de como tornar um aplicativo aderente. Com três pontos saltitantes, reconhecemos imediatamente que o destinatário leu nossa mensagem e está respondendo. Como alternativa, no WhatsApp, por exemplo, o feedback visual fica na parte superior da página, informando quando o destinatário está on-line, ausente ou digitando. Ame ou deteste, esses ticks azuis duplos fornecem informações imediatas sobre sua mensagem.
Muitos sites têm grandes quantidades de informações para compartilhar, o que exige uma arquitetura de informações bem estruturada e fácil de navegar. Com tantas informações e apenas uma tela, muitas vezes minúscula, disponível, colocar tudo isso de forma organizada por trás de um ícone reconhecível (as três linhas horizontais conhecidas como hambúrguer) pode ser animado para deslizar à medida que o usuário clica em cada categoria, tornando simples e direto encontrar o que queremos.
Tornar mais eficientes os processos de preenchimento de formulários e de checkout
Receber uma mensagem de erro inesperada pode ser incrivelmente frustrante, por isso muitos formulários e checkouts on-line têm microinterações acionadas pelo usuário para adicionar prevenção de erros, simplificando seus processos. Seja a validação em linha para formatos de e-mail, sugestões de campos obrigatórios ou a introdução de caixas de calendário para especificar datas precisas... cada uma delas foi projetada para nos levar à linha de chegada sem precisar voltar para retificar erros que possam ter passado despercebidos. Essa técnica também simplifica o processo de criação de contas, facilitando as inscrições e diminuindo a probabilidade de abandono do usuário.
Efeitos de mouseover e alterações no cursor
Estamos acostumados a passar por cima de imagens, caixas de informações e slides para testar se eles são clicáveis, mas ter uma instrução animada? clique para visitar nossa página de contato? ou ?segure e mova para reordenar suas opções?? oferece ao usuário engajado o tipo exato de feedback que ele está procurando.
Expansão da caixa de pesquisa
Uma caixa de pesquisa que se expande com opções predefinidas ou que apresenta sugestões automaticamente à medida que você digita é outro ótimo exemplo de adição de função e valor à experiência do usuário de seus produtos e de seus usuários.
Humanização da caixa de bate-papo
Para criar uma experiência mais emocional no chatbox, a animação de sua resposta é cronometrada para ser eficiente, mas também para representar o comportamento humano. Depois que um usuário enviar uma pergunta ou solicitação, ele verá os três pontos saltitantes sugerindo que alguém está digitando, apesar de ser uma resposta de IA. Dar ao seu chatbox um avatar humano proporciona a mesma conexão emocional que você sentiria por uma pessoa.
Maneiras inteligentes de usar a animação
Adicionar informações, promoções ou informações às telas de espera à medida que as barras de progresso se expandem, giram ou saltam pela tela agrega valor aos seus usuários. É uma ótima oportunidade de fazer upsell ou educar compradores, usuários ou membros sobre produtos que eles talvez não tenham explorado.
Se for adequado à sua marca, acrescentar capricho ou uma piada (todos nós já vimos uma página 404 divertida e de bom gosto que nos fez sorrir) pode não acrescentar nada de imediato à visita do usuário, mas fortalecerá o relacionamento com o usuário, aumentando a fidelidade do cliente.
Exemplos bem-sucedidos de microinteração para inspirá-lo
Todos nós sabemos quais elementos de sites e aplicativos nos impressionam mais, quais agregam valor às nossas experiências, tornando nossas interações mais fáceis, mais divertidas e, em última análise, mais gratificantes. Aqui estão alguns que mudaram significativamente a forma como usamos nossos produtos digitais.
O recurso React do Facebook
Quando o Facebook substituiu o botão "Curtir" de um simples polegar para cima por uma opção de reações? pressionando e segurando o ícone original? cada nova opção emotiva tinha um pequeno ícone e uma animação exclusivos. Sem dúvida, isso mudou a forma como comunicamos aos outros como nos sentimos da maneira mais rápida e simples possível.
A solução da Apple e do Google para o controle por voz
Tanto a Apple quanto o Google precisavam informar aos usuários que suas solicitações de controle de voz estavam sendo atendidas. Todo o processo é feito com um feedback visual mínimo, mas simples e inteligente.
À medida que você faz sua solicitação, os pontos flutuantes do Google Assistant aparecem para que você saiba que ele está ouvindo; os pontos se transformam em ondas sonoras para que você saiba que ele está captando sua voz enquanto você fala, e ele fornece o feedback com sua resposta. A Siri faz a mesma coisa, embora com sua imagem de marca abstrata, vibrando e mudando de forma para mostrar que está presa à sua voz.
Sumário
Criar interações suaves que reduzam a frustração e permitam que os usuários fluam sem problemas de um estado ou estágio para outro é essencial para a experiência ideal do usuário. As microinterações bem projetadas e fornecidas proporcionam exatamente isso.
Como pesquisadores de experiência do usuário, é nossa função determinar a versão ideal para aqueles que projetam microinterações. A pesquisa e o teste de usuários nos permitem aprimorar os melhores desempenhos com testes A-B e de protótipo. A fase de pesquisa do usuário reduz as falhas na entrega da mesma forma que muitas das microinterações que acabam em nossos envios de formulários e processos de checkout.
Se quiser saber mais sobre como a pesquisa com usuários pode ajudá-lo a descobrir oportunidades de inovação para aprimorar seu design de microinteração e experiência do usuário, envie-nos um e-mail para hello@ux247.com.
[...] publicamos recentemente uma página que explora as microinterações no design de UX, pois acreditamos que elas são elementos tão importantes para o usuário [...]
[...] Animações de confirmação e determinadas microinterações [...]