Don't forget the footer!

This is the first in a series of short articles discussing a collection of UI components that may be perceived as trivial, but they happen to be very significant.

In my experience and when working with other designers, the footer always seems to be one of the last components to be designed.  So much UX and UI time is spent on the header, search and navigation along with other high priority content, that the footer can get overlooked.

It’s important to get the footer correct.

This comment from NN Group, nicely summarises my thinking.

'Footers can be found at the bottom of almost every web page, and often take many forms, depending on the type of content on a website. Regardless of the form they take, their presence is critical (and highly underrated)'

https://www.nngroup.com/

The footer illustrates the end of the page, like in a book, and is usually consistent across the whole site.  While not as important as the header, it is a place where a collection of significant content lives and can act as a starting point for journeys, or tasks to be completed. When planning the information architecture (IA) of the site, it is always a good idea to consider what items should exist in the footer and how they can aid the overall user experience.  Depending on how large the site is and how much information goes into the footer, it may need an IA design for itself.  This should be considered when performing user testing across the site. For example, you may want to assess how users respond to the footer and how it performs in your analytics.

How users use footers

Users scan pages for the information they’re looking for. If they can’t find it in the header or on the rest of the page, they will tend to scroll to the bottom to see if it’s in the footer.  This can be the last option to find some key information before leaving the site and going elsewhere. The footer can really help users find what they need and improve the overall experience.

Also, depending on what content is in the footer, it can provide them with the gentle nudge that they need to take action:  for example signing up to a newsletter.

Careful consideration needs to be taken when designing the footer.  It will never get in the way of the rest of the page for those users that have found what they are looking for, but it can act as an excellent way to assist others. Designing the footer to cater for those needs is therefore extremely important.

Here are my four tips for creating a great footer:

1. Keep the layout simple
It needs to be easy to scan, so don’t overcomplicate the content in the footer.

2. Keep the design simple
The footer needs to be easy to interact with and still delight users. The design should be sensitive to the rest of the page and the visual language.  To compliment the simple layout, a minimal use of colour should be applied.

3. Consider small screens
When creating designs, work from small screens upwards.  The footer needs to be optiimised for both small and large screens.  Avoid very long footers for smaller screens, and consider how best to lay out the content.

4. Create hierarchy
A footer may need to have a hierarchy of content, this is dependent on the amount of information displayed.  For example, some footers contain very little information, and some contain much more.  In order for them to be easily digestible for users, content should be designed in order of importance.  This will allow users to easily scan the footer and help find what they are looking for.  It helps reduce clutter and provides a clear view to the elements.

What should you include in the footer?

Footers tend to contain similar content across different sites. It’s a familiar pattern and users have quite well-understood expectations as to what they can find there.  Users instantly gravitate down to this area with the hope of finding certain content.

• Logo
  This reinforces the brand and can add further visual importance to the footer
• Contact information
  If a way to contact you isn’t easy to find in the header, users will automatically scroll down expecting to find it in the footer.  Often they will instinctively go straight to the footer, presuming what they’re looking for will be there.
• Utility links - Legal information, copyright, privacy, accessibility etc
  These aren’t usually part of the overall user experience, but they are important company information that users expect to see and it fulfils the legal responsibility of the business
• Social links
  It’s important to highlight the social presence of the business. Displaying them in the footer is a conventional and familiar place to house the links. They are not obtrusive or getting in the way of any other content. They stay consistent in the same place. 
• Email sign up
  A potentially good way of increasing subscribers.  As users scroll down to the bottom of the page, if they find the content beneficial and interesting, the sign up is immediately displayed.
• Links to support additional journeys
  Footers can support secondary journeys and include links that are not in the main global navigation and not seen as a priority for the main user groups.  However, these are still important for certain journeys and will be visible on all page.

Conclusion

Always consider what users may wish to see in the footer that will help them get the best experience of the site and help the business achieve certain criteria. Remember users will often go to the footer in hoping to find information that they can’t find in the header. We want to ensure they stay on the site and don’t go elsewhere.  The whole site experience is important to a user, each component has a purpose and acts as a step towards a goal and the footer is no different. 

Sources:

Nielsen Norman Group - Footers 101: Design Patterns and When to Use Each

bootcamp.uxdesign.cc - Website Footer: Best practices and what to avoid

Optimal Workshop - Anatomy of a website: website footers