Not Invented Here Vol. 2: Fat Footers

Welcome to Vol.2 of Not Invented Here, a new semi-regular series on trends and innovations in interaction design (IxD).

For much of the life of the web, the footer has largely been an afterthought, usually containing only a small number of simple elements: a copyright statement, security and privacy statements, and maybe some utility links. That’s about it.

Traditional style footer on www.ford.com (as of Feb. 04, 2010)

Designers have generally given little attention to this seemingly insignificant element. And why would they? The prevailing assumption was that users don’t scroll, so let’s keep everything important at the top of the page. The footer could be an afterthought because no one would look at it anyway.

But based on some compelling research, users’ true habits have proven to the contrary – people are in fact scrolling and the myth of the fold is finally coming undone. Armed with this knowledge, the footer has been undergoing an evolution and designers are giving the lowest page element some love.

Over the last couple of years we’ve seen the rise of the Fat Footer, or as I prefer to call them, “Super Footers,” a name that’s not just less insulting, but downright impressive.

Fat footers, as their name implies, are just larger footers that make room for an increased and varied array of elements. These have come to include, among others: redundant navigation, site maps, searches, featured content, social sharing elements, and contact info and forms.

Examples of Fat Footers

Fat footer on www.comedycentral.com (as of Feb. 04, 2010)

Fat footer on www.ea.com (as of Feb. 04, 2010)

Benefits of Fat Footers

So what is the big deal?

We reached out to user experience specialist Kara McCain of Nielsen Norman Group to get her take, and this is what she had to say:

“It’s basically about predicting a user’s next need(s), keeping them moving throughout the site by helping them find the most relevant information and completing their tasks when they get down to that part of the page (rather than just slapping your copyright information and privacy policy down there and calling it a day). ”

— Kara McCain, User Experience Specialist at Nielsen Norman Group

Fat footers provide added utility and usability in a somewhat surprising place by keeping users moving through a site with two main benefits: second chances and additional considerations.

Second Chances: By providing redundant navigational links or a shallow site map, fat footers can give users a second chance to find the content they’re looking for.

A couple levels of navigation can be listed out in a fat footer without the same restrictions of vertical space that designers must adhere to in the header. This allows users a quick scan of the site without having to scroll back to the top to poke around the global navigation in a trial and error manner.

But, however useful they may be, fat footers should not be relied upon to make up for shortcomings in site architecture or navigation design.

Site navigation in the Fat footer on www.whitehouse.gov (as of Feb. 04, 2010)

Additional Considerations: The fat footer can be a great place to globally highlight featured content and additional resources (social networking, subscriptions, affiliate sites, etc…).

This can take the pressure off of more valuable page real-estate in the header or page body by either providing an alternate or redundant location for the this kind of content. For blogs, news, and e-commerce site, this can be particularly useful where users are scrolling down the page while scanning listings, reading an article, or exploring product details.

Featured content in the fat footer on www.h-d.com/darkcustom (as of Feb. 04, 2010)

Fat But Not Bloated

The footer may be getting fatter, but just like with mega-dropdowns, caution should be given so that it doesn’t also get bloated with too many unnecessary elements and links.  Basic design rules of clarity and scanability still apply. Keep enough breathing room between content and provide clear headers. If users have to work too hard to figure out what’s going on in the footer, it will likely be ignored just like most standard footers.

The example below from the (otherwise fantastic) Food Network site may be getting to the point of being too cluttered. The number of links are distracting, the headers are easily lost, and the carousel of affiliate sites is poorly integrated into the design.

Fat footer on www.foodnetwork.com (as of Feb. 04, 2010)

By cutting back on some of the links and cleaning up the design with a clear visual hierarchy, it’s possible these same elements could be reworked into a more coherent and useful presentation.

Creamycss.com on the other hand, has quite a lot going on in their fat footer: recent posts, an about paragraph, a list of links, and a carousel of recommended reading, but unlike the Food Network example, these elements have clear headers, good spacing, and use a harmonious color palette.

Fat footer on http://www.creamycss.com (as of Feb. 04, 2010)

Some Parting Thoughts on Fat Footers

A well-designed fat footer is great way to provide added utility to a site without cluttering the header or body.  Just be careful not to overdo it.

Beyond added utility; a fat footer can be a space for creative outlet as well. I’ll end this article with a few of the more creative ones out there.

Fat footer on www.vimeo.com (as of Feb. 04, 2010)

Fat footer on http://www.northern-classics.de (as of Feb. 04, 2010)

Fat footer on http://www.bristolarchiverecords.com (as of Feb. 04, 2010)

Fat footer on http://www.neatorama.com (as of Feb. 04, 2010)

This entry was posted on at 8:12 am and is filed under Design, Interaction Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Responses are currently closed, but you can trackback from your own site. You can skip to the end and leave a response. Pinging is currently not allowed. Both comments and pings are currently closed. -->

via whiblog.com

Posted via web from The Social Media Marketing Report