Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-72385

Improve and simplify design of user tours

    XMLWordPrintable

Details

    • MOODLE_311_STABLE, MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-72385-master
    • Hide

      Initial setup

      1. Create a course a use a existing one.
      2. Create a Quiz activity.
      3. Import the attached tour.
      4. Edit the tour and make sure "Display step numbers" option is checked
      5. Save the tour.

      Testing

      1. Go to created Quiz.
      2. Click on Edit Quiz.
      3. Verify that you will see the User tour.
      4. Verify that the max-width of the Tour is 400px instead of 500px.
      5. Verify that there is no border between header and content.
      6. Verify that there is no border between content and footer.
      7. Verify that there is no Close button (X icon) on the top right of the tour anymore.
      8. Verify that the buttons in the footer are now left-aligned (Next, Skip tour, End tour).
      9. Verify that there is no Previous button anymore.
      10. Verify that the Next button will have the label that including the current step and total steps, like: Next (1/4).
      11. Verify that In the first, second and third steps, you will see the Skip tour button.
      12. Verify that in the last step, you will see the End tour button.

       

      Show
      Initial setup Create a course a use a existing one. Create a Quiz activity. Import the attached tour. Edit the tour and make sure "Display step numbers" option is checked Save the tour. Testing Go to created Quiz. Click on Edit Quiz. Verify that you will see the User tour. Verify that the max-width of the Tour is 400px instead of 500px. Verify that there is no border between header and content. Verify that there is no border between content and footer. Verify that there is no Close button (X icon) on the top right of the tour anymore. Verify that the buttons in the footer are now left-aligned (Next, Skip tour, End tour). Verify that there is no Previous button anymore. Verify that the Next button will have the label that including the current step and total steps, like: Next (1/4). Verify that In the first, second and third steps, you will see the Skip tour button. Verify that in the last step, you will see the End tour button.  
    • 0
    • HQ Team International Sprint 9, HQ Team International Sprin 10, HQ Team International CI H2-21

    Description

      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:

      Attachments

        1. arrows-no-change.png
          arrows-no-change.png
          54 kB
        2. button-alignment-left.png
          button-alignment-left.png
          57 kB
        3. button-alignment-right.png
          button-alignment-right.png
          56 kB
        4. customisable-single-confirmation-button.png
          customisable-single-confirmation-button.png
          77 kB
        5. drop-borders.png
          drop-borders.png
          54 kB
        6. drop-close-button.png
          drop-close-button.png
          54 kB
        7. end-tour-button.png
          end-tour-button.png
          105 kB
        8. MDL-72385_Test Passed.png
          MDL-72385_Test Passed.png
          89 kB
        9. next-button.png
          next-button.png
          105 kB
        10. next-button-alt.png
          next-button-alt.png
          81 kB
        11. no-borders.png
          no-borders.png
          74 kB
        12. no-close-button.png
          no-close-button.png
          75 kB
        13. no-previous-button.png
          no-previous-button.png
          77 kB
        14. previous-button.png
          previous-button.png
          104 kB
        15. result-multi-step.png
          result-multi-step.png
          60 kB
        16. result-one-step.png
          result-one-step.png
          58 kB
        17. single-step-tour.png
          single-step-tour.png
          54 kB
        18. skip-button.png
          skip-button.png
          79 kB
        19. tour_export_quiz_edit.json
          1 kB
        20. tour-starts-from-2.png
          tour-starts-from-2.png
          10 kB
        21. width-400-px.png
          width-400-px.png
          75 kB
        22. width-500-px.png
          width-500-px.png
          80 kB

        Issue Links

          Activity

            People

              huongn@moodle.com Huong Nguyen
              sanderbangma Sander Bangma
              Simey Lameze Simey Lameze
              Shamim Rezaie Shamim Rezaie
              Gladys Basiana Gladys Basiana
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              Votes:
              0 Vote for this issue
              Watchers:
              9 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                19/Apr/22

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 4 days, 6 hours, 59 minutes
                  4d 6h 59m