Mobile Footers: Let’s Take a Step Back
Engagement through the small screen has finally overtaken desktop, but mobile shoppers are time-starved, and screen real estate is at a premium. It’s more important than ever for mobile experiences to have focus, and be devoid of anything that gets in the way of customers completing their goals.
Contrary to this lies a seemingly unobtrusive part of a user interface — tucked away at the bottom of almost every mobile website — the mobile footer.
Most native apps don’t have footers. They instead adopt a user interface (UI) focused more on current tasks, which helps contribute to improved engagement and conversion rates.
It’s more important than ever for mobile experiences to have focus.
As a wave of Progressive Web Apps gathers momentum, the line between native apps and the mobile web is blurring. More and more, big name retailers are choosing to have their mobile site mimic their native apps, and the usefulness of old design patterns such as the footer is being brought to question.
This Google case study reveals a 104% conversion increase following the release of Ali Express’s footer-less Progressive Web App. So, is the footer still a useful part of the UI, or should the mobile web adopt an app-like approach and banish the global footer to the island of outdated user experience patterns?
What are mobile footers and where did they come from?
The footer has been around since websites were being designed, but its origins go back way further. The pattern was originally used in books to display a page number, the name of the current chapter, or as a space to write (foot)notes.
What’s different about non-digital use of footers is that they are very much contextual. Page numbers, chapters, and footnotes relate to the page content, and change as the page changes. In web design, footers typically contain the same information on every page, which usually does not relate to the content or user experience they frame. On large desktop screens, space wasn’t really an issue, but with the rise in small screen browsing and the emergence of responsive design, footers are being “shrunk and squeezed” into long, scrolling monstrosities that take up valuable screen real estate (and don’t necessarily relate to what the customer is doing).
Mobile shoppers have a unique set of requirements and browsing patterns. Non-contextual global footers epitomize a design pattern that has failed to keep up with the expectations of its user.
What’s so bad about mobile footers?
Before we cast out such a long serving pattern, it is important to understand the purposes footers serve. Insights gathered from my own design team have led to some interesting revelations about how designers and merchants have used (and abused) their footers.
A dumping ground for secondary content
Probably its most common use, the footer provides links to content that would not naturally fit within the main navigation or fall outside the company’s primary goal. Legal content, careers, and other company-related links would often be housed here.
Modern design patterns such as accordions or fly-out menus have allowed secondary actions to be positioned within a single menu structure. Accessible from every page, this app-like pattern makes this content more discoverable for those looking for it, without cluttering the primary actions on the page.
An SEO manipulation tool
Once upon a time, duplicating navigation links or stuffing keywords in the footer may have resulted in a boost in search rankings. Web crawlers today are far more sophisticated and have learned to reward unique content, and penalize those trying to game the system.
A tool for satisfying sticky stakeholders
As a designer of ecommerce websites, I find this scenario all too familiar:
Client: “Design looks good, but the marketing exec would like the newsletter sign up to be more prominent.”
Designer: ”Won’t this interfere with the shopping experience?”
Client: “Maybe… but we can’t sign-off without marketing’s approval.”
In this situation, the footer can be a designer’s get out of jail free card. It’s accessible from every page (therefor it’s prominent, right?) but it doesn’t interfere with the main content. Stakeholder happy, problem solved.
But make no mistake — this is not designing for the user. It’s like a shop assistant asking for a customer’s personal email as soon as they walk in the store, and again each time they pick up an item. The shopper would find this request much less invasive after they’ve made a purchase.
The same technique should be observed online. Understand the user’s journey and prompt them for further engagement at the end of the checkout, where this content will be noticed and welcomed.
Client: “We just set up an Instagram account. Marketing wants to make sure there’s a prominent link to that on the website.”
Designer: “But if a user is looking for your Instagram wont they search Instagram?”
Client: “Maybe… Let’s just put a link in the footer so they know we’re on there.”
This request may have held weight in the early days of social media. Many of my previous clients believed that dropping a Facebook or Twitter logo onto the page — regardless of if they were active on those channels — would make their brand appear “hip.” Today, customers are well-connected to their favorite social channels. They don’t need the help of your web store to find social content.
Beyond that, social links in the footer remove the shopper from your store. Why would you want to do that? Instead, social media should be integrated into the shopping experience. Position social sharing within the product page content. This helps bring new customers into the store without forcing the referring shopper to step off their purchasing path.
A way to redirect users to new journeys
Most websites: “It seems you’ve reached the end without clicking anything… You must want something else.”
This is a misconception. It is just as likely — if not more likely — that the user wants to see all the information that’s available to them before taken their next action. If a shopper is exploring a list of products, or reading up on a product before ‘adding to cart,’ footers with links to other sections will only distract and break that shopper’s focus.
Rather than risk losing a conversion, offer the user additional content that might help make up their mind to proceed further. A footer on the shopping cart that offers content on returns & exchanges or shipping rates may give shoppers the reassurance they need to check out.
When mobile footers work well
The right content at the right time can make the footer an effective and useful space.
To signify the end of the page
On the small screen where whitespace is not as available, a footer can be an effective way to signify the edges of page content.
It doesn’t take much. A simple switch in contrast is often enough to break the visual rhythm and deliver this feedback to the user. In fact, anything that fails to break the flow of content sufficiently is likely to cause confusion as to where contextual content ends and non-contextual content begins.
We found an example of this in a recent user test. A shopper was asked how they would share a product page with a friend. They saw a Facebook logo in the footer and expected this would share that page, when in fact the product content had ended further up the page and this action had nothing to do with the product.
To communicate security
Any pages involving data input or payments will benefit from the presence of a lock icon or secure certificates to provide the reassurance shoppers may need to proceed.
With 20% of US online shoppers abandoning orders due to security concerns, this small piece of UI may well have a big impact.
To answer common uncertainties
As mentioned previously, footer content can be useful during the checkout process to ease uncertainty around returns and shipping. This can be extended to any page where shoppers frequently bounce or abandon cart.
User testing can help uncover these pain points. From here, a small amount of information in the footer can be all that’s needed to alleviate users’ concerns. Displaying the accepted methods of payment at the base of the shopping cart can be all an American Express cardholder needs to see to know they can checkout. Two simple words — “free shipping” — have been known to reduce cart abandonment by 28%.
To dynamically display personalized content
The above example from Flipkart’s Progressive Web App shows recently viewed items at the bottom of the page, allowing the shopper to easily navigate back to those items of interest.
This is a great example of how the same footer content can be used on multiple pages if the content is dynamic and enhances the shopping experience. It builds on the app-like notion of a user owning the experience.
So not all bad then
As we’ve seen, footers can be useful on any webpage so long as they remain contextual and adapt to the changing user journey. Before you choose to use a footer on your next mobile website or app, consider the following 5 things:
1. Is it relevant?
Footer content should recognize, relate to, and benefit the shopper’s current task.
2. Is it an excuse for imperfect navigation?
All pages in a sitemap can and should be logically structured in a well-designed navigation menu.
3. Is it serving the user or the client?
Fight for the user experience rather than submitting to the requests of project stakeholders. Their success is, after all, measured through the engagement of their users.
4. Does it push content that will annoy shoppers?
An already engaged user will welcome further opportunities to connect. Don’t risk pushing prospective customers away by constantly offering a newsletter sign up.
5. Is it encouraging shoppers to leave?
Shoppers can’t buy if they’re not in the store. Any links that will take the user to a different website should be de-prioritized or removed.
5. Does it distract from the primary goal?
If page content encourages the shopper to step off the path to conversion, it shouldn’t be there.
It all comes down to expectation
App-like browsing will be at the forefront of Progressive Web Apps. A faster, task-focused approach to shopping improves engagement and increases conversion. This is what mobile users now expect.
At their inception, native apps were very simple, task-based programs with basic navigation. All tasks would be accessed by opening a menu, usually found in the header bar. The reason why apps do not have or need footers is because app users simply don’t expect there to be one.
Your next ecommerce site will likely have a more complex navigation structure than the average native app. However, creating an uncluttered, app-like experience does not mean content should be hidden from users that would otherwise be available on desktop. Progressive Web Apps are different from native apps in that the experience can span multiple screen sizes and device types. Content should correlate across all screens, and shoppers not being able to access what they expect to find will only result in frustration and lower engagement.
Originally published at www.mobify.com on June 2, 2017.
