12

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: enter image description here 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?

  • 2
    I see your proximity principle, and add a contrast principle. – Paul D. Waite Sep 25 at 15:12
17

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).

24

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.

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.

  • But wouldn't adding color considered to be visual noise, since the separation already would be clear with whitespace? – Carla Graça Sep 24 at 13:29
  • But when you use it good (when you place just easy grey background, and not to hard), then its not visual noise. Because 2 visual distinctions in this case are stronger than just one (distance of the elements). Closest rule I can refference, although that one is more connected with placing borders, is "Law of common regions". IMO, its just a matter of smartly styling sections with size, colours, distance, typo and everything other.. Background colour separate is not important, and its more likely that this is one of those habitual things in web design, that was created from begining and stayed – xul Sep 24 at 13:37
  • But for example, they could have also added a background to "About" "follow us" and "Popular topics" to add another visual distinction(besides the distance of the elements) and to reinforce that each was a group but they didn't. Do you have ani idea why wasn't this needed here? – Carla Graça Sep 24 at 14:17
  • Footer is structural element, (besides header, content, sidebar), and these groups you mention are smaller units, therefore distance between them should be not so big. – xul Sep 24 at 14:20
  • @CarlaGraça We make checkmarks green and X marks red, even though the meaning is already conveyed by the shape of the symbol. Is that visual noise? I think it makes the meaning clear even more quickly. – amalloy Sep 24 at 18:50
1

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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