17

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?

Improve this question
4
  • You should ask this on SO instead because I know that you can achieve it using CSS and JS.
    – Knu
    Commented Oct 3, 2011 at 10:31
  • 1
    @Knu I know how a single solution could be done with some CSS or Java, but I'm asking what solutions there are, and which are appropriate when, not how to implement a single solution. I'd rather not have a footer at all personally, but that's not a technical problem it's about placing information, thus UX.
    – Zelda
    Commented Oct 3, 2011 at 14:12
  • Facebook now has the footer links at the bottom of the sidebar because, as you say, the infinite scrolling was causing a problem!
    – Matt
    Commented Aug 5, 2012 at 20:23
  • @BenBrocka Javascript*
    – Kroltan
    Commented Oct 20, 2014 at 12:57

4 Answers 4

Reset to default
10

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.

Improve this answer
4
  • @ShroedingersCat I almost mentioned sticking the info in the header in my question, but it's not always wanted. Taking FB for example the legal info isn't fitting in the header; the header is all about YOU, sticking FB legal stuff there would be awkward. In addition sticking legal info behind a menu can be questionable. I personally wouldn't care as much but I know some clients wouldn't stand not having a copyright notice on all pages at all times.
    – Zelda
    Commented Oct 3, 2011 at 13:57
  • @Ben The header is not great, but no footer and the links elsewhere is what I really meant. So I agree that you are improving my suggestions!
    – Schroedingers Cat
    Commented Oct 3, 2011 at 16:42
  • An example of the floating footer can be seen at whistleout.com.au and also bankwest.com.au. If you do have a floating footer you are constrained in not making it into a mega-footer (or Sasquatch as I call them) ... unless you have an expansion capability built into the footer (like the bankwest one does)
    – Erics
    Commented Oct 3, 2011 at 23:38
  • @Erics I'm not usually a fan of floating footers but I rather like whistleout's
    – Zelda
    Commented Oct 5, 2011 at 13:41
10

I think footers are to be avoided at the bottom of infinitely scrolling content, with one caveat which I'll get to at the bottom...

The user is scrolling down for one reason - to look at more content. Footer information just keeps on getting in the way of that primary goal.

Klout tries to keep a footer on all pages - including on those pages with infinite scrolling (such as friends), where you get to the footer, only for it to disappear after a second or two, to be replaced by the next block of content. That is a bad implementation!

Options

I would consider the following options in order

  1. Keep the footer information available on other pages that are not infinitely scrollable, as tumblr does (amongst others) - they avoid the footer on the scrolling dashboard page but include it on the help page accessed from the top navigation.

  2. Give the links at the top like, and you can choose to have the top navigation scroll up like Flickriver, LookBook and CSSline or stay static like LooksLikeGoodDesign, depending on how much you care about the main scrolling content being cluttered by the other page elements.

  3. If there are no other pages than the scrolling one, then provide the footer information at the bottom of less dynamic content column, in the same way that Twitter does.

Flickriver is my favourite, and is nice in that it gives a back to top link statically positioned at top left and an indicator of progress at bottom right (which could be a discrete place to tuck a small amount of footer info). Tumblr also nicely fades in a discrete back-to-top button at top right.

Combining infinite scrolling & infinite clicking (infinite scricking!)

There is another option - that you combine infinite scrolling with infinite clicking in the way that Google images does. For example if you search for iPhone on Google images, you get maybe 5 pages of pictures before you get the Show More Results button. If you click this, you get another 5 pages of scrollable content.

So this is a compromise that doesn't feel like you are clicking to get every page. Each click should return you a substantial amount of content. Interpretation of the term 'substantial' is dependent on context. You have to be careful to balance out the amount of extra content delivered against how often the user needs to click to get more. This is also affected by whether your scrolling content is purely vertical (like twitter) or also horizontal like CSSline and Google

This works on Google, because the user is looking for something in particular and will stop when a sufficiently good result has been found. It wouldn't work on Flickriver, because the whole point is it's meant to feel like a continuous stream without the interruption of having to click. The Google images method does allow for a footer when you reach the button.

When infinity ends

The caveat regarding footers on infinitely scrolling pages, comes when the user appears to be on an infinitely scrolling page, and the page behaves as if it's infinite - until it gets to the end. Maybe the page has hundreds of items - and the user gets immersed in the content, scrolling down and down - and then suddenly nothing. The page stops scrolling because there is no more content. LookBook is an example of this.

At this point the user wonders why there's no more items appearing. Thinking maybe it's broken, the user scrolls up a bit, and down a bit a few times to try and make it work again - almost as if to bash through the bottom of some invisible barrier at the bottom of the page.

In this case, something must indicate that this is intentionally and clearly the end of the content, and the footer coming into view would serve this purpose, although admittedly, as would any number of other end-of-content decorations.

Improve this answer
3
  • 1
    It's interesting that you mentioned this idea of the user trying to "bash through" the bottom. I have observed this behaviour many times and have even found myself doing it on occasion, particularly in the context of mobile.
    – Sheff
    Commented Oct 3, 2011 at 11:07
  • "infinite scricking" is an interesting idea...I personally never even noticed Google Images had this behavior, I assumed it really was infinite scrolling and almost used it as an example of inf scrolling minus the "more" button. I guess the difference is Google Images gives me enough content to not need "More". I suppose Facebook does too, but I was more annoyed with the moving footer than clicking 'more'. I only just noticed G images HAS a footer, but it doesn't have important info unlike Facebook's.
    – Zelda
    Commented Oct 3, 2011 at 14:08
  • @Sheff Youtube has a simple enough solution on their "subscriptions" module and they show a "no more subscriptions" ect when you reach the bottom of the content. I don't normally hit this barrier on other sites so I'm not sure what other solution exist but it's a fairly simple and effective one...if people read the microcopy.
    – Zelda
    Commented Oct 3, 2011 at 14:09
1

This isn't really an answer, so I apologize in advance, but since this is a UX forum, I do feel obligated to say something here. I personally can't stand infinite scrolling, and am saddened by the fact that it's becoming so trendy to use right now. It often drains browser resources - and perhaps more importantly gives users a paginated-type functionality without the ability to link to a specific position.

Maybe it's just my OCD kicking in, but if I am looking at a long list of content items, say 8 screens down in the infinite scroll position, I cannot send that view to another person (or bookmark it, etc). The best I can do is send the original URL and tell someone (or note to myself) that it was 8 infinite scrolls down. Traditional pagination is old and less exciting, but at least I have some context of where I am in a list of results, and can easily get back there again.

Improve this answer
2
  • The ability to link to a specific position can be solved by permalinks, as you have for each answer on all the SE sites (the "link" under each answer).
    – awe
    Commented Oct 5, 2011 at 12:28
  • 1
    The specific position is less of a problem in the current web; it used to be to share something I needed a specific link, and often the only way to find an article/ect was to link to the specific page it appeared on in a greater list. Now it's often possible and encouraged to share the single item of interest rather than a list of things. Our model has moved from "here, look at this digital piece of paper!" to "Here, look at this article!" which personally I prefer.
    – Zelda
    Commented Oct 5, 2011 at 13:43
1

There is another alternative I have seen and I think that's the perfect solution without losing anything.

just add a button to show footer.

Like this enter image description here

once clik on about button which is place extream bottom right show the footer enter image description here

Get here the working example polyvore.com/dresses/shop?category_id=3

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.