Why most footers have a background color as a divider of section?

Question

Why most footers have a background color as a division from the other content of the page? Wouldn't it be enough if they just used enough whitespace to separate? For example nielsen norman group: It has a grey background to separate the footer from the above content. But wouldn't the whitespace difference(using proximity principle) from the elements on the footer from the content above be enough to separate these two sections without using a different background color?

Answer 1

If you add too much whitespace, apart from wasting screen space (which I won't go into further as I don't want to rant), plenty of users will stop scrolling too soon to see it if they're not actually looking for it.

So it's better to keep it reasonably close and set it off in another way - colour, old-fashioned horizontal rules, or a row of obvious headings like you'll see at the bottom of this page (on desktop): the colour, font and actual text all indicate a break from what's above (though the 4th column without a header doesn't sit quite right IMO).

Answer 2

When you walk into a physical store usually have a rug or a door or something to make you slowdown and pay attention to all after that point. On websites is quite similar. You should have different section to not be boring, to make the user curious, to call attention of the user. The footer is not different.

It's important to show the user that this is the end. To do that, you must break the pattern. You can find a creative and alternative design way to do it differently.

Normally, the footer has the required information and this is boring. So, designers probably don't like to waste time with it or don't has many ways to do it differently.

I recommend you to read Paco Underhill that write about customer behavior. It's a very good read.

And you should have a look on this interesting discussion about why the footer is dark.

Answer 3

There is nothing wrong and there are sites that use just white space to separate footer content.
However, it is more precise in design to communicate it also with colour.
As footer is then separated from content more clear, you increase readability. And also separation on sections of header, content, and footer is one of the earliest and one of the basic semantic things on the Web, that have mirrored itself also in html5 where it deserved and got its own html tags.

Answer 4

A clear and distinct footer region offers a design commonality that is useful in our current era where continuous scrolling content is common: It clearly and directly helps communicate to the user "Hey, this page is done, you can stop trying to scroll now..."

As designers we can break common trends like this easily enough, but we have to have some really good reasons to go against such a simple and helpful trend if we want to avoid increasing the risk that a user may perceive their interaction as having encountered a bug. [And if a user thinks they've hit a bug, odds are good you have a bug...]

---

Just dividing with white space alone carries slightly less information to the user.

• Is it blank because it is just formatted that way?
• Or is it blank because something didn't load?

The clear visual structure and embracing common design language that users are familiar with tells them a lot more about the design, even if they don't actively realize what they're being told, without requiring the user to explore as much before they can gain understanding.

---

Change can be good in design, but only reach for it when you find a good reason.

Answer 5

Hi :) I think it's not just the color that gives the sensation of ending the page, it's also the movement. When you are scrolling down, the up-down movement will stop before the footer steps in the middle of the screen (unless you are in a very particulate windowed screen).

So, to users understand that they have reached the footer, we have:

·Stopping the scroll in the limit of the page."physical sign" ·Information explained in a listed way. "Visual sign" ·Usually a sitemap, and contact options. "Content sign"

With that I bet you can make the user feel that he reached the bottom. But visually you can reinforce that by changing the color.

The color should be one different that the core of the content. Does that mean that the user won't understand that he reached the bottom? No. But it helps. So would it be enough to add white space? Yes. But may be not the best solution, because you are not using all the tools good usability gives you.