Você já abriu um aplicativo novo e se sentiu completamente perdido?
É, isso acontece o tempo todo, infelizmente.
Quem nunca passou por uma experiência de onboarding ruim e pensou:
“Como isso pode estar tão desorganizado?!”
Até a pandemia acabou, mas parece que os fluxos de onboarding ruins vão continuar existindo.
Mas ei, seu produto não precisa fazer parte desse grupo!
Vamos falar sobre os padrões de onboarding e entender como aplicá-los na UX do seu aplicativo para converter e reter mais clientes.
Você vai entender como que utilizar os padrões de UX corretos pode poupar tempo e dinheiro.
Neste artigo, vamos ver:
👉 O que são padrões de onboarding
👉 Por que usar padrões de onboarding
👉 Quais são os tipos de padrões de onboarding
👉 Quando usar cada padrão de onboarding
Está sem tempo? Leia o nosso resumo:
Resumo
- UX de onboarding é a experiência que os usuários têm com o seu produto.
- Os padrões de onboarding são elementos usados para aprimorar a experiência do usuário e a interface do usuário.
- Alguns motivos para começar a usar diferentes padrões de UX/UI para seu onboarding são:
- Causam menos atrito
- São mais adequados para fluxos de onboarding de usuários de longo prazo
- Trazem oportunidades de engajamento e branding
- Alguns padrões comuns de onboarding de UX/UI são:
- Tours guiados
- Segmentação
- Checklists
- Guias interativos
- Hotspots
- Tooltips
- A escolha dos padrões para seu fluxo de onboarding e quando exatamente você vai usá-los depende de três perguntas:
- Qual é o conteúdo?
- Quem verá esse padrão?
- Quando ele aparece?
O que é UX de onboarding
UX de onboarding é um experiência ou o processo pelo qual os seus usuários passam no momento que entram no seu site, app ou produto – muitas vezes até antes disso. Quando bem feita, a UX de onboarding pode ser usada para aprimorar a interface do usuário, aumentar o engajamento do cliente, melhorar a satisfação do cliente e transformar a jornada geral do produto em um processo de onboarding de usuários.
Resumindo, UX de onboarding e padrões de UI de onboarding são elementos de onboarding que ajudam a criar uma boa jornada do usuário enquanto os usuários ainda estão no fluxo de onboarding, criando assim uma boa experiência de onboarding de usuários.
Interessante, né?
Você também pode dar uma olhada no nosso guia de UX de onboarding. 👈
Agora que ficou claro o que é UX de onboarding, vamos nos aprofundar nos padrões de UX/UI de onboarding.
O que são padrões de onboarding
Todo usuário precisa de onboarding.
Seja onboarding sobre os principais recursos ou um passo a passo completo sobre o produto, você não pode presumir que eles se sairão bem por conta própria.
Até seus colaboradores precisaram de onboarding, lembra?
Você pode pensar que um onboarding passo a passo é muito chato ou que um guia interativo pode parecer muito sofisticado.
Mas, de uma forma ou de outra, uma experiência de onboarding de usuários com vários padrões de onboarding é essencial.
Por quê?
Porque se eles não entenderem o seu produto, eles irão embora. Você só tem uma chance.
É um negócio difícil, eu sei.
Mas é aqui que os padrões de UX/UI de onboarding entram em cena.
O que é um padrão de UX/UI de onboarding?
Um padrão de UX/UI de onboarding é uma forma de construir a UX ou a UI para criar uma experiência de onboarding especificamente para um determinado contexto. O processo de design da jornada do usuário e o processo de onboarding de usuários são altamente afetados pelos padrões específicos de onboarding que sua equipe de produtos escolhe usar. O momento e a posição de cada padrão de UI de onboarding podem ditar toda a experiência de onboarding de usuários.
Por exemplo, em um contexto em que um usuário já começou a usar o produto, mas ainda tem coisas a aprender, um tooltip pode ser o padrão de onboarding apropriado.
Da mesma forma, as telas de onboarding no início dos fluxos de onboarding de usuários de aplicativos móveis e os fluxos de cadastro fazem a mesma coisa por meio de padrões específicos de UI/UX de onboarding para contextos específicos.
Mas uma questão mais importante é:
Por que os padrões de onboarding são importantes?
Já sabemos por que a experiência do usuário no onboarding é importante por si só.
Uma experiência de usuário ruim significa falta de engajamento do usuário, baixas taxas de conclusão, baixa adoção do produto, diminuição da taxa de retenção de usuários e, por fim, o maior inimigo:
Churn.
“Mas por que precisamos de tipos diferentes de padrões de UX de onboarding para diferentes contextos?”
A resposta rápida é psicologia do usuário.
A UX deve tratar do que os usuários querem ver, ouvir e vivenciar.
Logo, um padrão de UX de onboarding deve tratar do que um usuário vê, ouve e vivencia durante o onboarding.
Portanto, é natural que haja vários tipos de padrões de UX. Eles precisam ser moldados de acordo com o que os usuários precisam e esperam.
“Por que eles são tão importantes assim?”
Três razões simples:
1- Menos atrito
O uso de diferentes padrões de UI/UX de onboarding pode diminuir significativamente o atrito durante a jornada do cliente, bem como o fluxo de onboarding de usuários.
Vamos colocar isso em perspectiva.
Quão frustrados os usuários ficariam com um tour interminável pelo produto e seus principais recursos?
Por exemplo, veja o fluxo de onboarding inicial da Landbot:
Parece bom e elegante, mas um tour pelo produto em 11 etapas?
Seus usuários não vão gostar muito disso.
E quão confortáveis eles se sentiriam ao passar por uma experiência de onboarding interessante com padrões de onboarding contextuais que variam de acordo com a importância e urgência?
Melhor ainda, usando um checklist de onboarding?
Veja como o Calendly usa um checklist para manter tudo organizado durante o onboarding inicial:
A grande questão é: qual abordagem é mais interessante e menos irritante para os usuários?
Exatamente.
2- Mais adequado para fluxos de onboarding de longo prazo
Como o uso de diferentes elementos de interface e experiência do usuário ajuda a diminuir o atrito, podemos dizer que o uso de diferentes elementos de UI/UX de onboarding pode ajudar a alongar E aprimorar o onboarding a longo prazo.
Mas como?
Considerando que diferentes padrões de UI/UX de onboarding podem causar diferentes níveis de conforto e frustração, o uso de padrões não disruptivos, como os estados vazios, à medida que o onboarding é estendido ao longo do uso do produto, pode beneficiar os produtos quando se busca minimizar o churn de clientes.
Aqui está um exemplo interessante de estado vazio do Asana:
Graças ao uso de um estado vazio, os usuários se sentem menos incomodados e mais confiantes para realizar tarefas.
3- Engajamento e oportunidades de branding
Diversos padrões de UI/UX de onboarding podem muito bem ser usados como oportunidades de engajamento e branding, especialmente a longo prazo.
Por exemplo, o estilo distinto de ilustração do Discord ajuda a marcar sua UI/UX de onboarding e, ao mesmo tempo, fornece conteúdo instrucional e engajamento gradual:
Seja um modal de tour pelo produto, um tooltip, estado vazio ou um guia interativo, diferentes tipos de padrões de onboarding sempre ajudam a engajar mais e melhorar o relacionamento com os usuários.
Mas então quais são esses tipos de padrões de UX de onboarding de que estamos falando?
Vamos dar uma olhada.
Categorias de padrões de onboarding
Em geral, há três categorias de padrões de UX de onboarding:
- Anotado – padrões para quando você quer indicar um recurso específico
- Integrado – padrões para quando você quer anunciar algo ou fazer um alerta
- Dedicado – padrões para quando você quer deixar os usuários empolgados ou quer perguntar algo a eles
Mas aqui na UserGuiding nós gostamos de dividir os padrões de UX de onboarding em duas categorias:
Onboarding de tour e onboarding contextual.
Onboarding de tour
Onboarding de tour inclui guias interativos, tours guiados e qualquer outro tipo de tour.
Na maioria das vezes, isso faz parte do onboarding inicial, mas muitas vezes os tours podem ser acionados após atualizações do produto ou novos lançamentos.
Por que usar o onboarding de tour?
Quais são as chances de um usuário novo saber como usar o seu produto?
É pouco provável.
Para garantir que eles continuem aprendendo por conta própria, você precisa segurar a mão deles no início da jornada com o seu produto.
É quando o onboarding de tour é necessário.
Mesmo assim, é importante ser breve e informar os usuários de que não será um processo longo.
Onboarding contextual
Onboarding contextual é, como o nome já diz, o tipo de UX de onboarding que é muito específico ao contexto; qualquer coisa que vá dos segmentos de usuários à época do ano.
Esses tipos de padrões de UX de onboarding são geralmente utilizados após o onboarding inicial, de preferência durante o primeiro mês de uso e à medida que mais recursos são explorados.
Por que usar onboarding contextual?
O onboarding contextual tem exatamente o que o onboarding de tour não tem.
Com o onboarding contextual, os usuários podem aprender por meio da experiência, explorando recursos quando precisarem e sem se irritar.
Por conta dessa natureza complementar do onboarding de tour e do onboarding contextual, fica mais fácil categorizá-los dessa forma.
Se um não puder ajudar, o outro pode.
Mas é claro, não é tão fácil assim.
Vamos dar uma olhada nos tipos individuais de padrões de UX de onboarding.
Tipos de padrões de onboarding
Quando eu digo que há centenas de padrões de UX/UI de onboarding, eu não estou exagerando.
Qualquer coisa pode ser um padrão.
De um tipo específico de guia até um tipo raramente usado de estado vazio, há MUITOS padrões.
Ainda assim, é possível apresentar uma visão geral dos tipos mais usados de padrões de UX/UI de onboarding.
E é exatamente o que temos neste artigo.
Confira a lista dos principais padrões de UX de onboarding:
- Tours guiados
- Segmentação
- Checklists
- Guias interativos
- Hotspots
- Tooltips
1- Tours guiados
Vamos direto ao ponto: todo mundo odeia fazer tour pelo produto.
Mas será mesmo?
Meu ponto é que todos nós odiamos guias do produto ruins.
E sim, se tiver mais de cinco passos, ele é automaticamente ruim. Desculpe, eu não crio as regras.
Por exemplo, veja só este tour guiado em quatro passos do PayPal.
Com 4+1 tooltips, o PayPal explica os recursos mais importantes do produto/serviço, e a melhor parte é que há uma opção para “concluir o guia”.
Não vemos isso todo dia, é bom anotar.
É claro, a facilidade de uso do PayPal também ajuda.
Mas veja este aqui:
O Nimbus Capture excede o limite de cinco dicas, mas eles compensam isso dizendo aos usuários exatamente quantas dicas eles verão.
E, é claro, permitir que o usuário saia do guia é sempre um prazer.
É muito mais difícil fazer o onboarding dos usuários em um produto complicado, como ferramentas de analytics ou softwares de planilhas.
É nesse momento que você deve começar a buscar outros padrões de UX de onboarding.
Por que usar tours guiados?
Vantagens ✅
- Um grande impulso no início para usuários novos
- É possível ter uma visão geral do produto
- A primeira impressão é boa quando executado corretamente
Desvantagens ❌
- Muitas vezes o usuário pula ou não presta atenção
- Pode facilmente incomodar os usuários se não for bem feito
- Não ajuda no longo prazo se não houver um onboarding mais aprofundado
2- Segmentação
Ao contrário dos tour guiados e guias do produto, a segmentação pode ser o padrão de onboarding menos irritante. E há um motivo para isso.
Eis o truque.
Todos nós queremos falar sobre nós mesmos, mas não queremos ser questionados.
Um onboarding com autossegmentação, quando bem feito, pode definir um caminho para cada persona sem fazer muitas perguntas.
E, é claro, ele pode fazer isso sem incomodar os usuários.
Vamos falar sobre o exemplo clássico do Pinterest.
Ao fazer com que o usuário escolha cinco interesses, o Pinterest cria um feed pessoal.
É um início rápido para qualquer um.
E é exatamente por essa razão que funciona.
Todo mundo quer ter uma sensação única ao usar qualquer produto, mesmo que seja uma torradeira ou a pia do banheiro.
O Pinterest faz isso em menos de um minuto.
Outro grande exemplo de autossegmentação seria o onboarding inicial do Mailchimp.
Em vez de focar em personas do usuário e criar um UX personalizado, este aqui foca em dar liberdade aos usuários.
É claro que isso é uma ilusão. 😬
Mas resolve o problema.
A segmentação pode vir em qualquer forma, o importante é que pode ajudar a identificar uma persona do usuário e ajustar a experiência do usuário de acordo.
Por que usar segmentação?
Vantagens ✅
- Pode ajudar a identificar as personas de usuário e melhorar a UX
- Mostra ao usuário que você se importa com suas preferências e necessidades
- Permite que o usuário comece imediatamente com o conteúdo do seu produto
Desvantagens ❌
- Pode ser problemático quando as personas de usuário não estão bem definidas ou são difíceis de identificar
- O usuário pode preferir não escolher – é sempre bom adicionar um botão de pular
- Pode ser frustrante após um longo tour guiado ou muitas perguntas
3- Checklists
Ah, como é bom marcar um checklist inteiro. Que sensação maravilhosa.
Eu não conheço ninguém que não goste de um bom checklist, e é por isso que os checklists estão substituindo os tours guiados.
Todos os dias.
Mas é claro, até mesmo um checklist pode ter uma UX ruim.
Você já imaginou um checklist de onboarding com mais de 10 tarefas, sem barra de progresso e sem uma mensagem de comemoração no final?
Parece mais uma sessão de tortura.
Então vamos falar sobre bons checklists. Veja só este belo checklist de onboarding da UserGuiding.
Boas-vindas calorosas? Sim. ✅
Poucas e pequenas tarefas? Sim. ✅
Barra de progresso? Sim. ✅
Pode sair a qualquer momento? Sim. ✅
É claro, há diferentes tipos de checklists.
Afinal, há centenas de padrões, lembra?
Mas, no fim das contas, o que faz com que um checklist seja bom é como ele faz o usuário se sentir.
Se você não consegue fazer os seus usuários sentirem que estão concluindo as tarefas logo de cara, não há como garantir a aquisição ou retenção dos clientes.
Não pense muito, é só criar um bom checklist.
Por que usar um checklist?
Vantagens ✅
- Melhor que tours guiados, principalmente para produtos maiores
- Faz com que os usuários realizem ações desde o início
- Ajuda a gerenciar a carga cognitiva de forma mais efetiva
Desvantagens ❌
- Pode não impressionar sem uma barra de progresso ou com muitas tarefas
- Basicamente como um tour guiado, o onboarding falhará se nada vier em seguida
- Problemático se não reaparece após o usuário pular uma vez
4- Guias interativos / guias passo a passo
Se eu tivesse a chance de dizer a todos os designers de UX de onboarding apenas uma coisa, seria:
“Mostre em vez de dizer.”
Ao construir a UX do onboarding, parece que nos esquecemos do fator mais importante:
Os usuários.
Se você ignorar as necessidades dos usuários e focar apenas em promover o seu produto ao máximo, você falhará em ambos.
Portanto, mostre a eles.
Em vez de apresentar um espetáculo com mais de 10 tooltips, tutoriais em vídeo e hotspots por todo canto, basta ajudar o seu usuário a fazer uma pequena tarefa e este será seu momento mais memorável com o produto.
Por exemplo, veja como a Vieworks usou a UserGuiding para criar um guia interativo.
Embora ele lembre um tour guiado à primeira vista, há uma diferença crucial:
Os usuários não assistem, eles fazem.
E isso cria uma enorme diferença no onboarding, considerando que a interatividade é seis vezes melhor que a aprendizagem estática.
Por que usar um guia interativo?
Vantagens ✅
- Os usuários são incluídos e aprendem melhor
- Foco direto e teste prático tornam a UX mais memorável
- Pode ser acessado posteriormente por meio de assistentes virtuais
Desvantagens ❌
- A visão focada pode ser irritante para alguns usuários
- Não pode ser muito aprofundado para evitar frustração
- O usuário precisa ser instruído para saber onde acessar os guias posteriormente
5- Hotspots
Um hotspot é perfeito para direcionar os usuários a algum lugar.
Você tem algo importante a dizer?
Coloque um hotspot no lugar em questão.
Você pode usá-los para fazer com que os usuários cliquem em algo ou passem o cursor do mouse por cima para revelar mais informações, como no caso da Zakeke (criado com a UserGuiding 😏).
Ou veja só este exemplo da Plandisc, que oferece um guia interativo, também criado com a UserGuiding.
Graças ao seu design, os hotspots chamam a atenção instantaneamente, mas ainda depende do designer decidir onde usá-los.
Portanto, mais uma vez a questão se resume a decidir o lugar apropriado para um hotspot.
No entanto, seja qual for o caso, fica claro que usar hotspots em excesso é uma prática horrível.
Seus usuários não são ratos de laboratório.
Por que usar hotspots?
Vantagens ✅
- Chama a atenção e direciona os usuários facilmente
- Ajuda a evitar o uso de muitos pop-ups
- Funciona como um tooltip opcional e reduz a carga cognitiva
Desvantagens ❌
- Pode ser frustrante quando usado em excesso
- Pode resultar em usuários mal informados se informações importantes forem fornecidas por meio de hotspots
- Desnecessário se não for usado para um botão muito específico
6- Tooltips
Um tooltip é o equivalente em onboarding a dizer “Para sua informação“.
“Temos este recurso. Para sua informação, você pode usá-lo com este atalho do teclado.”
Ou: “Insira uma senha. Para sua informação, ela precisa incluir letras minúsculas e maiúsculas.”
Mas nunca, e eu digo nunca, faça algo do tipo:
“Insira o método de pagamento. Para sua informação, cobraremos de você mais $20 no próximo mês.”
Esta é a última coisa que você deve colocar em um tooltip, pois todos nós pulamos os tooltips às vezes. 🤦
É claro, há alguns tooltips que não queremos pular.
Por que não?
Porque eles foram bem feitos.
Veja só este exemplo do app do Duolingo, por exemplo:
No momento, o usuário ainda não sabe o significado dessa palavra.
Ele precisa clicar na palavra para descobrir, e ao mesmo tempo ele acaba aprendendo como o recurso funciona.
É isso que eu chamo de um tooltip perfeito.
Por que usar tooltips?
Vantagens ✅
- Ótima alternativa aos tours guiados em produtos mais simples, é o ideal para ensinar mais em produtos complicados
- Menos irritante que tours e guias
- Pode ser usado para quase todos os níveis de onboarding – do cadastro às dicas in-app
Desvantagens ❌
- Quando não pode ser dispensado, tende a incomodar os usuários
- Apresentar muitos de uma vez pode ser frustrante
- Precisa ter um conteúdo muito conciso para funcionar
Quando usar cada padrão de onboarding?
Agora vem o grande lance.
Conhecer padrões de UX/UI de onboarding e saber como e onde utilizá-los são duas coisas diferentes.
Mas calma, eu estou aqui para ajudar.
Quando tiver alguma dúvida sobre quando usar qual padrão de UX de onboarding, basta fazer as seguintes perguntas:
- Qual é o conteúdo?
- Quem verá esse padrão?
- Quando ele aparece?
1- Qual é o conteúdo?
Qual é a informação?
O que você está tentando dizer aos usuários?
Não faz sentido construir um tour guiado inteiro usando apenas hotspots. E transmitir informações importantes por meio de hotspots é tão inútil quanto.
Caso não considere o que o padrão deve transmitir ao usuário, você terá problemas logo de cara.
2- Quem verá esse padrão?
Há vários tipos de empresas SaaS, assim como há vários tipos de personas do usuário.
Pense nisso.
A Cuepath, um serviço de monitoramento de medicação, atua com usuários idosos e, portanto, precisa construir seu onboarding de acordo.
Será que funcionaria se eles escolhessem usar somente tooltips?
Ou será que os usuários conseguiram seguir o onboarding sem hotspots?
Sempre considere as personas, e aproveite para conferir a história de sucesso da Cuepath.
3- Quando ele aparece?
A UX de onboarding às vezes segue caminhos misteriosos.
Se um determinado padrão aparecer um pouco antes ou um pouco depois do esperado, o usuário pode ficar confuso.
Afinal, estamos lidando com as expectativas do usuário.
É por isso que o gatilho do padrão de UX tem um papel importante na hora de decidir qual padrão você deve usar.
Por exemplo, é perfeitamente normal que uma mensagem de boas-vindas disparada logo após o cadastrado apareça como um pop-up. No entanto, se o pop-up aparecer tarde demais, principalmente se você já estiver usando um recurso, esse fluxo ficará estranho.
Considere sempre a perspectiva dos usuários e tudo dará certo.
Conclusão
Há muitos tipos de padrões de UX/UI de onboarding – diria que até demais.
Mas cada tipo corresponde às necessidades e expectativas de um usuário, e a última coisa que um negócio SaaS deve fazer é ignorar esses detalhes.
Construir uma UX de onboarding satisfatório não é uma tarefa fácil, mas quando você prioriza as necessidades dos usuários, todos ganham nessa história.
Não perca essa chance.
Perguntas Frequentes
O que é onboarding em UX design?
O design da UX em onboarding é uma forma de utilizar a interface e outros elementos de UX para atender às necessidades e expectativas dos usuários durante um fluxo de onboarding.
Como melhorar o processo de onboarding em termos de UX?
Melhorar a UX do onboarding envolve reduzir a carga cognitiva do fluxo, analisar os dados e testar o processo regularmente. Mas, no geral, o foco principal deve ser sempre entender às necessidades do usuário.
Como construir o melhor onboarding?
Para construir um excelente processo de onboarding, os designers de UX devem determinar as necessidades do usuário, desenhar um mapa da jornada do usuário e conduzir testes com os usuários. Os designers também devem considerar a natureza do produto.
