Unless the user is actively navigating, the header is dead weight. The header should hide on scrollDown and reveal on scrollUp. Let the content breathe.
This one I actually hate. Often I just want to scroll up a few pixels, either to satisfy a mild compulsion or to align the content so I can see most of it. This is completely ruined if the navbar pops back in. Leave it at the top of the page, where it belongs, not at the top of the viewport!
100%. i like using the top of the screen to mark my place in reading. sometimes i need to scroll back up and these headers completely fuck up my reading experience.
but luckily Reader View exists, so i usually just use that.
The iOS browser has always supported “tap the top of the viewport to scroll all the way up,” which largely allows for what you say: just leave the nav way up there. Last time I looked was years ago, and Android Chrome didn’t did this. Does it now?
It’s not obscure. It’s core. Apple has this entire UI philosophy called “revealed power” which is about the UI not having a big button for everything necessarily, and letting the user discover added layers of functionality as they go on. This keeps the UI simple in the beginning, or for people who always need simplicity, but allows others to discover more in time. You don’t have to like it but it’s very intentional.
What’s “discoverable” is also relative. I was on a PC today struggling to figure out how to do something. Eventually I tried double clicking the element in question and that finally worked. I thought wow I don’t use PCs much anymore because double clicking hardly even occurs to me anymore. Can you tell me how any user ever finds out that you need to double click an icon on their desktop? Seems obvious, but there is no label or visible indication that this is what you should do. You’re thinking pshaw that’s obvious, but how did you learn? I’d be very surprised if you can remember.
I feel your pain. The really good ones plan for this, some pop up immediately when you scroll up and that sucks. The proper thing to do (imo) is to wait for the user to scroll 80% of the viewport back up, only then letting it begin to slide in, and have it slide in at a rate 1/2 of the page scroll. I do like having it easily available, but it should feel like it’s trying to stay out of the way.
This one I actually hate. Often I just want to scroll up a few pixels, either to satisfy a mild compulsion or to align the content so I can see most of it. This is completely ruined if the navbar pops back in. Leave it at the top of the page, where it belongs, not at the top of the viewport!
IMO the header should stay at the top as part of the page. I know where it is, I’ll scroll up to it if I need to.
Like you, I find a header appearing and hiding quite difficult in specific circumstances.
100%. i like using the top of the screen to mark my place in reading. sometimes i need to scroll back up and these headers completely fuck up my reading experience.
but luckily Reader View exists, so i usually just use that.
I like it at the top of the view-port, but I agree the auto-hiding/showing feature is excruciating.
It really depends on the site for me.
What I really hate is a table that’s multiple scrolls long where the header row doesn’t follow.
The iOS browser has always supported “tap the top of the viewport to scroll all the way up,” which largely allows for what you say: just leave the nav way up there. Last time I looked was years ago, and Android Chrome didn’t did this. Does it now?
And almost every actual PC has a ‘home’ key on the keyboard which does the same … unless the website has scripts that hijack it.
Even if it did, how would any user ever find out about this obscure feature?
It’s not obscure. It’s core. Apple has this entire UI philosophy called “revealed power” which is about the UI not having a big button for everything necessarily, and letting the user discover added layers of functionality as they go on. This keeps the UI simple in the beginning, or for people who always need simplicity, but allows others to discover more in time. You don’t have to like it but it’s very intentional.
What’s “discoverable” is also relative. I was on a PC today struggling to figure out how to do something. Eventually I tried double clicking the element in question and that finally worked. I thought wow I don’t use PCs much anymore because double clicking hardly even occurs to me anymore. Can you tell me how any user ever finds out that you need to double click an icon on their desktop? Seems obvious, but there is no label or visible indication that this is what you should do. You’re thinking pshaw that’s obvious, but how did you learn? I’d be very surprised if you can remember.
I feel your pain. The really good ones plan for this, some pop up immediately when you scroll up and that sucks. The proper thing to do (imo) is to wait for the user to scroll 80% of the viewport back up, only then letting it begin to slide in, and have it slide in at a rate 1/2 of the page scroll. I do like having it easily available, but it should feel like it’s trying to stay out of the way.
I have this usercss:
[data-testid="header"], [data-mobile-fixed="1"], [data-remove-fixed="0"] { position: absolute !important; width: 100%; } main { padding-top: 2rem !important; }Works well enough on most sites. And on those it doesn’t, you can easily exclude.
Can likely be expanded, but adding just
headerbroke more than it fixed.At the same time, it needs to be comfortably thin.