Better help

[controversial]

Use a tool like shepherd or tourist for an interactive tour of the app.

[controversial]

This is done. However, I still want some more. I'm thinking:

Problem that still exists

When a user presses ?, the information with which they are presented is very dense. Not friendly.

I tried to solve this initially with the tour. The tour isn't actually that helpful, it just states the obvious, for the most part. Everything it says can be inferred from a quick glance at the UI.

Alternative

I think it'd work well to have a window that displayed helpful animations. I could put together a series of GIFs that demonstrated how to interact with the network. The whole thing could be displayed in a sort of carousel / slider, which lives in a popover. I envision this as being dark gray with a transparent background. It would take up the full viewport on mobile, but would float in the middle on desktop.

[controversial]

Google Hangouts has a nice example of what I'm thinking of.

I'd probably have animations on the slides.

[controversial]

Current (slightly revised) plan: Imitiate the Hangouts tour above closely. Then:

• The "take a tour" button will launch the sliding tour, like the above picture.
  • The tour should be swipeable, etc. A slider library might be appropriate if it comes with dots, sliding, touch support, and buttons, and can be non-infinite. slick looks good, but it might need jQuery.
• The Shepherd tour should be kept, but only two steps for #22.

[controversial]

Currently planning to use Flickity or Swiper (but probably the latter). Both are Vanilla JS libraries with everything I need.

[controversial]

The Shepherd tour has been updated to be much clearer, and now has a GIF animation as well. In addition, the “help” button now reopens the tour even if the user has already gotten started. Everything is pretty clear now.