Super-productivity: Add guided tour

[johannesjo]

The app has a lot of features. We would need some kind of guided tour to make it easier for new users to get on board.

What to show:

• basic features
  
  
  
  • creating tasks
  
  
  • creating projects
  
  
  • time tracking
  
  
  • daily summary
  
  
  • short syntax (e.g. "my task 2h/3h")
  
  
• advanced
  
  
  
  • jira integration
  
  
  • git integration
  
  
  • evaluation & metrics
  
  

[KonTy]

IMHO the app is already intuitive as it is and doesn't need any tour, but that's just me :)

[johannesjo]

I thought so too, but then I watched this video:
https://www.youtube.com/watch?v=6qG1Eg0MuSk&feature=youtu.be
:)

[KonTy]

I thought so too, but then I watched this video:
https://www.youtube.com/watch?v=6qG1Eg0MuSk&feature=youtu.be
:)

I see your point but hey maybe that guy is not tech savvy? Actually let me use this opportunity to praise your new UI!! Holy crap man now that you use a sidebar as oppose to a drop down the app is even more intuitive as before. It is awesome, I really enjoy using it now, that sidebar/treeview made a huge difference. You made a lot of progress!!!! This app is making you more productive for sure. We should show it to the Microsoft Todo people so that they learn a thing or two from you!

[IT-Tool]

@johannesjo Do you have any suggestions/references and in what format you would like to get this guided tour?

[johannesjo]

Hi @IT-Tool ! That's great to hear! I haven't thought about the details too much yet to be honest, but what I think is very important is that it should affect the rest of the app as little as possible, both in terms of performance (ideally it has no effect if the user dismissed it), as well as in terms of code, e.g. changes to other components – apart from some sort of identifier maybe – should not be necessary. The tour should ideally be easy to use and to extend. I think this is important for it to be useful and up to date long term.

As you might already know there are third-party modules out there worth checking out. Not sure if they fit the restrictions mentioned above.

Not sure if it makes much sense, but here some pseudocode how I could see this work:

const tourSteps = [
  {
    // NOTE: text needs to be translateable
    txt: 'Welcome...'
  },
  {
    route: '/tag/TODAY/tasks'
    txt: 'This is the task list view...'
  },
  {
    route: '/project/DEFAULT/tasks'
    txt: 'This is the default project. You can delete it.'
  },
  {
     scrollTo: '.selector',
     txt: 'This is a button the user can press for xyz'
  }
];

class GuidedTourService {
  prev(){}
  next(){}

  private scrollToElement() {}
  private navigateTo() {}
  // ...
}