Stripe for WooCommerce

Hello,

I recently switched to Optimized Checkout Suite and realized that while I prefer the “Tabs” design itself, it isn’t really user-friendly on mobile devices (example image #1).

Here are my thoughts on this:

– When the screen is small, the user can no longer see all available payment methods. The available payment methods are hidden behind a dropdown menu. This means the user can’t see at a glance which methods are available and has to actively search for them to see if their preferred method is there.

– The preview icons that cycle through the dropdown are so small that it’s hard to make them out.

I would therefore like to suggest designing the tabs view so that the user can see all available options more quickly and easily, in order to complete the purchase as quickly and easily as possible.

– Using small chips instead of large cards saves space. This allows more items to fit on a single line.

– Always display all options. This should be fine, since the plugin doesn’t currently support too many methods yet. Additionally, local methods are filtered out based on availability anyway, because not every local method should be displayed to every user.

– I think it’s best if the chips are simply rendered horizontally and a second row is added if necessary, provided not all chips fit on a single row.

– Alternatively, a horizontally scrollable area could be created if everything needs to be displayed on a single row. However, I find the previous suggestion more useful and would prefer it because it’s easier to use and very transparent when all options are directly visible and clickable. Not every user will understand a horizontally scrollable area. If in doubt, though, I don’t care which of the two options is used. I find both approaches more helpful than the current one with the dropdown and the small icons, which are rather hard to make out.

Additional ideas:

– Increase the vertical spacing between the cards and the input area
– Reduce the margin-bottom between the label and the input field so that the label is more clearly associated with the input
– Reduce the line-height of the label so that the label is more clearly associated with the input

Here is a rough example image (example image #2) to help illustrate my descriptions.

If there’s very little space on the smartphone, you could just break the chips into two rows, and you’re done.

Generally speaking, I would also prefer the small chips in desktop environments, because they’re less intrusive than the current approach with the huge cards (example image #3).

I would be happy if you could discuss the suggestions internally and implement some design improvements via a plugin update.