O que é Contextual Onboarding? + 5 Exemplos para deixar as coisas claras

Há alguns anos atrás eu estive em um museu de arte moderna.

Em retrospectiva, a coisa da arte foi uma fase para mim. Mas o que eu descobri mais tarde foi permanente.

Quando entrei no museu pela primeira vez, meus amigos insistiram para que nos juntássemos ao tour. Enquanto isso, eu só queria ver esta única peça que estava nos cartazes da exposição.

Eu sei, eu sei. Eu era direto e pretensioso.

contextual onboarding meme

Eu no museu pensando que sei tudo sobre arte depois de decorar todos os nomes dos quadros de Van Gogh.

Mas a questão é que eu estava lá para ver aquela peça e parecia que o tour não estava chegando lá.

Então eu deixei o grupo.

Quando encontrei a peça que estava procurando (uma pintura sem título de Maro Michalakos) vi que havia uma etiqueta ao lado que me dizia tudo o que eu queria saber sobre ela.

Em questão de 2 minutos, o resto do grupo chegou. E adivinhe o que aconteceu?

O guia disse exatamente o que estava escrito na etiqueta.

Meu ponto é que, às vezes os tours são uma porcaria, e todos nós devemos ser capazes de fazer o que quisermos e também não perder nada.

E que o Contextual Onboarding é sobre isso: sobre pessoas.

Vamos dar uma olhada.

O que é o Contextual Onboarding?

Contextual onboarding é, como o nome indica, o tipo de onboarding que ocorre em um contexto; por exemplo, durante o onboarding inicial, logo após a inscrição, e quando o usuário clica em um determinado botão. Ao utilizar o Contextual Onboarding, é possível personalizar os fluxos de onboarding sem realmente ter que mudar o onboarding padrão.

Como? Você se pergunta

Dividindo seu onboarding em pedaços e peças que as pessoas podem escolher e colocar na ordem certa de acordo com suas necessidades. 

Mas falaremos tudo isso em um segundo. Vamos primeiro responder à pergunta de um milhão de dólares.

Por que é importante?

Deixe-me apresentar uma lista de perguntas semelhantes a “por que o Contextual Onboarding é importante”.

👉 Por que fazer com que seus usuários realmente aprendam seu produto é importante?

👉 Por que as taxas de conclusão do onboarding são importantes?

👉 Por que é importante verificar os usuários que estão pulando o onboarding?

A resposta a todos é: porque você quer manter seus usuários.

E para mantê-los, você precisa ter certeza de que eles conheçam seu produto (tenha em mente que 80% apagará seu produto da mente se eles não entenderem como usá-lo).

Mas como você vai fazer isso?

Oh, se ao menos houvesse uma maneira mágica de garantir que seus usuários não se aborreceriam aprendendo TUDO sobre seu produto. Se ao menos houvesse uma maneira de mantê-los interessados, mostrando-lhes realmente o que lhes interessa.

Bem, obviamente há uma maneira. Duh, estamos falando do Contextual Learning.

E há 3 razões pelas quais ele é perfeito para uma experiência satisfatória do usuário.

1- Ele encontra os usuários onde eles estão quando estão prontos

É chamado de contextual por uma razão.

Contextual onboarding é o encontro dos usuários quando e onde eles querem se encontrar. E acredite, todos os usuários querem algo mais, assim como todos eles têm sua própria carga cognitiva.

Quando um usuário pela primeira vez começa a usar uma ferramenta tipo o Canva, seria um bom passo para acompanhá-lo em tudo com um tour pelo produto?

Ou é melhor perguntar-lhes o que querem fazer antes de chegar aos locais de destino de um produto?

Talvez deixá-los se desviar e depois explicar partes interessantes no caminho?

Um longo tour em um produto grande demais é o que mata uma boa experiência no User Onboarding, disso você pode ter certeza.

Traga o aprendizado para onde eles estão. Transforme-o em uma experiência contextual.

2- É curto e direto ao ponto

O conteúdo educacional nunca é divertido. Não depois da escola.

Uma coisa que o onboarding contextual tem e falta um grande tour de produtos volumosos é a simplicidade no conteúdo educacional.

Quando o próprio Onboarding é direto ao ponto, é difícil NÃO manter o texto direto ao ponto. E estou falando sério.

