Microinteractions: projetando com detalhes
“Os melhores produtos fazem duas coisas bem: características e detalhes. Recursos são o que atraem as pessoas para o seu produto; detalhes são o que os mantém lá ”, diz Dan Saffer. A importância dos detalhes não pode ser super enfatizada. Os detalhes fazem com que os usuários adorem ou odeiem um aplicativo ou website. Microinteractions são esses detalhes. Eles podem ser facilmente ignorados no esquema de design global, mas eles realmente mantêm toda a experiência juntos.
Neste artigo, explicarei o que é uma microinteração, por que elas são importantes e fornecem alguns ótimos exemplos.
O que é uma microinteração
Microinteractions são momentos sutis centrados em torno de realizar uma única tarefa. Quase todas as aplicações ao nosso redor são preenchidas com microinterações.
O exemplo mais conhecido de uma microinteração existe muito antes de os computadores serem inventados. A chave liga / desliga costuma ser a primeira microinteração que as pessoas encontram com um produto.
Alguns outros exemplos de microinterações específicas incluem:
- A notificação de vibração junto com o ícone do modo silencioso em exibição quando você alterna um iPhone para silenciar.
- O padrão de interface do usuário pull-to-refresh. Ao conectar o desejo do usuário de encontrar mais conteúdo com a ação de atualização, a experiência se torna mais perfeita.
Crédito da imagem: Ramotion
- O botão 'like' nas redes sociais, que destaca as mudanças usando animações interativas. Esse feedback informa os usuários de que eles estão na lista daqueles que curtiram a postagem.
Crédito da imagem: Dribbble
Por que eles funcionam
Em suma, as microinterações aprimoram o UX tornando a interface do usuário menos máquina e mais humana. Muitas vezes pensamos em olhar e sentir e como isso se relaciona com o design. Quando pensamos em microinterações, elas praticamente equilibram como os usuários se sentem em relação ao produto, serviço ou marca. As microinteractions ajustam o design centrado no ser humano por:
- Fornecendo feedback imediato - O feedback visual atrai o desejo natural de reconhecimento do usuário. O usuário sabe imediatamente que sua ação foi aceita e quer se deliciar com uma recompensa visual.
- Atuando como facilitadores para interação - Microinteractions tem o poder de encorajar os usuários a interagir de fato. Eles podem orientar os usuários sobre como trabalhar com o aplicativo.
- Trazendo prazer - Microinteractions são a oportunidade perfeita para um pequeno prazer extra no design sem prejudicar a experiência principal.
Benefícios adicionais
Como as microinterações são breves por natureza, elas devem ser projetadas para uso repetido. Microinteractions bem desenhados são capazes de criar:
Laço de hábito
Microinteractions são os principais componentes dos loops de hábitos. Hábitos são formados quando as pessoas executam as mesmas ações repetidamente. O laço de hábito típico consiste em três elementos:
- Sugestão - Gatilho que inicia a ação
- Rotina - Em resposta à sugestão, você executa uma ação
- Recompensa - Um benefício obtido ao concluir a rotina, motivo para concluir a ação
Quanto mais forte a recompensa, mais forte se torna o hábito.
A notificação do Facebook sobre nova solicitação de amizade é um bom exemplo de loop de hábitos: crachá vermelho e ícone branqueado ( cue ) indicam que há uma nova solicitação, que faz o usuário clicar no ícone ( rotina ) para ver informações sobre a pessoa ( recompensa ). Depois de um tempo, os usuários clicam automaticamente no ícone quando veem o selo vermelho.
Momentos de assinatura
Se bem feito, microinterações podem ser momentos de assinatura que aumentam a fidelidade do cliente. Os momentos de assinatura são microinterações que foram elevadas para fazer parte da marca. Pense no botão Like do Facebook. Torna-se parte natural da interface do Facebook. Se o Facebook de repente remover esse recurso, os usuários perceberão e pensarão que o aplicativo está corrompido.
Identificando oportunidades
Parte da beleza das microinterações é que elas podem ser inseridas em vários lugares, em torno de qualquer ação potencial. Microinteractions são bons para:
Realce de alterações
As microinterações podem direcionar a atenção do usuário . Em muitos casos, as animações são usadas para atrair a atenção do usuário para detalhes importantes (ou seja, notificações).
Créditos de imagem: Dribbble
Minimizar o esforço do usuário
Autocomplete é um ótimo exemplo de microinteração. A digitação tem alto custo de interação; É propenso a erros e consome tempo mesmo com um teclado completo (e ainda mais em uma tela sensível ao toque). O preenchimento automático ajuda o usuário a fornecer a resposta certa com mais rapidez e sem erros tipográficos. Conforme você digita cada letra, o sistema fará seus melhores palpites quanto às palavras que você está tentando encontrar.
Créditos de imagem: fancy.surge.sh
Fornecendo feedback para mostrar o que foi realizado
Microinteractions podem reforçar as ações que um usuário está executando. Seguindo o princípio “ show, don't tell” , você pode usar o feedback animado para mostrar o que foi realizado. Dentro Exemplo da listra , quando o usuário clica em "Pagar", um giratório aparece brevemente antes que o aplicativo mostre o estado de sucesso. A animação Checkmark faz com que o usuário se sinta como se tivesse feito o pagamento com facilidade e os usuários apreciam detalhes importantes.
Fornecer informações de status
O primeiro princípio heurístico de usabilidade de Jakob Nielsen afirma: o sistema deve sempre manter os usuários informados sobre o que está acontecendo. O indicador de digitação no bate-papo é um ótimo exemplo de microinterações que fornecem informações de status. Ele aparece na tela do seu amigo enquanto você está escrevendo uma mensagem no bate-papo.
Créditos de imagem: Dribbble
Validar dados do usuário
Um dos aspectos mais importantes e muitas vezes negligenciados do design de formulários é o tratamento de erros . É da natureza humana cometer erros, e sua forma provavelmente não está isenta de erro humano. Os usuários não gostam quando passam pelo processo de preenchimento de um formulário, apenas para descobrir no momento da apresentação, que cometeram um erro. É aqui que a microinteração de validação faz parte de uma forma amigável ao usuário. A validação em linha em tempo real informa imediatamente os usuários sobre a exatidão dos dados fornecidos. Essa abordagem permite que os usuários corrijam os erros mais rápidos sem precisar esperar até que pressionem o botão Enviar para ver os erros. Quando feito corretamente, pode transformar uma interação ambígua em uma clara.
Conclusão
O design está nos detalhes. Mesmo pequenos detalhes merecem atenção, porque todos esses pequenos momentos compõem a sensação, eles se juntam para formar um belo produto holístico.
“A diferença entre os produtos que amamos e aqueles que simplesmente toleramos são frequentemente as microinterações que temos com eles.” - Dan Saffer
Se você se preocupa com a experiência do usuário, deve se preocupar com microinterações. Porque o seu produto é tão bom quanto a menor microinteração que as pessoas têm com ele.