Improve user navigation through demos

[glassnotes]

Following the site re-design, it is now straightforward for a user landing on the main page (or main demo page) to find the entry point to the basic demos. However, there is not much guidance on where to go next.

It would be nice to have a mechanism for navigating a user through various sequences of related tutorials. The 'related demos' in the side bar is a starting point for this, but we can also do something more concrete.

For example:

• provide navigation links to "previous/next demo" at the bottom of demos; more specific than just having "related demos"
• provide some curated lists on the main demo page. For example, clicking a button that says "interested in quantum chemistry?" will provide a list of recommend demos focused on qchem, and any prerequisite demos, to work through
• a collapsible sidebar on the left that displays a demo's location relative to other demos in a list, as shown in the graphic below. This would be the most challenging to organize and implement, but might also provide the best experience because it allows a user to see more context about what the demo contents may be used for

[co9olguy]

Yep, this would be amazing. 👍

How come you think it would be hard to organize and implement?

[glassnotes]

The tree itself is easy to construct, the challenge would be updating everything when new demos are added.

Using the drawing as an example, suppose we add a demo between A and B - this would be part of both the red route and the blue route. If we were to just hardcode the sidebars the way the 'related demos' currently are, we'd have to manually update all of the demos to incorporate the new one. This would be tedious so we will have to figure out how to automate it within sphinx.

We should be able to use sphinx-tabs to enable switching between routes like I drew, but I'll have to look into how to handle their contents. Ideally there is something built into sphinx that allows us to specify a table of contents for each route. Then in the individual demos we indicate which routes the demo is part of, and when the website is built it pulls the information and populates the tabs. If sphinx doesn't have that functionality, we can build it ourselves 😄

[co9olguy]

Rather than having all information about different routes hard-coded into the demos themselves (either by hand or using sphinx), would it make more sense to have a standalone page with all of the "mini-courses", and when you click on one, it renders its own page with its own navbar, and each page is viewed in a subframe?

[hpssjellis]

As a new user I am finding it very difficult to just find examples that use Tensorflow, or just Strawberry Fields, or other examples that are just to do with chemistry etc. Some kind of easy to understand categories would be helpful.

[josh146]

That's useful feedback, thanks @hpssjellis!

Have you used the filters on the right hand side of the page?

Unfortunately, they currently vanish on narrow browser windows, so perhaps we should move them to a more prominent location.

[hpssjellis]

I missed those on a full window, since we are so used to sidebar Ads I didn't even see them. Yes on my cell phone, even with desktop view they did not show. I was thinking of something more like this page I have that shows every demo, but perhaps split up into sensible sections. list format. I will dig a bit and see if I can find some categories.

Even this very cool page https://pennylane.ai/qml/demonstrations.html only shows a few of the demos at a time. Took me a bit to realize that the images scroll.

Actually just a problem with any large site that has a lot to show, very confusing for beginners to reduce the information overload to find simple starting points. By the way @josh146 the site is nicely done.

[co9olguy]

Thanks @hpssjellis! All feedback is valuable and we will take it to heart. We're always trying to find ways to give users the best experience 🙂

[josh146]

Thanks @hpssjellis!

[KetpuntoG]

Already solved on the right side of the demos 😄
I think this can be closed @ikurecic