8 Exemplos Inspiradores de Product Tours Que Os Usuários Adoram

Eu adoro um Product Tour bem projetado.

Faço visitas guiadas 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 Product Tour é uma arte.

product tour meme
(Legenda: Isso espalha alegria!)

Eu olhando para um Product Tour bem feito

E quero enfatizar mais uma vez: Estou falando de um Product Tour de qualidade.

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

Mas simplesmente não tem como evitar os Product Tours ruins.

Agora, se você acabou aqui neste artigo de exemplos de Product Tours, você pode estar tentando descobrir como deve ser o SEU passeio pelo seu produto. Não tenho como ensinar a você exatamente isso (este post sim), mas posso mostrar como eu acho que deve ser um bom Product Tour.

Antes de irmos direto ao ponto, vamos lembrar o que exatamente é um Product Tour:

what is a product tour

O que é um Product Tour?

Um Product Tour poderia ser traduzido em português como um Passeio Pelo Produto, e 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 Product Tour 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.

Outra coisa a ser lembrada é a diferença entre um Product Tour e um Tutorial de Produto. Basicamente, um Tutorial de Produto é um Product Tour mais longo e extenso. (Veja mais aqui)

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

Aqui estão 8 ótimos exemplos.

8 Exemplos dos Melhores Product Tours

Toda vez que vejo as palavras “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 Product Tour: 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 Product Tours feitos de qualquer jeito.

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

grammarly product tour

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.

grammarly product tour example

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 Product Tour, 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, o Ghostwriter.ai tem seu Product Tour 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 Product Tour 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.

Ghostwriter.ai product tour

O Product Tour do 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, o Ghostwriter.ai tem um Tour Interativo e envolvente.

Ghostwriter.ai product tour example

O que faz do Ghostwriter.ai um bom exemplo?

👉 O uso do Ghostwriter.ai do Onboarding Contextual como uma forma de Product Tour é 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, o 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 o Ghostwriter.ai faz uso disso enquanto também usa um marcador de progresso.

3- HubSpot

O exemplo do Product Tour 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”.

Hubspot product 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 Product Tour 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.

Vieworks product tour

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.

Vieworks product tour example

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 Product Tours 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.

Trello product tour
Trello product tour example
Trello product tour steps
Trello's product tour
product tour example from Trello
Trello's product tour as an example

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 Product Tours 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 Product Tour 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.

Typeform product tour

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.

Typeform product tour example

O que faz do Typeform um bom exemplo?

👉 A abordagem humana da Typeform a seus usuários no Product Tour 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 Product Tour 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.

TimeSolv product tour

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 Product Tour: 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.

Grove HR product tour

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 🤫)

Grove HR product tour example

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 Product Tour 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 Product Tour 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!

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

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.