XMLWordPrintable

Details

    • Hide

      When the user encounters the following features for the first time, they should be introduced with some informative User Tours:

      • User Menu
      • Course Index
      • Side Blocks
      • Swipe Navigation

      These should only appear the first time a user encounters each feature, and shouldn't appear again after closing them (If the app is closed without accepting, they will be shown again next time again until accepted).

      Given that these features can appear in different screens depending on the site configuration, it is possible that more than one tour is triggered in the same screen. When this happens, tours shouldn't be displayed all at the same time. Instead, the first tour will be shown and any subsequent tours will only appear after the current one is closed.

      Make sure that pressing on the background overlay or the native back button do not dismiss User Tours, they should only be dismissed using the acknowledge buttons.

      Finally, tours can be disabled in the configuration using disabledUserTours; an array of user tour ids. The ids are the following:

      • course-index
      • user-menu
      • side-blocks
      • swipe-navigation

      For example:

      {
          "disabledUserTours": ["user-menu", "side-blocks"]
      }
      

      Show
      When the user encounters the following features for the first time, they should be introduced with some informative User Tours: User Menu Course Index Side Blocks Swipe Navigation These should only appear the first time a user encounters each feature, and shouldn't appear again after closing them (If the app is closed without accepting, they will be shown again next time again until accepted). Given that these features can appear in different screens depending on the site configuration, it is possible that more than one tour is triggered in the same screen. When this happens, tours shouldn't be displayed all at the same time. Instead, the first tour will be shown and any subsequent tours will only appear after the current one is closed. Make sure that pressing on the background overlay or the native back button do not dismiss User Tours, they should only be dismissed using the acknowledge buttons. Finally, tours can be disabled in the configuration using disabledUserTours ; an array of user tour ids. The ids are the following: course-index user-menu side-blocks swipe-navigation For example: { "disabledUserTours": ["user-menu", "side-blocks"] }
    • MOODLE_37_STABLE
    • MOODLE_400_STABLE
    • Moodle App 4.0

    Description

      In order to introduce users to some features, we're going to support user tours that explain them upon their first encounter. In particular, this first iteration will include the following 4 tours:

      • Course Index: Displayed the first time a user encounters the Course Index floating button.
      • Side Blocks Buttton: Displayed the first time a user encounters the Side Blocks floating button.
      • Swipe Navigation: Displayed the first time a user encounters a page supporting swipe navigation, and with more than one item in the list.
      • User Menu: Displayed the first time a user encounters the user menu button.

      These tours will not be displayed again after users acknowledge their contents, and this applies app-wide (instead of per-site).

      Technical details:

      In order to implement this feature, we will create a new service to display User Tours in a similar way to Alerts or Modals in Ionic. This will take a component with the specific User Tour, and optionally indicate an element to focus. Keeping that in mind, tours can potentially have two styles:

      • Focused Overlay: This style will cover the entire screen but leave a hole in the overlay to show the focused element. The tour component will be rendered inside a box pointing to the element. In this iteration, the Course Index, Side Blocks Button, and User Menu tours use this style.
      • Overlay: This style will cover the entire screen in an overlay and render the tour component on top. In this iteration, the Swipe Navigation tour uses this style.

      Whenever a tour has been acknowledged by the users (typically clicking a button in the modal, but that's up to each tour to define), this will be recorded in the database to prevent it from showing again. For this reason, each tour needs to be described with a unique id.

      Additionally, it will be possible to disable specific tours from the config (using their id).

      UI details:

      The UI styles can be seen in the image attached to this issue. Additionally, an animation similar to Ionic's alert will be triggered in order to show/hide the tours.

      Pressing on the background overlay or the native back button should not dismiss the User Tour, it should only be dismissed using the acknowledge button.

      For dark mode, we'll follow the same principles as Ionic but the popover background will be a bit lighter to differentiate it from the overlay background (which is darker than Ionic's overlay).

      Attachments

        1. screenshot-2.png
          screenshot-2.png
          82 kB
        2. screenshot-1.png
          screenshot-1.png
          129 kB
        3. image-2022-03-15-12-25-59-948.png
          image-2022-03-15-12-25-59-948.png
          61 kB
        4. image-2022-03-15-12-24-28-913.png
          image-2022-03-15-12-24-28-913.png
          60 kB
        5. App user tour.jpg
          App user tour.jpg
          646 kB
        6. App 4.0 guided Tour and coach marks.jpg
          App 4.0 guided Tour and coach marks.jpg
          861 kB

        Activity

          People

            noeldemartin Noel De Martin
            sdnyanesh Dnyanesh
            Dani Palou Dani Palou
            Alfonso Salces Alfonso Salces
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Clockify

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.