SIMPLE EFFECTIVE SOLUTIONS

Strengthening The Information Scent Part 3

~ The Mega Footer ~

"What's This All About?"

In this part we take a look at the footer. More specifically, the 'mega footer'.

Until recently, web page footers had a great deal of inattention lavished upon them. They were more of an afterthought than an important element of the page structure and design. This may have been due to a comparison to print publications where footers are seldom more than a page number, or, by the erroneous assumptions related to content 'below the fold'.

However, a good footer adds symmetry to the page architecture and a sense of closure or completeness for the user.

Of equal importance, it affords the designer a further opportunity to lay down information scents.

The meg footer ignores the 'old wives tales' and transforms the footer into a contributing element of page design.

Here are a couple of examples of this style of footer:

larger image || spoongraphics

//EMPTY DIV!!

larger image || csharpdesign

//EMPTY DIV!!

larger image || bcandullo

//EMPTY DIV!!

As you can see, the designer can put just about anything in the mega footer. The real issue is what should be in the footer? What footer content benefits the user, and, how is it done?
"What Are You Doing?"

In this part of the article we look at simple ways to strengthen the information scent on the footer through the 'mega footer'.

To assess various mega footer styles that are online now, we use the following guidelines:
1. clear distinction between the footer and the balance of the page
2. usability
3. readability and scannability
4. benefit to the user
To clearly illustrate the differences initiated by the mega footer, here are 'before' and 'after' screenshots of the GKD footer. The 'before' is the footer common to many web sites. When attention was paid to enhancing the information scent, we have the 'after'.

larger image || Graphic Knights

//EMPTY DIV!!

larger image || Graphic Knights

//EMPTY DIV!!

This article does not assess the technological merits (or lack thereof) of various css or javascript techniques used, if any. Rather it assesses the benefit to the user of improving the information scent on the footer.
Mega Footer Styling Samples
Distinguishing Between Content and Footer

Hewlett Packard distinguished the footer from the content by the dramatic colour contrast of white background for content and black background for the footer.

larger image || HP

//EMPTY DIV!!

Apple takes a different approach. The content is full of colour, vibrant images and pizzazz. The footer is just of opposite. It is subdued, 'business style' and outlined by a faint (but clear) boarder.

larger image || Mac

//EMPTY DIV!!

Usability
Each of the mega footers above score well in terms of usability:
- The links are arranged in columns separated by white space which allows for easy and reliable access to the links. The typography applied leaves a suitable amount of room for easy movement of the mouse for accessibility.
- The links in each of the example are consistent visually and operationally.
- Each link provides the user with visual feedback when the mouse is placed over it.
- Each of the examples limit themselves to the use of text links. There is no visual noise.
- The text used on the links is unambiguous.
It is worth noting that none of the examples use the standard underlined blue text as a signifier to the presence of a link. However, the effect of 'perceived affordances' leaves no doubt that the columns of text represent columns of links.

One further example is from www.yodiv.com. They added a description below each link.

larger image || yodiv.com

//EMPTY DIV!!
Scannability and Readability

These aspects of design have seen a lot of commentary in the design community. And for good reason. The reasons for taking care with scannability and readability in the content area apply equally to the footer

All of the examples provide good scannability. The footer content is organized into columns. The content in each column has headers and in some case sub headers. Good typography ensures readability.

The most sophisticated typographic example so far is Apple. You can see the large version (repeated) here.

//EMPTY DIV!!

Yet desite all the effort to overcome the questionable use of small font sizes, some designers fall back into old bad habits on the footer.

larger image || ustrendy.com

//EMPTY DIV!!

The illegibility of the links on the footer is not due to the graphic. The designer used the lawyers 'fine print' in the footer.

And this one, while graphically very pleasing, forgot about the contrast requirement of readability.

larger image || davidhellmann.com

//EMPTY DIV!!

Benefit to the User

Keep in mind that most users are 'satisficing' when scanning your page. If the information they want is not on the page, they look for the an information scent which is 'good-enough'. The mega footer gives the user additional information scents. That is the benefit that should be the focus when creating your footer.

Unfortunately, some designers ignor the user benefit criterion.

We have this one from www.komodomedia.com that fall into the 'what were they thinking category':

larger image || komodomedia

//EMPTY DIV!!

On the left side we have 'mystery navigation'. When you mouse over a disc, it gives you the name of a tune. It turns out that the disc/links are links to downloadable tunes on www.last.fm. The right side is dedicated to recent tweets.
For the user, what possible benefit is there to any of this?
The people at komodomedia are intelligent, talented designers. So what happened here. Instead of helping the user, they turned the footer into a designers playground.

And then there is this one from psd.tutsplus.com.

larger image || psd.tutsplus.com

//EMPTY DIV!!

The 'Copyright & Usage' notice on the left side is a good location..

However, unless you are new to the web and this is your first site, the text under 'Write a Tutorial' and 'Suggestions?' is completely redundant. The title and a link is all that was needed.

Completely missing are any links to content on the psd.tutsplus site.
What's The Point:

As a web developer, you are the advocate of your visitors’ interests and needs. The user is scanning the page for information or links to the desired information. The meg footer gives you one last chance per page to deliver links coated with information scent.

Moreover, the links in the mega footer are not constrained space wise as are the links on the navigation menu. You can readily add text describing what the visitor will find at the other end of the link.
What Now?

As you can see, the footer has evolved from an afterthought into a viable contributor to the user experience. It has become, in effect, a mini content area separate from the main content. As such, it should be designed using all the same principles that apply to the content section of the page.