5 ms·

Just get rid of the damn headers. Users don't want them. They are just misguided ways of trying to raise retention, but really what they do is make your site le

by jblow 12y ago

Just get rid of the damn headers. Users don't want them. They are just misguided ways of trying to raise retention, but really what they do is make your site less pleasant to use, which then makes me not want to come back later.

DenisM 12y ago
Actually, it's not as bad as the headline implies. Header stays hidden once it disappears, giving you the entire screen to read, but if you scroll up a bit it appears again, so you can use it to navigate. It acts the same as iOS Safari header - once you get used to it, it's really nice.
- danielweber 12y ago
  A completely static site also has this property. When I scroll to the top, I can see the top. When I scroll away from the top, I cannot see the top. I've just stated a tautology, so I'm missing something. EDIT I'm seriously wondering whether this whole thing is a joke I'm not getting. Is there a jQuery plug-in that lets me click on text to go to other pages, too?
  - deleted 12y ago
    [deleted]
  - sehr 12y ago
    > When I scroll to the top, I can see the top. Instead, when you begin to scroll to the top you can see the top. If you have an iphone, it's navbar behavior is identical to this. http://usabilitypost.com/2014/05/24/the-scroll-up-bar/ http://usabilitypost.com/2014/05/24/the-scroll-up-bar/
    - hnriot 12y ago
      on the iPhone you can just double tap the top of the screen to scroll to the top quickly.
      - eropple 12y ago
        And when I want to resume reading? What then? Let's not be obtuse, yeah?
        ajanuary 12y ago
        What then? You tap the bottom of the screen to bring up the chrome instead.
        eropple 12y ago
        There's no snapback to where you were reading if you double-tap the top. Which sucks and makes for a bad UX if you only need the top bar for a moment (for a share button, for example).
        ajanuary 12y ago
        I said tap the _bottom_ of the screen, not the top.
        eropple 12y ago
        And I'm pretty sure you lost the plot, because this thread is about the header library in the OP, not the browser chrome. Your suggestion to double-tap to the top (with a menu that doesn't follow you) means I lose my place. And so it's not a good suggestion.
        ajanuary 12y ago
        The context of this sub-thread is on the iPhone you can just double tap the top of the screen to scroll to the top quickly. Which is all about browser chrome.
        eropple 12y ago
        Dude. The iPhone was a comparison, not a concrete part of the discussion. Did you, like, read the posts before it in this subthread that are whining about how this thing is useless because you can "just" scroll to the top of the page to see the menu bar on the page? And, now, how tapping to the top isn't a good solution? There are enough upvotes on my posts here that I don't think this is that unclear.
  - enraged_camel 12y ago
    The point is that you should not have to scroll all the way to the top to see the header. Tools like headroom.js add predictive behavior to your site to improve user experience. I personally really appreciate sites that have it.
    - hnriot 12y ago
      that's assuming I want to do navigation just because I started to scrollup, which is a flawed assumption.
  - WickyNilliams 12y ago
    The easiest way to think of it is a halfway house between fixed and static. You get the benefits of static (maximising vertical screen space) while keeping the benefits of a fixed header (primary navigation always close to hand). Edit: it's not a joke, it's an established pattern found on both iOS and Android. Slightly interesting backstory with android: this effect was originally added to the stock browser on android 3.0. I loved how the tiny enhancement gave me more screen real estate, so I decided to build a JS lib to emulate the effect. The pattern didn't make it into the original chrome for Android, but after I mentioned it to Paul Irish he made it happen there too :)
  - npsimons 12y ago
    I'm glad I'm not the only one; when I saw the headline I thought "this fix wouldn't be necessary if people just used static pages in the first place." I've seen headers that stay on-screen while scrolling; even on huge displays they annoy me, so kudos to the author for the effort and putting it out there, but I can't help but feel like he just hit a windmill full tilt. Edited to reduce inflammation.
- danudey 12y ago
  Except that Safari uses it to hide important browser chrome. Websites use it to hide headers that really don't need to be there in the first place.
HNJohnC 12y ago
Whoa! I'm very excited to be reading the text of the person put in charge of the universe! I'm getting chills just thinking that you might actually read this humble message.
- WizzleKake 12y ago
  He's not wrong.
