I am sure you have seen old Pre-Material Design YouTube homepage layout where they had the menubar and essential details in the footer. And you have to rely on low speed internet connection, to access the footer.
YouTube's recent design has changed this. However there are lot of websites out there who make use of the bad UI design with infinite scrolling to create distracting experience.
Here's why I hate infinite scroll.
- I can't find your menubar if it's under scroll.
- I can't find your contact details under page that has endless images like pinterest.
- I can't find way to navigate between the different pages apart from infinite scroll.
- I can't find map or business details under scroll.
- I don't know when the infinite scroll will end.
Here are few things I think people who implement infinite scrolling should keep in mind.
- Don't keep menubars in the bottom footer.
- Avoid keeping essential website details under infinite scrolling.
- Offer manual triggers for infinite scrolling with buttons.
- Don't put map or media element under infinite scrolling.
Think like an ordinary web user who spends less time on the internet. And then design your website interface.
As a front end developer, I find it really annoying that people who design websites don't keep user experience in mind.
What's your experience with Infinite scrolling and other fancy web design trends?
Top comments (33)
It's one thing I appreciate about Twitter. The menu links are at the bottom of a sidebar. Then you can scroll through the main feed forever without worry.
I like the seamless experience of infinite scroll. If I read one item, I'm more likely to read another if I don't have to work for it. But I don't like truly infinite scroll. If I am invested enough to scroll down for dozens of pages, I probably want a page link (or better yet a cursor) so I can pick up wherever I leave off. I think it should be limited.
Going back to Twitter, here's one thing I don't like. Sometimes I will look at a user's profile. I'll scroll down for a while and read a lot of their tweets and say "I like this person, I should follow them". But the follow button is all the way back at the top of the page. D'oh!
I think it definitely works on sites like Twitter, but they've confused things by adding features which mix up the order of posts, promoting things and putting "in case you missed it" posts up at the top. Combine this with the fact that retweets are shown in the order they were retweeted but your "likes" page is shown in the order the posts were made, means that even though I've been using it for years, I've basically given up on assuming any kind of order.
At least Twitter mostly still goes by post date.
Facebook made that a separate feed that you need to practically dig for to find now; it's not actually an option for the news feed itself anymore.
Everything there is filtered through their algorithm that decides what you're mostly likely to enjoy, and posts will show up in the feed again at a later time if there's activity on them from friends.
All that plus reloading the entire feed when exiting the Post comments (on the mobile app specifically), making it hard to find the same post again if you're trying to share it.
I really hope Twitter doesn't go any farther than it has away from a linear feed. There is at least some sense left in how they built it.
Another example problem is when newspapers insist on limiting the number of free articles you can read per month and then also include articles that were fetched by infinite scrolling in that count. Bloomberg does this before you can even see the headline of the second article.
This is my big one.
I was adding books to my massive
BooksAmazon wishlist today and wondered how large the list is. Navigated to the list. There's no totals or pages... only an infinite scroll. Like, the dev.to bookmarks kinda did a lazy load thing after a while, but at least I had a number to tell me I had over a 120 things left to read (I'm now down to 0 though!).If you're doing this, I'd just say go full pagination with buttons for navigating instead of infinite scrolling. All or nothing for giving me control of my browsing.
Did you just remove all your bookmarks? :P
It was tempting, especially since every time I read something off the list I seemed to gain 3 more to read later.
But! I actually read them all. And anything I wanted to save as a resource later, I open sourced as a list with notes and categories :D
Eventually, I want to take my snippets of saved notes and links and make a webpage of them all with markdownjs or something like that.
Congratulations! I also have trouble keeping up with my reading list. I took a look at your list of resources, very interesting, thanks for sharing!
Be careful or you'll add more things to your list of things to read! :)
i'm still baffled that some Designers don't realize that you can't put stuff in the footer when you have infinite scrolling, yet they do. and a lot of times they put important things there that you can't reach any other way.
fortunately i know how to use the developer tools in my browser. but what are do "normal" people supposed to do?
Why not have a sticky footer where the infinite scroll passes under?
Tons of brooken sites with that design already. It just doesn't work.
I really don't like websites that hijack the scrollbar in general. Websites that are trying to show off their
three.jsskills are a big culprit of doing this.Err...I haven't, and probably some others reading too.
When writing, I try not to make too many assumptions, especially about what a reader may or may not have done. It tends to throw the reader off and makes them feel like they've been slacking off. It would help if you included a screenshot, or if you couldn't/wouldn't find one, rephrase the sentence as "Before switching to Material Design, YouTube's old home page had the menu bar...".
That said, good article. I agree with you. Most times, I dislike infinite scrolling because of the poor implementation.
Fixed side menu would solve all these issues.
It would solve some of them, but then that's difficult to achieve on small devices without having to have a floating button or a slide-out panel.
So why not have "a floating button or a slide-out panel"?
Infinite scrolling works really well for Reddit and Google Search results. Not much more.
Not true. Often overlooked are static data tables. With robust searching, sorting and filtering, infinite scroll can be implemented properly. Pagination is an imposed filter, and page numbers are completely arbitrary. And let's stop calling everything that scrolls, infinite scrolling. Only dynamic user-created content is infinite.
DuckDuckGo utilizes it as well...so do a lot of other search engines.
I generally dislike infinite scrolling for the reasons you state and for things like breaking the scrollbar (the browser or app's scrollbar still works to navigate backwards but does not give a useful indication of where you are in the content and will keep resizing itself as you move down)
You can make it better with things like section headings as you scroll down; if it's posts ordered by date then having a divider showing the date as it changes will keep people from feeling quite so overwhelmed. Making this divider into a clear anchor so people can bookmark it will help.
You also need to be aware of what happens when people follow a link and then use their browser's "back" button to return to your infinite scroll. If you don't land them at the same place (and I mean the same place, not just somewhere close) then they're going to hate you.
Something that indicates a percentage of progress would help, too, to take the place of the familiar scrollbar.
Thing I hate most in infinite scrolling is that there are usually no means to save a position in an infinitely scrolling list to come back to it later. On an archive page of a typical 2000s web forum if I for whatever reason need to examine every thread, I can usually sort threads from oldest to newest and then and at any point I can bookmark my current position.
It's neat, and I used it many times, infinite scrolling won't let me do anything like that.