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

Fundamentals of footer

As UX professionals, we tend to dedicate our time and energy to everything. above the fold .This is because global browsing, search, and high-priority content are positioned above the fold, and users tend to spend a little more time there. disproportionate amount of time at the top From any page. Consequently, footers, which appear at the bottom of web pages, receive the minimum UX time and resource budget. However, you should still pay attention to footers because they can greatly improve the user experience.

Definition: O footer of A website is an area located at the bottom of every page on a website, below the main body content.

The term "footer" comes from the world of printing, where a "footer" is a consistent design element seen on every page of a document. However, as we explained 20 years ago, the Difference between print design and web design. This means that design elements such as footers change their meaning (in this case, becoming actionable) when they are transferred from print to online.

Website footers in the past were either small, useful areas with little information or large databases for various links. Visually, they often contained... tiny messages which were hardly legible .Today, footers have matured and now serve as an important point of reference for people as they perform various tasks on websites.

People use baseboards.

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

1. Users scan or read the page and don't find what they want or need more information. They scroll to the bottom of a page and use the footer as:
   1. A second chance to be convinced
      For example, perhaps a user has decided, after reading all the details, that they don't want to sign up for a bank account, but are still impressed with the banking institution and want to become a customer. The footer is a good opportunity to remind or educate potential customers about the company's other offerings.
   2. One last resource for hard-to-find content
      Sometimes, users turn to the footer for additional options that may not be present in the overall navigation. For example, those interested in applying for a job at an e-commerce company—a task different from that of the typical e-commerce customer—may look for relevant information in the footer.
2. Users roll intentionally Users go to the footer to find information they expect to see, such as contact information, company details, 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've already scrolled to the bottom of a page, because the footer is too close, they use it instead of scrolling to the top for overall navigation.

In both cases, regardless of what content ends up in the footer, that footer should be consistent, predictable, and easily discoverable. Consider these use cases, your website's goal, and the purpose of your footer when determining what type of footer to offer and what content to include in it.

While satisfying these user scenarios may not be the highest priority goal for a website, designing a good footer is still a worthwhile endeavor because footers have a particularly wonderful usability feature: they will never get in the way of users whose needs are already met higher up on the page. Thus, with the exception of excessively bloated footers that could slow down page downloads or rendering, a footer is a free addition to the user experience. It can help, but it can't hurt.

Footer elements

Website designers choose many different types of content for their footers for various reasons. Footer elements can be combined depending on business and user objectives. Here are some of the most common footer components, examples, and recommended situations for using them:

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

Useful Links

Most websites, at a minimum, tend to include navigation node utility at the bottom, pointing to:

• Contact information: company address, phone number, and link to live chat.
• customer service information
• Privacy Policy
• terms of use

Although many websites have utility navigation located in the most important areas of their site, the footer is where users look when searching for these specific items. Users 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 tool-like utilities such as search, login/account information, and language selection.)

Use for: all websites

Navigation doormat

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

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

Secondary Tasks

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

• apply for a job at the company
• tasks for content creators
• accessing investor information
• find documentation or specifications for a product or service
• access media kits and other  PR information
• Find company affiliates.

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

Use for: to help users find secondary content that may not be directly related to the site's main purpose.

For example, the Dwell Magazine website displays categories outside of the magazine's main topics, including About, Dwell Magazine, Professionals e Merchants – which may interest your secondary user groups: media and design professionals, marketers, investors and advertisers (and potential employees).

Site map

A sitemap-style footer component displays a combination of the global navigation and other important pages not present in the global navigation. Unlike capacitor navigation, it exposes lower-level subcategories of the main categories. It is useful for:

• exposing underlying topics that are not obvious at the global navigation level.
• increase awareness of the site's main content
• reminding users of the company's offers

A sitemap footer component doesn't include the complete sitemap unless the site has few pages (around 25 or less). Beyond that, the footer risks becoming cumbersome and difficult to use. (Alternatively, you can provide a complete sitemap on a separate page and link to it in the footer, which is where users expect to find that link.)

Use for: Large websites with multiple levels of information or subdomains.

Testimonials or Awards

Many of our study participants described being motivated to choose a website based on the awards and testimonials that website had received. Highlighting positive feedback in the footer can be a good tactic when... It creates authority and credibility. .However, displaying too many testimonials and awards can also raise a red flag for customers, giving the impression that the company needs to show testimonials because it is not mature or stable. One solution is to add this content to the footer.

Execute usability testing e tests A / B Consult with your audience to determine if this strategy is appropriate for your footer and what the correct number of testimonials is.