ansimionescu 12y ago
This. Moreover, is adding even more JavaScript really necessary? How about just make things simple, fast, and easy to read? As an user I'll always choose speed and good typography over clever transitions and smart menus.
untog 12y ago
Just get rid of the damn headers. Users don't want them. Are there any stats that prove this? I see this repeated time and time again on HN but I'm yet to see evidence that (a meaningfully significant number of) users are turned off by headers like this, while I have seen evidence that it increases engagement rates. It's used in both Chrome on Android and Safari on iOS, so I don't think it's an alien concept at this point.
- old-gregg 12y ago
  > Are there any stats that prove this? Really? You're basically looking at picture #3 from the left: http://i0.wp.com/www.stephenblower.co.uk/wp-content/uploads/2013/04/tree_swing_development_requirements_half_x350.jpg http://i0.wp.com/www.stephenblower.co.uk/wp-content/uploads/... Do you need "stats" to prove the absurdity of headers that disappear when you scroll?
  - eropple 12y ago
    Seeing as how they're a common (and, IMO, very pleasant) user interface idiom on mobile, I think it's very reasonable question to ask regarding the web. You made a claim about "users". Data to support it would be nice.
  - deleted 12y ago
    [deleted]
jonahx 12y ago
just curious, are saying you let them scroll out of view, or get rid of them altogether? if the latter, what type of site navigation is better?
chrismonsanto 12y ago
I absolutely loathe fixed headers, but I think this script is pretty cool. The headers stay out of your way when you are reading, and when you actually want to use the navigation you don't have to scroll all the way to the top. I really see no downside, except "more JavaScript." (People who are complaining about JavaScript: you really aren't going to like the Web in 5 years)
- qu4z-2 12y ago
  I don't like the web now... grumps
- deleted 12y ago
  [deleted]
- danudey 12y ago
  Downside: more javascript (another file to load, to break, to parse, to wait on, etc) Downside: unusual behaviour. Users fully understand how to scroll to the top of a page to find the header. This hack already requires them to scroll up to get to the header. Also, there's a decent chance that if you're trying to find the header that you're going to leave the page, so it doesn't matter if you lose your spot. It's a cutesy feature, but it's cumbersome and pointless, and doesn't add any real usability (unless you count getting rid of fixed headers, which also don't add any real usability).
- goblin89 12y ago
  There are two kind of significant problems with headers that hide as you scroll, in my experience. 1) You can't easily get to the navigation when you do need it—have to scroll up some uncertain amount that varies by site (this unknown makes simply using scrollbars more reliable)—and 2) you get it when you don't need it, as in you're simply scrolling back to reread a portion of the text above. In short, this element feels always somewhat out of user's control. Much more usable on mobile would be putting such navigation in a kind of sidebar that many apps already employ (often accessible by swiping from the left edge of the screen), while on desktop a great solution is simple “top” links, strategically placed. Plain fixed headers, possibly somewhat collapsing in height as you scroll, also seem better than vanishing headers from the point of control. Unless there comes out some positive research on usability of this particular UI element, I personally am not convinced.
Kiro 12y ago
I want them.
hayksaakian 12y ago
serious question: do you use the web much with on your phone? There's no "Home" key on your phone that instantly takes you to the top of the page. Scrolling and scrolling and scrolling is annoying. The main critique I have for the OP is that is that it should be responsive -- and only work on tablets and mobile
- evv 12y ago
  > There's no "Home" key on your phone that instantly takes you to the top of the page. There is, at least on iOS. You can tap the status bar and it will quickly jump to the top of the page.
- acdha 12y ago
  > There's no "Home" key on your phone that instantly takes you to the top of the page On iOS: tap on the system menu at the very top of the screen.
- gabemart 12y ago
  > The main critique I have for the OP is that is that it should be responsive -- and only work on tablets and mobile All it does is add and remove classes. It can be as responsive or unresponsive as you like with @media rules.
  - WickyNilliams 12y ago
    precisely! or you can use matchMedia (or my lib enquire.js [0]) to selectively enable/disable the entire feature. This might be preferable than @media in your CSS, because it does away with scroll listeners where they're not needed. [0] http://wicky.nillia.ms/enquire.js/ http://wicky.nillia.ms/enquire.js/

