Inwerpsel / use-theme-editor

A React theme editor
GNU General Public License v3.0
4 stars 0 forks source link

Add tutorial steps and tasks for every UI element #67

Open Inwerpsel opened 6 months ago

Inwerpsel commented 6 months ago

Now that the right primitives for tutorials are added, it should be possible to create a tutorial that guides you through every UI element.

Ideally the tutorial content can also be shown individually with an info button in the UI. Perhaps a general info toggle, similar to the "drag enabled" toggle, could allow getting info without putting tons of little buttons everywhere.

Challenges

Complex tutorial state

In order to properly demonstrate the purpose of certain elements, a fairly long sequence of other actions will have to be done and captured. Examples of this are history locking, the history stash, the palette. For these elements, actually putting the user in the intended situation should make it much easier to understand than trying to explain in words only.

This is especially the case for the history stash, which cannot easily be tied to interactions most users are familiar with. If the tutorial recreates the situation where you lose a lot of changes by doing an edit when navigating far back in history, the explanation can be given afterwards and will be much easier to digest.

Incomplete implementations

Some elements are incomplete or even partially broken, which makes explaining them perhaps more work than just improving them first.

Performance

If most UI elements will include a tutorial element, it will be crucial to keep an eye on how it affects performance. Especially since many of these new ones have multiple instances on the screen at the same time.

Elements

Roughly ordered

Stable:

Might wanna change first: