Eu me vacinei há algum tempo e acredite, NÃO foi o que eu esperava.
Eu achei que ia chegar, receber a vacina e ir embora.
O que aconteceu foi que eu tive que preencher um formulário, depois me fizeram as mesmas perguntas de novo, ninguém me disse para onde ir e demorei meia hora só para encontrar a sala certa.
Com todo respeito aos profissionais de saúde, mas naquele momento eu só conseguia pensar em uma coisa:
“Isso tudo está muito desorganizado.”
E pensando sobre o assunto agora, isso me lembra de uma experiência ruim de onboarding. Confie em mim, a pandemia terá um fim, mas os fluxos de onboarding com uma péssima experiência do usuário continuarão existindo.
Mas é claro que o seu negócio não precisa fazer parte desse grupo.
Vamos falar sobre os padrões de UX e UI para onboarding e entender como aplicá-los no seu produto digital para converter e reter mais clientes.
O que é UX de onboarding?
UX de onboarding é uma experiência ou um processo pelo qual os seus usuários passam no momento que entram no seu site, app ou produto – muitas vezes até antes disso. É também uma ferramenta que as empresas SaaS podem usar para causar uma boa impressão em seus usuários e levá-los a fazer uma compra ou um upgrade.
Para saber mais sobre UX de onboarding, você também pode dar uma olhada no nosso guia de UX de onboarding.
Agora que esclarecemos o que é UX de onboarding, chegou a hora de nos aprofundarmos nos padrões de UX/UI de onboarding.
Padrões de UX/UI de onboarding
Todo usuário precisa de onboarding. Até mesmo colaboradores precisam de onboarding.
Portanto, a ideia de deixar os seus usuários sozinhos é inconcebível.
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 o UX/UI de onboarding entra em cena.
O que é um padrão de UX/UI de onboarding?
Um padrão de UX/UI de onboarding é uma forma de construir o UX ou a UI para criar uma experiência de onboarding especificamente para um determinado contexto. 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 UX de onboarding apropriado.
Por que padrões de UX/UI de onboarding?
“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.
O 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.
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 UX/UI 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 UX/UI 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:
- Guias do produto
- Autossegmentação
- Checklists
- Guias interativos
- Hotspots
- Tooltips
1- Guias do produto
Vamos direto ao ponto: todo mundo odeia os guias do produto.
Mas será que todo mundo mesmo?
Meu ponto é que todos nós odiamos guias do produto ruins. E sim, se tiver mais de cinco passos, ele é automaticamente ruim. Desculpe, não fui eu quem criou as regras.
Por exemplo, veja só este guia do produto 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 guias do produto?
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- Autossegmentação
Ao contrário dos tutoriais guiados e guias do produto, a autossegmentaçã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 autossegmentaçã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 autossegmentação?
Vantagens
- Pode ajudar a identificar as personas do usuário e melhorar o 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 do usuário não sã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 guia do produto 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 guias do produto. Todos. Os. Dias.
Mas é claro, até mesmo um checklist pode ter um 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 do 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 guias do produto, principalmente para produtos maiores
- Faz com que os usuários executem 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 guia do produto, 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
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 o 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 guia do produto à 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 o 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 educado para saber onde acessar 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 ruim. Gente, 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“.
Como em: “Temos este recurso; para sua informação, você pode usá-lo com este atalho do teclado.”
Ou em: “Insira uma senha; para sua informação, ele 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 guias do produto 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 por vez para funcionar
Quando usar qual?
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 guia do produto 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 transmitirá ao usuário, você fracassará 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?
3- Quando ele aparece?
O 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.
Parta sempre da 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 um 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 a chance.
Perguntas Frequentes
O que é onboarding em UX design?
O UX design para onboarding é uma forma de utilizar a UI 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 o 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 as necessidades do usuário.
Como construir o melhor onboarding?
Para construir um excelente processo de onboarding, os UX designers 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.
