Moodle
  1. Moodle
  2. MDL-30615

Add an Activity Chooser to help explain to users what all the activities and resources are

    Details

    • Rank:
      33422

      Description

      As discussed in http://moodle.org/mod/forum/discuss.php?d=191549, we've written a new module picker for Moodle 2 based on the same design as the Question Picker.

      From the positive comments we've received so far, we'd like to submit it for integration into master

      Current features of the module chooser (modchooser) include:

      • written using YUI3;
      • uses progressive enhancement approach;
      • displays the icon associated with the module;
      • displays any help associated with the module;
      • automatically resizes for smaller screens (with a minimum size); and
      • supports keyboard access (up/down/tab/space/return of form elements).

      The chooser uses the M.core.dialogue (enrol/yui/notification/notification.js) YUI module, and is based upon the Question Bank question type selector in visual design (the Question type selector uses YUI2).

      1. Integrated Add form.bmml
        10 kB
        Michael Hughes
      1. 3col.png
        61 kB
      2. Integrated Add form.png
        68 kB
      3. module chooser.png
        50 kB
      4. Moodle activities mindmap.jpg
        40 kB

        Issue Links

          Activity

          Hide
          Andrew Nicols added a comment -

          Screenshot of the module chooser

          Show
          Andrew Nicols added a comment - Screenshot of the module chooser
          Hide
          Helen Foster added a comment -

          Adding Martin as a watcher as he mentioned in the recent online developer meeting that he'd like something like this in Moodle 2.3.

          Show
          Helen Foster added a comment - Adding Martin as a watcher as he mentioned in the recent online developer meeting that he'd like something like this in Moodle 2.3.
          Hide
          Andrew Nicols added a comment -

          You can access the demo at
          https://moodledev.luns.net.uk/a

          There are some minor changes to the code since the demo, but these shouldn't affect functionality or appearance of the demo.

          Show
          Andrew Nicols added a comment - You can access the demo at https://moodledev.luns.net.uk/a There are some minor changes to the code since the demo, but these shouldn't affect functionality or appearance of the demo.
          Hide
          Martin Dougiamas added a comment - - edited

          This is exactly what I was imagining I really want to see something like this in 2.3, but it is dependent on other changes in core for course formats and so on so can't drop in right away.

          One thing that will have to be added is some user preference to turn it on and off, possibly via a checkbox in the dialog itself, as power users would prefer the quick menu.

          Show
          Martin Dougiamas added a comment - - edited This is exactly what I was imagining I really want to see something like this in 2.3, but it is dependent on other changes in core for course formats and so on so can't drop in right away. One thing that will have to be added is some user preference to turn it on and off, possibly via a checkbox in the dialog itself, as power users would prefer the quick menu.
          Hide
          Dan Poltawski added a comment -

          I'm going to make my usual complaint about settings! If we add settings for all these 'improvements' then we create the same complexity of interface with settings as the things are trying to improve.

          Show
          Dan Poltawski added a comment - I'm going to make my usual complaint about settings! If we add settings for all these 'improvements' then we create the same complexity of interface with settings as the things are trying to improve.
          Hide
          Michael de Raadt added a comment -

          First, thanks for your efforts and rapid response. This looks really great.

          After a discussion about this with Martin, I thought I should record some ideas I had.

          • It would be good if this could be streamlined from three clicks to two. Perhaps instead of the radio selector and a next button, each module could have a help icon next to it that showed the help, with a mouseover showing the help also, then clicking on the module name would take you to the new module configuration.
          • If the current controls were to remain, then I think the "Next" button label should be replaced by another word, such as "Create" or "Add". The word next implies a "wizard" process and I don't think that reflects the functionality.
          • Martin suggested that the use of this pop-up form should be controllable so that advanced users can still use the old menus for greater speed. Certainly we would need to maintain the old drop-down menus anyway for accessibility, but perhaps there can be a control in the user's profile that allows them to choose the old menus if they wish to. I think the default should be to show this pop-up.

          Perhaps this would be a target for a proper usability study, if our goal is to improve usability by this change.

          I haven't looked into this too deeply but I assume this will be extensible and use a standard help string from each module's language file.

          Show
          Michael de Raadt added a comment - First, thanks for your efforts and rapid response. This looks really great. After a discussion about this with Martin, I thought I should record some ideas I had. It would be good if this could be streamlined from three clicks to two. Perhaps instead of the radio selector and a next button, each module could have a help icon next to it that showed the help, with a mouseover showing the help also, then clicking on the module name would take you to the new module configuration. If the current controls were to remain, then I think the "Next" button label should be replaced by another word, such as "Create" or "Add". The word next implies a "wizard" process and I don't think that reflects the functionality. Martin suggested that the use of this pop-up form should be controllable so that advanced users can still use the old menus for greater speed. Certainly we would need to maintain the old drop-down menus anyway for accessibility, but perhaps there can be a control in the user's profile that allows them to choose the old menus if they wish to. I think the default should be to show this pop-up. Perhaps this would be a target for a proper usability study, if our goal is to improve usability by this change. I haven't looked into this too deeply but I assume this will be extensible and use a standard help string from each module's language file.
          Hide
          Andrew Nicols added a comment -

          Hi Michael,

          My initial thoughts on your comments:

          • It would be relatively easy to use CSS to display the help texts on mouseover. At present, selecting a radio button adds a class to the parent div - this could be replaced with a :hover attribute on that div instead.
          • However... removing the radio buttons would break keyboard interaction which is currently 'free' with the RBs.
          • As an alternative and to simplify things, we could have a double-click listener to automatically continue to the module creation screen. I know that this is technically still three clicks, but it's not really
          • I agree, the button should be changed to 'Create' (I had hoped originally that we'd be able to produce a wizard of some kind, but mforms just isn't capable in that regard).
          • I do agree that it would be useful if this were controllable, but I'm also with Dan that there are already too many options. Perhaps there needs to be a general 'Accessibility' setting, which disables these kinds of things without entirely disabling javascript, but if users desire, they can choose to expand upon these settings and have the full range. It may be that this chooser is actually pretty friendly - I haven't had a chance to try with a screen reader, but it is navigatable using the keyboard, set's the relevant focus, and so it may actually be no less accessible in some situations than the current selectors.

          I think that a usability study would be great - I believe that Stuart Lamour's institution has performed one (though obviously not using the module chooser).

          And yes, this is extensible and it does use the standard help for both the modules, and their subtypes. Any new modules created and enabled within Moodle would automatically be shown in this selector, and if they provide help text then it can be displayed. Additionally, the help section of the module chooser utilises Moodle's MarkDown (as do the help buttons within Moodle).

          Show
          Andrew Nicols added a comment - Hi Michael, My initial thoughts on your comments: It would be relatively easy to use CSS to display the help texts on mouseover. At present, selecting a radio button adds a class to the parent div - this could be replaced with a :hover attribute on that div instead. However... removing the radio buttons would break keyboard interaction which is currently 'free' with the RBs. As an alternative and to simplify things, we could have a double-click listener to automatically continue to the module creation screen. I know that this is technically still three clicks, but it's not really I agree, the button should be changed to 'Create' (I had hoped originally that we'd be able to produce a wizard of some kind, but mforms just isn't capable in that regard). I do agree that it would be useful if this were controllable, but I'm also with Dan that there are already too many options. Perhaps there needs to be a general 'Accessibility' setting, which disables these kinds of things without entirely disabling javascript, but if users desire, they can choose to expand upon these settings and have the full range. It may be that this chooser is actually pretty friendly - I haven't had a chance to try with a screen reader, but it is navigatable using the keyboard, set's the relevant focus, and so it may actually be no less accessible in some situations than the current selectors. I think that a usability study would be great - I believe that Stuart Lamour's institution has performed one (though obviously not using the module chooser). And yes, this is extensible and it does use the standard help for both the modules, and their subtypes. Any new modules created and enabled within Moodle would automatically be shown in this selector, and if they provide help text then it can be displayed. Additionally, the help section of the module chooser utilises Moodle's MarkDown (as do the help buttons within Moodle).
          Hide
          Andrew Nicols added a comment -

          Adding Michael as a watcher as he won't have received my previous comment.

          Show
          Andrew Nicols added a comment - Adding Michael as a watcher as he won't have received my previous comment.
          Hide
          Eloy Lafuente (stronk7) added a comment -

          Pinging (all) you about this!

          Show
          Eloy Lafuente (stronk7) added a comment - Pinging (all) you about this!
          Hide
          Maryel Mendiola added a comment -

          following Apus' advice
          to share this mindmap with all you
          Kind Regards,
          Maryel (and MariaMoodle )

          Show
          Maryel Mendiola added a comment - following Apus' advice to share this mindmap with all you Kind Regards, Maryel (and MariaMoodle )
          Hide
          Nadav Kavalerchik added a comment -

          @Maryel, LOVE the mindmap! love to see it implemented in the New Module wizard.

          Show
          Nadav Kavalerchik added a comment - @Maryel, LOVE the mindmap! love to see it implemented in the New Module wizard.
          Hide
          Aparup Banerjee added a comment - - edited

          yea, Maryel, i love it too!

          It would be great if the UI sort of reflected the mindmap/purposes/utitlity - a sort of in-built visual guide in a form!

          ps: those little grade icon indicate gradable activities - excellent info imo for when i'm actually choosing an activity.

          Show
          Aparup Banerjee added a comment - - edited yea, Maryel, i love it too! It would be great if the UI sort of reflected the mindmap/purposes/utitlity - a sort of in-built visual guide in a form! ps: those little grade icon indicate gradable activities - excellent info imo for when i'm actually choosing an activity.
          Hide
          Martin Dougiamas added a comment -

          I disagree with the exact categorisation in the mindmap, but I think it's very helpful in that it shows that it would be nice for admins (and perhaps even users) to decide how the activity modules are arranged in that display.

          Show
          Martin Dougiamas added a comment - I disagree with the exact categorisation in the mindmap, but I think it's very helpful in that it shows that it would be nice for admins (and perhaps even users) to decide how the activity modules are arranged in that display.
          Hide
          Ray Lawrence added a comment -

          The mind map doesn't work for me on two major levels:

          The branches are't correct IMO, assessment, communication, collaboration and resources would be better but not perfect.

          This diagram suggests that modules can be used in a single way which is far from being the case.

          This returns me to my original point in the forum discussion i.e. Moodle is used in many different contexts and ways, the descriptive text should be generic and describe features rather than use cases. The former will be be informative and suggest use cases, the latter will always be at odds with the perspective of some users.

          Show
          Ray Lawrence added a comment - The mind map doesn't work for me on two major levels: The branches are't correct IMO, assessment, communication, collaboration and resources would be better but not perfect. This diagram suggests that modules can be used in a single way which is far from being the case. This returns me to my original point in the forum discussion i.e. Moodle is used in many different contexts and ways, the descriptive text should be generic and describe features rather than use cases. The former will be be informative and suggest use cases, the latter will always be at odds with the perspective of some users.
          Hide
          Nadav Kavalerchik added a comment -

          @Ray, If all this information can be edited by the system administrator, that could be great.

          I have no pedagogical background. So, I showed it around (to some teachers) and they all agreed with you.

          There are different ways that those modules can be arranged into categories (and better yet, TAGs).
          And if there is a UI for the System Administrator to set it up, that could be great.

          Show
          Nadav Kavalerchik added a comment - @Ray, If all this information can be edited by the system administrator, that could be great. I have no pedagogical background. So, I showed it around (to some teachers) and they all agreed with you. There are different ways that those modules can be arranged into categories (and better yet, TAGs). And if there is a UI for the System Administrator to set it up, that could be great.
          Hide
          Martin Dougiamas added a comment -

          Given time constraints, would everyone here be OK to see just an alphabetical list in 2.3, and some sort of admin UI to group them later?

          Show
          Martin Dougiamas added a comment - Given time constraints, would everyone here be OK to see just an alphabetical list in 2.3, and some sort of admin UI to group them later?
          Hide
          Michael Hughes added a comment -

          We've just started looking at this with the latest 2.3dev build and it came as a bit of a shock to our learning technologists.

          The main issue raised was that it doesn't actually improve substantially the usablity, and for users who know what they want to do it actually slows them down. It now takes 3 clicks (and potentially a drag of a scroll bar to move the list of items) versus the click(,scroll), click from the "old" drop downs. And this still only gets you to the page to fill out "new" activity details.

          One improvement that we think might be worthwhile would be to display the actual "add" form (basically modedit) in the right hand pane (possibly with the help text at the top) so that it is 1 click to popup the browser, a scroll & click to select an item, and then you're at the "add" page. It's then just a single click to add (or cancel) the item.

          Show
          Michael Hughes added a comment - We've just started looking at this with the latest 2.3dev build and it came as a bit of a shock to our learning technologists. The main issue raised was that it doesn't actually improve substantially the usablity, and for users who know what they want to do it actually slows them down. It now takes 3 clicks (and potentially a drag of a scroll bar to move the list of items) versus the click(,scroll), click from the "old" drop downs. And this still only gets you to the page to fill out "new" activity details. One improvement that we think might be worthwhile would be to display the actual "add" form (basically modedit) in the right hand pane (possibly with the help text at the top) so that it is 1 click to popup the browser, a scroll & click to select an item, and then you're at the "add" page. It's then just a single click to add (or cancel) the item.
          Hide
          Michael Hughes added a comment -

          Added UI Mockup: <Integrated Add form>

          Show
          Michael Hughes added a comment - Added UI Mockup: <Integrated Add form>
          Hide
          Helen Foster added a comment -

          Hi Michael,

          Thanks for your feedback on the new activity chooser. Just checking that you've found the switch for turning the activity chooser off in Settings > Course administration?

          Show
          Helen Foster added a comment - Hi Michael, Thanks for your feedback on the new activity chooser. Just checking that you've found the switch for turning the activity chooser off in Settings > Course administration?
          Hide
          Martin Dougiamas added a comment -

          Michael,

          1. it's optional as a user preference, look in the settings menu for the toggle.
          2. it is essential for newer users to display help about various activities.
          3. you can double-click on the items to select them easily
          4. the modedit forms can not be crammed into the dialog without significant changes (I would like to tackle those sometime but it means breaking backward compatibility for all 3rd party modules, so it needs to be done properly and with planning).
          Show
          Martin Dougiamas added a comment - Michael, it's optional as a user preference, look in the settings menu for the toggle. it is essential for newer users to display help about various activities. you can double-click on the items to select them easily the modedit forms can not be crammed into the dialog without significant changes (I would like to tackle those sometime but it means breaking backward compatibility for all 3rd party modules, so it needs to be done properly and with planning).
          Hide
          Ray Lawrence added a comment -

          Could it be a shifted into a 3 col layout to help with lower res monitors and to remove the need to scroll within? See (rough) mock up.

          Show
          Ray Lawrence added a comment - Could it be a shifted into a 3 col layout to help with lower res monitors and to remove the need to scroll within? See (rough) mock up.
          Hide
          Martin Dougiamas added a comment -

          I'm going to close this as the development is basically done for 2.3.

          However, please create new issues to discuss bugs or improvements and link them to this one.

          Show
          Martin Dougiamas added a comment - I'm going to close this as the development is basically done for 2.3. However, please create new issues to discuss bugs or improvements and link them to this one.
          Hide
          Ray Lawrence added a comment -

          Done MDL-33386

          Show
          Ray Lawrence added a comment - Done MDL-33386

            People

            • Votes:
              10 Vote for this issue
              Watchers:
              14 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: