color schemes
   rss feed:
13 May 2017

The header from hell – OK, so what’s the deal with the auto-hide headers that seem to be all the rage these days? If you’re not sure what I’m talking about, try reading this brief Awl article on how we really have no idea what salt does to the body (maybe just open it in a new tab or something, as I’ll be referring to it a number of times). Scroll down a bit, maybe past that big stonking picture of a salt shaker. Now scroll back up a click (this will work whether you use the scroll wheel on the mouse like a normal human being or drag the scrollbar at the side of the browser window like a Neanderthal—and yes, that is definitely how Neanderthals navigated their web content). See how the big navy blue Awl banner drops down from nowhere? That’s an auto-hide header, sometimes called an “auto-hide sticky header,” because that makes it sound so much more pleasant. I just call it the Stupid Banner.

“I am aware that this is 99% screaming into the void, but if there is just a 1% chance that a designer might see this and think, ‘Hey, that’s a good idea,’ then my work here is done.”

Anyway, the Stupid Banner is the bane of my web-browsing existence these days. Nothing annoys me more than going to a website and finding a Stupid Banner there, ready to make me miserable. It hides there, just above the top of the browser window, waiting for me to even think about stepping back for a moment, at which point it jumps out and shouts in an incredibly irritating voice: “Did you miss me? You missed me, right? I know you did!” In my mind it sounds like Gilbert Gottfried.

Why is the Stupid Banner so annoying? Because when I am scrolling up, I am usually doing so because I want to reread the line or so just above the window. Maybe I scrolled down a little too far. Or maybe I got distracted and found myself at the end of a sentence with no memory of how it started (no, I am not going senile!). For whatever the reason, I just want to scroll up a little bit and bring those few lines of content back onto the screen—but when I do, Mr. Stupid Banner pops up and obscures that content, forcing me to scroll up even farther and then scroll down again a click just so he will go away.

So the next logical question is, why do web designers do this? I’ve read that it is because of mobile device. Real estate on a mobile device screen is at a premium, so hiding the banner once a user starts scrolling—as opposed to having a banner visible all the time, taking up valuable screen space—is a good idea, the logic goes. But then you have the problem of what to do when the user, for whatever reason, wants to see the banner again. The solution is to have the banner drop back down as soon as the user starts scrolling up. Here’s the kicker, though: I just looked at that Awl article on my phone, and the header does not drop down when I scroll up. The location bar of my phone’s browser does drop down, but the banner stays fixed at the top of the web page (as opposed to the top of the screen).

I have no idea if it is just my phone that is weird. Whatever the case, I’m going to continue to assume that this is a “mobile design” decision, otherwise it makes absolutely no sense to me. Actually, it makes no sense to me, full stop. I think it is bad design for a number of reasons. The most important reason is that it assumes a single motivation on the part of the user when scrolling up, when in fact this motivation is probably not even the most likely one. I suppose I could be wrong, but I think people generally scroll up because they want to see what is above the screen, so to speak.

But there are other reasons why it is bad design. It encourages short attention spans, for one. Maybe this is me just being a crotchety old man, but whatever happened to reading through to the end of whatever it is you’ve started reading? I can see starting to read an article and thinking, “Hmm, this isn’t what I thought it was going to be” (a common problem given the abundance of clickbait titles on the internet) or “You know, I don’t really want to read this after all.” But this decision is going to be made relatively quickly, which means that the top of the page is still going to be close enough to return to with a quick flick of the finger (again, if you are on a mobile device). Personally, I generally don’t get well into an article before deciding that I’d rather not read it and want to get back to the main menu or whatever.

And that point brings up two other points. One, do we really need to have the header available at all times, and two, how hard is it to scroll back to the top of the page anyway? To the first point, I suppose the auto-hide header might be a branding thing as opposed to a user convenience thing, in which case I hate you, hypothetical web designer, and we’re pretty much done here. But even if it is supposed to be a user convenience thing, how does that work, exactly? The way I usually navigate out of an article is to hit the back button to return to the main page of a site—what does the header do for me that the back button can’t already do? Take that Awl article I used as an example above—what does the header do for me? All it has is a link back to the main page and a “sign in / sign up” link on the right. Why do I even need this? If you’ve got a lot of navigation links on the header, sure, I can see it being slightly faster. But is it worth the aggravation of Mr. Stupid Banner? I don’t think it is.

