Footers can be found at the bottom of almost every web page. Their presence is critical and highly underrated.

Footer Basics

We tend to dedicate our time and energy to everything above the fold. That’s because global navigation, search, and high-priority content are positioned above the fold and users tend to spend a disproportionate amount of their time at the top of any given page. However, you should still pay attention to footers because they can greatly enhance a user’s experience.

Website footers of the past were either small utility areas with little information or big dumping grounds for miscellaneous links. Today, footers have matured and now serve as an important reference point for people as they complete a variety of tasks on websites.

People Use Footers

While footers get less attention than the top of the page, they still receive a fair amount of use. These are the two most common use cases for footers:

• Users scan or read the page and either don’t find what they want or need more information. They scroll to the bottom of a page and use the footer as:
  • A second chance to be convinced
  • The last resort for hard-to-find content
    Sometimes users turn to the footer for additional options that might not be present in the global navigation. For example, those interested in applying for a job with an ecommerce company — a task that is different from those of the typical ecommerce customer—might look to the footer for relevant information.
• Users intentionally scroll to the footer to find information they expect to appear there, such as contact information, details about the company, social media posts or links, or even to discover new or related content on the site. Some users even use the footer for navigation: when they have already scrolled to the end of a page, because the footer is in close proximity, they use that instead of scrolling to the top for the global navigation.

In both of these cases, no matter what content ends up in the footer, that footer should be consistent, predictable, and easily discoverable.

Footers have a particularly wonderful usability characteristic: they will never get in the way of users who get their needs satisfied higher up on the page. Thus, except for overly bloated footers that could delay page download or rendering, a footer is a cost-free addition to the user experience. It can help, but it can’t hurt.

Footer Elements

Footer elements can be combined depending on the business and user goals. Here are some of the most common footer components, examples, and recommended situations in which to use them:

• Utility links
• Doormat navigation
• Secondary-task links
• Site map
• Testimonials or awards
• Brands within the organization
• Customer engagement (email newsletters and social media)

 Uscreen.tv incorporates multiple types of footer content such as (1) secondary-task content (2) utility content, and (3) social-media links.

Utility Links

Most sites, at a minimum, tend to include utility navigation in the footer, pointing to:

• contact information: the company’s address, phone number, and link to live chat
• customer-service information
• privacy policy
• terms of use

While many sites have utility navigation located in the top-most areas of their site, the footer is where users look when they search for these specific items. Users will often go directly to the footer to find contact information or locate ways to get customer support. Whether you have links to these utility items at the top of your page or not, always include them in the footer as well. (A utility area at the top of the page should still be used for tools-like utilities, such as search, login/account information, and language-selection.)

 Clarity Money’s footer keeps things simple by including links to the Terms of Use and Privacy Policy, plus links to social-media accounts (see below for more information).

Doormat Navigation

Like the physical mat at people’s homes, a doormat navigation is the first thing you see when you arrive and the last thing you see when you leave — that is, it is included both at the top and the bottom of the page. Thus, a footer can include the global navigation. This component is beneficial when the pages are long (as it is the case with many modern mobile designs), since it allows users to quickly move to a different section of the site without scrolling back to reach the main navigation.

Use for: sites with long pages, especially if the global navigation is unavailable while at the bottom of the page

 United Healthcare uses doormat navigation: with the main categories being displayed both in the top navigation bar (top) and in the footer (bottom).

Secondary Tasks

A footer may contain links to secondary tasks of interest to the user. Some examples of secondary tasks include:

• applying for a job with the company
• tasks for content creators
• accessing investor information
• finding documentation or specifications of a product or service
• accessing media kits and other PR information
• finding affiliates of the company

These secondary tasks are usually not present in the global navigation or utility navigation. This type of footer content is common on sites with multiple user groups with different user journeys.

Use for: helping users find secondary content that might not be directly related to the main purpose of the site

For example, Dwell Magazine’s website showcases categories outside the magazine topics, including About, Dwell Magazine, Professionals, and Merchants — which might interest its secondary user groups: media and design professionals, merchants, investors, and advertisers (and prospective employees).

Site Map

A  site-map–styled footer component showcases a combination of the global navigation and other important pages not present in the global navigation. Unlike doormat navigation, it exposes lower-level subcategories of the main categories. It is helpful for:

• exposing underlying topics which are not obvious at the global-navigation level
• increasing awareness of the site’s primary content
• reminding users of the company’s offerings

A site-map footer component does not include the complete  site map, unless the site has few pages (about 25 or fewer). Any more than that and the footer risks becoming unwieldy and difficult to use. (Alternatively, you can provide a full-featured site map on a separate page, and link to it in the footer, which is where users expect to find such a link.)

Use for: large sites with multiple levels of information or subdomains

 CNN’s footer contains links to the top-level navigation and to lower-level categories.

Testimonials or Awards

Highlighting accolades in the footer can be a good tactic when building authority and credibility. However, showing too many testimonials and awards could also raise a red flag for customers, giving the impression that the company needs to show testimonials because it is not mature or stable. A solution is to add this content to the footer.

