1

What are the principles, use cases, and/or motivational factors behind placing content that pertains to the main body of the site, to instead exist below the footer?

I want to better understand the reasoning behind this design choice.

TL;DR

A few moments ago I visited the Apple site to view their catalog. After configuring a Macbook Pro (MBP), and scrolling to the bottom of the page, I was confused as to why I didn't see a price for the machine I had configured in the main area, so I scrolled up, thinking I missed it, scrolled back down, didn't see it.

What I realized is that I had falling into a trap. For years, I have been trained to assume that all main content is in the body of the page, below the header, above the footer. So my mind was actively ignoring everything below the start of the gray footer, even though I was actively looking for the information that was being presented to me below the footer of the page.

Based on my experience with developing web applications, understanding user's expectations, and basic UX principles, my question is, What are the principles, use cases, and/or motivational factors behind placing content that pertains to the main body of the site, to instead exist below the footer? I want to better understand the reasoning behind this design choice.

It is important to note that the footer you see containing the price information for my computer configuration is part of a fixed footer that did appear at the bottom of the page, above the footer, until I had scrolled all the way down to the bottom of the page, where it instead then was below the footer, so I had ignored it.

Screenshots: (notice how the pricing information bar is positioned at various scroll positions of the page)

Firefox

Scrolled to top:

enter image description here

Scrolled to middle:

enter image description here

Scrolled to bottom:

enter image description here

Chrome

Scrolled to top:

enter image description here

Scrolled to middle:

enter image description here

Scrolled to bottom:

enter image description here

Improve this question
3
  • Maybe it's kind of like eating dinner at a restaurant and receiving the check at the end of your meal. I guess this situation is different and the correct analogy is to make you salivate enough ahead of time in order to pay a huge sum without thinking too much.
    – MonkeyZeus
    Jun 18, 2015 at 15:35
  • @MonkeyZeus, That analogy made me laugh a bit. Didn't think of it that way.
    – Anil
    Jun 18, 2015 at 16:00
  • Haha I'm glad you enjoyed the humor :)
    – MonkeyZeus
    Jun 18, 2015 at 17:10

4 Answers 4

Reset to default
5

This was most likely a JavaScript bug (Try disabling plugins or using another browser)

Going through the same configuration screen, the price banner is fixed to the bottom of the browser window.

Unless of course you are using a monitor in portrait mode or have a screen large enough to display the whole page.

enter image description here

Improve this answer
4
  • Thanks for the reply. Unfortunately it is not a bug. The footer for the pricing information is supposed to remain fixed to the bottom of the browser; however, when you scroll to the bottom of the page, the pricing information bar is then placed below the gray footer. This is the design choice that puzzles me. I tested this in Firefox and in Chrome, both exhibited the same behavior. I took screenshots showing the bar at varying scrolling positions and have updated my post to show where the bar is at varying scroll positions of the page.
    – Anil
    Jun 18, 2015 at 5:36
  • 1
    In that case I totally agree with your assertion. Perhaps this fixed box could exhibit sticky behavior so that when you come to the bottom of the configuration options the price/buy module would stick in place as the user scrolls further down the page.
    – simsom
    Jun 18, 2015 at 14:18
  • 1
    The sticky behavior you mention is what I would have expected to occur. As the user scrolls down the page, once they get to a certain point, it remains stuck, above the footer.
    – Anil
    Jun 18, 2015 at 15:23
  • See this answer, it provides the remedy that exhibits the behavior I would have expected of the sticky footer on the Apple site.
    – Anil
    Jun 18, 2015 at 15:57
3

The price bar is not placed below the footer - it's pinned to the bottom of the browser window. On the page that I checked - the 12" Macbook - it took me 14 turns of my scroll wheel to get to the footer of the page, and the price bar was visible the whole time. This means that I could have begun my purchase at any point, wherever I was on the page.

Improve this answer
2
  • I understand the need to have it available at any point, but Apple has many users with 27" iMacs, 27" External Displays, etc. So to say it takes 14 turns of the scroll wheel on your 12" Macbook sounds like you are implying other users won't scroll that far down the page, which is an invalid assumption. The amount of scrolling isn't the issue, it's that the sticky footer is being displayed below the global footer, where a user would not look for primary content. A simple remedy is showcased in this answer on Stack Overflow.
    – Anil
    Jun 18, 2015 at 15:56
  • I would need to see Apple's stats to know for certain, but yes, I do assume that most users who are actively shopping for a Apple product do not scroll all the way down to the footer. This is not an informational page - this is a sales page.
    – mhick
    Jun 18, 2015 at 16:12
3

In this case, the primary content is not being placed below the footer, the primary content (pricing information) is being placed above the rest of the page content using the position:fixed property.

Per MDN:

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.

The idea seems to be that this very important information (the ability to purchase a computer) should be visible at all times, no matter where the user scrolls.

Is it a good practice to place primary content below the footer? No. Is that what is happening here? No, but when scrolling all the way to the bottom, the footer becomes visible, while the fixed element continues to keep its place snug against the bottom of the viewport.

Improve this answer
3
  • Regardless of how the sticky footer is implemented, its information is intended to be paired with the main content of the page. By allowing the sticky footer, to visually appear below the global footer of the page, my opinion is that it negatively affects the association of the main body of the page, with the information contained in the sticky footer. There are ways to avoid this from happening.
    – Anil
    Jun 18, 2015 at 15:45
  • A question on Stack Overflow describes a solution to this problem, which can be viewed here
    – Anil
    Jun 18, 2015 at 15:46
  • @AnilNatha that's a great solution to the issue.
    – Charlemange
    Jun 18, 2015 at 18:48
0

If you look around all these sales blogs, you'll realize that the general rule is that, you won't make a sale until an average of 8 attempt/follow up... or the rule of advertising where they say you have to see an advertisement 6 times before it sticks (actual number may be different. I forgot the exact number off the top of my head).

They obviously can't do that on the website since they can't approach you to sell you directly -- nor can they force you to revisit this page another 6 times. So it seems like they make the price more hidden so you have to scroll back and forth multiple times. Kind of clever.

Improve this answer

Your Answer

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

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