Como fazer tutorial passo a passo em aplicação web?
tutorial passo a passo web
Veja abaixo como fazer aquelas dicas de uso em aplicações web e sites.
Para guiar seus usuários por aplicações web muitos sistemas optam por disponibilizar um tour passo a passo ou step-by-step em inglês. Nesse guia são apresentados tooltips ou modais, aqueles balões com informações, demostrando o fluxo e o que cada cada campo, ou elemento faz.
Para isso existem várias bibliotecas prontas como:
Bootstrap Tour que é uma biblioteca do Bootstrap, que traz um guia com passo a passo permitindo que voltar para a etapa anterior ou finalizar qualquer momento;
Intro.js é uma biblioteca javascript, com o visual bem agradável que permite, que permite além de passar o passo a passo, destacar blocos ou divs, inserir imagens de vários formatos e muito mais;
Jquery Tour é um plugin jquery como um player onde pode passar as dicas pelas setas ou deixar executar automaticamente;
Product Tour usa jquery e CSS para criar um guia passo a passo animado com pontos em destaque em cada item da apresentação.
Website Tour mais um plugin que usa jquery nele os balões por padrão vão pulando automaticamente;
Praticamente todos os plugins apresentados aqui funcionam assim:
Você clique em um botão ou o evento é disparado no carregamento da página;
Aí abre uma caixa de texto sobreposta indicando o que faz faz aquele primeiro elemento do fluxo;
Nessa caixa tem as opções para seguir, retornar ou sair, ou em alguns casos o sistema vai pulando de uma caixa para outra automaticamente;
Quando clica em seguir vai para o próximo elemento do fluxo;
Segue assim até demonstrar todas as funcionalidades inseridas no tutorial;
Normalmente também pode ser encerrado o tutorial quando quiser, ou retornar para os passos anteriores.
Isso é o que o usuário irá ver, agora veja como irá usar essas ferramentas na sua aplicação.
A maioria deles se comunicam por um arquivo JSON, onde tem as mensagens referente a cada passo da aplicação. Esses passos são adicionados por id's, classes ou elementos aos blocos de conteúdos ou as ações executadas. Em alguns casos a informação do tooltip são adicionados diretamente no elemento HTML.
