As part of Moodle 4.0 we are working on a new onboarding experience. This includes some changes to how the user tour modals look and work. 

The work done to update the user tour modal as part of this issue should be captured in the component library.

Specification to follow

—

Moodle 4.0 user tours redesign

Structure

AFAIK, current user tours use the “modal” bootstrap component which is great for dialogues boxes but offers too many UI elements for simple and elegant user tours. I suggest using the “modal” component as the base to create our own “user tour box” component.

This is what, IMO, we should and should not change when creating a new component “user tour box” when comparing it to the bootstrap “modal” component. 👇

Width

The new user tours have a width of 400px instead of the current 500px existing ones. This smaller size just seems more friendly to users and allows us to display images with a better proportion ratio. However, I’m not sure if this should be a rule since user tours are also displayed in the middle of the screen on different occasions.

Maybe we could set a rule for its size, or it should be customisable? 🤔

Now it looks like this:

It could look like this:

Borders

For a cleaner look, we should drop the borders that separate the title, content and buttons.

How it looks now:

How it could look then:

Close button

We should drop the “x” button as well, making the process more straightforward and simulating a more natural dialogue process where the user reads the message and “answers” it by clicking on the button.

How it looks now:

How it could look then:

Arrows

No changes in either the way it behaves or looks. 👍 (Just mentioning this because in the Figma prototypes these are not illustrated due to time constraints.)

Buttons alignment

Not a mandatory thing, but aligning buttons to the left is a pattern that was heavily used in Moodle 4 overall redesign. It makes it more readable (even more when the “borders” that separate text and buttons are gone).

Now it looks like this:

It would look like this:

Flow

Single-step user tour

Right now it seems that the only button that’s always displayed is the user tours, regarding their complexity, is the “End tour” one. In the new design, tours with a single step will  have their own customisable agreement button - that functionality is covered by MDL-72557, so does not need to be handled as part of this issue.

Multi-step user tour

‘Previous’ button

Users rarely want to navigate back in a user tour, so we should remove the “Previous” button.

So this:

Would look like this:

‘Next’ button

If possible, we should inform users of how many steps are ahead in some user tours. This gives them more control over it and less probability of skipping it. We could display this “steps” indicator in the “agreement” button itself; however, if this approach makes the development more expensive, we could find another way to display it. Note: The step count is being implemented as part of MDL-71938, so in this issue we just need to move that information into the "Next" button and adjust it to match the below prototype.

It currently looks like this:

It could look like this:

‘End tour’ button

As mentioned above, this should not be the button that is displayed by default on single-step tours. This button should only appear when there is more than one step in the user tour and it should allow the user to abort the user tour completely.

Currently, it looks like this:

It could look like this:

Result

Putting all previous changes together should make the user tours look like this:

Single-step:

Multi-step: