UX guidelines for adding delivery methods

Delivery method extension points introduce ways to change how customers interact with the flow of information regarding shipping, local pickup, and pickup points. It’s important to consider this flow when you're deciding the extension points to use and what content goes in them.

1. Checkout::ShippingMethods::RenderBefore: Best for general information that applies to the rest of the information on the page, to help customers make a decision regarding the delivery methods.
2. Checkout::ShippingMethodDetails::RenderAfter: Best for information regarding a specific delivery option that needs to be visible on load. Content should be short, direct pieces of information.
3. Checkout::ShippingMethodDetails::RenderExpanded: Use to display or request information that's specific to the delivery option selected. Best for small elements and short input.
4. Best to display or request information that is required for any of the options selected. Can also be used to display or request information that is specific to the option selected if it requires large size and input.

Show additional information only when the customer needs it and in the right flow of information. If information is necessary for one specific option, then only request it when that option is selected.

Your app can benefit from changing visual states depending on presented or selected options. This is useful when you have different information that should be displayed at different moments but would benefit from being in the same location. State-awareness is also useful to provide visual feedback to buyers upon a selection and to not overwhelm a page with unnecessary information.

When using state-awareness, be considerate of any transitions or loading that may happen.

• Avoid large changes in the size and amount of content. If needed, provide the appropriate loading states and transitions to make the changes between states less extreme and distracting
• Don’t hide important information behind an extra click
• Only use the different states if it genuinely offers a better user experience. Checkout is not a place for flashy distractions, such as adding unnecessary images or colour changing

You should avoid any major disruptions in the decision making process and maintain the established hierarchy. Keep added information short and scannable.

• Keep the amount of scrolling in the choice list minimal
• Extensions in the choice list should follow the same alignment, text styles, and hierarchy as surrounding native content to provide a smooth user experience

Keeping checkout simple and straightforward gives customers a fast and uncomplicated checkout experience. Avoid adding any unnecessary diversions from the expected checkout flow. For example, don't use extensions such that a pickup point selection emulates choosing a shipping method. This can confuse customers and make it difficult for merchants to accurately fulfill orders.

• For general best practices for all checkout UI extensions, refer to the Checkout UX guidelines.