2

I'm planning to use a menu that hides on scroll down and shows up when scrolling up. I know sites that do this that are very sensitive to the scroll up motion and show up at the slightest scroll, which is frustrating, as it results in the menu covering content at a slight scroll up and requires effort to hide it again. I like how Medium's scroll up bar behaves, though.

Are there any guidelines on how the scroll up bar should behave? How much scrolling up should show it and how much should keep it hidden? Should the scroll speed be taken into account and, if so, how?

Improve this question
2
  • Having it appear in a twitchy way would certainly be annoying. Perhaps keeping it visible all the time (but disabled when unwanted) would be preferable?
    – MMacD
    Commented Feb 15, 2017 at 12:32
  • One thing I would suggest would be having the menu bar moving down no faster than the user is scrolling up. So if the user scrolls up slowly, the menu bar shouldn't suddenly appear and cover the top line of text, but should rather slide down at the same speed as the scroll. If the user stops scrolling midway through the appearance, then reveal the bar fully if it is already more than half shown, or hide it if it is less than half shown. Firefox for Android's address bar works like this.
    – Rory O'Kane
    Commented Jun 16, 2017 at 23:34

2 Answers 2

Reset to default
2

If a menu or other element needs to show up after scrolling, the velocity of the scroll (change in position divided by time) should be taken into consideration. Then your display logic can be: if the user scrolls (x) units in less than (y) time, show the menu. This is intuitive enough that it doesn't really call for an explanation to the user, and it's not as constantly intrusive as a menu that shows up every time you scroll the tiniest bit upward.

Improve this answer
1

Yes there are guidelines which you can follow. below are some good examples.

I know sites that do this that are very sensitive to the scroll up motion and show up at the slightest scroll, which is frustrating

Yes it is frustrating if :

  1. the header is covering up some information.
  2. your header color is so pop that it is distracting. (which is not the case with Medium so its cool there!)

So always keep some breathing space between your header and the content, also use your header background wisely. hope this helps :)

Improve this answer
1
  • 1
    I knew about the Material Design guidelines on this, but there isn't anything specific about how sensitive the bar should be. The AXA web guidelines seem to not address this type of bar at all. I'm looking for more stuff like "Show the bar if the user scrolled up 3/4 the length of the bar."
    – Tin Man
    Commented Feb 15, 2017 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.