Se feito corretamente, o Contextual Onboarding não é composto por mais do que 7 tooltips, uma barra de progresso, e um texto bastante (realmente) curto. 

Afinal de contas, familiarizar seus usuários com seu produto não demanda um romance.

Quer realmente explicar algo ao seu núcleo? É para isso que serve uma base de conhecimento. Confira alguns bons exemplos.

3 – Tudo isso constitui um Tour de Onboarding personalizado.

O que torna a orientação contextual melhor do que um guia de produto?

O fato de que é a mesma coisa, apenas mais digerível. 

Utilizar o Contextual Onboarding não significa necessariamente se livrar de seu tour do produto. Significa apenas dividir-se em pedaços significativos.

O melhor de tudo é que, ao fazer isso, você pode dar a cada usuário uma experiência personalizada. 

“Mas e se eles não passarem por todos os fluxos do Contextual Onboarding?”

Bem, eles não precisam fazê-lo.

Se você realmente quer promover um recurso específico, há muitas maneiras de fazer isso (modais em plataforma, e-mails, hotspots, uma base de conhecimento, etc.). Só não estrague a UX do Onboarding inicial, você pode compensá-lo depois.

Agora, você está pensando, “isso é legal e tudo mais, mas como faço para que funcione”?

Vamos lá.

how does contextual onboarding work

Como funciona o Contextual Onboarding?

Essencialmente, o Contextual Onboarding não é diferente do seu bom e velho tour de produto. Como eu disse acima, é apenas uma versão separada dele.

Na verdade, o Contextual Onboarding requer os mesmos padrões de UX de Onboarding que um tour pelo produto exigiria. Das Tooltips aos modais e pontos de acesso, é tudo a mesma coisa. É apenas a forma como eles são programados e inseridos que difere.

Com uma ferramenta “no-code”, você pode definir certos requisitos para que um usuário se depare com um certo fluxo de onboarding; condições como o segmento de usuário de um usuário, seu progresso através do resto do onboarding, e quais páginas de um site visitado por ele desempenham um papel importante.

Mas, vejamos tudo isso na prática.

5 Exemplos de UX de Contextual Onboarding

1- Ghostwriter.ai

O Ghostwriter.ai, uma ótima ferramenta para o direcionamento de usuários alimentado por IA tem um fluxo de entrada único. 

Sendo uma ferramenta bastante complicada, o Ghostwriter.ai tem um punhado de recursos com suas respectivas páginas com o software. Toda vez que um usuário se aventura em uma página de recursos, ele obtém um belo Contextual Onboarding.

Veja por si mesmo.

ghoswriter.ai contextual onboarding example
contextual onboarding example ghostwriter.ai

O que é ainda mais legal é que sendo uma experiência contextual, cada guia individual tem seu próprio marcador de progresso. Junte alguns gifs legais e os usuários já estão aprendendo!

2- ClickUp

Eu já era um fã do ClickUp antes de ver como eles trabalham sua UX de Contextual Onboarding, mas agora estou apaixonado. 

Aqui estão dois exemplos legais do contextual onboarding deles.

Quando um usuário do ClickUp continua pulando o onboarding, ele se depara com esta genial janela sobreposta:

ClickUp contextual onboarding example

Outro bom exemplo é esta janela de sobreposição que é acionada se um usuário não estiver usando um recurso específico que possa ser útil para ele:

contextual onboarding example clickup

O onboarding não só analisa os segmentos do usuário, mas também as características que cada usuário utiliza e com que frequência. Brilhante.

3- SendGrid

Mantendo-se original, a SendGrid usa um sinalizador e um hotspot para informar os usuários sobre um novo recurso.

Ao invés de anunciá-lo com uma grande janela sobreposta na página principal, eles vão esperar pela parte prática da experiência do usuário para ter certeza de que está no contexto correto.

SendGrid contextual onboarding example

O que todos nós deveríamos estar procurando, né?

4- Evernote

A Evernote é conhecida por sua UX de Onboarding, mas olhando para o fluxo mais próximo especialmente na versão móvel, é seguro dizer que eles foram para uma experiência contextual.

Evernote faz bom uso dos empty states, bem como da UX de onboarding livre, mas de vez em quando eles também usam Tooltips.

E elas são perfeitas para que novos usuários experimentem a ferramenta inteira.

Esta, por exemplo, aparece quando o usuário abre a barra abaixo. Sem marcador de progresso, o usuário recebe a confiança de que não vai demorar muito tempo, sendo mais fácil de aprender.

Evernote contextual onboarding example

5- Flourish

O Flourish faz uso de um grande padrão UX de Onboarding que se tornou popular recentemente e, por magia, transforma a experiência do usuário em uma experiência contextual.

Estou falando de checklists.

Ao inserir guias interativos na checklist de Onboarding, Flourish permite que novos usuários decidam o que querem aprender primeiro. Como cada guia é uma UX de onboarding separada, os usuários não têm dificuldade em se concentrar.

Flourish contextual onboarding example

Agora, aposto que você está bastante inspirado para experimentar o Contextual Onboarding por conta própria.

“Mas como?”.

Praticamente, sabemos como funciona a UX do Contextual Onboarding, mas como ele ganha vida exatamente?

Com muito código.

Isto é, se você não tiver uma boa ferramenta “no-code”. E eu conheço uma.

E, como faço isso com o UserGuiding?

Um fluxo de Contextual Onboarding é fácil, desde que você tenha uma boa ferramenta “no-code”, como o UserGuiding.

Após a inscrição, são necessários três passos fáceis para criar um onboarding contextual, por mais longo ou curto que seja. 

Vamos dar uma olhada.

1- Crie um guia

Digamos que seu fluxo de contextual onboarding é um modal in-app que aparece quando os usuários percorrem sua página principal em seu website.

Não deixe que isso o intimide, na verdade é muito fácil com o UserGuiding.

create no-code ux modals

Vá para a guia “Guias” no UserGuiding e clique no botão “Novo Guia”.

Após digitar seu site, você está pronto para começar.

creating ux modals guide

Na barra lateral que aparece no site, clique em “+ Guia” para começar.

2- Escolha e personalize

how to create ux modals
ux modals creating steps

Nomeie seu guia e clique no botão “+ Step” para escolher o padrão UX que você deseja usar.

steps for creating ux modals

Clique no botão “Modal” e escolha o padrão UX/UI de Onboarding da lista. Qualquer coisa, desde modais de boas-vindas a hero modals e outras janelas sobrepostas. Você escolhe.

Se quiser, você pode adicionar diferentes passos para apimentar ou deixá-lo como está.

how do you create ux modals

Escolha a colocação dos modais e salve seu progresso. Você pode sempre visualizá-lo pressionando o botão play.

3- Salve e publique

Acabou a personalização? É hora de fazer as configurações.

userguiding ux modals

Encontre seu novo guia e clique no botão Configurações.

Para torná-lo realmente contextual, há algumas outras configurações que você pode usar, dependendo de como você deseja que seu padrão UX seja.

👉 Você pode escolher facilmente os locais de destino em que deseja que o guia apareça,

👉 O segmento de audiência a quem você deseja mostrar o guia,

👉 Você pode escolher se deseja que seu guia seja acionado automaticamente ou quando uma ação específica for executada,

👉 Ou você pode agendar seu guia para aparecer.

Após adicionar seu container code às configurações, seu guia será ativado. 

E você está pronto.

Se eu soubesse algo de programação – e até sei uma ou duas coisas – isso valeu horas de códigos. Dias, se os desenvolvedores não forem muito experientes. 

5 minutos com o UserGuiding. Experimente (de graça).

Conclusão

O futuro da UX de Onboarding é o Contextual Onboarding.

Como o tempo de atenção humana está cada vez mais curto, não adianta forçar a entrada de seus usuários. Deixe-os acessar o conhecimento em locais e horários contextuais, e você verá os benefícios.

Agora vá colocar esses guias onde eles devem estar!

Junte-se a mais de 10 mil equipes que já estão criando experiências melhores

Teste gratuito de 14 dias, com mais 30 dias de garantia de dinheiro de volta!

Share this article:

Serra Alban

Serra Alban

When I realized I won’t be the next Tarantino I found myself as a creative content writer at UserGuiding. I’ve been obsessed with UX design, customer success, and digital adoption ever since. If you could stare at good UX for hours like me don’t hesitate to hit me up on LinkedIn. I might end up dropping too much movie trivia but hey, old habits die hard.