Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Increase WooPay button label font so that it has equal prominence to competing PRBs #8136

Open
pierorocca opened this issue Feb 5, 2024 · 10 comments · May be fixed by #8715
Open

Increase WooPay button label font so that it has equal prominence to competing PRBs #8136

pierorocca opened this issue Feb 5, 2024 · 10 comments · May be fixed by #8715
Assignees
Labels
category: core WC Payments core related issues, where it’s obvious. component: WooPay WooPay related issues focus: woopay needs design The issue requires design input/work from a designer. priority: medium The issue/PR is medium priority—non-critical functionality loss, minimal effect on usability type: enhancement The issue is a request for an enhancement.

Comments

@pierorocca
Copy link

pierorocca commented Feb 5, 2024

Description

Competing PRB buttons have label text that significantly larger the WooPay text, create visual inequality. In order to provide equal treatment, the WooPay label text size will be increased for all button sizes.

Acceptance criteria

Small button - The label text is 16px across all breakpoints
Default button - The label text is 18px across all breakpoints
Large button - The label text is 20px across all breakpoints

Designs

@nikkivias for further details as needed.
https://developer.woo.com/docs/user-experience-guidelines-payment-button-size-and-anatomy/ for reference.

Additional reference: Figma

Testing instructions

  1. Enable Apple Pay/Google Pay and WooPay
  2. Set button label to "Buy with" and enabled on all pages.
  3. Test on Chrome and Safari desktop and note that the font size has been increased on the product, cart, and checkout pages.
  4. Vary the browser window size to test various breakpoints
  5. Test again on mobile
  6. Test again with the other 2 label options.
  7. Test again with the 'icon only' option and observe no label text and that the logo is centered.
@pierorocca pierorocca added type: enhancement The issue is a request for an enhancement. component: WooPay WooPay related issues priority: medium The issue/PR is medium priority—non-critical functionality loss, minimal effect on usability labels Feb 5, 2024
@zmaglica
Copy link
Contributor

zmaglica commented Feb 8, 2024

@pierorocca Does this issue have everything it needs to be ready for someone to work on? I see that there is a draft notice at the beginning of the issue, and that's the reason why I am asking this.

@zmaglica zmaglica added the category: core WC Payments core related issues, where it’s obvious. label Feb 8, 2024
@pierorocca
Copy link
Author

pierorocca commented Feb 8, 2024

It's not ready, and is pending design guidance. The current behavior is not what design expected so Nikki is taking another look. Likely will have a set of revised font sizes for each button size.

@zmaglica
Copy link
Contributor

Thank you for the feedback @pierorocca . I can move this issue to the Shopper Experience team, or do you think that there is a another team that could work on this issue?

@pierorocca pierorocca self-assigned this Feb 13, 2024
@pierorocca
Copy link
Author

Assigned it to myself. Thanks @zmaglica.

@zmaglica
Copy link
Contributor

Great. Thank you for the feedback. Moving this to the Other Teams Queue as part of Gamma Triage process.

@nikkivias
Copy link

I've updated the issue with the correct text sizes and added an additional Figma reference

@pierorocca pierorocca changed the title Increase WooPay button label font to 16 px so that it has equal prominence to competing PRBs Increase WooPay button label font so that it has equal prominence to competing PRBs Feb 15, 2024
@LCmry LCmry self-assigned this Mar 22, 2024
@LCmry
Copy link
Contributor

LCmry commented Mar 27, 2024

Hi @nikkivias , in the Figma reference the button height and the logo height are the same. I'm confused how this is supposed to work because if they are the same then you get something like this:
Screenshot 2024-03-27 at 4 27 15 PM
Is that the intention or am I missing something on the design?

@pierorocca
Copy link
Author

pierorocca commented Mar 28, 2024

@LCmry that does look like a typo. What were the values prior because the only thing that needed updatig relative to the existing implementation were the font sizes.

@LCmry LCmry added the needs design The issue requires design input/work from a designer. label Mar 29, 2024
@LCmry
Copy link
Contributor

LCmry commented Mar 29, 2024

@pierorocca Button height for default (small) is 40px, 'medium' is 48px while the logo is 27px, for large it's button 56px and logo 32px.

Also, in this issue and the design say "small, default, large" but I think the small is default and it's really more like "default, medium, large" unless we want to change that.

@pierorocca
Copy link
Author

Medium is definitely the current default. Originally 40px was the default for a new merchant and it was deemed too small relative to the size of most theme's Cart and Checkout buttons. 48px size became the new default.

@LCmry I'd keep those logo sizes as is at 27px and 32px. Only the font sizes were part of the problem we were trying to resolve.

@LCmry LCmry linked a pull request Apr 24, 2024 that will close this issue
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category: core WC Payments core related issues, where it’s obvious. component: WooPay WooPay related issues focus: woopay needs design The issue requires design input/work from a designer. priority: medium The issue/PR is medium priority—non-critical functionality loss, minimal effect on usability type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants