More regularly direct users to settings documentation from within Payments > Settings

[csmcneill]

Description

The Payments > Settings page currently has some instances where users are directed to our public docs to learn more about those specific features. This is primarily handled on a per-section basis:

However, there are several sections where users are not directed to the appropriate docs. Additionally, the links all have different word choice (e.g., Learn more, View our documentation, Learn more about risk filtering, etc.); being more consistent here (e.g., Learn more about express checkouts) would be a better path IMO.

1. We have a general settings guide at https://woo.com/document/woopayments/settings-guide/ that could be linked near the top of the page. I'm adding a needs design label to get input from the design team (cc @bradyv @elizaan36) as to how best to handle something like this.
2. General can link to the general settings docs at https://woo.com/document/woopayments/settings-guide/#general
3. Payments accepted on checkout can link to those specific docs at https://woo.com/document/woopayments/settings-guide/#payments-methods or we can direct the user to the APM docs at https://woo.com/document/woopayments/payment-methods/additional-payment-methods/
4. Transactions currently links to https://woo.com/document/woopayments/ but it should link to something more specific, like the docs at https://woo.com/document/woopayments/settings-guide/#transactions

From within the sections themselves, we can direct users to specific documentation about those settings:

1. Apple Pay can link out to https://woo.com/document/woopayments/payment-methods/apple-pay/
2. Google Pay can link out to https://woo.com/document/woopayments/payment-methods/google-pay/
3. Link by Stripe can link out to https://woo.com/document/woopayments/payment-methods/link-by-stripe/
4. Issue an authorization on checkout, and capture later can link out to https://woo.com/document/woocommerce-payments/settings-guide/authorize-and-capture/
5. Customer statements can link out to https://woo.com/document/woopayments/settings-guide/#customer-statements
6. Customer support can link out to https://woo.com/document/woopayments/settings-guide/#support-contact
7. Enable Public Key Encryption can link out to https://woo.com/document/woopayments/settings-guide/#public-key-encryption
8. Log error messages can link out to https://woo.com/document/woopayments/settings-guide/#debug-mode

Acceptance criteria

• First requirement
• Second requirement
• Third requirement
• etc.

Designs

Testing instructions

1. Go to '…'
2. Click on '…'
3. Scroll down to '…'
4. Observe expected behaviour

Dev notes

Additional context

[bradyv]

@csmcneill You're bang on with the proposal here. At the very least we should standardize the format of learn more links for sections that already include them, and as an addition explore how to include them contextually for items within the sections that may need more context.

I think your suggestion of Learn more about xxx is the way to go, and I'll create a to-do for myself to mock up what the changes would look like.

[naman03malhotra]

Looping in @elizaan36 for input from a design perspective regarding the priority.

[bradyv]

@csmcneill I've put together a mockup of what consistent learn more links would look like through the WooPayments settings page. It includes a link for every section, as well as embedded links for almost all of your above suggestions. I omitted specific learn more links for the express payments – Apple Pay, Google Pay, and Stripe Link – as they're already pretty text heavy.

There's a couple of notes included on the sheet where I've removed existing links, or where I've chosen to deviate from the system.

[csmcneill]

@bradyv:

[elizaan36]

Nice improvement! The consistent learn more links in the left column feel more accessible.

Also it definitely reduces noise to reduce the inline links in the right column, could we minimize even further and use the popover tooltip for those embedded links? They are quite distracting if you're simply scanning the page to find what you need.

[bradyv]

@elizaan36 Is this similar to what you had in mind? Adding a help icon to the input title, tooltip on hover, and learn more link embedded in the tooltip.

[elizaan36]

I think putting the docs link in the tooltip will help with scanning the settings page for sure.

In terms of the correct tooltip component to use, that's a tough one because we're using the black tooltip for other areas of payments settings (i.e. payment methods). For consistency we should stick with the black tooltip component on hover, and the white background component for "toggletip" buttons that require a click.

cc @nikkivias for your thoughts as well.

[bradyv]

I don't mind using the black tooltip here and I think it's preferable anyway if these tooltips appear on hover rather than click! I'll mock up what those look like all the way down the column for the embedded learn more's but @nikkivias feel free to still jump in with your thoughts!

[bradyv]

It feels overwhelming with them all visible at once, but this is what the page looks like if we use tooltips with embedded learn more links in the areas identified by @csmcneill above.

I know that the payment risk level helper has a different interaction than the rest of the helper icons down the page, and so it makes sense for them to have different styling, but looking at them all from a high level I think it looks a little odd that they differ.

Given that the risk level modal is kind of repeating the helper text of the radio, how would you feel about changing it to instead use the same hover/black tooltip treatment? It works at the moment when the basic filtering only has the single rule but could need further revisiting in the future.

@elizaan36 what do you think?

[elizaan36]

LGTM! It's a nice balance of providing the extra information + keeping settings clean.