Moodle
  1. Moodle
  2. MDL-21529

Dock navigation: if it appear on hover, close it on hover after a timeout

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Fixed
    • Affects Version/s: 2.0
    • Fix Version/s: 2.0
    • Component/s: Navigation, Usability
    • Labels:
      None
    • Rank:
      35690

      Description

      The new navigation "Dock" in Moodle 2.0 adds important flexibility for the user to control how much stuff they have on their screen.

      The current issue with the menu is that it appears on hover but users need to close it by clicking outside it.

      It opens very effortlessly, but this also makes it easy to activate them accidentally while hovering around.

      For consistency and a decrease in annoyances, make it easier to close the navigation menus opened

      • If the menu is opened on hover, it needs to close on hover out after a timeout of 1-3 seconds.
      • Add an explicit X icon at the top right corner of each menu to allow users to get rid of the annoyance immediately

        Issue Links

          Activity

          Hide
          Helen Foster added a comment -

          Olli, thanks for your suggested improvement. Reassigning to Sam as navigation component lead.

          Show
          Helen Foster added a comment - Olli, thanks for your suggested improvement. Reassigning to Sam as navigation component lead.
          Hide
          Olli Savolainen added a comment -

          Thanks, Helen. This came up in Martin's keynote so thought I would mention it before I forget.

          The general rule is that the interaction style that ignites an action needs to be similar as the action that "undoes" it for minimal distraction. If it opens on click, close it only when clicked. If it opens on hover, close it when the user hovers out (though on timeout so slight movement out of the area accidentally does not make it flicker on and off).

          Show
          Olli Savolainen added a comment - Thanks, Helen. This came up in Martin's keynote so thought I would mention it before I forget. The general rule is that the interaction style that ignites an action needs to be similar as the action that "undoes" it for minimal distraction. If it opens on click, close it only when clicked. If it opens on hover, close it when the user hovers out (though on timeout so slight movement out of the area accidentally does not make it flicker on and off).
          Hide
          Olli Savolainen added a comment -

          Also, at its current state the dock is impossible to use on touch screens (tested on nokia n900) since those devices do not have a hover event at all.

          So regardless of whether the menu activates on hover or not, it should also open on click. When it is opened by clicking it, closing it should happen by clicking again on the item in the dock or anywhere outside the actual navigation menu that opened.

          Show
          Olli Savolainen added a comment - Also, at its current state the dock is impossible to use on touch screens (tested on nokia n900) since those devices do not have a hover event at all. So regardless of whether the menu activates on hover or not, it should also open on click. When it is opened by clicking it, closing it should happen by clicking again on the item in the dock or anywhere outside the actual navigation menu that opened.
          Hide
          Sam Hemelryk added a comment -

          Hi Olli,
          Thank you for raising this issue, I have just commit a fix now which makes the following changes:

          • Added a close icon to the item's panel when being viewed, adding another means to close the panel.
          • Add a mouseleave (hover out) event to close the panel with a delay of 1 second (standard in Moodle) ONLY IF the panel is shown from a hover event.
          • Fixed up the event composition for showing, now you can mouse over and click and the panel will show (previously this would cause the panel to open and close immediately)

          I've tested this on an iPod touch but perhaps you would be so kind as to test this again on your Nokia Olli

          Cheers
          Sam

          Show
          Sam Hemelryk added a comment - Hi Olli, Thank you for raising this issue, I have just commit a fix now which makes the following changes: Added a close icon to the item's panel when being viewed, adding another means to close the panel. Add a mouseleave (hover out) event to close the panel with a delay of 1 second (standard in Moodle) ONLY IF the panel is shown from a hover event. Fixed up the event composition for showing, now you can mouse over and click and the panel will show (previously this would cause the panel to open and close immediately) I've tested this on an iPod touch but perhaps you would be so kind as to test this again on your Nokia Olli Cheers Sam
          Hide
          Olli Savolainen added a comment -

          Wow, cool, that was quick!

          I can't test it anywhere though. I get "Unknown driver adodb/mysqli" when updated to latest 2.0 on ubuntu. How often does test.moodle.net upgrade to the latest?

          I am trying this, though too but I guess it ain't probable I will manage to go through all the trouble of that
          http://twitter.com/pilpi/status/8807309158

          Show
          Olli Savolainen added a comment - Wow, cool, that was quick! I can't test it anywhere though. I get "Unknown driver adodb/mysqli" when updated to latest 2.0 on ubuntu. How often does test.moodle.net upgrade to the latest? I am trying this, though too but I guess it ain't probable I will manage to go through all the trouble of that http://twitter.com/pilpi/status/8807309158
          Hide
          Olli Savolainen added a comment -

          Managed to test it with qa.moodle.net, thanks Helen for the info that it updates every day.
          One glitch with the hover out (see screenshot). The menu that was opened on hover never closes, if the mouse never enters the menu that was opened, but (assuming there is room in the dock below the menu item opened) exits from the dock by moving the mouse down in the dock and then exits the dock not touching the menu that was opened.

          This actually happens quite easily, I was doing it accidentally and wondering why the menu only goes away some of the times I try it. Then I realized the above.

          Tricky, huh?

          Trying to get the click behaviour tested on the Nokia asap.

          Show
          Olli Savolainen added a comment - Managed to test it with qa.moodle.net, thanks Helen for the info that it updates every day. One glitch with the hover out (see screenshot). The menu that was opened on hover never closes, if the mouse never enters the menu that was opened, but (assuming there is room in the dock below the menu item opened) exits from the dock by moving the mouse down in the dock and then exits the dock not touching the menu that was opened. This actually happens quite easily, I was doing it accidentally and wondering why the menu only goes away some of the times I try it. Then I realized the above. Tricky, huh? Trying to get the click behaviour tested on the Nokia asap.
          Hide
          Olli Savolainen added a comment - - edited

          Oh, the wifi worked after all.

          Works ok now on my Nokia N900 by tapping - the icon (to place a module into the dock) is extremely small a target even on a modern-sized screen though, not to talk about the tiny n900 screen with even smaller pixels.

          Show
          Olli Savolainen added a comment - - edited Oh, the wifi worked after all. Works ok now on my Nokia N900 by tapping - the icon (to place a module into the dock) is extremely small a target even on a modern-sized screen though, not to talk about the tiny n900 screen with even smaller pixels.
          Hide
          Olli Savolainen added a comment -

          Also the hover out delay should not cancel closing the menu on click outside the menu if the click happens to come before the one second delay has elapsed. The menu should close immediately onclick outside the menu, regardless of how the menu was activated.

          Sorry to be a nitpick, It is hard to come to specify things exactly beforehand.

          Show
          Olli Savolainen added a comment - Also the hover out delay should not cancel closing the menu on click outside the menu if the click happens to come before the one second delay has elapsed. The menu should close immediately onclick outside the menu, regardless of how the menu was activated. Sorry to be a nitpick, It is hard to come to specify things exactly beforehand.
          Hide
          Olli Savolainen added a comment -

          Hi it's me again

          About that X icon. Its meaning in Moodle is "delete", in fact it appears on the same module when that module is not in the dock and means delete. So this is pretty sure to confuse users.

          • Please place the icon to the right hand corner - this is a very strong convention, which is likely to be the only way to ensure it is understood correctly, and
          • change the icon to the one used in the top right corner of YUI dialogs in Moodle - see, for example, http://qa.moodle.net/mod/quiz/edit.php?cmid=34 (works at least when logged in as admin) and click "Add random question ..."

          Another thing - I am thinking it should be made possible for the user to make the menu "stick" by clicking the item in the dock even if it is already visible because the user has already hovered on it. Currently seems it is only possible to make the menu stick only on a device that has no hover event.

          I am waiting to post this so I don't flood your mailboxes too much, in case I realize something more ...

          Ah yes. The "move" functionality does not work when a module is docked. It does move the module internally, but the change does not show until the user undocks the module again. Either it should actually undock the module too, or the icon should not be there when the module is docked as a menu.

          Show
          Olli Savolainen added a comment - Hi it's me again About that X icon. Its meaning in Moodle is "delete", in fact it appears on the same module when that module is not in the dock and means delete. So this is pretty sure to confuse users. Please place the icon to the right hand corner - this is a very strong convention, which is likely to be the only way to ensure it is understood correctly, and change the icon to the one used in the top right corner of YUI dialogs in Moodle - see, for example, http://qa.moodle.net/mod/quiz/edit.php?cmid=34 (works at least when logged in as admin) and click "Add random question ..." Another thing - I am thinking it should be made possible for the user to make the menu "stick" by clicking the item in the dock even if it is already visible because the user has already hovered on it. Currently seems it is only possible to make the menu stick only on a device that has no hover event. I am waiting to post this so I don't flood your mailboxes too much, in case I realize something more ... Ah yes. The "move" functionality does not work when a module is docked. It does move the module internally, but the change does not show until the user undocks the module again. Either it should actually undock the module too, or the icon should not be there when the module is docked as a menu.
          Hide
          Sam Hemelryk added a comment -

          Hi Olli,

          I've just commit a rather large patch that restructures the dock and resolves many of the remaining points you noted

          Cheers
          Sam

          Show
          Sam Hemelryk added a comment - Hi Olli, I've just commit a rather large patch that restructures the dock and resolves many of the remaining points you noted Cheers Sam

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: