15 microinterações de onboarding para inspirar seu design

15 exemplos de microinterações de onboarding

Microinterações para personalização

Quando você pensa em um alfaiate de alto nível, o que vem à sua mente? Alguém que trabalha meticulosamente cada detalhe, muito lenta e cuidadosamente, com agulhas muito pequenas e linhas finas, talvez.

Tudo deve ser uma perfeição total!

Mas o processo pode parecer um pouco cansativo – e até entediante – para o cliente, mesmo que ele fique muito feliz com os resultados...

O mesmo vale para o mundo SaaS.

Essas longas pesquisas de onboarding são cruciais para que as equipes de produtos adaptem as experiências individuais às necessidades e preferências individuais.

Mas vamos encarar os fatos.

Eles podem ser um pouco monótonos de vez em quando.

É aí que entram as microinterações. Elas acrescentam um pouco de elegância – lindas barras de carregamento, alguns gifs e ilustrações, tooltips, pontos brilhantes e pulsantes, mensagens pop-up...

Aqui estão alguns grandes exemplos👇

1- O Youtube Kids mantém o engajamento dos novos usuários a partir da página de login

O YouTube Kids é uma plataforma projetada para fornecer conteúdo adequado à idade, garantindo um ambiente seguro para explorar novos interesses e aprender por meio de vídeos para os pequenos.

A página dá as boas-vindas aos novos usuários com uma página de login:

Mas aqui está o problema: você não pode criar uma conta a menos que seja um adulto.

Ao clicar no botão "Sou criança", você não poderá continuar com as etapas seguintes do onboarding!

E quando você clica no botão "Sou pai/mãe", são feitas várias perguntas para decidir sobre as configurações de segurança da conta.

Eu adoro o fato de eles manterem a animação da chave de voo consistente durante todo o processo!!!

A plataforma pergunta sobre a idade da criança para personalizar as recomendações de conteúdo.

E, finalmente, pouco antes de concluir a configuração e encaminhar o usuário para a UI do produto, o Youtube Kids apresenta alguns dos recursos, mostrando onde encontrá-los e como usá-los.

‎Principais conclusões das microinterações do YouTube Kids

✅ Botões de pular

✅ Tema consistente e design de animação

2- O Pinterest garante a personalização com o onboarding

Seja para uma lista de vocabulário, um itinerário de viagem ou uma receita, o Pinterest é a minha opção para obter informações e inspiração instantâneas. Não é bem uma plataforma de redes sociais como o Instagram, nem é apenas um mecanismo de pesquisa como o Google.

O Pinterest é o meio-termo perfeito para muitos de nós!

E é assim que ela garante uma experiência única para seus usuários 👇

‎Você consegue ver como o feed em segundo plano muda à medida que o usuário adiciona suas áreas de interesse? Primeiro vêm os papéis de parede, depois as flores e as fotografias e escritos inspiradores...

Mas reunir todo esse conteúdo leva tempo, obviamente.

Em vez de entediar as pessoas com uma tela de carregamento vazia, o Pinterest usa esse tempo para lembrá-las de que a qualidade do feed depende da atividade do usuário e as estimula a continuar no gancho!

‎👉 Saiba mais sobre gatilhos e ganchos.

Principais conclusões das microinterações do Pinterest

✅ Personalização em tempo real

✅ Uso eficaz da tela de carregamento

3- Blinkist elimina o espaço vazio com microinterações

Não suporto quando sou bombardeado com recomendações aleatórias logo após criar uma conta para um produto. Mas, por outro lado, ver absolutamente nada em minha página inicial é igualmente frustrante.

Sou uma criança mimada? Talvez.

Sou um usuário comum? Definitivamente.

O Blinkist, um aplicativo que oferece insights condensados e resumos de livros de não ficção, lida habilmente com esse dilema, fornecendo aos usuários sugestões personalizadas com base em uma rápida pesquisa interativa sobre seus gostos e interesses.

Veja como fica:

O Blinkist começa fazendo perguntas mais amplas antes de se aprofundar em questões específicas. Começa com preferências de gênero, seguido de assuntos específicos na próxima etapa e, por fim, títulos de livros específicos.

Além disso, você vê os livros voando para a esquerda e para a direita, dependendo da preferência do usuário?

Quem disse que você só pode deslizar para a direita em aplicativos de namoro?

Principais conclusões das microinterações do Blinkist

✅ Pesquisa curta e concisa

✅ Estrutura lógica para as perguntas

✅ Criativo e divertido! Ou seja, uma ótima primeira impressão

O que importa é como o usuário se sente, não se esqueça.

