Ask HN: Creating tutorial for first time users of an app | Hacker News Reader

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

3 pointsjumpman2224 comments

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's the best method of helping a first time user become accustomed to the app? My possible ideas are below; suggestions are much appreciated.

- Create a video tutorial of me using the site and explaining features

- Create a written guide that explains the features and what the user's first steps should be.

-Create interactive messages that guides the user through my site. (I don't yet know how to do this)

View on HN

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/

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.

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/

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.

Reply on news.ycombinator.com