by jblow 12y ago

DenisM 12y ago

Actually, it's not as bad as the headline implies. Header stays hidden once it disappears, giving you the entire screen to read, but if you scroll up a bit it appears again, so you can use it to navigate. It acts the same as iOS Safari header - once you get used to it, it's really nice.

danielweber 12y ago
A completely static site also has this property. When I scroll to the top, I can see the top. When I scroll away from the top, I cannot see the top. I've just stated a tautology, so I'm missing something. EDIT I'm seriously wondering whether this whole thing is a joke I'm not getting. Is there a jQuery plug-in that lets me click on text to go to other pages, too?
- deleted 12y ago
  [deleted]
- sehr 12y ago
  > When I scroll to the top, I can see the top. Instead, when you begin to scroll to the top you can see the top. If you have an iphone, it's navbar behavior is identical to this. http://usabilitypost.com/2014/05/24/the-scroll-up-bar/ http://usabilitypost.com/2014/05/24/the-scroll-up-bar/
  - hnriot 12y ago
    on the iPhone you can just double tap the top of the screen to scroll to the top quickly.
    - eropple 12y ago
      And when I want to resume reading? What then? Let's not be obtuse, yeah?
      - ajanuary 12y ago
        What then? You tap the bottom of the screen to bring up the chrome instead.
        eropple 12y ago
        There's no snapback to where you were reading if you double-tap the top. Which sucks and makes for a bad UX if you only need the top bar for a moment (for a share button, for example).
        ajanuary 12y ago
        I said tap the _bottom_ of the screen, not the top.
        eropple 12y ago
        And I'm pretty sure you lost the plot, because this thread is about the header library in the OP, not the browser chrome. Your suggestion to double-tap to the top (with a menu that doesn't follow you) means I lose my place. And so it's not a good suggestion.
        ajanuary 12y ago
        The context of this sub-thread is on the iPhone you can just double tap the top of the screen to scroll to the top quickly. Which is all about browser chrome.
        eropple 12y ago
        Dude. The iPhone was a comparison, not a concrete part of the discussion. Did you, like, read the posts before it in this subthread that are whining about how this thing is useless because you can "just" scroll to the top of the page to see the menu bar on the page? And, now, how tapping to the top isn't a good solution? There are enough upvotes on my posts here that I don't think this is that unclear.
- enraged_camel 12y ago
  The point is that you should not have to scroll all the way to the top to see the header. Tools like headroom.js add predictive behavior to your site to improve user experience. I personally really appreciate sites that have it.
  - hnriot 12y ago
    that's assuming I want to do navigation just because I started to scrollup, which is a flawed assumption.
- WickyNilliams 12y ago
  The easiest way to think of it is a halfway house between fixed and static. You get the benefits of static (maximising vertical screen space) while keeping the benefits of a fixed header (primary navigation always close to hand). Edit: it's not a joke, it's an established pattern found on both iOS and Android. Slightly interesting backstory with android: this effect was originally added to the stock browser on android 3.0. I loved how the tiny enhancement gave me more screen real estate, so I decided to build a JS lib to emulate the effect. The pattern didn't make it into the original chrome for Android, but after I mentioned it to Paul Irish he made it happen there too :)
- npsimons 12y ago
  I'm glad I'm not the only one; when I saw the headline I thought "this fix wouldn't be necessary if people just used static pages in the first place." I've seen headers that stay on-screen while scrolling; even on huge displays they annoy me, so kudos to the author for the effort and putting it out there, but I can't help but feel like he just hit a windmill full tilt. Edited to reduce inflammation.
danudey 12y ago
Except that Safari uses it to hide important browser chrome. Websites use it to hide headers that really don't need to be there in the first place.

HNJohnC 12y ago

Whoa! I'm very excited to be reading the text of the person put in charge of the universe! I'm getting chills just thinking that you might actually read this humble message.

WizzleKake 12y ago
He's not wrong.

ansimionescu 12y ago

