If the shoes complete the outfit, then it’s reasonable to say that the page footer completes an eCommerce design.
The statistics back up these claims. A study from Chartbeat gathered data from 25 million random user sessions and answered the age-old question, “how low can you go?” The study produced some pretty interesting results, namely:
- Visitors spend more time below the fold than above it. Given that most of the actionable content lies beneath the fold, visitors spend most of their time viewing content around 1200 pixels down, or just under two screens if the average browser window is 700 pixels.
- There’s a pretty big gap between the amount of time users spend on the first and second screen, too. Pixels at the top of the screen are only seen for an average of 4 seconds, whereas that time quickly rises as they scroll time. Users spend around 16 seconds at the peak spot of 1200 pixels, then it slowly declines as the user scrolls downward.
- A significant portion of visitors (over 25%) won’t even wait for the landing screen to load before scrolling. Only around 75% of viewers see the upper-most areas of the screen. The most-seen area of the screen is about 550 pixels down, just above the fold.
These figures are enough to dispel any outdated illusions that people don’t usually scroll to the bottom, or that the further down content is, the less it’s seen. The page footer plays a role just like any other part of the screen, and it can even do things other areas can’t.
Here, we explain 8 tips to help make the lowest part of your site a top priority. Apply these page foot design tips to your eCommerce site for a better user experience, and even more sales.
1. The Right Amount of Navigation
The page footer is the ideal place to stick navigation items for the less-visited pages, especially company information, terms of service, and privacy policies. This accentuates its function as the “safety net”; if your shoppers ever find themselves lost, they will instinctively scroll down, giving your page footer the chance to save the day.
However, you don’t want to clutter your footer. You must leave enough room for negative space to make it readable. That means you should not use it as your master navigation or site map. You’ll want to stick with the basics.
Rarely do eCommerce sites list out each individual product category in their page footers, and for good reason. First, including a link for each product type clutters your page footer to the point where it defeats its own purpose — too many links confuse shoppers, not help them find their way.
Second, these options are often available in the main navigation menu at the top, usually listed as subcategories in a pull out menu. For more on building your main navigation, read this article from the research director at the Baymard Institute.
Even without product categories, you’ll still have a lot of links. That’s why it’s best to organize them into columns. Columns can fit more links without sacrificing coherency, and allow you to better organize them by type. Because page footers include links to lesser-visited pages, you’ll have more diverse types. Organizing page links into columns related to shopping, content, and company info, for example, makes them easier to scan.
Source: Amuse Society
Amuse Society does a lot right with their page footer’s navigation options. They organize page types by columns, and don’t include everything, just what’s necessary. Compare what’s included in the page footer that isn’t in the main navigation at the top.
Furthermore, because the use a sticky header navigation menu, they don’t need to repeat each and every link. As they demonstrate, a good page footer merely complements the main navigation with minimal overlap.
It’s also worth noting the other elements in the page footer, such as the email call-to-action, copyright info, and social media icons, all of which we’ll discuss below.
2. Use Ample Negative Space
In conjunction with limited which navigation links you include, you also want to use generous negative space. Negative space does wonders for a site’s visuals and comprehension: it enables faster scanning and actually increases readability, not to mention the visual hierarchy advantages of allowing certain elements to be noticed faster.
(A general rule of thumb is, the more negative space around an object, the more readily it will be noticed.)
It may seem like Incase uses too much negative space, but as long as all the information is there and legible, it’s fine.
3. Add a Final Call-to-Action
The page footer punctuates the entire page. As the final note, the shopper lingers there just a moment longer than the rest of the page, making it an opportune time for one last call-to-action (CTA). This is typically asking them to join your newsletter, but it might also be pushing an opportunity for them to register an account.
For specific advice on more successful calls-to-action, like how to word them and handle their visuals, read our 9 Useful CTA Techniques to Improve Conversions.
Greetabl doesn’t do much with their page footer, but even so they still include a final CTA to sign up for their emails. But reducing the amount of other elements, they can make their CTA bigger and more noticeable. This, along with placing it outside the blue background of the rest of the footer, heightens the emphasis on the CTA, making it the footer’s main attraction.
4. Include Necessary but Uninteresting Information
Traditionally, the page footer has been the place to stick all the unwanted but needed information for a site, like legal requirements. Not just websites, but many different mediums, from print periodicals to billboard advertisements.
Especially with smaller, unobtrusive text, placing these notices at the footer helps them go unnoticed. It also saves up room in other areas of the site for more important elements.
Here’s a shortlist of items to consider sticking in the footer:
- Copyright notices
- Legal Disclaimers
- VeriSign Credit Card Logos
- Cookie notifications
- Employee Login
Those last two are worth going into. First, if you have to give shoppers a notice that you’re using cookies, complying with the EU’s notorious Cookie Law, consider having it at the bottom of the screen instead of the top. This makes this less invasive, but still fulfills the legal requirement. (Interestingly, the site we linked to above to explain the Cookie Law chooses to put its disclaimer as a footer.)
Second, if you need to place a separate login for employees, the page footer is perfect. You want to arrange your site for your shoppers, not your employees, so placing it anywhere else will be distracting and take up valuable screen real estate. Besides, with a quick but forceful scroll, employees can reach it almost instantly, so it’s convenient for them as well.
On a side note, another aspect of Lumity’s page footer we love is that it blends in seamlessly with the background image. There is no exact cutoff point between the main page and the footer, but rather the content of the background picture acts as a divider, creating a completely fluid visual flow.
5. Use Icons for Social Media Links
Just like with a final CTA, the page footer is one final chance to get more followers on your social media. The pattern of including social media links in the page footer is so deeply ingrained, shoppers will often look there first to find a brand’s social media sites.
Different than sharing options, the page footer social media links take customers to the brand’s social media pages, where they can either browse or directly follow.
These links are typically displayed as logo icons. This saves more space than typing out the names, and the images are immediately identifiable. Plus, icons adds some much-needed visual stimulation to footers, breaking up the monotony of what would otherwise be just words.
Vissla uses a highly visual page footer. It foregoes the navigation menu to accent its minimalism, but still all the important social media icons are present.
6. Use SEO Links in the Home Page Footer Only
There’s a rumor floating around that site-wide page footers are a great place to pile up SEO backlinks. This is a bit misleading, though, as they’re only really helpful on the home page footer.
Google confuses us, though, by trying to dissuade footer linking in general. They themselves have admitted that footer and header links are given less weight than content links, and suggest including a “nofollow” tag on external links in footers.
However, the marketing firm Creative California tested this theory, though, and found that the footer links did actually improve their page rank, although only one on the home page was necessary.
Source: Creative California
The important caveat that the firm recognizes is that all other SEO practices must be above the board.
7. Create Hierarchy within the Page Footer Itself
Don’t think of your page footer as the lowest rung of your visual hierarchy… think of it as a separate entity, with it’s own hierarchy.
Firstly, your footer should be divided into a different section for each of the elements we’ve mentioned above: navigation menu, legal notice, call-to-action, social media icons, etc. Because these sections are all dissimilar, it helps to section them off using the visual hierarchy techniques we discussed in this earlier post.
For sectioning off page footers, you have a few different options:
- Layers (Subfooters) — The most fundamental way to imbue visual hierarhcy into your page footer is to divide it into horizontal layers. The layers themselves can be differentiated using the other methods listed here.
- Color Codes — The colors of either the text or the background can suggests relations. For example, you can use a different color for navigation links than the legal notices, or even different colors for the different types of navigation links. Likewise, you can create layers with different colored backgrounds.
- Typography — Typography is a common way to separate elements in a page footer. Site links can have a different font than the CTA, which can have a different font than the legal notice. Text size is especially powerful here, as you can minimize the visibility of legal notices by shrinking them.
- Alternate Columns and Rows — To keep your page footer visually interesting as well as organized, alternate columns and rows. Navigation links work especially well in columns, while social media icons and legal notices look better as rows. Experiment to find the best fit.
Source: Julia Janus
For organizing footers, Julia Janus’s site is a work of art, incorporating all of the visual hierarchy techniques mentioned above.
They use different colored backgrounds to create layers, which highlights the social media icons and CTA above other elements. The typography separates the types of navigation links, giving more precedence to the main navigation by using a bold font and all caps, while minimizing the significance of the lesser-important company links. They keep their whole footer looking interesting by intermixing columns and rows, and even include their brand logo for some extra visual appeal.
To top it off, they employ the cookie notification as a sticky footer so it stays at the bottom no matter what.
8. Fun Animations or Graphics
Last, you can draw more attention to your video with animation and flashy graphics. This doesn’t just improve the appeal of the page footer, but the page as a whole — adding alluring graphics to the bottom of a page means they won’t distract from the more important content above, but still add some extra charm.
Not that this strategy isn’t for every site, and can negatively impact your site’s professionalism, reliability, and even loading time. However, if your site has a lighter tone, such flourishes can add that something special to your site.
Source: Solid & Striped
Without being overly playful, Solid & Striped uses hover animations excellently in their page footer. Notice how the hover animations conserve space with expanding and shrinking menus. This allows them to add extra text — like the explanation of the 15% discount for signing up for the newsletter.
One important note for all animations like this is to use gradual fades. Too fast will create a jarring experience, whereas a smoother fade like Solid & Striped’s seems to flow organically.
The Perfect eCommerce Page Footer
Let’s end with a truly remarkable example of an eCommerce page footer. Online watch vendor Hypergrand sticks to the essentials to create a page footer that looks and functions perfectly without drawing attention to itself.
Notice how they only have site navigation links for broad categories, and they divide these into two columns, one for shopping, and the other for company information under “customer service.” A nice touch are the border lines to separate category titles from page links, and underneath to separate the layers for the navigation links and the social media icons/legal notices.
The third column is dedicated entirely to the email CTA, with enough room to give incentive to joining with a text explanation. Take note how the CTA explanation text is the only text not in all caps.
Hypergrand uses colors smartly, with a dark background and bright text color to maximize readability. Notice how the background is not too dark, which allows the use of the attention-drawing pitch black for the CTA “Join” button.
The entire page footer is still visually interesting, alternating between columns and rows, and using the social media icons to break the monotony. VeriSign logos help too with a splash of color.
By centring the social media icons, they’ve allowed the negative space to add extra weight to them. As the most visually appealing element in a sea of empty space under the navigation columns, the social media icons take our immediate attention, given them a special significance.
The copyright information is shrunk down compared to the other text, and slotted right at the end.
Despite its location at the bottom, the page footer actually plays an important role in tying the entire site together. While it may not be seen by every visitor, there will come some times when, if it’s properly designed, it will keep shoppers on your site and save you from an abandonment.
Do you have any questions about page footers? Did you find our article useful? Share your thoughts in the comments section now.