Article header problem: A while ago, it became popular for sites to institute a fixed header on scroll, like on this site: http://ift.tt/2wx5LND
The way they work is that if you scroll down, it hides the header, and if you scroll up it will show it. I hate these because I scroll up and down a lot for many reasons, especially when reading news articles, and whenever I scroll up even a bit, the header comes down and blocks what I was just looking at. In the site I linked to, the header isn't so large, but I've seen much thicker headers from sites that just dgaf.
Obviously this behavior is to give the articles more space, but I find it very disruptive and distracting to the person trying to read the page's content. It means the page's size is basically constantly in flux. I think it does more harm than good.
Comments section header problem: A similar problem I notice often is in the comment sections, where scrolling down will trigger the comment section header to stick to the top of the screen, as well as the comments themselves, but there is no buffer space given to the comments, so the first comment is literally obscured by the comment section header when you scroll down. Here's an example, though, again, I've seen worse. The comments are under the article. http://ift.tt/2wkFRNa
You can see that once you scroll past a threshold, a jump is triggered and the top comment becomes obscured due to poor design decisions and poor programming.
How scroll-triggered fixed headers can be done right:
Regarding the comment section header: First, for the comments section header, they obviously should have added buffer space so that the first comment isn't obscured. For some reason this is a very common mistake I see get made. Maybe there are a lot of sites using the same flawed comments section code.
Regarding the article's header: If you are going to add this behavior to your site, you should consider why somebody scrolls up or down. If you are scrolling small amounts, it might be to revisit a statistic in the last paragraph or a photo from the article, and you don't want a header to suddenly pop up and block your content. On the other hand, if you scroll up a lot very quickly, there's a good chance it's because you want to get to the top of the page to access the header. Though there would need to be testing to know for sure, I think it's usually the case.
I think washington post has a pretty good implementation of the scroll-triggered fixed header, despite their shitty comments section header I described above. Like the first article I mentioned, it triggers the header based on scrolling up, and hides it based on scrolling down, but the difference is it only triggers these actions when the user scrolls at a certain speed, not at every smallest scroll. This means the user can make small scrolling adjustments without constantly summoning and banishing the header. Also, washington post's header is just smaller and less intrusive.
Honestly though, I don't think I have ever needed or used a fixed header on a news site or a comments section. I would be happy if they stopped stapling them to the top of my screen altogether. But if they must add scroll-based headers like these, they should at least fix such obvious flaws.
Great design resource
100 Things Every Designer Needs to Know About People (Voices That Matter)
Submitted August 22, 2017 at 05:27PM by ActivateGuacamole http://ift.tt/2x9o49o
No comments:
Post a Comment