This. Moreover, is adding even more JavaScript really necessary? How about just make things simple, fast, and easy to read? As an user I'll always choose speed and good typography over clever transitions and smart menus.

untog 12y ago

Just get rid of the damn headers. Users don't want them. Are there any stats that prove this? I see this repeated time and time again on HN but I'm yet to see evidence that (a meaningfully significant number of) users are turned off by headers like this, while I have seen evidence that it increases engagement rates. It's used in both Chrome on Android and Safari on iOS, so I don't think it's an alien concept at this point.

old-gregg 12y ago
> Are there any stats that prove this? Really? You're basically looking at picture #3 from the left: http://i0.wp.com/www.stephenblower.co.uk/wp-content/uploads/2013/04/tree_swing_development_requirements_half_x350.jpg http://i0.wp.com/www.stephenblower.co.uk/wp-content/uploads/... Do you need "stats" to prove the absurdity of headers that disappear when you scroll?
- eropple 12y ago
  Seeing as how they're a common (and, IMO, very pleasant) user interface idiom on mobile, I think it's very reasonable question to ask regarding the web. You made a claim about "users". Data to support it would be nice.
- deleted 12y ago
  [deleted]

jonahx 12y ago

just curious, are saying you let them scroll out of view, or get rid of them altogether? if the latter, what type of site navigation is better?

chrismonsanto 12y ago

I absolutely loathe fixed headers, but I think this script is pretty cool. The headers stay out of your way when you are reading, and when you actually want to use the navigation you don't have to scroll all the way to the top. I really see no downside, except "more JavaScript." (People who are complaining about JavaScript: you really aren't going to like the Web in 5 years)

qu4z-2 12y ago
I don't like the web now... grumps
deleted 12y ago
[deleted]
danudey 12y ago
Downside: more javascript (another file to load, to break, to parse, to wait on, etc) Downside: unusual behaviour. Users fully understand how to scroll to the top of a page to find the header. This hack already requires them to scroll up to get to the header. Also, there's a decent chance that if you're trying to find the header that you're going to leave the page, so it doesn't matter if you lose your spot. It's a cutesy feature, but it's cumbersome and pointless, and doesn't add any real usability (unless you count getting rid of fixed headers, which also don't add any real usability).
goblin89 12y ago
There are two kind of significant problems with headers that hide as you scroll, in my experience. 1) You can't easily get to the navigation when you do need it—have to scroll up some uncertain amount that varies by site (this unknown makes simply using scrollbars more reliable)—and 2) you get it when you don't need it, as in you're simply scrolling back to reread a portion of the text above. In short, this element feels always somewhat out of user's control. Much more usable on mobile would be putting such navigation in a kind of sidebar that many apps already employ (often accessible by swiping from the left edge of the screen), while on desktop a great solution is simple “top” links, strategically placed. Plain fixed headers, possibly somewhat collapsing in height as you scroll, also seem better than vanishing headers from the point of control. Unless there comes out some positive research on usability of this particular UI element, I personally am not convinced.

Kiro 12y ago

I want them.

hayksaakian 12y ago

serious question: do you use the web much with on your phone? There's no "Home" key on your phone that instantly takes you to the top of the page. Scrolling and scrolling and scrolling is annoying. The main critique I have for the OP is that is that it should be responsive -- and only work on tablets and mobile

evv 12y ago
> There's no "Home" key on your phone that instantly takes you to the top of the page. There is, at least on iOS. You can tap the status bar and it will quickly jump to the top of the page.
acdha 12y ago
> There's no "Home" key on your phone that instantly takes you to the top of the page On iOS: tap on the system menu at the very top of the screen.
gabemart 12y ago
> The main critique I have for the OP is that is that it should be responsive -- and only work on tablets and mobile All it does is add and remove classes. It can be as responsive or unresponsive as you like with @media rules.
- WickyNilliams 12y ago
  precisely! or you can use matchMedia (or my lib enquire.js [0]) to selectively enable/disable the entire feature. This might be preferable than @media in your CSS, because it does away with scroll listeners where they're not needed. [0] http://wicky.nillia.ms/enquire.js/ http://wicky.nillia.ms/enquire.js/