4- O Microsoft Edge aprimora a experiência do usuário com a introdução de temas durante o onboarding

Alguns produtos envolvem os usuários em uma caça ao tesouro para descobrir suas opções de personalização e vários temas.

Já os produtos bem-sucedidos, como o Microsoft Edge, apresentam opções e possibilidades de personalização desde o início, eliminando a necessidade de os usuários embarcarem em uma "caça ao tesouro" para descobri-las.

Não tem certeza? Ou não sabe qual é a diferença entre eles?

Aqui, dê uma olhada em cada um deles!

Principais conclusões das microinterações do Edge

✅ Personalização em tempo real

Microinterações para apresentação do produto

Como eu disse anteriormente, as microinterações não são apenas animações, efeitos especiais de deslizamento ou páginas de carregamento interessantes. Elas podem ser tours guiados por produtos acionados por tooltips interativos ou checklists interativos.

Desde que estejamos falando de um pequeno detalhe de uma UI que tenha um propósito específico de interagir com o usuário, estamos falando de microinterações.

Está claro?

Agora, vamos ver alguns exemplos!

5- A Wistia incentiva os usuários a explorar diferentes recursos com um checklist

A Wistia é uma plataforma de marketing de vídeo que permite aos profissionais de marketing gravar, editar e analisar seu conteúdo de vídeo.

Ao criar uma conta, um checklist de onboarding lhe dá as boas-vindas ao produto:

‎

O que chama a atenção é que o primeiro item do checklist já está marcado, o que dá uma vantagem ao usuário e motiva mais interação com ele.

Mas o que torna esse checklist especial, além de seu design?

Quando um usuário clica nas tarefas/itens da lista, ele é levado diretamente para a página do recurso para que possa experimentá-lo!

Principais conclusões das microinterações da Wistia

✅ Indicador de progresso original

✅ Tarefas fáceis de concluir que destacam os principais recursos do produto

6- A Crunch integra checklists de onboarding com guias interativos

Os checklists interativos são legais.

Que tal checklists interativos com guias interativos?

INCRÍVEL!

A Crunch é uma ferramenta de contabilidade e gerenciamento sediada no Reino Unido.

"Você vive a vida, nós cuidamos dos números", eles dizem.

Um lema bastante facilitador e centrado no cliente, eu diria. E essa mentalidade também permeia todo o produto!

Eles dão as boas-vindas aos novos clientes com um checklist de onboarding, destacando os principais casos de uso e recursos do produto, como o envio de uma fatura e o registro de despesas.

A estrela do show não é a lista em si, mas sim o que ela contém:

Guias interativos.

Todas as tarefas no checklist servem como guias, mostrando onde estão as coisas e como funcionam, explicando cada etapa meticulosamente e, o mais importante, de forma interativa.

Por exemplo, aqui está a aparência do tour guiado pelo produto:

‎‎Principais conclusões das microinterações da Crunch

✅ Interatividade total

✅ Barra de progresso + botão de saída

✅ Fundo escurecido para melhorar o foco

✅ Microcópia curta, precisa e informativa

7- Smartcat usa tooltips pulsantes para conduzir os usuários por um tour guiado pelo produto

O Smartcat é uma ferramenta baseada na nuvem para gerenciamento de projetos de tradução e localização, servindo também como uma plataforma de trabalho. O que você deve saber sobre o Smartcat, caso nunca o tenha usado antes, é que ele tem muitos recursos e, portanto, muitas subpáginas em sua UI e um pouco de curva de aprendizado.

Para um produto abrangente como o Smartcat, geralmente há dois riscos:

1. O novo usuário se sente um pouco perdido em meio à abundância de recursos.
2. Eles não compreendem totalmente o potencial da ferramenta e se afastam prematuramente.

Veja como o Smartcat garante que seus novos usuários não se percam na tradução 👇

Está vendo os pontos pulsantes com tooltips?

Eles são os salvadores de jovens tradutores e novos usuários.

Principais conclusões das microinterações do Smartcat

✅Os pontos pulsantes são muito atraentes

✅ Os tooltips não bloqueiam nada na página

Microinterações para explicar e apresentar

Se for possível utilizar microinterações para apresentar seu produto e realizar breves tours guiados pela interface do usuário (UI), também é possível empregá-las para fornecer informações adicionais sobre alguns dos recursos mais complexos ou mais recentes?

COM CERTEZA!

8- Drops garante uma experiência gamificada suave com microinterações

O Drops é um aplicativo inovador de aprendizado de idiomas que integra perfeitamente a gamificação com a aquisição de idiomas, criando uma experiência de aprendizado envolvente e eficiente para seus usuários.

