site-kit-wp icon indicating copy to clipboard operation
site-kit-wp copied to clipboard
verified publisher icon google

UX/UI issues discovered on Thank with Google module

Open wpdarren opened this issue 3 years ago • 2 comments

Bug Description

While running through my test plan for Thank with Google, I noticed a number of styling / missing images from the module that were not appearing when we initially completed the QA. These will be brought up at the bug bash so ideally, it would be good to get these fixed and not have them as known issues.

Non-issues
  1. The background colour of the CTA on the pending verification splash screen. The colour is #161B18 rather than #3C7251

image

Issue 2 and 3 are part of the fix in #5627

  1. The images on the splash pages are no longer appearing as you can see from the screenshot above. The screenshot below is what is appearing on Figma designs and were there previously. I am using 1.90.0 of the tester plugin but I know we have a new version so it could be possibly linked but unsure.

  2. The images within the image radio buttons are no longer appearing when customizing TwG. Also the size of the two buttons are no longer the same height.

  1. When using Safari, the colour border is square instead of round like on Chrome and other browsers. We've had this issue with other elements of Site Kit (i.e. chip navigation on dashboard), but thought it was worth highlighting.
    image

  2. Extra padding in setup and settings

    Screenshots

    Setup with extra padding image Settings view with extra padding image Settings edit with correct padding image Example setup with correct padding image

  3. Minor layout shift when selected Prominence choice changes

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation Brief

Test Coverage

QA Brief

Changelog entry

wpdarren avatar Aug 15 '22 09:08 wpdarren

Added P1 label as a nice to have for bug bash.

eclarke1 avatar Aug 15 '22 10:08 eclarke1

Thanks @wpdarren

Regarding # 1 – this is intentional and part of the design for the "Pending Approval" step in Figma.

As for # 4 – is this still a problem with other browsers for the other elements you mentioned or we were able to fix it? It's not ideal but I feel like this should be doable in Safari as well. Definitely not a launch blocker 😄

aaemnnosttv avatar Aug 15 '22 13:08 aaemnnosttv

IB ✔️

eugene-manuilov avatar Aug 31 '22 18:08 eugene-manuilov

QA Update: ✅

Verified:

  • Observed both TwG Setup and Settings page from Safari and Chrome (desktop and mobile)
  • Rounded corners work across the browser on Image and Color Radio Buttons.
  • There is no longer any layout shift on changing Prominence value.
  • Checked that setup and settings page match the figma designs.
Screencasts

image

https://user-images.githubusercontent.com/73545194/193557763-6e8c4e18-f9a7-4448-92dd-16a2372e0929.mp4

https://user-images.githubusercontent.com/73545194/193557775-af2618b3-bff9-42c9-818f-baac7c39fd23.mp4

wpdarren avatar Oct 03 '22 10:10 wpdarren