Do not combine footers and infinite scrolling
willfennel.com
willfennel.com
Happens out, UX team placed the "Send Feedback" button below the infinite scroll content feed.
I recall a new marketing executive who touted that they had improved the youtube ads so much that NOBODY had skipped a single improved youtube ad!
They made the ads all so short that you couldn't skip them.
If they were trying "skiping not allowed in 60+ sec long ads", then it would be bad
Maybe for your attention span or what YOU like but maybe not for what they are actually buying ads for... Money
We're just sitting there saying, even from a non-code point of view, this shit makes zero sense.
Ignored as usual.
Let us try our best to treat them charitably, forgive the mistakes we see, and provide input to help them do their work even better!
I had success working with Design/UX or any other specialists acknowledging that they spent more time thinking about it than I have, and that, of course, they will be the final decision makers on whether to accept or reject any inputs I give, before providing any feedback or ideas I have. Also, taking the attitude, not of "Let me teach you X", but of "Teach me whether you considered X and, if you have, why you haven't tried X yet".
The same sometimes applies to designers and developers: if developers don't design, then of course they won't make bad designs.
The gist of it all is: don't ridicule people for mistakes, even if they're in their supposed field of expertise. Just let them know they've made a mistake if you see one.
I think the reason is, devs view a design from the perspective of a simple user, they see it with fresh eyes, while the UI/UX team probably spent too much time tweaking the design to the point they got used to it and all its quirks and stopped seeing anything wrong with it.
Ideally, there is a QA pass on staging, involving the designer, in which more than "does this feature work as written in the ticket" is the question you try to answer before releasing the feature. Many teams don't do this, and the blame for that lies with different people in different organizations I've worked in.
But developers often sneeringly deride designers for not catching things like this — "you had one job, lol" — but the sad truth is that there's no testing suite to help designers catch stupid mistakes. Speaking practically, the unit tester for a design is often the developer who tries to build it. Imagine what your interpreter or compiler or testing framework would say about your intelligence if it could talk!
HN tends to be more developer focused but I suspect most of these horrendous type decisions aren't made by random dev, and random dev isn't in a position to stop it.
Many years ago I once worked at a place where a CRM app had "special instructions" and at one point management was so upset about people not following them 100% of the time they were considering "make them blink" so the drones wouldn't miss them ... thankfully the blink tag had been deprecated. These instructions were sometimes several paragraphs long ... and they wanted them to blink...
I suspect the really bad stuff comes from places other than the developers.
I don't even have very strong opinions about design; anything is fine with me. The only part I really do have a strong opinion on is "it should be readable", and enforcing only that has been very tiresome at times.
Regardless, just going ahead and changing the design is probably the nuclear option. It's only going to start a war. Put the shoe on the other foot: consider same designer dropping a 2008 era jQuery snippet into your carefully constructed page to resolve an issue in the build. Not fun for anyone.
Edit: I should add, I'm basing all of this on personal experience. Appreciate some situations just suck and you have to get on with it.
For many I suspect it really isn’t their job to decide otherwise if someone wants a horrible footer…
In my experience it has almost always been devs who don’t really use what they’re developing. “Alert sounds don’t stop if alert panel is open when new alert comes in” is only something a heavy user will notice. A dev might trigger an alert, but never think of weird edge cases like this.
There are applications I use where if the dev actually had to use what they made regularly, they would start implementing changes that get rid of the tedium. That’s also why in that CRM case I would really be pushing to have the opportunity to work as an actual user a few hours a week to really get a sense of how it works and what they really needed from those special instructions.
"Just make everything bigger" is one of those opinions. At the point where you have to explain your customer how basic perception works, how you cannot make everything equally important without sacrificing something — this is the point where you lost.
Try to read the text or click on a link in the footer, and if you're lucky the request will be slow enough.
One site attempted to do it more intelligently, and the footer floated via z-index and pinned to the bottom of the window such that it was always visible despite the infinite scroll. Though they got it a little wrong and didn't account for the footer height in scroll calculations so if the content wasn't infinite so you could get to the end of the scroll, the last couple of lines were obscured by the footer. There must be quite a few ways to do this “properly” and smoothly (just thought of a couple right now, and I'm no front-end guy), assuming you consider automatic infinite scroll to ever be considered doing design “properly”.
you can then make the container fill the height/width with flexbox
in that case you can just add position: sticky and bottom: 0 to the footer
with this trick you get the same behavior as with position: fixed but won’t need a wrapper div as in the comment i replied to
Granted, there isn't really any use in archiving ephemera like search results and frontpages other than notarizing odd patterns to show your friends or blog about, so the problem really lies in the interaction of web archival with infinite scrolling in general: comments sections, for example, can only be conveniently archived in their entirety without scraping if they're paginated and nothing is unloaded by default.
But DDG search results? I scroll until I find what I need, then I close the tab (it's rare to get past page 2, and yes DDG does actually group the results into numbered pages, with each page loading as it's scrolled into view).
I have come across a couple of these (I think blogs & news sites do this) and it is so annoying.
This is almost certainly better addressed by discouraging and shaming than by trying to fix it at the browser level. I agree with the clarity and brevity of the article (even if I can’t muster such brevity to save my life). And it’s very rare that this kind of UX is any more onerous to me than closing the tab/leaving the site.
overriding scrolling behaviour or virtual scrolling is a complete no-go
eg. this one: https://www.fortnitelookbook.com/en
Maps apps don’t make much use of scroll APIs at all, they tend to use pointer events (and/or their older mouse equivalents). When they do it’s almost always auto-panning to some item in a more traditional results list, and always a horrible experience. Apart from infinite scroll, the most common uses of scroll-related APIs are:
- deferring load/execution of resources until they’re pertinent; this is almost always a better UX, unless it’s done very poorly (side eye at many news sites)
- removing offscreen elements from long lists to minimize their performance impact; again almost always a UX benefit unless done poorly, though easier to screw up
- restoring scroll position between interactions; generally neutral, about the same level of quality as built in behavior, but better than not doing it when there’s client-side navigation (and I know this is another JS curmudgeon complaint, but it’s almost everywhere and mostly unnoticed)
- scroll-snap, which has eliminated the need for JS for whole classes of presentation (and probably the first unambiguously good thing MS purposefully introduced to web standards)
- offsetting jump in-page anchor/jump links to place content in view where they’d otherwise be obstructed; significantly benefits UX, unfortunately not (yet?) as widely adopted as I’d prefer
- “scrollytelling”, which can be really annoying but also can be incredibly useful if done well; notably a CSS standard is finally getting real world traction and will make the usage much more user controllable and much less awful for users who don’t control it
- shady tracking stuff which is mostly invisible to the user; entirely awful but categorically a whole separate UX topic
- weird event handlers to control things like video volume; I hate these with a burning passion
Overall, IMO, the value is kind of a wash. But the positives generally amplify positives for a lot of other UX problems and newer standards have made them basically mostly harmless.
In my experience, deferred loading merely guarantees that there's visible latency multiple times when interacting with a page even after it has "finished" loading. And since lazy image loading can now be accomplished without JavaScript, I'm not sure what still needs to be lazily loaded via scripts watching scroll behavior.
Removing elements after you scroll past them sounds like the kind of optimization only necessary on infinite scroll pages, unless the page in question has a multitude of auto-playing videos.
Restoring scroll position between interactions: I'm not sure what kind of interactions make this necessary, so an example would help.
Scroll-snap: The examples on MDN don't even behave properly.
Offsetting jump in-page anchor/jump links: Stop obscuring 20+ % of the vertical space with "position:fixed" dickbars. Then you have a much smaller problem which I'm not sure requires JS scrollhacking to solve.
I'm not sure scroll hijacking is completely bad, but it's overwhelmingly more bad than good. Breaking fundamental interaction mechanisms should only be done where it's absolutely necessary, or in a context where all the normal expectations for interaction can be abandoned. These capabilities go beyond merely "ripe for abuse" and are perhaps better described as UX footguns that are mysteriously attractive to web designers.
It would be, if they’re done well they’re indistinguishable from not being there at all. It’s unfortunately biased against good implementations. As far as examples, the best by far are HTML-only (img with loading=lazy, which behaves as expected almost universally). After that, I’m on mobile right now so limited in my reference capacity, but they tend to use IntersectionObserver and usually with simple abstractions around that.
> In my experience, deferred loading merely guarantees that there's visible latency multiple times when interacting with a page even after it has "finished" loading
Yep that was my side eye.
> And since lazy image loading can now be accomplished without JavaScript, I'm not sure what still needs to be lazily loaded via scripts watching scroll behavior.
Lazy image loading in HTML was controversial too, because it can be used for said shady tracking. But other deferred loading/execution is extremely helpful (for users!) for below the fold interactive content which doesn’t ever need to load if the user doesn’t scroll and doesn’t need to run until it’s nearby, even if the user wants to interact with it. Large JS payloads are a huge part of why sites feel unresponsive when they load. Even if they’re ultimately what the user wanted, it’s valuable to deprioritize the code they don’t need yet.
> Restoring scroll position between interactions: I'm not sure what kind of interactions make this necessary, so an example would help.
The most common is client-side routing (even turbolinks which are popular as an alternative to SPAs), but also any interactive content without stable heights.
> Scroll-snap: The examples on MDN don't even behave properly
I haven’t found that to be the case, what improper behavior did you see? (I’m asking because I’ll file an issue if it’s actually wrong and if you don’t feel inclined to file it yourself)
> Offsetting jump in-page anchor/jump links: Stop obscuring 20+ % of the vertical space with "position:fixed" dickbars. Then you have a much smaller problem which I'm not sure requires JS scrollhacking to solve.
That’s all fine and good, but there are cases where the offset is useful and small and users benefit from both.
> These capabilities go beyond merely "ripe for abuse" and are perhaps better described as UX footguns that are mysteriously attractive to web designers
The fact that the most benign uses of them is so opaque is a testament to how well the newer APIs are designed, they’re so close to invisible that you’d need to be paying close attention to their usage and limitations to even know how they benefit users and how widely they’re used. I didn’t know about most of them and how they’re used either until I was on a MDN hyperfocus just learning what had been introduced while I was fully backend. Since then I’ve seen incredible UX improvements specifically leveraging IntersectionObserver to make sites a lot more usable, often at the library/framework level where most devs have a happy path to just do the right thing. I know that sounds antithetical to the common anti-JS rhetoric, but it’s been so effective it’s almost invisible.
Unfortunately the worst cases are still terrible so I can’t blame you for your reaction at all.
When scrolling through a long document with a touchpad, it's natural to make several swipes in rapid succession, with the second swipe starting before the momentum scrolling or snap animation triggered at the end of the first swipe has finished. On my Mac, in Chrome it appears that starting the second swipe interrupts the snap animation (good) and doesn't start a new one when the second swipe ends (bad), even for a mandatory snap container—leaving the container in what should be an impossible steady-state.
In Safari, things seem to work as expected, except for the more general usability problem that making multiple swipes like this can cause the scrolling to be amplified far beyond what the user would expect for a non-snapping container.
In Firefox, things mostly work, but I'm occasionally seeing instances where the container below the one I'm scrolling also scrolls a bit. Not easily reproduceable, but since I was playing with the horizontal scroll container examples it seems unlikely that I accidentally made the right combination of one and two finger gestures to get the cursor to stray down to the lower container, scroll it a bit, move the cursor back up, and continue scrolling that one. Ordinarily, no amount of frantic two-finger swiping results in that much one-finger cursor movement, and it appeared the spurious scrolling of the second container was more correlated with rubber-band animation when scrolling past the end.
And that's from about two minutes of playing with literally the first example I could find.
I’ve also experienced some weird edge cases behaviors with scroll-snap in desktop browsing environments, though seldom as pronounced as what you describe for Firefox (admittedly I don’t test in FF as much as I ought to, but I also don’t do much work that could even be browser-specific at this point).
It sounds like there are a couple potential bugs maybe worth filing here, given precise repro steps. Would you like the honor or shall I? I won’t be back at my desk til mid day tomorrow probably but I’m happy to see what I can repro and file what I can.
This approach is why Reddit is extremely janky on mobile, while HN is perfectly smooth. Opening a new page on Reddit takes up to 10 seconds; moving back to the previous page up to 5 seconds. Meanwhile, both are almost instant on HN.
Well, just position:fixed; bottom:0; your footer and make sure your scrollY - element.height or whatever has an offset to account for the footer.
Pity the site is down. Can’t read the article. It could be about conniving cheese merchants and their never ending battle for umami supremacy ffs, how should I know.
Just don’t. (2 words)
That said, paying attention to how UX/features interact is something we should always strive to do more of!
We're looking for ways to communicate the concepts better - please feel free to message me at https://radiopaper.com/Evan if you have any ideas!
One of the main reason for inifinite scrolling is to have more and more content shown and try to attract the users and let them stay around (social networks for example).
However, there are cases where it's not implemented correctly and clicking next becomes very awful...
> Just don’t.
[1] https://web.archive.org/web/20220604230938/https://willfenne...
"Do not infinite scrolling".
Seriously, infinite scrolling is disgusting. The only good use I can think of is for realtime feeds.
Infinite scrolling has no repeatable reference points. It has a similar effect to a wall-o-text.
It seems to go in the same category as gestural computing, an way to make computers feel "Skillful" to use, and "Organic", while throwing away efficiency, reliability, and any sense of consistency and precision.
It's annoying both in terms of aesthetics and usability, to pretty much everyone, except maybe people who really hate tech.
The only time I've used anything like infinite scrolling it was for long search results.
For that customer's app / use case it actually worked. But honestly that was about it for times I've used it / felt it worked.
I assume footer here means fixed position footer. The normal footer or “tags near end of document” is fine by me.