8 exemplos de tours guiados que os usuários adoram

Eu adoro um tour guiado bem projetado.

Faço guias de produtos por diversão. Gosto de fazer parte de um tour de onboarding bem organizado e objetivo. Com toda a psicologia humana e o UX Design que está por trás de tudo isso, podemos dizer que um bom tour guiado é uma arte.

Eu olhando para um tour guiado bem feito

E quero enfatizar mais uma vez: estou falando de um tour guiado de qualidade.

Existem várias ferramentas e sites por aí que não sabem como utilizar os tours guiados que fazem com que eu me pergunte: “caramba, como eles conseguem vender alguma coisa com isso?“.

Mas simplesmente não tem como evitar os tours guiados ruins.

Agora, se você acabou aqui neste artigo de exemplos de tours guiados, você pode estar tentando descobrir como deve ser o tour pelo seu produto. Não tenho como ensinar a você exatamente isso, mas posso mostrar como eu acho que deve ser um bom tour guiado.

Antes de irmos direto ao ponto, vamos lembrar o que exatamente é um tour guiado:

O que é um tour guiado?

Um tour guiado consiste em uma série de padrões de experiência do usuário que têm como objetivo criar um processo de integração para deixar os usuários confortáveis com a interface, ajudando-os a se acostumarem com o produto. De preferência, um tour guiado tem como características importantes o começo com uma janela modal, além de uma série de etapas que servem como um guia interativo quando necessário. A grande verdade, porém, é que não existe uma fórmula para criar um tour perfeito de boas-vindas.

Mas, agora que sabemos o que é um tour guiado, vamos nos concentrar em como ele deve ser e como os usuários devem vivê-lo. 

Aqui estão 8 ótimos exemplos.

8 grandes exemplos de tours guiados

Toda vez que vejo SaaS e onboarding no mesmo contexto, lembro de uma simples premissa para não confundir as coisas.

Cada ferramenta é diferente uma da outra.

Isso é uma coisa que você deve ter sempre em mente, quer se trate de onboarding ou de vendas ou de suporte. Será algo importantíssimo e até mesmo um guia para o sucesso, caso você chegue algum dia a duvidar do seu produto.

Naturalmente, isso é importante de se ter em mente quando olhamos para o mais simples dos projetos de tours guiados: o que pode ter funcionado para o produto dos outros, pode ser péssimo para sua equipe ou para seus produtos.

Portanto, relaxa.

A ideia é que estes exemplos sejam uma inspiração, e não uma regra. Eles não são diretrizes, são apenas pontos de partida.

Agora que você já está pronto, vamos dar uma olhada!

1- Grammarly

O Grammarly está entre as ferramentas SaaS mais usadas e mais populares hoje em dia, e eles não chegaram onde estão com tours guiados feitos de qualquer jeito.

Quando um usuário faz seu primeiro login no Grammar.ly, ele é abordado por um modal que lhe permite escolher se deseja “Começar um tour rápido” ou se prefere pular o passeio.

Uma vez que o usuário clique em “Começar um tour rápido”, o Grammarly então o insere em um ambiente de demonstração e permite que o usuário brinque e teste as ferramentas como quiser.

Este ambiente é suportado por hotspots e janelas interativas que chamam a atenção do usuário logo de cara e permitem que ele aprenda mais sobre os recursos enquanto os utilizam na prática.

Este ambiente é extremamente útil já que a maneira como o Grammarly opera fora da demonstração é exatamente a mesma: usando elementos do tipo Hotspot, sublinhando erros gramaticais.

O que faz do Grammarly um bom exemplo?

👉 O Grammarly se lembra de perguntar a seus usuários se querem ou não participar do tour guiado, o que é importante já que pode haver usuários que estão familiarizados com as ferramentas e não querem passar duas vezes pelo onboarding.

👉 Ao utilizar hotspots e mensagens na tela, o Grammarly transforma seu onboarding em uma experiência interativa que ajuda os usuários a se lembrarem de cada tarefa de aprendizagem e a se engajarem em tarefas e utilizarem recursos significativos.

👉 Como o Grammarly pode ser um produto complexo, fazer o Tour em um ambiente de demonstração ajuda a melhorar a experiência de aprendizagem e é mais eficaz do que uma abordagem em movimento ou tutoriais em vídeo.

2- Ghostwriter.ai

Sendo um software bastante complexo, a Ghostwriter.ai tem seu tour guiado espalhado por todas as suas seções.

Este contexto de onboarding torna possível aos usuários realmente aprender sobre a ferramenta de forma abrangente e fazer isso quando necessário.

