Moodle
  1. Moodle
  2. MDL-13917

Zoom boxes (Show only / show all icons in course formats) confuse some students

    Details

    • Affected Branches:
      MOODLE_19_STABLE
    • Fixed Branches:
      MOODLE_23_STABLE
    • Rank:
      585

      Description

      in a topics-format course, the "Show only topic N" and "Show all topics" icons present a usability issue. Students who inadvertently click on them become confused when they lose sight of the the other blocks. It would be good if we could disable these icons, either at System or Course level, or perhaps through a new capability.

      See discussion: http://moodle.org/mod/forum/discuss.php?d=92206

        Activity

        Hide
        Przemyslaw Stencel added a comment -
        Show
        Przemyslaw Stencel added a comment - Two alternative solutions are proposed here: http://moodle.org/mod/forum/discuss.php?d=92206#p408842 and here: http://moodle.org/mod/forum/discuss.php?d=92206#p408954
        Hide
        Séverin Terrier added a comment -

        Good idea to explain people what will be the action after clicking on this icon.

        But for people used to Moodle, it can be time lose. Please consider an option in user profil, to know if we must consider the user is new to Moodle (and want this reminder) or not.

        Show
        Séverin Terrier added a comment - Good idea to explain people what will be the action after clicking on this icon. But for people used to Moodle, it can be time lose. Please consider an option in user profil, to know if we must consider the user is new to Moodle (and want this reminder) or not.
        Hide
        Matt Gibson added a comment -

        I would vote for resurrecting Urs' accoridon theme (was it for 1.5?), which solved this problem perfectly by making the buttons unnecessary.

        Show
        Matt Gibson added a comment - I would vote for resurrecting Urs' accoridon theme (was it for 1.5?), which solved this problem perfectly by making the buttons unnecessary.
        Hide
        Joao Fernandes added a comment -

        The course menu developed by Humboldt Uni can be a option http://moodle.org/mod/data/view.php?d=13&rid=926. Another alternative I see is having a minimizer, something like the triangle in the bbc site blocks http://www.bbc.co.uk/. I had this problem with many teachers and students in my uni but if you warn them about it it should be fine.

        Show
        Joao Fernandes added a comment - The course menu developed by Humboldt Uni can be a option http://moodle.org/mod/data/view.php?d=13&rid=926 . Another alternative I see is having a minimizer, something like the triangle in the bbc site blocks http://www.bbc.co.uk/ . I had this problem with many teachers and students in my uni but if you warn them about it it should be fine.
        Hide
        Matt Gibson added a comment -

        It should be very easy to add that with a couple of lines of javascript, as it is already done on the page for the blocks. Having the same +/- icon is probably better than the triangle, just for the sake of consistency.

        Show
        Matt Gibson added a comment - It should be very easy to add that with a couple of lines of javascript, as it is already done on the page for the blocks. Having the same +/- icon is probably better than the triangle, just for the sake of consistency.
        Hide
        Anthony Borrow added a comment -

        Laia - This falls into line with my earlier comments on icons and whether they reveal current state or the resultant state. I'd be interested in research on how this usability issue has been faced. Again, identifying where all this is an issue and ideas for addressing it would be helpful. Peace - Anthony

        Show
        Anthony Borrow added a comment - Laia - This falls into line with my earlier comments on icons and whether they reveal current state or the resultant state. I'd be interested in research on how this usability issue has been faced. Again, identifying where all this is an issue and ideas for addressing it would be helpful. Peace - Anthony
        Hide
        A. T. Wyatt added a comment -

        I have many students who also are confused by the single/all topic controls. Rather than disabling this, however, I would prefer using the +/- icon. We currently use tooltips/alt tags to indicate what will happen when the user clicks on an icon. I think my students simply do not equate the single and double box with a "topic". They would be more likely to understand + and - as open and collapse as this is a fairly common usage.

        Show
        A. T. Wyatt added a comment - I have many students who also are confused by the single/all topic controls. Rather than disabling this, however, I would prefer using the +/- icon. We currently use tooltips/alt tags to indicate what will happen when the user clicks on an icon. I think my students simply do not equate the single and double box with a "topic". They would be more likely to understand + and - as open and collapse as this is a fairly common usage.
        Hide
        Martin Dougiamas added a comment -

        I really want to see this fixed, and I kind of like the +/- idea, but ...

        Can we have some thinking about this? Is it REALLY consistent?

        ie if we go to them, is there going to be an issue with people crying "it's not consistent! the blocks use +/- to fold up the current block only, but the sections use the SAME icons to collapse ALL the other sections."

        Show
        Martin Dougiamas added a comment - I really want to see this fixed, and I kind of like the +/- idea, but ... Can we have some thinking about this? Is it REALLY consistent? ie if we go to them, is there going to be an issue with people crying "it's not consistent! the blocks use +/- to fold up the current block only, but the sections use the SAME icons to collapse ALL the other sections."
        Hide
        Matt Gibson added a comment -

        I agree - the +/- should only collapse individual topics, and we should have an expand/collapse all button somewhere, clearly labelled as such. The current approach seems counter-intuitive to me and takes ages to explain to students.

        Show
        Matt Gibson added a comment - I agree - the +/- should only collapse individual topics, and we should have an expand/collapse all button somewhere, clearly labelled as such. The current approach seems counter-intuitive to me and takes ages to explain to students.
        Hide
        Joe Wieloch added a comment -

        I would really like an option just to disable it (as per the original request). It is causing a lot of confusion on my website.

        Show
        Joe Wieloch added a comment - I would really like an option just to disable it (as per the original request). It is causing a lot of confusion on my website.
        Hide
        Anthony Borrow added a comment -

        Joe (and John) - This should be fairly easy to fix up for you. I will attach a diff file for the topic format but figured a brief explanation would be helpful. First, if someone wanted to implement this as a course setting, I would probably recommend adding a field to the course table (mdl_course) in the database called enable_show_sections or something along those lines. Then I would just use a simple if statement. For folks like yourself who simply want to remove the controls, go to the /course/format/topics/format.php and around line 222 or so I commented out the section of code that creates those links:

        /*
        if ($displaysection == $section)

        { // Show the zoom boxes echo '<a href="view.php?id='.$course->id.'&topic=0#section-'.$section.'" title="'.$strshowalltopics.'">'. '<img src="'.$CFG->pixpath.'/i/all.gif" alt="'.$strshowalltopics.'" /></a><br />'; } else { $strshowonlytopic = get_string('showonlytopic', '', $section); echo '<a href="view.php?id='.$course->id.'&topic='.$section.'" title="'.$strshowonlytopic.'">'. '<img src="'.$CFG->pixpath.'/i/one.gif" alt="'.$strshowonlytopic.'" /></a><br />'; }
        */

        I might also add around line 12 after:
        $topic = optional_param('topic', -1, PARAM_INT);

        the line:
        $topic = -1;

        Which is essentially what happens when no topic is chosen or passed. That would prevent someone from manually typing in a URL with the topic - along the lines of:
        http://localhost/moodle/19stable/course/view.php?id=25&topic=5




        As mentioned, if you added a field to the course database you could do something like:
        if ($COURSE->enable_show_sections) {
        if ($displaysection == $section) { // Show the zoom boxes echo '<a href="view.php?id='.$course->id.'&topic=0#section-'.$section.'" title="'.$strshowalltopics.'">'. '<img src="'.$CFG->pixpath.'/i/all.gif" alt="'.$strshowalltopics.'" /></a><br />'; }

        else

        { $strshowonlytopic = get_string('showonlytopic', '', $section); echo '<a href="view.php?id='.$course->id.'&topic='.$section.'" title="'.$strshowonlytopic.'">'. '<img src="'.$CFG->pixpath.'/i/one.gif" alt="'.$strshowonlytopic.'" /></a><br />'; }

        }

        This would imply creating the user interface for controlling this and creating a language string or two which I have not done as I simply intend to share some ideas or how this could be done as requested by John (which is different than the direction that the conversation seems to be going in which would address the usability question that I raised). I would not recommend making it a site wide option. If you want it site-wide, just patch the code as I've described and it should work fine. To implement this for the other formats requires doing the same thing with each of the respective format.php files. Let me know if you have questions and I hope that information is helpful to you and John.

        Show
        Anthony Borrow added a comment - Joe (and John) - This should be fairly easy to fix up for you. I will attach a diff file for the topic format but figured a brief explanation would be helpful. First, if someone wanted to implement this as a course setting, I would probably recommend adding a field to the course table (mdl_course) in the database called enable_show_sections or something along those lines. Then I would just use a simple if statement. For folks like yourself who simply want to remove the controls, go to the /course/format/topics/format.php and around line 222 or so I commented out the section of code that creates those links: /* if ($displaysection == $section) { // Show the zoom boxes echo '<a href="view.php?id='.$course->id.'&topic=0#section-'.$section.'" title="'.$strshowalltopics.'">'. '<img src="'.$CFG->pixpath.'/i/all.gif" alt="'.$strshowalltopics.'" /></a><br />'; } else { $strshowonlytopic = get_string('showonlytopic', '', $section); echo '<a href="view.php?id='.$course->id.'&topic='.$section.'" title="'.$strshowonlytopic.'">'. '<img src="'.$CFG->pixpath.'/i/one.gif" alt="'.$strshowonlytopic.'" /></a><br />'; } */ I might also add around line 12 after: $topic = optional_param('topic', -1, PARAM_INT); the line: $topic = -1; Which is essentially what happens when no topic is chosen or passed. That would prevent someone from manually typing in a URL with the topic - along the lines of: http://localhost/moodle/19stable/course/view.php?id=25&topic=5 As mentioned, if you added a field to the course database you could do something like: if ($COURSE->enable_show_sections) { if ($displaysection == $section) { // Show the zoom boxes echo '<a href="view.php?id='.$course->id.'&topic=0#section-'.$section.'" title="'.$strshowalltopics.'">'. '<img src="'.$CFG->pixpath.'/i/all.gif" alt="'.$strshowalltopics.'" /></a><br />'; } else { $strshowonlytopic = get_string('showonlytopic', '', $section); echo '<a href="view.php?id='.$course->id.'&topic='.$section.'" title="'.$strshowonlytopic.'">'. '<img src="'.$CFG->pixpath.'/i/one.gif" alt="'.$strshowonlytopic.'" /></a><br />'; } } This would imply creating the user interface for controlling this and creating a language string or two which I have not done as I simply intend to share some ideas or how this could be done as requested by John (which is different than the direction that the conversation seems to be going in which would address the usability question that I raised). I would not recommend making it a site wide option. If you want it site-wide, just patch the code as I've described and it should work fine. To implement this for the other formats requires doing the same thing with each of the respective format.php files. Let me know if you have questions and I hope that information is helpful to you and John.
        Hide
        Anthony Borrow added a comment -

        John - Here is a diff file for how to remove the show all/show only section stuff. Let me know if you have any questions or help implementing as you want for your site. I consider this diff file a patch for users who want to use it but not a patch to resolve this issue. Peace - Anthony

        Show
        Anthony Borrow added a comment - John - Here is a diff file for how to remove the show all/show only section stuff. Let me know if you have any questions or help implementing as you want for your site. I consider this diff file a patch for users who want to use it but not a patch to resolve this issue. Peace - Anthony
        Hide
        Anthony Borrow added a comment -

        I've been meaning to ask about the issue of links and images and this issue seems to be a good place to mention it. Here we are using the image as a link <a href ...> <img src=...> </a>; however there are other places like the administration block where the image is not included and instead we have: <img src=...> <a href ...>Files</a>. I have frequently watched users click not on the link but the image and not sure what it does not do anything. Have we previously discussed how we want to handle this in Moodle? Would there be a problem with <a href ...> <img src=...> Files</a> ? I would also be interested in where in Moodle we are using +/- and how we are using it. I miss having Laia around to help research these types of things. My impression has been that we I see the +/- it is something that does not require a page refresh/reload and is used to expand/collapse the current container (which needs to be clear). If the container is a section than collapsing is should collapse the the section. If we have another one up top around all of the sections then collapsing that should collapse them all. I do not think of +/- as selecting one particular section and only showing that one. Those are my 2 cents for today. Peace - Anthony

        Show
        Anthony Borrow added a comment - I've been meaning to ask about the issue of links and images and this issue seems to be a good place to mention it. Here we are using the image as a link <a href ...> <img src=...> </a>; however there are other places like the administration block where the image is not included and instead we have: <img src=...> <a href ...>Files</a>. I have frequently watched users click not on the link but the image and not sure what it does not do anything. Have we previously discussed how we want to handle this in Moodle? Would there be a problem with <a href ...> <img src=...> Files</a> ? I would also be interested in where in Moodle we are using +/- and how we are using it. I miss having Laia around to help research these types of things. My impression has been that we I see the +/- it is something that does not require a page refresh/reload and is used to expand/collapse the current container (which needs to be clear). If the container is a section than collapsing is should collapse the the section. If we have another one up top around all of the sections then collapsing that should collapse them all. I do not think of +/- as selecting one particular section and only showing that one. Those are my 2 cents for today. Peace - Anthony
        Hide
        Martin Dougiamas added a comment -

        Thanks Anthony. The images should always be included IMO. Perhaps that's another issue.

        Regarding the section collapse: what do people think of this proposal then?

        0) Toss out the whole idea of zooming/focussing on a current section.
        1) Add + / - icon to each section, allowing that section to the folded in/out.
        2) Add + / - icon to the top of the page (with "Expand all sections" / "Collapse all sections")
        3) Add an option in the course settings to force everything to be expanded all the time for a given course, which would hide the icons.

        We can do this expanding/collapsing on the fly when JS is active, making it somewhat like the accordion format Urs made once.

        Possible issue #1: could all this still be confused with the hide/show capability (eyecons) which simply grays out the current section?

        Possible issue #2: is this going to be clear enough that it's just a "view" thing for the local user, and not related to hide/show eyecons or anything else?

        Show
        Martin Dougiamas added a comment - Thanks Anthony. The images should always be included IMO. Perhaps that's another issue. Regarding the section collapse: what do people think of this proposal then? 0) Toss out the whole idea of zooming/focussing on a current section. 1) Add + / - icon to each section, allowing that section to the folded in/out. 2) Add + / - icon to the top of the page (with "Expand all sections" / "Collapse all sections") 3) Add an option in the course settings to force everything to be expanded all the time for a given course, which would hide the icons. We can do this expanding/collapsing on the fly when JS is active, making it somewhat like the accordion format Urs made once. Possible issue #1: could all this still be confused with the hide/show capability (eyecons) which simply grays out the current section? Possible issue #2: is this going to be clear enough that it's just a "view" thing for the local user, and not related to hide/show eyecons or anything else?
        Hide
        Anthony Borrow added a comment -

        Martin - The image include is definitely a separate issue. I'll see if any other issue seems to fit it and if not create one. In theory, I like the idea of +/- as it gives an element of consistency to the interface; however, I would be concerned about the user response to losing the functionality to easily focus on a particular section. That being said, I think the users would get used to it. Currently, Moodle remembers the individual user's status of section view so I would assume we could maintain the functionality of having Moodle remember which sections are expanded or collapsed per user using mdl_course_display in some creative way. While there may be some confusion with +/- vs. hide/show I think most of the time folks realize that something can expanded or collapsed when the +/- options are there. Within Moodle we always use hide and show gifs which are distinct so I think it would be pretty clear. Peace - Anthony

        Show
        Anthony Borrow added a comment - Martin - The image include is definitely a separate issue. I'll see if any other issue seems to fit it and if not create one. In theory, I like the idea of +/- as it gives an element of consistency to the interface; however, I would be concerned about the user response to losing the functionality to easily focus on a particular section. That being said, I think the users would get used to it. Currently, Moodle remembers the individual user's status of section view so I would assume we could maintain the functionality of having Moodle remember which sections are expanded or collapsed per user using mdl_course_display in some creative way. While there may be some confusion with +/- vs. hide/show I think most of the time folks realize that something can expanded or collapsed when the +/- options are there. Within Moodle we always use hide and show gifs which are distinct so I think it would be pretty clear. Peace - Anthony
        Hide
        Przemyslaw Stencel added a comment -

        Martin, I like your proposal. The possible issues you've mentioned should not be a problem. If the +/- icons for sections will behave consistently with the +/- icons of the side blocks, it should be pretty clear for the users. And that's why I'm wondering whether moodle should 'remember' which sections are collapsed and which are not (feature mentioned by Anthony). It doesn't remember the state of the blocks. So, if the state of sections is going to be remebered, I think blocks should be remembered, too. For the sake of consistency of the interface.

        Anthony, you're concerned about the user losing the functionality to easily focus on a particular section. It will still be available - the users will be able to collapse all sections using the +/- icon at the top of the page and then expand the one section that they want to focus on. It will just require two clicks instead of one

        Show
        Przemyslaw Stencel added a comment - Martin, I like your proposal. The possible issues you've mentioned should not be a problem. If the +/- icons for sections will behave consistently with the +/- icons of the side blocks, it should be pretty clear for the users. And that's why I'm wondering whether moodle should 'remember' which sections are collapsed and which are not (feature mentioned by Anthony). It doesn't remember the state of the blocks. So, if the state of sections is going to be remebered, I think blocks should be remembered, too. For the sake of consistency of the interface. Anthony, you're concerned about the user losing the functionality to easily focus on a particular section. It will still be available - the users will be able to collapse all sections using the +/- icon at the top of the page and then expand the one section that they want to focus on. It will just require two clicks instead of one
        Hide
        Anthony Borrow added a comment -

        Two clicks doesn't seem that bad although the sections will still be visible just collapsed. It is similar functionality but different. Personally I think it would be an improvement. Interesting idea about remembering the settings of the blocks and whether they are collapsed or not.

        Show
        Anthony Borrow added a comment - Two clicks doesn't seem that bad although the sections will still be visible just collapsed. It is similar functionality but different. Personally I think it would be an improvement. Interesting idea about remembering the settings of the blocks and whether they are collapsed or not.
        Hide
        Mark Pearson added a comment -

        Just 2 comments:
        1) The YUI course menu block circumvents many of the issues with the current system discussed above. Opening and closing outline sections is accomplished by the + / - icons in the Course Menu block. I think that it's made a big difference in usability.
        2) YUI Course Menu Block notwithstanding I think that Martin's ideas above a good. Some other thoughts:

        a) Saving the open/close state of the outline sections per user would be useful, but what would be more useful IMHO would be to have the current section of a weekly outline open automatically at the right date. Thus when the course moves to a new week, that section automatically opens.
        b) If the teacher was able to set a default open/shut state or behaviour (eg new section opens each week) to explain to students that might be a help.

        There is a functional problem here with displaying a single section with the weekly outline which is used by the majority of teachers here at Earlham. That is, you set an assignment in week x which is due the following week. The assignment is located in the week it was set but as often as not the student gets to it in the following week. But if they just look at the current week in the outline they would not see the assignment present since a new section would be revealed – they have to display all the weekly sections and then look at last week's section to view the assignment in it's context. I realise that there are a multitude of other reminders for students and that the Activities block clearly shows all the assignments, nevertheless it's a User Interface issue that's intriguing to look at. I wonder whether a set of cascading tabs across the top of the Weekly Outline, with one week per tab, might address this problem together with a pop-up that displays activities carried over from previous weeks.

        Show
        Mark Pearson added a comment - Just 2 comments: 1) The YUI course menu block circumvents many of the issues with the current system discussed above. Opening and closing outline sections is accomplished by the + / - icons in the Course Menu block. I think that it's made a big difference in usability. 2) YUI Course Menu Block notwithstanding I think that Martin's ideas above a good. Some other thoughts: a) Saving the open/close state of the outline sections per user would be useful, but what would be more useful IMHO would be to have the current section of a weekly outline open automatically at the right date. Thus when the course moves to a new week, that section automatically opens. b) If the teacher was able to set a default open/shut state or behaviour (eg new section opens each week) to explain to students that might be a help. There is a functional problem here with displaying a single section with the weekly outline which is used by the majority of teachers here at Earlham. That is, you set an assignment in week x which is due the following week. The assignment is located in the week it was set but as often as not the student gets to it in the following week. But if they just look at the current week in the outline they would not see the assignment present since a new section would be revealed – they have to display all the weekly sections and then look at last week's section to view the assignment in it's context. I realise that there are a multitude of other reminders for students and that the Activities block clearly shows all the assignments, nevertheless it's a User Interface issue that's intriguing to look at. I wonder whether a set of cascading tabs across the top of the Weekly Outline, with one week per tab, might address this problem together with a pop-up that displays activities carried over from previous weeks.
        Hide
        Helen Foster added a comment -

        Regarding the icons used, please see Kathy Cannon's post with attached redesigned icons:
        http://moodle.org/mod/forum/discuss.php?d=92872#p520331

        Show
        Helen Foster added a comment - Regarding the icons used, please see Kathy Cannon's post with attached redesigned icons: http://moodle.org/mod/forum/discuss.php?d=92872#p520331
        Hide
        Anthony Borrow added a comment -

        I had mentioned the idea of having clickable icons earlier and Martin mentioned that may be a separate issue and indeed it is but I figured I would post the link to MDL-6820 here. Peace - Anthony

        Show
        Anthony Borrow added a comment - I had mentioned the idea of having clickable icons earlier and Martin mentioned that may be a separate issue and indeed it is but I figured I would post the link to MDL-6820 here. Peace - Anthony
        Hide
        Eloy Lafuente (stronk7) added a comment -

        NOTE: This issue was assigned to the STABLE backlog without complete triaging process. Marking it as triaged, but with this note for future reference.

        Show
        Eloy Lafuente (stronk7) added a comment - NOTE: This issue was assigned to the STABLE backlog without complete triaging process. Marking it as triaged, but with this note for future reference.
        Hide
        Dan Poltawski added a comment -

        The zoom icons are no longer present in 2.3 and instead we have moved to 'paged course formats'.

        Show
        Dan Poltawski added a comment - The zoom icons are no longer present in 2.3 and instead we have moved to 'paged course formats'.
        Hide
        Helen Foster added a comment -

        Thanks Dan for the info. I've hopefully removed all references to the zoom icons in the 2.3 docs.

        Show
        Helen Foster added a comment - Thanks Dan for the info. I've hopefully removed all references to the zoom icons in the 2.3 docs.

          People

          • Votes:
            19 Vote for this issue
            Watchers:
            13 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: