Guidance on CRO / UX For Ecommerce Websites from Google etc

     Note I've broken some hyperlinks below.

 I've summarised some key takeaways from Google's Retail User Experience (UX) playbook below as well as adding some tips of my own. Google's Retail UX playbook offers best practices for conversion rate optimisation and UX on e-com websites and webstores on online marketplaces such as Ebay . Google's Retail User Experience (UX) playbook provides recommendations across six main areas: menu & navigation, search, category/product pages, homepage/landing page, conversion rate optimisation (CRO), and form optimisation.    The playbook uses examples from various best-in-class retailers from the US and UK markets to illustrate effective strategies. A/B testing is strongly emphasised throughout, along with quantifiable metrics for assessing improvements. 

1. What are some key elements for a frictionless e-com experience on a landing page?


   A frictionless landing page should have a clear call to action (CTA) above the fold, using descriptive CTAs rather than generic ones like "continue" or "next". Benefit-oriented value propositions should be prominently displayed, avoiding intrusive interstitials and automatic carousels. Display top product categories to make browsing easier and quicker (using Analytics / marketplace data), use legible font sizes, and leverage social proof e.g. (video) reviews (including those on third party websites e.g. the Google Map) and testimonials to build trust.

2. What are the main recommendations for optimising website menus and navigation?

   Menus should be consolidated and should not take up more than a 1/5 of the page. Include a click-to-call button at the top of each page if phone calls are important, and a store locator in the menu if you have a physical location. Keep menu options on a single page, ordering main categories by traffic volume and subcategories alphabetically. Post-sales actions, like customer service, should be easily accessible within the menu. Dynamic menus can enhance visual hierarchy. 

   We should also note that website navigation best practices may vary based on the market - see https://userpeek .com/blog/cross-cultural-ux-design-a-comprehensive-guide/ . For example,  r.e. “hamburger” menus - note that in recent research from 2021 on desktop Navigation User Interface design in e-commerce and its impact on Nordic customers' (between the age of 18 and 25 years old ) satisfaction showed “that different navigation menu styles could affect websites' trust, quality, understandability, usability, hierarchy, efficiency and approachability. The data analysis uncovered a strong correlation between the mega menu and an improvement of users’ satisfaction with the e-commerce website. The inclusion of the hamburger menu had a negative effect on users’ satisfaction, while the horizontal menu ranked in the middle, suggesting no significant impact on enhancing the navigation experience of users. Out of all six navigational user interface elements, the local navigation was considered to be the most helpful element when searching for products on the beauty e-commerce website. It was followed by icons and pagination, which were both rated to be beneficial elements of navigation … Local navigation gives users access to those sections of the website that are nearby. If we considered a strictly hierarchical structure, local navigation would accommodate linking to a page’s parent, siblings, and children.“  See https://www.diva-portal.org/smash/get/diva2:156683 .


There also may be generational aspects at play: there’s anecdotal evidence that multiple professors have noticed a trend among their student members of Generation Z (“...mid-to late 1990s as starting birth years and the early 2010s as ending birth years”: https://en.wikipedia.org/wiki/Generation_Z) , even those studying technical scientific fields, seem to have a total misunderstanding of computer storage.

The Verge reported that many in Generation Z fail to conceptualise the concept of "directories" and "folders filled with digital files": https://www.theverge.com/22684730/students-file-folder-directory-structure-education-gen-z .

   This may have implications for their understanding of web design folder structure and breadcrumbs. The implications of this may include adopting an “as flat as possible” file structure for sites targeting this market.

See

https://www.nngroup.com/articles/flat-vs-deep-hierarchy/

https://www.nngroup.com/articles/accordion-icons/

https://www.nngroup.com/articles/mobile-subnavigation/

3. How can I make my website's search function more effective?

    Make the search bar highly visible (above the fold) and use auto-complete suggestions that include both product and category suggestions. Implement spell correction to handle typos and always return search results, even if there isn't an exact match. Include previous and top searches for easy access to common items. These features aim to minimise the frustration of failed searches and improve conversions.

4. What strategies are recommended for category and product pages to drive sales?

    Provide a clear value proposition at every stage of the buying process, including category and product pages. Enable users to easily sort and filter products, making sure filtering options are genuinely useful. Use urgency elements such as limited stock or time sensitive offers (as appropriate) to push conversions. Ensure price  / delivery / availability information is readily visible above the fold on product pages and provide readable, concise product descriptions. Adding individual / range product reviews is beneficial if you have a large product selection.

5. What are some best practices for the online shopping cart and conversion process?

    Do not redirect users directly to the checkout after adding an item to their cart; instead, use a modal or pop-up with options to continue shopping, view the cart, or checkout. Clearly reiterate the value proposition at the cart stage and make it possible to update cart items. Allow users to transition seamlessly across devices and limit the number of exit points. Offer guest checkout as a default option, provide value propositions for account creation (e.g. exclusive pre-sales for account holders) and utilise pagination or progress bars for multi-step checkouts.

6. What improvements can be made to forms for a smoother checkout?

    Use inline validation and autocomplete to streamline and speed up form completion. Reduce the number of form fields by removing optional fields, using a full name field instead of separate first/last name fields, hiding company and address line, and having the billing address set to the shipping address by default. If there are less than four options, buttons are preferable over dropdowns. Use steppers, sliders, or open fields rather than dropdowns for number entries. 

7. What is the significance of clear and descriptive CTAs, and how can I optimise them?

    Clear and descriptive CTAs, such as "Choose Shipping Rate" instead of "Continue" or "Next," can help manage user expectations by giving users an idea of what the next step will be. Optimise your CTAs by focusing on the benefit for the user rather than just the action (e.g. “Sign up and get our best daily offers” instead of just “Sign up to our email newsletters”). Test different copy variations using  A/B testing to find what works best (using Google Analytics or similar tools) . 

   User behavior analytics tools (such as Microsoft's Clarity - free) can also help you understand how users interact with your website through session replays and heatmaps.