Mas o problema da inovação e da gamificação é o seguinte:

Pode ser confuso para usuários de primeira viagem...

Felizmente, esse não é o caso dos usuários do Drops, graças às microinterações!

O estudo do vocabulário é muito mais divertido quando faz parte de um jogo, e o Drops sabe disso. No entanto, como dissemos, não é divertido jogar um jogo quando você não conhece suas regras!

É por isso que, na primeira rodada de cada novo "jogo", o Drops informa o usuário sobre o que fazer (onde arrastar e soltar o quê, por exemplo) e o incentiva a tentar primeiro.

Essa abordagem evita que os usuários tenham que se esforçar para descobrir suas próximas etapas por conta própria e garante que eles não afetem inadvertidamente suas pontuações de aprendizado do usuário enquanto navegam na plataforma.

Principais conclusões das microinterações do Drops

✅ Gamificação + Educação = Perfeição

9- O tooltip da Zakeke fornece explicações adicionais

A Zakeke é uma plataforma digital que permite que as empresas ofereçam produtos personalizáveis. Eles oferecem um personalizador visual de produtos, um configurador de produtos 3D, visualizadores 3D e AR e soluções de teste virtual.

Embora tenha muitos recursos com detalhes intrincados, sua UI é fácil de navegar e entender, graças a todos os tooltips e hotspots pulsantes!

Assim:

Algumas informações precisam de lembretes ocasionais, especialmente porque mencioná-las apenas durante o processo de onboarding pode não ser suficiente. No caso da Zakeke, eles fornecem lembretes e observações gentis antes de os clientes realizarem ações que talvez não pretendessem.

Está se sentindo inseguro?

Basta passar o mouse sobre o pequeno ponto para verificar se você está procedendo da maneira desejada.

Principais conclusões das microinterações da Zakeke

✅ Botão "Não mostrar novamente"

✅ Os gatilhos são visíveis e chamativos

✅ O modelo Hover-over mantém a integridade da página

10- O Bubble fornece pré-visualizações de recursos por meio do efeito Hover

Clicar em um botão e passar o mouse sobre um botão leva quase o mesmo tempo.

Mas, de alguma forma, não parece ser assim.

Clicar em um botão geralmente está associado à conclusão de uma tarefa, o que pode não ser desejável se não tivermos certeza do resultado. Por outro lado, passar o mouse é menos comprometedor – trata-se de verificar e avaliar.

Além disso, há uma incerteza associada ao clique, pois não temos certeza se seremos redirecionados para uma página diferente. Ao passar o mouse, sabemos que estamos ficando.

É assim que funciona a psicologia do usuário, eu acho.

O Bubble é uma plataforma de programação visual sem código que permite aos usuários projetar web apps e fluxos de experiência do usuário (UX). Ele tem uma interface de usuário (UI) de arrastar e soltar fácil de usar.

Além disso, a facilidade de uso do Bubble vai além da interface e atende à psicologia do usuário, garantindo uma experiência tranquila durante todo o processo.

Eis o que quero dizer 👇

Vamos supor que você queira criar um botão e tenha um menu com vários designs de botões à sua frente. Mas você não tem certeza de como esse design realmente se parece.

O que seria muito mais seguro do ponto de vista psicológico?

a. Clicar em um botão de botão

b. Ver o design apenas passando o mouse sobre ele

Para mim, a resposta é b, sem dúvida.

E o Bubble também se sente da mesma forma:

Sem compromisso, sem precisar esperar.

Passe o mouse sobre o botão e voilà, aqui está uma pré-visualização do design do botão.

Principais conclusões das microinterações do Bubble

✅ Economiza o tempo de atualização regular da página/design

✅ Não assusta o usuário – entende a psicologia do usuário

11- O hotspot Hover-Over da Indicata anuncia seu novo recurso

A Indicata é uma plataforma digital orientada por dados voltada para o setor automotivo e que oferece insights aos seus clientes sobre gerenciamento de estoque, estratégias de preços e desempenho do mercado.

E aqui está como eles garantem a alta adoção de recursos, mesmo para os mais novos:

Como você pode ver, eles utilizam um anúncio de hotspot ativado ao passar o mouse para mostrar o novo recurso. Eles também integram um guia interativo com o anúncio em vídeo, o que elimina qualquer possível confusão para os usuários.

Principais conclusões das microinterações da Indicata

✅ Totalmente interativo

✅ Uso eficaz de multimídia

Microinterações para recompensas