To the second point... well, I should probably admit here that I don’t generally browse the internet using a mobile device. This may have something to do with me being a crotchety old man, but a) I find it annoying to try to read internet content on my phone, and b) I don’t actually have to be connected to the internet every single second of the freaking day. I can wait until I am sitting down at a computer with a reasonably sized screen to do my web browsing. Now, that being said, the only thing about browsing the internet on my phone that is better than browsing the internet on my computer is the ability to flick scroll, sending text flying up or down until the end of the document crashes into the top or bottom of the screen. This is so much fun that I will sometimes do it for no good reason, other than to see the text go flying. Yes, I am easily amused. (Technically, I can also do this on my laptop, since it has a touchscreen, but it is not quite as easy or as effective as it is on my phone.) Anyway, my point is that scrolling back to the top of a web page on my phone is not only easy, it’s fun. So if, for whatever reason, I need to get back to the top of the page, I am not thinking, “Gee, I wish a stupid sticky header would drop down right about now.” No, I’m thinking: “It’s flick scroll time!”

So, to sum up, Mr. Stupid Banner simultaneously commits three web design sins: 1) It addresses a problem that doesn’t really exist, 2) it solves that problem poorly, and 3) it breaks other functionality in the process. What should be done, then? Well, no one cares what I think about web design, so I have no illusion that this entry is anything other than me screaming into the void, but if I somehow had any say in how things were done, I would just eliminate Mr. Stupid Banner entirely. However, I understand that this might be controversial. For one, web designers wouldn’t be able to pull this “one neat trick” out of their bags to impress clients.

But let’s say there are people out there who actually like Mr. Stupid Banner. This is hard for me to fathom, but if I’ve learned one thing over the past year, it’s that there are a significant number of people who hold views that I find utterly incomprehensible. So let’s operate on the assumption that we don’t want to take Mr. Stupid Banner out behind the shed and shoot him in the back of the head(er), we want to take him under our wing and show him how to be a better header. The solution, I think is simple. If you go back to the Awl page and try scrolling up and down with your mouse’s scroll wheel, you’ll notice that the header drops down after a single upward click of the wheel. This is more or less standard behavior for Mr. Stupid Banner. But why does it have to be a single click of the scroll wheel? Why can’t it be five, or nine? Enough so that we can say, “OK, this person doesn’t just want to see what is just above the screen, they actually want to scroll back up again.” Why can’t we do something like that instead? That way everyone is happy!

OK, so that turned out to be a little longer than I was expecting. My original idea was to just write a little note and rant about something that was bugging me, but I just couldn’t help diving a little deeper. Again, I am aware that this is 99% screaming into the void, but if there is just a 1% chance that a designer might see this and think, “Hey, that’s a good idea,” then my work here is done. Actually, I bet some designer has already thought of this, but the smart version (let’s call it Mr. Smart Banner) just hasn’t caught on yet. If that’s the case, maybe someone will read this and think, “Yeah, I want Mr. Smart Banner!” And I will have played my (very small) part in ridding the world of one of the greatest evils of our time.

So I guess I’ll wrap things up now. Speaking of wrapping things up, this will be my last entry from Cambridge until the fall. Next week we will be traveling to Indiana for a conference, after which we will be visiting friends in Michigan and then spending some time in Chicago before heading back to New York, where we will be spending the summer with my parents. It’s a little sad—I’m going to miss this place!

(Oh, by the way, the answer to “Hey, we don’t actually know for sure what salt does to the body” is not to say, “Woohoo! I’m going to go eat a cup of salt!” The correct response is to stop freaking out about salt and continue to eat it in moderation, knowing that anything, no matter what it is, will probably kill you if you eat too much of it. I mean, come on.)

Send me your thoughts.

color schemes
   rss feed: