Auto-hide persistent fixed header on scroll


(Justin Mayer) #1

My personal opinion is that persistent fixed headers provide a suboptimal end-user experience because they:

  • do not scroll accurately (e.g., scrolling via spacebar hides the first item on the next page — the user will never see that thread)
  • reduce available screen real estate for almost zero benefit — when I’m scrolling down to read content, I do not need the functions provided in the header, and when I do, I can simply scroll up slightly
  • are jarring and unexpected — humans naturally expect the entire page to scroll
  • distract the user from the conversation at hand

Fortunately, there is a solution to these problems: hide the header when the user scrolls the page down, and show it again when the page is scrolled upward. This eliminates the above-mentioned problems while retaining the ostensible benefits of the persistent header.

Thankfully, there is already an excellent Javascript library that delivers this functionality: Headroom.js

So my question to the Discourse maintainers is… Would you consider utilizing Headroom.js in order to address the above-mentioned problems and improve the usability of Discourse’s header behavior?


Fix the fixed navbar?
(Kris) #2

This discussion also came up here, but in regards to mobile. Thoughts anyone?


(Justin Mayer) #3

@codinghorror has made arguments in support of persistent navigation, and following are my thoughts on his comments:

[There are] plenty of sites with fixed headers

I don’t think this is a good reason. The same criticisms and problems mentioned above also apply to the other sites with fixed headers. Just because they have suboptimal usability doesn’t mean Discourse should follow suit.

if you hide the header you will have no idea what the title of the topic is

I already know what topic I’m on because I’m the one who selected that topic in the first place. If for some reason I forget what I just selected a few seconds ago, I can scroll up ever-so-slightly to display the title.

whether new notifications arrived

I do not need to know every second of every day whether a notification has arrived. Sometimes it’s nice to be able to read a discussion thread without the distraction of new notifications. Moreover, one minor flick upward will show the header again, along with any notifications that may have arrived since the last time I scrolled upward.

search

Why do I need a search field on my screen at all times? I use the search function very infrequently, and when I do need it, I can call it up by scrolling up a smidge. Easy.

[We should not] gut our core function

Hiding the header navigation when not in use does not “gut” Discourse’s core function, nor does it have a negative impact on Discourse’s core function in any way. In fact, if anything, I believe it enhances Discourse’s core function by reducing visual clutter and allowing the user to focus on the discussion at hand.


(Kris) #4

if you hide the header you will have no idea what the title of the topic is

That’s probably the key point to me. With infinitely scrolling pages and the idea that I could have multiple topics open at once… making finding the title of the current discussion an active behavior seems like a bad idea.


(Justin Mayer) #5

Everything we do on the web is an active behavior to some degree or other. For those who need a reminder as to what topic they are viewing, scrolling upward by a few millimeters in order to see the current title does not seem like a significant effort.


(Dave McClure) #6

Also, right now the title isn’t shown in the sticky header on mobile


(Bill Ayakatubby) #7

I’m all for the idea, on both desktop and mobile. In fact, @codinghorror has already as much as blessed the idea:


(ampburner) #8

100% support this idea. Especially on mobile, it would save som much needed reading real estate.


(Theron Boerner) #9

Disagree. I don’t like auto hiding headers. The header has useful info and controls.


(Jeff Atwood) #10

Not exactly. Passively reading a news article is not the same as engaging in a conversation with a larger community.

We already hide some of the header on mobile because of massively restricted display width on small devices, eg. this:

But hiding everything means:

  • you wouldn’t know when new replies arrive, or have access to mentions, quotes, replies, and other “people are talking to me” notifications
  • you wouldn’t have a “home” button (logo, left)
  • you wouldn’t have search
  • you wouldn’t have a menu to navigate to categories, etc
  • you wouldn’t have a link to your profile

Of those, removing the self-link to profile is probably the most defensible, but the rest are quite essential.

So no, I don’t support auto-hiding the persistent header on scroll as a default out of box feature. If you want to hide it with embedded custom JS on your Discourse, feel free to do so.