Minha avó sempre diz: "O que você faz é para mim, mas o que você aprende é para você."

Embora seja verdade que nossas ações e aprendizados geralmente são para o crescimento pessoal, não custa nada comemorar um pouco de vez em quando.

Imagine se alguém jogasse confete ou concedesse uma medalha ao enviar esse e-mail – isso certamente aumentaria a motivação para futuros empreendimentos...

Não estou pedindo um unicórnio voador (ou será que estou?)

🌈🦄

12- A Asana motiva seus usuários com uma animação após a conclusão de uma tarefa

A Asana é uma das ferramentas de gerenciamento de projetos mais populares e bem-sucedidas disponíveis no mercado.

Eles começam personalizando a interface do usuário (UI) do produto na tela de onboarding, coletando dados sobre as preferências de design e a programação do usuário para personalizar um produto com aparência mais relevante.

Além disso, eles fornecem uma pré-visualização em tempo real!

Depois vem o unicórnio voador 🦄

Trata-se de uma animação de recompensa que aparece na tela quando você conclui uma tarefa da sua lista de tarefas/calendário, motivando-o a continuar.

As recompensas na Asana vão além das tarefas individuais. O aplicativo também recorre a um programa de recompensas distinto que incentiva o uso e o engajamento com a plataforma.

Como você pode ver, há uma série de tarefas que a Asana recomenda que você conclua para utilizar plenamente as plataformas, como convidar colegas de trabalho, dar uma olhada no manual do produto ou experimentar vários recursos que você ainda não experimentou.

Para oferecer motivação extra para a conclusão de tarefas, a Asana introduz níveis de realização. Os usuários começam como iniciantes e, à medida que cumprem mais tarefas dentro da lista, seu nível avança.

Por exemplo:

‎

Ao concluir uma tarefa, como mudar o tema, a barra de progresso avança, enquanto o número de tarefas restantes necessárias para subir de nível diminui.

‎

Principais conclusões das microinterações da Asana

✅ Animações únicas

✅ Pré-visualização da personalização em tempo real

✅ Níveis de realização que motivam o engajamento dos usuários com o produto

Ótima prática, Asana! 💯

13- O app Structured cria um senso de realização nos usuários

Voar com animais fantásticos é um pouco demais para o núcleo de design de seu produto?

Não há problema.

O Structured, um aplicativo de planejamento, alcança a mesma sensação de realização com animações muito menores.

Observe as animações suaves e sutis:

Meu principal argumento a favor das listas de tarefas físicas em papel e caneta em relação às digitais sempre foi a satisfação derivada de riscar fisicamente uma tarefa concluída. 📝

Mas depois de ver as animações do checklist de onboarding do Structured?

Não tenho mais nada a dizer, de fato.

Principais conclusões das microinterações do Structured

✅ Incorporação de diferentes animações

14- O Canva comemora seus usuários ao concluir a configuração inicial

No início, falamos sobre os riscos de longas pesquisas de onboarding de usuários para personalização, lembra-se?

O Canva, uma das ferramentas de design online mais populares, reconhece o desafio e a possível monotonia da configuração da conta. E para demonstrar apreço, eles comemoram as conquistas dos usuários jogando confete!

Uau, você criou sua conta 🎉🎉

Principais conclusões das microinterações do Canva

✅ Você pode comemorar seu esforço/sucesso com uma animação divertida

15- Toggl usa hotspots para parabenizar seus usuários

Você pode integrar diferentes microinterações e criar uma série macro de microinterações também.

Como o Toggl Track.

O Toggl é uma ferramenta de controle de tempo usada principalmente por motivos de produtividade, alocação de recursos e faturamento.

O Toggl oferece um tour interativo pelo produto, após o qual parabeniza o usuário com um hotspot final e agradece o tempo e o esforço dedicados ao tour.

Principais conclusões das microinterações do Toggl Track

✅ Você pode misturar e combinar diferentes elementos interativos para criar uma experiência de usuário (UX) holística e contínua

✅ Você não precisa de animações pop-up, GIFs comemorativos sofisticados ou séries complicadas de códigos para criar microinterações

Conclusão

As microinterações podem parecer pequenos elementos de design que passam despercebidos, em vez de animações funcionais ou ferramentas poderosas para reduzir o atrito e melhorar o engajamento e a experiência do cliente.

No entanto, eles são muito mais do que seu componente de design.

Eles orientam o usuário. Notificam o usuário. Fornecem feedback imediato e evitam erros. Eles o diferenciam da concorrência – e, o mais importante, encantam o usuário.

O que acha das microinterações agora?