23 Header/Footer Design Tips for a Killer E-commerce Experience

“Never let your campaigns write cheques that your E-commerce platform can’t cash.”

This is part 3 of our series about E-commerce user experience design best practices. You can read the part 1 here: A Killer Product Search Experienceand part 2 here: Seamless Navigation

70% of online shoppers abandon their carts and leave E-commerce sites without purchasing anything. Window shoppers aside, a lot of this comes down to site owners’ negligence of the user experience (UX) as a key part of their strategy.

Poor clarity on full pricing, clunky search, lengthy forms, and not taking into account local habits (for multinational websites) are the most common sales killers, but each of these issues can be solved with smartly designed adjustments.

Need to fix your E-commerce performance, or benchmark your online retail project? Here is the third section of an incredibly convenient checklist of 250+ tactics, straight from an upcoming easy-to-browse 31Ten eBook on best E-commerce Linux practices.

Together with the search function and navigation (covered in part 1 and 3), header and footer sections of your pages play an important role to support the product discovery, navigation plus key shortcut experiences. According to a THCI eye tracking study, visitors cumulatively spend 23% of their attention time on the header section of your website.

Again, each ecommerce website being different in its offering and target audience, we invite you to A/B test these tactics, as they may or may not have an impact on your conversion.

Watch out for the following icons indicating the suitability of each tactic:

I. Header

I.I Search Bar
Please refer to our Search section by clicking here: A Killer Product Search Experience
I.II Language or country selector

1. 1 Always use the full name of the language in its local format when possible, label them as ‘Deutsch’ and ‘中文’ — not ‘German’ and ‘Chinese’. Avoid using flags that can be confusing to refer to a specific language.

1. 2 On the other hand, use flags to send to country-specific versions of your website.

Vlad’s take: “Consider also sending the visitor automatically to their country specific section while notifying them why they have been sent to it. And offer a clear way to revert this automation to the country of their choice.”

1. 3 Autodetect the user’s language whenever possible by retrieving the browser’s display language.

Vlad’s take: “Same as country selection, also offer a clear way of reverting the automated selection.”

1. 4 Display the current language shown, and indicate  it can be switched (eg using an arrow

1. 5 When having just 2 languages, display the two options highlighting the current language used

I.III Header Information

1. 6 Place the brand logo (primary elements) in the top left corner (Amazon, Ebay, Cdiscount, Tmall)

1. 7 Include in your header the information having the highest impact on your conversion: free shipping, top selling items, major promotions, etc.

1. 8 If having physical stores, consider displaying closest store with real time opening statusVlad’s take: “You can use the visitor’s IP address, or ask the visitor to share his location, as the cost of showing a consent pop up. Provide a clear way to change the store automatically chosen.”

1. 9 If you offer a wishlist feature, test putting a direct access into header

1. 10 Considering offering direct access to order tracking

Vlad’s take: “Same as the wishlist, these are functions you may want to provide shortcuts for.”

1. 11  Show site-wide benefits in header and/or footer

Vlad’s take: “Same as tactic 8, any key benefit you are offering that can reinforce trust may have an impact on your sales when displayed prominently: social rating, free sampling, favorable return conditions, third party ratings etc.”

1. 12 If retailing high awareness brands, showcase them on header to increase trust

13 Include a QR code as an entry point for users to shop on mobile version / APP if you have higher usage rate and conversion on mobile.

II. Footer

15.  Use contrasting background colors in your footer to signify the end of the page

16. Consider using a fixed bottom menu as a footer on mobileVlad’s take: “Especially with the rise of progressive web apps, mobile footer menus are increasingly popular.”

17. Consider showing a contextual footer to answer uncertainties, such as returns & exchanges or shipping rates at checkout

18.  Use negative space to highlight footer navigation links

19.  Use the footer’s opportunity for a last call to action

20. Display core guarantees in China

21.  Include necessary but low conversion impact information in footer, such as legal (copyright notices, terms & conditions, privacy policies, disclaimers), non strategic awards and certifications, non-customer entry points (employee login, press) etc.

22.  Provide a contact touchpoint in the footer: form, chat, phone number, address

23. Dynamically display personalized content in footer

We are passio- no, obsessed with creating the very best, up-to-date online user experiences that translate into more checkouts and a higher percentage of repeat customers.

Want to improve your E-commerce platform’s usage, retention, sales and conversion rates? 

Click the “Read more” link below to leave us your email address and be notified first when the eBook is published!

Authors

• Vladimir Garnele •

10y+ experience UX-UI designer and partner at digital agency 31Ten. Vladimir writes about design and user experience best practices in China and shares key case studies from his work helping startups and multinationals alike build fantastic digital products that customers love to use.

• Zhoumo Yang •

Zhoumo is a 31Ten UX-UI Designer. She has more than 2 years of experience at the carrefour of photography, online interfaces and product design. She has a thorough understanding of end-to-end design process including user research, user flows, wireframes, prototypes, and final UI. www.yangzhoumo.com