Este tour guiado utiliza dicas sobre as ferramentas e uma barra de progresso para facilitar o entendimento dos usuários, enquanto os destaques fazem com que seja mais fácil acompanhar o tour.

O tour guiado da Ghostwriter.ai não só é fácil de usar, mas também é bastante envolvente e interativo.

Com pequenos GIFs divertidos, textos curtos e botões com cores arrojadas, a Ghostwriter.ai tem um tour interativo e interessante.

O que faz do Ghostwriter.ai um bom exemplo?

👉 O uso da Ghostwriter.ai do onboarding contextual como uma forma de tour guiado é um exemplo que realmente melhora a experiência de aprendizagem dos usuários e permite que eles se concentrem no que realmente lhes interessa.

👉 Ao destacar as dicas de ferramentas e usar cores e materiais ousados e envolventes no tour, a Ghostwriter.ai prova que os tours de produtos não precisam ser chatos.

👉 Uma barra de progresso e um botão de pular podem fazer toda a diferença, e a Ghostwriter.ai faz uso disso enquanto também usa um marcador de progresso.

Ah, e foi tudo criado com a UserGuiding…

3- HubSpot

O exemplo do tour guiado do HubSpot quase que vai na direção oposta quando comparado com nosso exemplo anterior, Ghostwriter.ai. No entanto, isso não o torna menos eficaz.

O HubSpot usa dicas para guiar os usuários através do produto enquanto faz uso de textos concisos, destaques do tipo beacon, e um botão grande e agradável de “pular tour”.

O conteúdo das dicas de ferramentas sendo apenas um texto à moda antiga pode parecer chato à primeira vista, mas é importante ter em mente seu público. Especialmente quando você é tão grande quanto o Hubspot.

Você pode apenas confundir mais os usuários ao tentar deixar as coisas divertidas.

É por isso que um design simples e com a paleta de cores do HubSpot funciona melhor no caso desse SaaS.

O uso de destaques pulsantes também é muito inteligente, se não uma ideia genial por si só. Isso dá ao fluxo de bordo uma sensação dinâmica e ajuda os usuários a irem mais longe com o Tour.

O botão “pular tour” é provavelmente a melhor coisa deste exemplo do HubSpot.

E gente, é bom até tomar nota do que vou falar agora:

Sempre, e SEMPRE mesmo, deixe que seus usuários tenham livre arbítrio sobre suas ações. Parabéns à HubSpot por saber muito bem disso.

O que faz do HubSpot um bom exemplo?

👉 O uso do HubSpot de um tour simples baseado em dicas de ferramentas torna ele não apenas mais compreensível, mas também mais acessível entre o segmento de seus usuários.

👉 O uso de destaques pulsantes ajuda os usuários a se concentrarem de uma forma dinâmica que dá ao onboarding uma certa cadência.

👉 Ao tornar o botão de “pular tour” tão grande quanto o próximo botão, o HubSpot deixa claro que eles não têm medo de que os usuários pulem. De fato, eles podem recuperar essa informação perdida a qualquer momento.

4- Vieworks

Se eu tivesse que explicar o tour guiado do Vieworks em uma palavra, eu diria que ele é interativo.

É o mesmo de sempre, temos um modal de boas-vindas, dicas de ferramentas, uma barra de progresso, um marcador de progresso, um destaque e um botão de fechar.

O que a Vieworks faz para estar entre nossas melhores escolhas é que combina tudo isso com uma grande interatividade.

Os usuários não são apresentados às características e depois se espera que executem as tarefas, ao invés disso, eles são mantidos à mão enquanto executam as tarefas. E isso é algo a que muitas ferramentas simplesmente nem cogitam fazer.

Acredite em mim quando digo que a interatividade é o futuro.

O que faz do Vieworks um bom exemplo?

👉 O Vieworks começa com um modal de boas-vindas e prossegue com dicas de ferramentas que ajudam os usuários a se concentrarem mais facilmente e serem capazes de visualizar cada recurso de uma forma contextual.

👉 A barra de progresso e o marcador do Vieworks mantêm os usuários dentro do fluxo de onboarding e os ajuda a acompanhar seu progresso.

👉 O uso da interatividade do Vieworks faz com que o aprendizado seja mais fácil e, ao mesmo tempo, garante que os usuários realizem tarefas importantes quando necessário.

5- Trello

Nem todos os tours guiados acontecem durante o onboarding inicial e o novo tour de interface da Trello é um ótimo exemplo.

O Trello apresenta sua nova barra de navegação em 4 passos simples e pergunta se o usuário gostaria de mudar para a nova versão no final. Uma interação breve e concisa com o usuário, com certeza.