(Justin Mayer) #11

Thanks for your comments, Jeff. I see your point, and I think there is room for a middle-ground solution.

On a downward scroll action, why not put the truly “essential” icons in a much-smaller floating overlay at top-right? (Preferably with transparency.) That way the current large, opaque, persistent bar would be gone and wouldn’t get in the way of the discussion content. More importantly, threads in the list view wouldn’t disappear when users go to next/previous pages via the space bar.

This would seem to address the concerns you have about having certain elements persist in the viewport, while at the same time addressing the problems with the current design. What do you think?


(Jeff Atwood) #12

Possibly, can you share screenshots of other mobile apps or websites that do this? I have seen it done that way before, but it is rare. Transparency can be tricky to get right.


(Trevor Williams) #13

That’s probably the key point to me. With infinitely scrolling pages and the idea that I could have multiple topics open at once… making finding the title of the current discussion an active behavior seems like a bad idea.

For mobile:
I totally agree.

For desktop:
You’d know what topic you entered when clicking a link in the place (I mean, do you just go randomly clicking links? Well okay, some people do and to those people, I say you’re a bit reckless and maybe this would be a bit harsh but you deserve whatever happens to your computer for doing so) but for those who get lost and senile while reading (because it happens), a tiny little scroll upwards wouldn’t hurt. People tend to do that naturally any way. I watch and observe how people generally use their mouse and the way they scroll. When you make that little effort to scroll up its like diving into the pool and the scroll upwards is like coming for air. That’s one way I can explain this.

On a side note:
And this is a general statement and my opinion; When those that talk about UX try to use big words and hit you with all these scientific algorithms as to why a user does what they do - well sure theres psychology to all of this - but in the end when it comes down to it, its all common sense and theres a fairly logical approach to how you know when you’ve hindered or increased UX. My general rule of thumb is that if a 9 year old can navigate the site, then you’re good to go and keep it pushing. I would say an 8 year old could navigate this particular site so with that said, you all are doing quite well…

Everything we do on the web is an active behavior to some degree or other. For those who need a reminder as to what topic they are viewing, scrolling upward by a few millimeters in order to see the current title does not seem like a significant effort.

Good points.

I’m all for the idea, on both desktop and mobile.

Desktop yeah, mobile, not so much…

Disagree. I don’t like auto hiding headers. The header has useful info and controls.

Sure it does, but wheres your argument?


###So, that said, here’s a solution.

For desktop, I suggest implementing something like headroom.js. From my experience, this provides both increased readability and general user experience. Because the main focus is the content itself, the extra 63px shaved off when not needed can improve this.

EDIT: @justinmayer already suggested this.

For mobile, you can either keep the persistent fixed header the way it is (because generally I see no problem with it as it currently stands (perhaps make a few UI changes i.e. making navigation a tad bit smaller overall while keeping the same UX), or implement a sidebar with the logo in a fixed floating position acting as the sidebar opener.

Any other alternative approaches would definitely be “wild” if you catch my drift.


(Theron Boerner) #14

How is desktop a problem? You have plenty of space to read compared to mobile.


(Dewayne VanHoozer) #15

Visually impaired users need all the content space we can get regardless the platform we are using. I have been to some sites using the fixed header that when I expand the text in order to read the content, the header expands to fill half my display. Auto-hide on down, show on up is a great idea.


(Theron Boerner) #16

Make this optional and I have no problems.


(probus) #17

I’m undecided on this, but perhaps as a compromise the header could be made smaller when reading topics. Especially if the title is long and wraps in to two lines the header takes a lot of space. How about something like this?

currently:

with a few lines of css:


(Jeff Atwood) #18

Yeah two and three lines of header is not great.


(Sam Saffron) #19

I also agree with this change, we used to shrink the text but that was weird. truncating should be fine imo.


(Erlend Sogge Heggen) #20

With that, I think you should be able to click on the truncate dots to expand it to read the whole thing. You could click again or just scroll to revert to truncated.