cylc-ui icon indicating copy to clipboard operation
cylc-ui copied to clipboard

Minimal UI tour for new users

Open sadielbartholomew opened this issue 5 years ago • 4 comments

We could include a basic optional "tour"* of pop-up tooltips (or similar) providing descriptions of major components, to guide users around the UI when we detect they are using it for the first time.

Some users no doubt will not like this, & not want to use it, so a first step in the "tour" which I envision as popping up by default should be a welcome message & initiation question such as 'Hi there <username>. For your first time using the Cylc UI, would you like a quick guide around the components?'.

Then the tour would provide descriptions such as 'This is how you can add a workflow view to the page.', 'You can add as many views as you like', etc. (obviously keep it informational & avoiding patronising users with obvious commentary). Perhaps we could ask to begin with whether the user used the old Cylc GUIs, & if so provide context to relate the two, e.g. 'This is the equivalent of the old GScan, but we have improved it such that... <brief description of differences>'.

There are potential Vue components to use (partially) to implement this, though we could implement it ourselves via events without need for a special component:

sadielbartholomew avatar Jul 30 '19 16:07 sadielbartholomew

I like this idea, but unless it's super-easy to do I'd suggest not putting much effort into it until we're sure we have a viable product in terms of all the critical functionality. Hopefully it's the sort of thing that can be bolted on later, or would it need to be designed in from the start?

hjoliver avatar Jul 31 '19 00:07 hjoliver

Hopefully it's the sort of thing that can be bolted on later, or would it need to be designed in from the start?

There are libraries (@sadielbartholomew linked some) that make it easy to add to any application later. Unless we want something really sophisticated, and then we would have to create it from scratch.

So +1 for low priority, and for adding it later with an existing library.

kinow avatar Jul 31 '19 01:07 kinow

I like this idea, but unless it's super-easy to do I'd suggest not putting much effort into it until we're sure we have a viable product in terms of all the critical functionality

So +1 for low priority, and for adding it later with an existing library.

I also agree, it is certainly not something to prioritise or necessarily have in initial versions. But it would be nice to include eventually, I think.

Hopefully it's the sort of thing that can be bolted on later

Definitely, & as Bruno indicated it shouldn't be difficult to set it up, unless it was elaborate (but as I emphasised with 'minimal', in context only a simple tour would be sensible, as the functionality of components & widgets should be fairly clear even immediately, by design).

sadielbartholomew avatar Jul 31 '19 07:07 sadielbartholomew

Reading about Open MCT today. Their main page contains a link to a version of their UI deployed to Heroku, so users can play with this demo, and there's also a tutorial/tour when you access the first time. Might be helpful?

image

kinow avatar Jan 31 '21 11:01 kinow