Uma coisa que pode sair problemática à primeira vista é como a Trello não usa botão saltar ou fechar. Aqui nos deparamos com um dilema que muitas empresas SaaS enfrentam.

Livre arbítrio ou assistência forçada.

É um debate que segue até hoje, e embora eu apoie totalmente o livre arbítrio, é fácil ver por que Trello prefere a ideia de não pular. O tour tem 4 etapas, de qualquer forma.

Além disso, isto nos mostra que o conteúdo forçado também pode ser envolvente, uma vez que a maioria dos usuários acabou mudando para a nova versão.

O que faz do Trello um bom exemplo?

👉 O uso que Trello faz dos modais UX no início e no final dá aos usuários um momento de aprendizado e torna o tour mais envolvente.

👉 O Trello prova que os tours guiados podem ser usados mesmo quando não é para o onboarding inicial.

👉 O Trello nos mostra que desde que o conteúdo seja realmente curto e o tour seja cativante, um botão de pular pode não ser incluído.

6-Typeform

O Typeform, com seu modal descontraído e seus desenhinhos divertidos roubam nosso coração logo de cara.

Sua maneira de formular as opções também é incrível. Tudo isso se torna tão humano e acessível através de uma boa redação e uma estética envolvente.

Uma vez dentro do tour, o Typeform usa um ambiente semelhante ao do tour do produto da Grammarly. Eles usam hotspots e beacons para direcionar os usuários da maneira que eles podem ficar mais interessados em entender mais facilmente os recursos mais complicados.

O que faz do Typeform um bom exemplo?

👉 A abordagem humana da Typeform a seus usuários no tour guiado torna o produto mais acessível e o tour mais viável de ser realizado por completo.

👉 Um ambiente de demonstração dá aos usuários a sensação de liberdade que eles podem estar desejando após tours forçados e visitas de produtos em outras plataformas.

👉 Uma vez que os usuários da Typeform chegam dentro de um projeto real no qual o usuário está trabalhando, torna-se uma experiência prática e a informação se torna mais fácil de ser lembrada.

7- TimeSolv

Existem algumas ferramentas bastante complicadas com muitas características e recursos por aí e que precisam mais de um tour guiado mais aprofundado do que outras.

O TimeSolv é provavelmente uma delas.

Com cerca de dez barras diferentes em uma página de sua interface, o TimeSolv tem que passar por cada elemento para garantir que tudo fique bem. O TimeSolv consegue explicar cada um deles usando um texto curto, destaques e botões de anterior e próximo.

Naturalmente, quando o conteúdo é abundante, uma barra de progresso é vital. Tanto um marcador de progresso quanto uma barra de progresso tornam o conteúdo do tour mais digerível.

O que faz do TimeSolv um bom exemplo?

👉 Sendo o TimeSolv um produto complexo, é uma ótima prática usar pequenos pedaços de texto para cada pequeno elemento em uma tela para garantir que nenhuma pergunta fique sem resposta.

👉 Uma barra de progresso é uma obrigação ao passar por cada pequeno detalhe, e o TimeSolv parece ter compreendido isso muito bem.

👉 Os botões de anterior e próximo são vitais, pois cada informação é dada em uma dica diferente, tornando mais fácil para os usuários manter tudo sob controle.

8- Grove HR

O Grove HR usa um método muito popular de tour guiado: o acompanhamento de checklist.

Ao dar aos usuários um checklist para que possam passar a cada passo, o Grove HR aumenta as chances de conclusão do onboarding, ao mesmo tempo em que mantém o fluxo de onboarding mais compacto.

O tour de Grove HR também desfruta de interatividade e destaques que tornam tudo mais rápido e fácil para os usuários.

De quebra, o Grove HR torna possível o acesso a guias interativos mesmo depois que os usuários terminam o tour inicial do produto. (Ei, você também pode fazer isso 🤫)

O que faz do Grove HR um bom exemplo?

👉 Usar um checklist para usuários é uma forma popular e eficaz de garantir que eles realmente completem o onboarding, e o Grove HR faz um belo uso disso.

👉 A interatividade e os elementos de alto foco tornam o tour guiado mais acessível e fácil de ser finalizado.

👉 Como o Grove HR permite aos usuários acessar guias interativos através do centro de recursos sempre que quiserem, os usuários têm a liberdade de pular o onboarding inicial, o que é reconfortante.

Conclusão 

É difícil criar um tour guiado que se adapte perfeitamente ao seu produto. Leva tempo e paciência (e muitos testes beta) para chegar onde estão as outras ferramentas.

Mas é possível criar um bom tour inspirando-se nos exemplos deste post no blog e adaptando-o ao seu produto.

Desejo a você muita sorte com seu projeto!