Monday, October 1, 2018

website design - How can the classic footer elements be integrated into an infinite scrolling layout?


Infinite Scrolling is a fairly new and effective way to display practically infinite amounts of data in a user's window, but one page element simply does not suit itself to this method; the footer. A footer on an Infinitely Scrolling page doesn't make much sense, as the document foot is infinitely far away.


The classic solution and one recommended by UX Movement in the above link is to use a "more" button, the example they give appears to be an old Twitter layout.


enter image description here


The problem with this solution is that it's not Infinite Scrolling, it's Infinite Clicking, in effect only better than Pagination if you intend to navigate backwards in time after loading new content. Other than that it's basically the same functionality as pagination except with no URLs to specific pages.


Twitter seems to have ditched Infinite Clicking for true Infinite Scrolling and moved their footer elements into the bottom of their sidebar: enter image description here



It's a solution I find quite elegant, but it has the problem of being less intuitive. I know Copyright, Legal and About Us information is almost always at the footer, but looking for this picture I had to search around a bit to find where they put that info.


Facebook is in a particularly awkward place in the Infinite Scrolling world, as they have both a footer and auto-loading Infinite Scrolling. enter image description here


Again it's not "true" Infinite Scrolling as dropping to the bottom of the screen will only auto load content three times (I believe), so after 3 loads you have to start manually clicking the "older posts" which complicates what's supposed to be an automatic way to load content. More annoyingly, they have a footer. One that's moved away from you every time the page reloads, so to get this screenshot I have to Page Down three times to see the footer.


I'm wondering what the optimal solution is for Infinite Scrolling and maintaining these "footer" elements in a layout that is largely incompatible with a literal document footer. Facebook seems to be trying to have their footer and eat it too, Twitter's solution is elegant but perhaps non-intuitive, and the "Load More" button solution disrupts the seemless flow that is the whole point of Infinite Scrolling.


Are there other solutions? Is Twitter's sidebar "footer" easier to find than I'm thinking?



Answer



As you say, this is a new development, so I think there will be a while before people really get into the right way of doing it. There are two answers that I can see:




  1. Have a permanant fixed footer at the bottom of the currently displayed screen, which scrolls as you do. However, I think that there needs to be improvements in the technology to make this happen, becasue most floating toolbars look hideous.





  2. Don't have a footer, put all of the required information in the header. Maybe as header drop down menu. It is a problem, and I agree completely that trying to botch it together is poor - you either do things properly or not at all. I would tend to go with the no footers approach, on pages that have infinite scrolling, but have other pages that are more informational based where the footers can be included.




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...