

Ask HN: Creating tutorial for first time users of an app - jumpman222

I just finished creating the first version of my webapp, and I want first time users to be able to grasp a basic idea of how it works.  What&#x27;s the best method of helping a first time user become accustomed to the app? My possible ideas are below; suggestions are much appreciated.<p>- Create a video tutorial of me using the site and explaining features<p>- Create a written guide that explains the features and what the user&#x27;s first steps should be.<p>-Create interactive messages that guides the user through my site. (I don&#x27;t yet know how to do this)
======
fmilne
It might depend heavily on what type of app you have made and who users are.

On one end of the spectrum of human behaviour, you have people who skip the
manual entirely and go straight to trying to figure it out themselves. They
will be pissed if you don't have a tutorial when they get stuck.

On the other end, you have the type of people who will carefully follow every
instruction you provide them, and will be upset if you don't provide a guide
or instructions upfront.

Regarding interactive messages, I recently used this plugin on a recent
project. If a new user opted to take the tour, they could follow along down a
series of options, interact with the form fields or UI that was being
highlighted and close the tour at anytime. They could also opt out and start
the tour later if they got stuck. One week in and we are already seeing an
impact on the KPI for the project.
[http://usablica.github.io/intro.js/](http://usablica.github.io/intro.js/)

~~~
jumpman222
Thanks much for the plugin suggestion. It looks promising. My app is geared
toward 18-25 year old users, so I think I may go the interactive messaging
route and then create a written F.A.Q.

~~~
mindcrime
Another option for doing interactive tours is Hopscotch.[1] It serves pretty
much the same purpose as Intro.js, and seems to be very popular as well. I
haven't used Intro.js myself, but I'm currently building out intro tour using
Hopscotch and it works quite well so far.

[1]:
[http://linkedin.github.io/hopscotch/](http://linkedin.github.io/hopscotch/)

------
fbnt
I believe the most straightforward way of doing this is with your 3rd option
(interactive hints through the workflow). You can easily accomplish this with
popups and overlays.

