Google官方2019網站優化技巧-SEVENS版.pdf

1、NOW OR NEVER Expand Your Business Overseas? ? ?%? ? ? ? ? ? ? ? ?3? ?I? ? ?U? ? ?U? ? ? Proprietary + Confidential Collection of best practices to delight your users Proprietary + ConfidentialProprietary + Confidential Ecommerce playbook at a glance Creating frictionless experiences across the funne

2、l After looking at several hundred retail sites, we realized that there were certain universal UX elements that helped create a frictionless shopping experience. This list aims to expand on the 25 Retail Principles and provide a checklist for improving your mobile site experience across 6 key site a

3、reas: Menu & navigation Search Category / product Home / landing page Conversion Form optimization Proprietary + ConfidentialProprietary + Confidential Clear CTA above the fold Have descriptive CTAs Clear benefit-oriented value prop above the fold Dont use full page interstitials Remove automatic ca

4、rousels Display top categories on homepage Use legible font sizes Use social proof Have a value prop at every point in the funnel, including category and product pages Allow users to sort/filter large number of products easily Add urgency elements Have price info above the fold on product pages Have

5、 secondary CTAs that facilitate x-device, like wishlist, email or call If large number of products, add reviews Show consolidated menu If foot traffic is important, include a store locator button in the menu If calls are important, include click-to-call at the top of every page Keep menu options on

6、one page For main product categories, order by traffic volume. If using subcategories, organize alphabetically Include post sales activities in the menu Dont redirect into checkout after adding to cart Limit your exit points at checkout Use pagination or a progress bar if more than 2 steps in conver

7、sion flow Re-iterate value prop at conversion point Have descriptive CTAs Allow users to continue on another device by emailing or saving for later Allow checkout as guest Add value prop around why someone should create an account Mark required fields with an asterisk Use inline validation Use autof

8、ill Reduce number of fields (remove optional fields, use full name instead of first/last, hide company and address line 2 by default, hide billing by default) Use correct keypads Dont use dropdowns for inputs with Payment providers. 1.In the section for your credit card payment provider, click Edit.

9、 2.in the Accelerated Checkouts section, select Google Pay. 3.Click Save. 4.Your customers can now use Google Pay to check out on your store. How to Activate Google Pay: Integrating with Shopify Proprietary + ConfidentialProprietary + Confidential Form Optimization Proprietary + ConfidentialPropriet

10、ary + Confidential Playbook at a glance Creating frictionless experiences across the funnel (RETAIL) Menu & navigationSearchCategory / productHome / landing page ConversionForm optimization SectionForm OptimizationEase of implementationImpactKey Metric Key suggestion Use inline validation & autofill

11、 MediumMediumForm completion Reduce number of fields Remove optional fields Use full name instead of first/last Hide company and address line 2 Check billing as shipping by default MediumMediumForm completion Dont use dropdowns for inputs with 4 options, instead opt for buttons EasyEasyForm completi

12、on Use steppers, sliders, or open field input for numerical entry rather than large dropdowns EasyEasyForm completion Use correct keypadsEasyEasyForm completion Proprietary + Confidential Typing on mobile is hard Proprietary + ConfidentialProprietary + Confidential In-line validationIn-line validati

13、onAutofill Use inline validation & autofill Proprietary + ConfidentialProprietary + Confidential Use full name Use Google Places Autocomplete API (link) Check billing as shipping by default Reduce the number of fields Proprietary + ConfidentialProprietary + Confidential 27% of users abandon orders d

14、ue to a “too long / complicated checkout process”. Best performing e-commerce sites have 6-8 fields, total of 12 form elements. Average retail checkout flow has 14.88 form fields. Optimize forms: 1.Use Full name field, lose the title. 2.Default Billing = Shipping address. 3.Collapse Address Line 2 +

15、 Company Name behind a link. Full research. Reduce number of checkout fields Proprietary + ConfidentialProprietary + Confidential What they did: Moving delivery date options to the start of the checkout process Adding a “continue to checkout” call to action in the basket at the bottom of the checkou

16、t Automatically determining the customers credit card type rather than having users select from a drop-down Matching field length to the length of the input Exposing title options through segmented controls Using labels instead of placeholders for form fields Enlarging the “save” call to action and

17、making it more noticeable by adding contrast Results: Transactions via mobile grew 51% Mobile CVR improved 14% Drop-offs from order confirmation page dropped by 21% Case study link BeforeAfter Case Study: AllYouNeedFresh Proprietary + ConfidentialProprietary + Confidential VS. BeforeAfter Dont use d

18、rop downs if less than 3 options Proprietary + ConfidentialProprietary + Confidential What they did: Moving delivery date options to the start of the checkout process Adding a “continue to checkout” call to action in the basket at the bottom of the checkout Automatically determining the customers cr

19、edit card type rather than having users select from a drop-down Matching field length to the length of the input Exposing title options through segmented controls Using labels instead of placeholders for form fields Enlarging the “save” call to action and making it more noticeable by adding contrast

20、 Results: Transactions via mobile grew 51% Mobile CVR improved 14% Drop-offs from order confirmation page dropped by 21% Case study link BeforeAfter Case Study: AllYouNeedFresh Proprietary + ConfidentialProprietary + Confidential VS. Use the correct keypads (phone, zip, credit card) Proprietary + Co

21、nfidentialProprietary + Confidential source: https:/goodui.org/#14 Ensure that the correct input type is used Proprietary + ConfidentialProprietary + Confidential What they did: Moving delivery date options to the start of the checkout process Adding a “continue to checkout” call to action in the ba

22、sket at the bottom of the checkout Automatically determining the customers credit card type rather than having users select from a dropdown Matching field length to the length of the input Exposing title options through segmented controls Using labels instead of placeholders for form fields Enlargin

23、g the “save” call to action and making it more noticeable by adding contrast Results: Transactions via mobile grew 51% Mobile CVR improved 14% Drop-offs from order confirmation page dropped by 21% Case study link BeforeAfter Case Study: AllYouNeedFresh ? ? ? Proprietary + Confidential Thank You Proprietary + Confidential