Use to: startups or companies with less brand recognition

Brands within the organization

Some companies are so large that they own or control dozens of other companies. Some use universal navigation to connect these subsidiary companies with the parent company. 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 within the organization's portfolio and also help users find their way back.

Use for: large multinational organizations with many subsidiaries or partner brands

Customer engagement

Users often go directly to the footer to find information such as coupons and promotions or simply to stay updated on the company's sales and product launches. Therefore, the footer can include information that allows customers to stay engaged with the company – social media links (or at least links to the company's social media accounts) and requests for... subscribe to the discussion list .

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 could still benefit from linking to social accounts.

Use for: All types of websites using social media links; websites with a strong emphasis on visual or aesthetic features (arts, beauty, lifestyle brands, or creative spaces) if using an embedded social media feed widget.

Variations in baseboards

Infinite Scroll and the Mini Footer

Many e-commerce sites, entertainment sites, and other websites that encourage browsing opt for a infinite scrolling To keep users on the page, the content is continuously loaded, so there is no consistent background across all pages and therefore no footer section. However, the content that would be in the footer (typically utility navigation links) appears as a "mini footer" in the right-hand rail or within a larger, expanded global navigation.

For a footer to be useful, it needs to be present on every page of the website. Some websites try to use the same footer for both static and dynamic page lengths. However, when users try to use these footers on infinite scrolling websites, it often becomes a frustrating game of "whack-a-mole," where users try to click the links as quickly as possible before they disappear again below the fold. Instead, if you plan to use infinite scrolling, consider placing a mini footer on the right rail and ensure it sticks snugly alongside the main content as the user scrolls.

Use for: Infinite scrolling pages

Contextual footnotes

Although footers traditionally remain consistent across multiple pages, it can sometimes be useful to customize the footer based on the information presented on the page. Particularly for a website with multiple target audiences, a contextual footer can display content that may not have made it into the overall navigation, but could still be critical for some users.

For example, the Medium.com homepage doesn't have a footer; the page displays an infinitely scrolling list of articles. (The page does have a mini footer in the right-hand rail, as recommended above.) However, on a specific article's page, Medium displays a task-based footer that varies depending on whether the viewer is a subscriber or not.

Use for: websites with different user roles (e.g., "content creator" vs. "content consumer" or "member" vs. "non-member")

Common Baseboard Traps (and solutions)

Baseboards have come a long way since the 1990s, but even today they are still subject to common design pitfalls:

• More than two levels of information hierarchy.
  Especially for large websites, including an entire sitemap isn't the answer to your footer. A footer is a dedicated space that should only contain important information that needs to be easily found. As my mother once said, "If everything is important, nothing is important.".
  • SOLUTION: Consider resizing the content and displaying only links to first- and second-level categories in your IA, not across the entire site. If a single lower-level page is important enough, identify that specific link in the footer, but it won't be necessary to show all levels of the information hierarchy to make it discoverable.
• Unclear link names in the footer. (for example, Company Information or Help versus Contact Us )
  The notorious link Resources In many cases, baseboards are one of the unfortunate remnants of previous baseboards.
  • SOLUTION: Teams should try to adhere to conventional and clear terminology. If a team is unsure which term would be most appropriate, a test of classification by card A usability study can help clarify terms that may confuse users.
• Unclear structure or information hierarchy
  The footer can sometimes be a "dumping ground" for orphaned links – that is, links that seem unrelated to overall navigation or secondary tasks. If the footer lacks an organizational pattern, users will create a... exhaustive review Or they will spend very little time looking at the footer.

  

  • SOLUTION:  Clearly convey the information hierarchy of the items in the footer using grouping or other visual design patterns that indicate visual hierarchy (e.g., bold top-level page links and normal-weighted lower-level page links).
• Hidden or illegible footers
  Sometimes, companies choose to use a small font size for footer links in order to accommodate all the links or to make the links less disruptive. Worse, some websites may use an animation or accordion feature to completely hide the footer for aesthetic reasons. Although the footer isn't the primary navigation, people still use and rely on it, so don't try to hide it.

  

  

  • SOLUTION: Use a legible font size and font color (with contrast (decent) and avoid using decorative fonts. Most importantly, don't hide or collapse the baseboard – people expect it to be there.

Conclusion

A footer is where users go when they are lost. If we want to leave a a good, lasting impression , It is crucial that we do not neglect the bottom of the page. After all, even the most common and utilitarian sections of an interface can have the greatest impact on a user's experience.