2

I am experiencing more and more pages using this style of top menu.

When you scroll the page downwards, all is fine, but as soon as you need to scroll up for some reason (such as to read the previous line) a menu appears at the top of the page covering up 2-3 lines of text so you have to scroll even more.

What is this pattern called?

Improve this question
2
  • Welcome to the site, @aski. Its generally best to ask just one question per post, so I've edited your post to contain just one question. If you want to ask the other two questions (whether the pattern is "normal" and how it can be improved) feel free to post those separately. I should warn you, they're likely to be closed as being primarily opinion based.
    – Graham Herrli
    Sep 17, 2014 at 20:29
  • I call it Pit bar. The terminology of these is yet to become a convention. See elaborated discussion on this UX.SE question.
    – Izhaki
    Sep 17, 2014 at 21:07

1 Answer 1

Reset to default
3

The way I understand the design of this sticky header is that the assumption is made that when the person is trying to scroll up, he is trying to access the menu or navigation to perhaps go to another section in the site and to enhance to the user experience, the site provides the sticky menu as you highlighted

The menu is hidden when scrolling down since the focus is on the content and the menu would be a distraction but the quick access to the sticky menu (while scrolling up) allows for the user to quickly navigate without having to scroll all the way to the top.

To quote this smashing magazine article which did a research study on how users feel about sticky menus

STICKY MENUS ARE 22% QUICKER TO NAVIGATE

The data from the study indicated that participants were able to find what they were looking for quicker when they didn’t have to scroll back to the top of the page. 22% might not seem like a big number, but it can have a big impact on visitors. According to this data, sticky navigation could cut 36 seconds off of a five-minute visit to a website.

That said, as you pointed out sticky menus can be intrusive and distract the user as pointed out in the same article

DISTRACTING AND INTRUSIVE

If not done carefully, sticky navigation can be distracting. Some sticky elements get delayed when bouncing back into position as the user scrolls down the page. Others are so tall or wide that they dominate the layout and impede access to the content. Navigation should be easily accessible but should not compete with the content for attention.

I couldnt find a name for this but this plugin allows you to create such a header

Improve this answer
2
  • Yes, I think the intention is good, just doesn't match my usecase. :) The plugin you link has some threshold, feels better when you scroll up slow, but still annoys when you want to jump up a paragraph.
    – aski
    Sep 17, 2014 at 19:44
  • I've done a bit of research on this, and you'll find that the term 'sticky' often stands for something else (in contrast to what Smashing Magazine call it). Most notably perhaps is the definition of the CSS standard, which I reckon that, once fully supported, will prevail. See my comment for the question for more.
    – Izhaki
    Sep 17, 2014 at 21:13

Your Answer

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

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