Run usability tests and A/B tests with your audience to determine whether this strategy is appropriate for your footer, and what the right number of testimonials is.

Use for: startups or for companies with less brand awareness

 In its footer, Reykjavik Excursions successfully includes awards and boards from which it has received recognition in order to bolster credibility and authority.

Brands Within the Organization

Some companies are so massive that they own or preside over dozens of other companies. Some use universal navigation to connect these child companies with the parent one. It can also be helpful to include a list of subsidiaries and brands in the footer to reinforce awareness of other brands or companies that fall under the organization’s portfolio and also help users find their way around.

Use for: large, multinational organizations with many subsidiaries or partnered brands

 Walmart’s footer calls out other brands that the company owns, such as Hayneedle, Jet, and Modcloth.

Customer Engagement

Users will often go directly to the footer to find information such as coupons and promotions or to simply staying up to date with the company’s sales and product releases. Thus, the footer can include information that allows customers to stay engaged with the company — social-media links (or at a minimum, links to the company’s social-media accounts) and mailing list signup prompts.

Before including an embedded social-media feed widget in the footer, consider how often the company posts on each social-media site.  A less active social-media account may not warrant an embedded social-media feed, but might still benefit from linking to the social accounts.

Use for: all types of sites if using social-media links; sites with heavy emphasis on visuals or aesthetics (arts, beauty, lifestyle brands, or creative spaces) if using an embedded social-media feed widget

 All pages on TheGoodTrade.com feature a large, multicomponent footer which includes: (1) a mailing-list signup prompt, (2) a widget with its Instagram feed, (3) links to social-media accounts, (4) links to secondary tasks, and (5) a disclaimer with copyright information.

Variations on Footers

Infinite Scroll & the Mini Footer

Many ecommerce, entertainment, and other sites which encourage browsing opt for an infinite scroll in order to keep users on the page. Content continually loads so there is no consistent bottom on every page, and thus no footer section. However, the content that would have been in the footer (typically, utility-navigation links) appears as a “mini footer” in the right rail, or within a larger, expanded global navigation.

For the footer to be helpful it needs to be present on all pages of the site. Some sites try to utilize the same footer for both static-length and dynamic-length pages. However, when users attempt to use these footers on sites with infinite scroll, it often becomes a frustrating game of “whack-a-mole” where users try to click on links as quickly as possible before they vanish again below the fold. Instead, if you plan on using infinite scroll, consider placing a mini footer in the right rail and ensure that it is sticky alongside the main content as the user scrolls.

Use for: pages with infinite scroll

 Sites with infinite scroll, like LinkedIn.com, often feature footer content in other locations, like at the bottom of the right rail.

Common Footer Pitfalls (& solutions)

Footers have come a long way since the 1990s, but to this day, they are still subject to common design pitfalls:

• More than two levels of information hierarchy
  Especially for large sites, including an entire site map is not an answer to your footer. A footer is a dedicated amount of real estate that should be devoted to only important information that should be discoverable. If everything is important, nothing is important.
  • SOLUTION: Consider reprioritizing the content and only displaying links to first- and second-level categories in your IA, not the entire site. If a single lower-level page is important enough, surface that specific link in the footer, but you don’t have to show all levels of the information hierarchy to make it discoverable.
• Unclear link names in the footer (e.g. Company Info or Help versus Contact Us)
  The notorious Resources link on many footers is one of the unfortunate vestiges of past footers.          
  • SOLUTION: Teams should try to adhere to conventional, clear terms. If the team is unsure which term would be more appropriate, a card sort or usability test can help shed light on terms that may confuse users.
• Unclear structure or information hierarchy
  The footer may sometimes be a “dumping ground” for orphaned links — that is, links that seem to have no relation to the global navigation or to secondary tasks. If the footer has no pattern of organization, users will either do an exhaustive review or spend very little time looking at the footer.
  • SOLUTION:  Clearly convey the information hierarchy of the items in the footer by using grouping or other visual-design patterns that indicate visual hierarchy (e.g. bolded high-level page links and normal-weight lower-level page links).
• Hidden or illegible footers
  Sometimes companies opt to use a tiny font size for footer links in order to accommodate all the links or to make the links less distracting. Worse, some sites might use an animation or accordion feature to hide the footer completely for aesthetics purposes. While the footer is not the primary navigation, people still use it and rely upon it, so don’t try to hide it.          An earlier iteration of the Reserved.com footer utilized an accordion feature which was collapsed by default, making its content difficult to find.
  • SOLUTION: Use a legible font size and font color (with decent contrast) and avoid using decorative fonts. Most importantly, do not hide or collapse the footer — people expect it to be there.

Conclusion

A footer is a place users go to when they’re lost. If we want to leave a lasting good impression, it’s critical that we don’t neglect the bottom of the page. After all, even the most mundane, utilitarian sections of an interface can make the biggest impact on a user’s experience.

Footers 101: Design Patterns and When to Use Each

PS. If you have an infinite scroll, do not show a footer at the bottom. It’s frustrating to see it, try to click it, only for it to disappear and to chase it again.